Bài 07 – Class và ID

Home/Học viết code/CSS/Bài 07 – Class và ID

Class và ID

Đôi khi bạn muốn áp dụng một vài đặc tính nào đó cho cho một phần tử duy nhất hoặc nhiều phần tử trong một nhóm mà không ảnh hưởng các phần tử HTML còn lại trên trang. Trong bài học này bạn sẽ được biết cách sử dụng CSS cho các trường hợp như trên. Chúng ta sẽ mổ xẻ cách áp dụng các đặc tính CSS cho các nhóm phần tử được gọi là class hay một phần tử cá biệt và duy nhất, định danh là id .

Làm thế nào để bạn có thể chỉ định một màu sắc cho một tiêu đề riêng biệt nào đó khác với các tiêu đề còn lại trên trang web của bạn. Làm thế nào để chia các liên kết theo từng nhóm và mỗi nhóm có các kiểu giá trị CSS  khác nhau? Chúng ta sẽ nhận được tất cả các câu trả lời bên dưới.

Nhóm các phần tử bằng class

Giả sử bạn có 2 nhóm sản phẩm bao gồm nhóm rượu vang trắng và nhóm rượu vang đỏ, HTML code sẽ như bên dưới:

<p>Nhóm rượu vang trắng:</p>
<ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Nhóm rượu vang đỏ:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
< li><a href="pn.htm">Pinot Noir</a></li>
</ul>

Bây giờ chúng ta muốn các liên kết thuộc nhóm rượu vang trắng có màu vàng và nhóm liên kết của rượu vàng đỏ có màu đỏ, các liên kết còn lại trên trang vẫn giữ màu xanh mặc định.

Để thực hiện điều này, chúng ta chia ra nhóm và gán mỗi nhóm vào mỗi class.
Chúng ta sẽ sử dụng ví dụ trên để thực hành:

Nhóm rượu vang trắng:

<p>Nhóm rượu vang trắng:</p>
<ul>
  <li><a href="ri.htm" class="whitewine">Riesling</a></li>
  <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
  <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

Nhóm rượu vang đỏ:

Tiếp theo chúng ta xác định giá trị CSS cho 2 class whitewine và redwine

<p>Nhóm rượu vang đỏ:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
a {
  color: blue;
}

a.whitewine {
  color: #FFBB00;
}

a.redwine {
  color: #800000;
}

Xem kết quả:


Như ví dụ vừa xem, bạn đã có thể gán các đặc tính (giá trị CSS) cho từng nhóm các phần tử riêng biệt dựa vào .class name  trong tập tin CSS.

Xác định phần tử cá biệt và duy nhất bằng id

Ngoài cách xác định các nhóm, chúng ta cũng có thể gán thuộc tính vào một phần tử duy nhất bằng cách sử dụng thuộc tính id.

Có gì đặc biệt trong thuộc tính id ? đó là một sự cá biệt và duy nhất, không thể có một id cùng tên thứ hai trong cùng một tài liệu HTML. Nếu đó không phải là thuộc tính duy nhất, bạn đã có thể sử dụng thuộc tính class để thay thế. Nào, bây giờ chúng ta cùng xem một vài ví dụ cụ thể về id:

<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...

Vị dụ trên thường thấy ở các tài liệu được chia thành từng chương. Chúng ta có thể gán id cho từng chương như sau:

<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

Giả sử bạn muốn tiêu đề chương 1.2 có màu đỏ, điều này có thực hiện với đoạn CSS sau:

#c1-2 {color: red;

Xem kết quả:


Như ví dụ trên bạn có thể gán đặc tính vào một phần tử cá biệt bằng cách sử dụng #id trong tập tin CSS.

Chú ý: .class có tên chữ  INHOA và chữ in thường đều như nhau, #ID có phân biệt chữ IN HOA và chữ thường, ví dụ #wrap và #Wrap là 2 ID khác nhau.

Tổng kết

Trong bài học này bạn đã được biết qua cách sử dụng selectors  cùng class và id, bạn cũng có thể xác định đặc tính nhóm các phần tử hoặc duy nhất một phần tử trong tài liệu HTML.

Trong bài tiếp theo chúng ta sẽ xem xét 2 phần tử HTML thường được sử dụng rộng rãi trong CSS là: <span> and <div>.

Facebook Comments
2020-09-20T11:06:25+00:00Tháng Mười 31, 2014|Categories: CSS|Tags: , , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top