[CSS] Bài 3: CLASS Và ID Trong CSS

Posted by: Rain on 8/28/2013 in HTML và CSS 0

Như ở bài trước chúng ta đã biết CSS quy định thuộc tính định dạng cho một hay nhiều phần tử trong HTML ví dụ như khi bạn viết CSS cho thành phần span, p, h1, h2 thì nó sẽ được áp dụng cho toàn bộ các thẻ span, p, h1, h2 trong tài liệu HTML của bạn nhưng không phải lúc nào bạn cũng muốn code của bạn ảnh hưởng đến tât cả các tag gióng nhau trong tài liệu HTML ví dụ như khi bạn đặt tiêu đề bạn muốn tiêu đề thứ nhất màu đỏ tiêu đề thứ hai màu xanh ..v...v... để giải quyết vấn đề này bạn có thể sử dụng CLASS và ID để có thể quy định từng đối tượng cụ thể.

1. Cách Sử Dụng CLASS

Ví dụ ta có đoạn code HTML sau:

<ul>
  <li>MENU 1
    <ul>
       <li>Mục 1</li>
       <li>Mục 2</li>
       <li>Mục 3</li>
    </ul>
  </li>
  <li>MENU 2</li>
  <li>MENU 3</li>
<ul>

 Nếu bạn muốn tô màu đỏ cho chữ trong list này thì bạn có thể viết CSS như sau:

li {   color: red;}

Như vậy toàn bộ các text nằm trong thẻ li sẻ có màu red nhưng nếu bạn không muốn như vậy? bạn muốn các text ở li cấp 1 sẽ có màu đỏ và  li cấp 2 sẽ có màu đen thì bạn viết lại code như sau:
Code HTML:

<ul>
<li class="mnc1">MENU 1
<ul>
<li class="mnc2">Mục 1</li>
<li class="mnc2">Mục 2</li>
<li class="mnc2">Mục 3</li>
</ul>
</li>
<li class="mnc1">MENU 2</li>
<li class="mnc1">MENU 3</li>
<ul>

Đoạn code HTML này bạn thấy có xuất hiện 2 phần tử mới là class="mnc1" và class="mnc2" đây chính là class mình thêm vào để có thể quy định thuộc tính riêng cho các phần tử và sau đây là css:
Code CSS:

.mnc1 {color:red;}
.mnc2 {color:black;}

Và ta thấy cách sử dụng là trong HTML ta sẽ gọi thuộc tính class bằng cách đăt vào tag html thuộc tính class="nameclass" và trong CSS để quy định class ta sử dụng dấu . trước nameclass.
Ví Dụ:

<ul class="mnc1">  
  <li>MENU 1    
    <ul class="mnc2">       
      <li >Mục 1</li>
      <li>Mục 2</li>       
      <li>Mục 3</li>
    </ul>  
  </li>  
  <li>MENU 2</li>  
  <li>MENU 3</li>
<ul>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

2. Cách Sử Dụng ID:

ID được viết cũng giống như khi bạn viết code cho class vậy nhưng khác là bạn thay từ Class ở code HTML bằng ID và thay vì dùng dấu . ở CSS thì bạn dùng dấu # để quy định đó là ID
Ví dụ với code như trên nhưng lần này ngoài việc bạn muốn quy định màu riêng cho menu cấp 1 và cấp 2 mà bạn còn muốn thành phần li đầu tiên được in đậm với tất cả thành phần còn lại ta viết code lại như sau:
Code HTML:

<ul class="mnc1">  
  <li id="menu1">MENU 1    
    <ul class="mnc2">       
      <li >Mục 1</li>
      <li>Mục 2</li>       
      <li>Mục 3</li>
    </ul>  
  </li>  
  <li>MENU 2</li>  
  <li>MENU 3</li>
<ul>

Code CSS:

#menu1 {font-weight:bold;}
.mnc1 {color:red;}
.mnc2 {color:black;}

Ví Dụ:

<ul class="mnc1">  
  <li id="menu1">MENU 1    
    <ul class="mnc2">       
      <li >Mục 1</li>
      <li>Mục 2</li>       
      <li>Mục 3</li>
    </ul>  
  </li>  
  <li>MENU 2</li>  
  <li>MENU 3</li>
<ul>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Chú ý:
Không đặt tên class bắt đầu bằng số, việc đặt tên class bắt đầu bằng số sẽ chỉ hỗ trợ trong trình duyệt Internet Explorer (IE).
- Không đặt tên id bắt đầu bằng số, nó sẽ không hoạt động trong trình duyệt Mozilla/Firefox.

3. Sự Khác Nhau Giữa Class Và ID:

Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”

Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau.

1	<div class="class1 class2 class3 classn">