Gốc > Những vấn đề về CNTT > Web > CSS >
Đỗ Thanh Dương @ 16:25 19/03/2011
Số lượt xem: 309
Bài 7 : Class & ID
Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background,
color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho
một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần
này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số
thành phần nào đó để áp dụng một thuộc tính đặc biệt. Ví dụ như bạn muốn các
liên kết trên menu trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết
trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải
quyết trong chương này.
7.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 cho
Firefox.
7.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à :
Và đoạn CSS cần dùng 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 cho
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.
color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho
một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần
này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số
thành phần nào đó để áp dụng một thuộc tính đặc biệt. Ví dụ như bạn muốn các
liên kết trên menu trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết
trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải
quyết trong chương này.
7.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 :
HTML Code:
<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>
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:
HTML Code:
<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>
trở nên đơn giản hơn nhiều:
HTML Code:
li .tp {
color:FF0000
}
li .tinh {
color:0000FF
}
Firefox.
7.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à :
HTML Code:
<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=”hcmc”>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>
HTML Code:
#hanoi { color:# 790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
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.
Đỗ Thanh Dương @ 16:25 19/03/2011
Số lượt xem: 309
Số lượt thích:
0 người
- Bài 6: Pseudo-classes For Links (19/03/11)
- Bài 5: Text (19/03/11)
- Bài 4: Font Chữ (19/03/11)
- Bài 3: Background (19/03/11)
- Bài 2: Một Số Quy Ước Về Cách Viết CSS (19/03/11)
Ý kiến trao đổi