CSS

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium. Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sử dụng CSS.

 Tác dụng của CSS 

 Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
 Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau.

 Sử dụng CSS 
Có 3 cách để sử dụng CSS.

 "Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style:

<span style="font-weight:bold; text-decoration:underline; color:#FF0000;">Đoạn text cần in đậm, gạch chân, màu đỏ</span>

 "Internal CSS": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa  và ):

<style type="text/css">
body {font-family:verdana; color:#0000FF;} /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */
</style>

 "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:

 Ví dụ về nội dung tệp style.css:
body {font-family:verdana; color:#0000FF;}

 Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ <head>):

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

 Nguồn 

Thông tin về CSS có thể đến từ nhiều nguồn khác nhau, chẳng hạn từ trình duyệt, tác giả, hoặc từ chính người dùng. Những thông tin CSS từ tác giả có thể được tách thành cách tệp tin riêng hoặc chèn trực tiếp vào văn bản HTML. Nhiều tập tin CSS có thể được sử dụng cùng một lúc. Tác giả có thể quy định những kiểu dáng khác nhau dựa trên thiết bị hiển thị của người dùng cuối, chẳng hạn cùng một trang web có thể hiển thị bố cục khác nhau khi truy cập trên điện thoại di động, máy tính bảng, hoặc máy tính cá nhân. Nhờ vậy, tác giả có thể tối ưu hoá văn bản của mình để thích hợp với người sử dụng.

Thông tin xác định kiểu dáng nào có mức độ ưu tiên cao nhất sẽ quyết định kiểu dáng của nội dung hiển thị. Mức độ ưu tiên này được sắp xếp như sau:
+Mức độ ưu tiênKiểu nguồnMiêu tả1Quan trọng (important)Thẻ ‘’ cho phép ghi đè lên các kiểu dáng trước2Trực tiếp (inline)Kiểu dáng xác định trực tiếp cho một đối tượng HTML bằng thuộc tính style3Phương tiện (media)Kiểu dáng chung xác định cho tất cả phương tiện trong văn bản, cho đến khi một kiểu dáng khác được xác định cho một loại phương tiện cụ thể4Người dùng chỉ định (user defines)Một số trình duyệt hiện đại cho phép người dùng quyết định kiểu dáng cho nội dung hiển thị5Bộ chọn cụ thể (specific selector)Kiểu dáng xác định bởi bộ chọn cụ thể trong từng tình huống (chẳng hạn ) sẽ đè lên các kiểu dáng chung6Thứ tự thuộc tính (rule order)Kiểu dáng ở cuối tệp tin sẽ có mức ưu tiên cao hơn kiểu dáng ở đầu tệp.7Thuộc tính kế thừa (parent inheritance)Một thành phần không có kiểu dáng cụ thể nào được gán cho nó sẽ kế thừa kiểu dáng của thuộc tính mẹ8Kiểu dáng ở đầu trang HTML Kiểu dáng được đặt ở trong cặp thẻ <style> trong phần <head> của một trang HTML có mức độ ưu tiên cao hơn kiểu dáng mặc định của trình duyệt9Mặc định của trình duyệtNếu một thành phần không có bất cứ kiểu dáng nào sẽ sử dụng kiểu dáng mặc định của trình duyệt

 Cú pháp 

Cú pháp cơ bản:

css_selector_1 { thuộc_tính_1: giá_trị_của_thuộc_tính_1; thuộc_tính_2: giá_trị_của_thuộc_tính_2; ... thuộc_tính_n: giá_trị_của_thuộc_tính_n; } css_selector_2 { thuộc_tính_1: giá_trị_của_thuộc_tính_1; thuộc_tính_2: giá_trị_của_thuộc_tính_2; ... thuộc_tính_n: giá_trị_của_thuộc_tính_n; } ... css_selector_n { thuộc_tính_1: giá_trị_của_thuộc_tính_1; thuộc_tính_2: giá_trị_của_thuộc_tính_2; ... thuộc_tính_n: giá_trị_của_thuộc_tính_n; }

Chú thích: Bạn có thể soạn chú thích cho CSS nhằm tiện cho việc tham khảo hoặc tra cứu về sau. Cú pháp của chú thích trong CSS như sau
  /* Chú thích 1 */
  /* Chú thích 2 */
  /* Chú thích 3,
      đây là một chú thích nhiều dòng
  */

Ví dụ minh họa về mã CSS:
body {
  background: #ffffff;
  /* trang Web sẽ có nền màu trắng */
  font-family: Verdana;
  /* font chữ mặc định là Verdana */
  color: #ff0000;
  /* màu chữ mặc định
  là màu đỏ */
}

 CSS Selector 

CSS Selector dùng để xác định đoạn mã CSS tương ứng được bao trong phần từ { đến } sẽ được áp dụng cho những thành phần nào trong trang Web.

Như ví dụ ở đoạn mã trên, ta có thể thấy dạng CSS Selector đơn giản nhất là CSS Selector theo tag body.

 Tham khảo 

 Nghiên cứu thêm 


 Meyer, Eric A. Cascading Style Sheets 2.0 Programmer's Reference, McGraw-Hill Osborne Media, ISBN 0-07-213178-0
 Keith Schengili-Roberts: Core CSS, 2nd Edition, Prentice Hall, ISBN 0-13-009278-9
 Cascading Style Sheets: Designing for the Web  by Håkon Wium Lie and Bert Bos, ISBN 0-321-19312-1
 The Zen of CSS Design (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag), ISBN 0-321-30347-4
 Eric Meyer On CSS, ISBN 0-7357-1245-X
 More Eric Meyer On CSS, ISBN 0-7357-1425-8
 Dan Cederholm: Web Standards Solutions, The Markup and Style Handbook, Friends of Ed, ISBN 1-59059-381-2 (paperback) (Author's site )
 Kynn Bartlett: Teach Yourself CSS in 24 Hours, 2nd Edition, Sams Publishing, ISBN 0-672-32906-9
 Cascading Style Sheets Cascading Style Sheets, PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
 Jeffrey Zeldman: Designing With Web Standards, New Riders, ISBN 0-7357-1201-8 (paperback) (book's companion site)
 Cascading Style Sheets: Separating Content from Presentation , (co-authored by Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson), Friends of Ed, ISBN 1-59059-231-X

 Liên kết ngoài 

  tại W3C
 Đặc tả CSS 2 của W3C

 Học CSS tại W3Schools
 Bộ sưu tập những CSS hay
 Chia sẻ mã nguồn css miễn phí 

Thể loại:Tiêu chuẩn của W3C
Thể loại:Ngôn ngữ định kiểu
Thể loại:W3C
Thể loại:Thiết kế web
Thể loại:Ngôn ngữ lập trình sắp chữ
Thể loại:Định dạng mở