5 Bước Cần Thiết Để Học CSS Và Trở Thành Style Sheet Chuyên Nghiệp

CSS là phần quan trọng nhất để thể hiện sự khác nhau giữa nội dung và phong cách trình bày của một website. XHTML định nghĩa cấu trúc và nội dung của một webpage, trong khi CSS dùng để trang trí webpage. Trong khi hầu hết chúng ta cảm thấy thoải mái khi viết HTML đơn thuần, chúng ta dường như nghĩ rằng CSS là một loại “ma thuật đen”. Tôi hy vọng sẽ thay đổi điều đó với 5 bước cơ bản và để trở thành một người style sheet chuyên nghiệp.

Bài viết này nhằm vào người dùng có ít kinh nghiệm với CSS. Trước khi bạn bắt đầu làm việc với CSS, bạn nên tìm hiểu và nghiên cứu trước XHTML.

(1)    Cú pháp

Giống như bất kỳ ngôn ngữ nào, CSS có một cú pháp nhất định. Tất cả CSS được viết như sau:

SELECTOR { PROPERTY:VALUE; PROPERTY:VALUE; PROPERTY:VALUE; }

Như bạn đã biết, CSS làm việc bằng cách style sheet cho 1 phần tử được chọn trong một webpage. Ví dụ như, bạn làm thế nào để style tất các link, thì bạn nên dùng thẻ “a”. Bạn cần có kinh nghiệm để chọn các thuộc tính và giá trị của thẻ “a” để style sheet. Có một số thuộc tính đơn giản như: COLOR, BORDER, FONT-SIZE, HEIGTH và có giá trị tương ứng như: RED, 14pt, 150%, 1000px thật sự rất dễ dàng. Hãy xem chúng ta làm thế nào style tất cả các link màu đỏ:

a {color:red;}

Bạn cũng có thể style sheet nhiều phần tử cùng một lúc bằng dấu phẩy:

a,h2,h3 {color:red;}

Điều này làm cho không chỉ tất cả các liên kết, mà các tiêu đề h2 và h3, có cùng một thuộc tính màu đỏ. Các phần tử đều có kích cỡ khác nhau, vì cú pháp trên chỉ thay đổi về màu sắc.

(2)    Class và ID

Đôi khi bạn không muốn style TẤT CẢ thành phần “a” theo một cách với những trường hợp khác nhau. Bạn có thể sử dụng CLASS và ID. Theo nguyên tắc chung, ID được sử dụng cho một lần các yếu tố và thường được sử dụng để xác định các nội dung hoặc phần tử duy nhất và đặc biệt.
Ví dụ, bạn có thể có một DIV lớn cho HEADER, NỘI DUNG và khối FOOTER của website, vì vậy chúng ta có thể định nghĩa ID cho các khối trên. Mặt khác CLASS có thể tái sử dụng nhiều lần trong trang web. Có thể bạn muốn có đường viền màu đỏ 2px cho một khối chứa các thành phần, bạn nên định nghĩa CLASS cho nó nhằm tái sử dụng nhiều lần. Làm thế nào để bạn định nghĩa ID và CLASS ?

<div id="sidebar"><h1>SIDEBAR</h1><div><img src=".." alt="" class="red-rounded" /></div></div>

Câu lệnh bạn nên viết trong file CSS khi dùng:
 

.red-rounded { // this is a class
 border-radius:5px;
 border: 2px solid red;
}
#sidebar { .. } // this is an ID

(3)    Các thành phần con

Bạn không gắn các CLASS và ID cho mọi thành phần trong suốt website của bạn. Bạn có thể dùng thành phần con để style sheet. Hãy nhận xét những câu lệnh sau: 

#sidebar h1 {font-size:20px;}

Đầu tiên nó sẽ tìm ID có tên “sidebar” sau đó nó sẽ tìm các thành phần con của ID “sidebar” là thẻ <h1> thì nội dung bên trong của <h1> được định nghĩa “font-size” là  20px.
Vì vậy, nếu bạn có thể nhóm tất cả các phần tử với nhau bằng cách nào đó, tốt nhất là sử dụng thành phần con như trên thậm chí còn ít mã hơn thêm một loạt các class = "…" định nghĩa cho tất cả mọi thứ.

(4)    Vị trí đặt CSS

Cách tốt nhất khi làm việc với CSS thì bạn nên tách nó hoàn toàn khỏi HTML. Và tạo cho nó một file chứa các mã CSS, sau đó bạn chỉ cần thêm đoạn mã sau trên phần HEADER của HTML:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

Bạn cũng có thể thêm các đoạn mã CSS vào phần trong giữa các thẻ HTML, nhưng tôi không đề nghị phương pháp này vì rất khó khăn để đọc tập tin HTML. Ví dụ như sau: 

<img style="height: 150px;" src=".." alt="" />

Bạn cũng nên cảnh giác với cách đặt CSS kiểu này. Bạn sẽ gặp trường hợp bị trùng các đoạn mã khác, khi đó bạn sẽ gặp rắc rối khi chỉnh sửa.

(5)    Sử dụng Firebug hoặc Chrome

Firebug là một công cụ phát triển tuyệt vời đặc biệt hữu ích khi làm việc với CSS. Hãy dành ít phút để tải nó về và tìm hiểu nhanh về nó. Firebug là tính năng hỗ trợ thêm của Firefox, hoặc nếu bạn sử dụng Chrome thì bạn chỉ cần click phải bất cứ vị trí nào trên website chọn “ Inspect Element ”.
Chúc các bạn thành công.
Phạm Bình.

Nguồn www.makeuseof.com



Our Sponsor

BMW 320i * BMW 520i * BMW 720i