Ta có 1 ví dụ:
1. Class:
|
1
2
3
4
5
|
<p>Đoạn text hiển thị chữ bình thường màu đen</p>
<p class=”green”> Đoạn text hiển thị chữ màu xanh lá cây và kiểu in đậm </p>
<p class=”red”> Đoạn text hiển thị chữ màu đỏ và kiểu in nghiêng </p>
<p class=”blue”> Đoạn text hiển thị chữ màu xanh và kiểu font Arial</p>
<p class=”blue”> Đoạn text hiển thị chữ màu xanh và kiểu font Arial</p>
|
|
1
2
3
4
|
p { color:#000;}
.green {color:green; font-weight:bold;}
.red {color:red; font-style: italic;}
.blue {color: blue; font-family: Arial;}
|
Kết quả:
Class va id trong css
Như vậy ta thấy rằng, cách sử dụng là thêm dấu “.” trước tên class để gọi CSS selector.
Lưu ý: 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) và sẽ không hoạt động trên trình duyệt Firefox.
2. ID:
Tương tự như class, ta cũng lấy ví dụ đó, nhưng với Id chúng ta sẽ không dùng dấu “.” mà thay vào bằng dấu “#”.
|
1
2
3
4
|
<p>Đoạn text hiển thị chữ bình thường màu đen</p>
<p id=”green”> Đoạn text hiển thị chữ màu xanh lá cây và kiểu in đậm </p>
<p id=”red”> Đoạn text hiển thị chữ màu đỏ và kiểu in nghiêng </p>
<p id=”blue”> Đoạn text hiển thị chữ màu xanh và kiểu font Courier New</p>
|
|
1
2
3
4
|
p { color:#000;}
#green {color:green; font-weight:bold;}
#red {color:red; font- style: italic;}
#blue {color: blue; font-family: Courier New; }
|
Kết quả:
Lưu ý: Không đặt tên Id bắt đầu bằng số, việc đặt tên Id bắt đầu bằng số sẽ không hoạt động trên trình duyệt Firefox.
Trải qua hai ví dụ trên chúng ta có thể rút ra những kết luận sau:
– Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.
– Id dùng để nhận dạng một đối tượng đặc trưng, Id có tính duy nhất.