1. Nhóm các phần tử với class
Ví dụ chúng ta có một đoạn mã HTML sau đây :
Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo thành 2 nhóm là thành phố và tính. Ta sẽ viết lại đoạn HTML sau thành như thế này:
Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều:
Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm việc trong Firefox.
2. Nhận dạng phần tử với id
Ví dụ:
Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh. Đoạn HTML của chúng ta bây giờ sẽ là :
Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ không làm việc trong 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.
Trong bài học này, chúng ta đã được học về các sử dụng class và id để áp dụng các đặc tính đặc biệt cho một thành phần web. Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ <div> và <span> trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.
Ví dụ chúng ta có một đoạn mã HTML sau đây :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p> <ul> <li>Hà Nội</li> <li>TP. Hồ Chí Minh</li> <li>Đà Nẵng</li> <li>Thừa Thiên Huế</li> <li>Khánh Hòa</li> <li>Quãng Ninh</li> <li>Tiền Giang</li> </ul>
Yêu cầu đặt ra là làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML gọi là class để tạo thành 2 nhóm là thành phố và tính. Ta sẽ viết lại đoạn HTML sau thành như thế này:
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p> <ul> <li class="tp">Hà Nội</li> <li class="tp">TP. Hồ Chí Minh</li> <li class="tp">Đà Nẵng</li> <li class="tinh">Thừa Thiên Huế</li> <li class="tinh">Khánh Hòa</li> <li class="tinh">Quãng Ninh</li> <li class="tinh">Tiền Giang</li> </ul>
Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều:
.tp { color:#FF0000 }
.tinh { color:#0000FF }
Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm việc trong Firefox.
2. Nhận dạng phần tử với id
Ví dụ:
Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh. Đoạn HTML của chúng ta bây giờ sẽ là :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p> <ul> <li id="hanoi">Hà Nội</li> <li id="hcm">TP. Hồ Chí Minh</li> <li id="danang">Đà Nẵng</li> <li class="tinh">Thừa Thiên Huế</li> <li class="tinh">Khánh Hòa</li> <li class="tinh">Quãng Ninh</li> <li class="tinh">Tiền Giang</li> </ul>Và đoạn CSS cần dùng sẽ là :
#hanoi { color:#790000 }
#hcm { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
Lưu ý: Không nên đặt tên id với ký tự đầu là chữ số, nó sẽ không làm việc trong 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.
Trong bài học này, chúng ta đã được học về các sử dụng class và id để áp dụng các đặc tính đặc biệt cho một thành phần web. Ở bài kế tiếp chúng ta sẽ được học thêm về hai thẻ <div> và <span> trong HTML và ý nghĩa 2 thẻ này đối với việc viết CSS.
Tags
CSS