[CSS] Nhóm các phần tử với class

Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan
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:


li .tp { color:FF0000 }

li .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 cho Firefox.