CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu
4.4.5 Class và Id
Id hay là index (chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó không tuân theo chuẩn web về HTML (web standard). Cũng vì điều này id được dùng
cho những đối tượng nào mang tính duy nhất trong trang, ví dụ: khung viền (wrapper), menu chính (main menu)... Ví dụ:
Mã HTML
<div id="mainwrapper"> Nội dung thông tin </div>
Trong file CSS chúng ta sẽ dùng dấu "#" trước tên đối tượng mà chúng ta đặt là id
#mainwrapper {
Width:800px; }
Class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ sau đây sẽ minh chứng về tính thừa kế và việc định nghĩa nhiều đối tượng cùng thuộc một class nào đó.
<div id="wrapper"> <div class="info">
<p>Nội dung thông tin...<p> </div>
<div class="author"> <div class="info">
<p>Nội dung thông tin 2...<p> </div>
</div> </div>
Giả sử rằng ta định nghĩa các thuộc tính của class="info" như sau: .info {
padding: 10px;
border: 1px solid #F0F0F0; }
Bây giờ nếu muốn định nghĩa cho thẻ div nằm trong phần author có màu nền là màu đen và chữ là màu trắng thì ta chỉ cần định nghĩa thêm hai thuộc tính này còn thẻ <div class="info"> đã thừa kế các thuộc tính margin, padding, border của class ở trên. Phần định nghĩa thêm như sau:
div.author .info {
background-color: #000000; color: #FFFFFF;
}
Do tính chất của class đã trình bày ở trên có thể suy ra rằng nếu khi nào ta muốn nhiều đối tượng dùng chung một số thuộc tính nào đó (vd: color, background, border,...) thì chúng ta nên gộp chúng vào chung một class.