Đặt vấn đề
Ví dụ, tôi có một đoạn mã như sau:
WEB CƠ BẢN 1
WEB CƠ BẢN 2
WEB CƠ BẢN 3
Để định dạng cho phần tử chứa nội dung "WEB CƠ BẢN 2" có nền màu đen, chữ màu trắng, kích cỡ 30px thì đoạn mã sẽ trở thành:nền màu đen, chữ màu trắng, kích cỡ 30px thì đoạn mã sẽ trở thành:
p{
background-color: black;
color: white;
font-size: 30px;
}
WEB CƠ BẢN 1
WEB CƠ BẢN 2
WEB CƠ BẢN 3
Xem ví dụ
Tuy nhiên, nếu làm như thế thì phần tử chứa nội dung "WEB CƠ BẢN 1 & 3" cũng bị thay đổi theo.
Từ đây, chúng ta có một giải pháp để XÁC ĐỊNH CỤ THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class.XÁC ĐỊNH CỤ THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class.
Thuộc tính id
Thuộc tính id dùng để đặt tên cho phần tử HTML [mỗi tên id chỉ được đặt duy nhất cho một phần tử]
Để xác định một phần tử HTML bằng tên id, ta sử dụng cú pháp #tên id#tên id
Tôi đặt tên cho hai phần tử chứa nội dung 'WEB CƠ BẢN 1' và 'WEB CƠ BẢN 3' lần lượt là 'abc' và 'xyz'
#abc {
background-color: black;
color: white;
font-size: 30px;
}
#xyz {
background-color: red;
color: green;
font-size: 50px;
}
WEB CƠ BẢN 1
WEB CƠ BẢN 2
WEB CƠ BẢN 3
Xem ví dụ
Tuy nhiên, nếu làm như thế thì phần tử chứa nội dung "WEB CƠ BẢN 1 & 3" cũng bị thay đổi theo. |
Từ đây, chúng ta có một giải pháp để XÁC ĐỊNH CỤ THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class.
Thuộc tính id
Thuộc tính id dùng để đặt tên cho phần tử HTML [mỗi tên id chỉ được đặt duy nhất cho một phần tử].tên class
Để xác định một phần tử HTML bằng tên id, ta sử dụng cú pháp #tên id
- Tôi đặt tên cho hai phần tử chứa nội dung 'WEB CƠ BẢN 1' và 'WEB CƠ BẢN 3' lần lượt là 'abc' và 'xyz'
- Tên id chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới [ _ ], dấu gạch nối [ - ] Tên id không nên bắt đầu bằng chữ số
.abc {
background-color: black;
color: white;
font-size: 20px;
}
.xyz {
background-color: red;
color: green;
font-size: 30px;
}
WEB CƠ BẢN 1
WEB CƠ BẢN 2
WEB CƠ BẢN 3
WEB CƠ BẢN 4
WEB CƠ BẢN 5
WEB CƠ BẢN 6
WEB CƠ BẢN 7
Xem ví dụ
Tuy nhiên, nếu làm như thế thì phần tử chứa nội dung "WEB CƠ BẢN 1 & 3" cũng bị thay đổi theo. |
Từ đây, chúng ta có một giải pháp để XÁC ĐỊNH CỤ THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class.
.a1 {
font-size: 30px;
}
.a2 {
color: red;
}
.a3 {
background-color: blue;
}
WEB CƠ BẢN 1
WEB CƠ BẢN 2
WEB CƠ BẢN 3
Xem ví dụ