CSS

Bách khoa toàn thư mở Wikipedia
Bước tới: menu, tìm kiếm
Tập tin định kiểu theo tầng
Phần mở rộng tên file .css
Internet media type text/css
Phát triển bởi World Wide Web Consortium
Phát hành lần đầu , 17 December 1996; 17 năm trước
Kiểu định dạng Style sheet language
Tiêu chuẩn Level 1 (khuyến cáo)
Level 2 (khuyến cáo)
Level 2 Revision 1 (khuyến cáo)

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng AnhCascading 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ữ HTMLXHTML.[1] 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 (W3C). Thay vì đặt các thẻ qui đị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[sửa | sửa mã nguồn]

  • 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[sửa | sửa mã nguồn]

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 <head> và </head>):
<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"/>

Mức độ ưu tiên của CSS[sửa | sửa mã nguồn]

Mức độ ưu tiên khi áp dụng CSS như sau:

External CSS < Internal CSS < Inline CSS

Có thể hiểu rằng mã CSS nào "gần" với tag nhất thì sẽ được ưu tiên áp dụng hơn cả.

Cú pháp[sửa | sửa mã nguồn]

Cú pháp cơ bản:[2]

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[sửa | sửa mã nguồn]

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[sửa | sửa mã nguồn]

  1. ^ “What is CSS?”. World Wide Web Consortium. Truy cập tháng 12 năm 2010. 
  2. ^ “W3C CSS2.1 specification for rule sets, declaration blocks, and selectors”. World Wide Web Consortium. 7 tháng 6 năm 2011. Truy cập ngày 20 tháng 6 năm 2009. 

Liên kết ngoài[sửa | sửa mã nguồn]

Nghiên cứu thêm[sửa | sửa mã nguồn]