Chọn lựa chọn yếu tố CSS

Chọn lựa chọn yếu tố CSS

Bộ chọn CSS phổ biến nhất là bộ chọn yếu tố. Nghĩa là, các yếu tố trong tài liệu là bộ chọn cơ bản nhất.

Khi thiết lập phong cách cho HTML, bộ chọn thường là một yếu tố HTML nào đó, ví dụ như p, h1, em, a, thậm chí có thể là html chính nó:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Thử ngay lập tức

Bạn có thể chuyển đổi phong cách từ một yếu tố sang yếu tố khác.

Giả sử bạn quyết định thiết lập phong cách cho đoạn văn bản trên (không phải yếu tố h1) thành màu xám. Chỉ cần thay đổi bộ chọn h1 thành p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Thử ngay lập tức

Bộ chọn loại

Trong tiêu chuẩn W3C, bộ chọn yếu tố cũng được gọi là bộ chọn loại (type selector).

“Chọn loại chọn các yếu tố theo tên loại ngôn ngữ tài liệu. Chọn loại chọn mỗi ví dụ của loại yếu tố trong cây tài liệu.”

Các quy tắc này khớp với tất cả các yếu tố h1 trong cây tài liệu:

h1 {font-family: sans-serif;}

Do đó, chúng ta cũng có thể thiết lập phong cách cho các yếu tố trong văn bản XML:

XML văn bản:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

Tài liệu CSS:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

Xem hiệu ứng

Bằng cách nhìn vào ví dụ trên, bạn có thể thấy rằng bộ chọn yếu tố CSS (chọn lựa chọn loại) có thể thiết lập樣 thức cho yếu tố trong tài liệu XML.

Nếu bạn cần thêm thông tin về việc thêm樣 thức cho tài liệu XML, hãy truy cập Hướng dẫn XML。