Thuộc tính nằm trong thẻ mở
Thuộc tính bổ sung thông tin cho phần tử HTML. Trong các ví dụ đang học, cách viết thường là `tên="giá trị"`, đặt sau tên thẻ trong **thẻ mở**. Nhiều thuộc tính được ngăn cách bằng dấu cách.
```html
<p id="ghi-chu" style="color:blue">Đọc lại phần kết.</p>
```
Đây là một phần tử `p`, có hai thuộc tính: `id` nhận giá trị `ghi-chu`, còn `style` nhận giá trị `color:blue`. `id` đặt định danh cho phần tử; `style` đặt cách trình bày. Thuộc tính không phải phần tử con và không đặt trong thẻ đóng.
Bên trong style là các khai báo trình bày
```html
<p style="color:blue;font-size:18px">Đọc lại phần kết.</p>
```
Giá trị của `style` gồm hai khai báo: `color:blue` đặt màu chữ, `font-size:18px` đặt cỡ chữ. Trong mỗi khai báo, dấu `:` ngăn tên đặc tính với giá trị; dấu `;` ngăn các khai báo với nhau.
Ở đây chỉ có **một thuộc tính HTML là style**, chứa hai khai báo CSS. CSS là ngôn ngữ dùng để mô tả cách trình bày; phần này mới dùng một vài đặc tính trong `style`, các bài sau sẽ tìm hiểu rộng hơn.
Giữ đúng hai lớp dấu phân cách
| Vị trí | Dấu cần chú ý |
|---|---|
| Giữa tên thuộc tính HTML và giá trị |Dấu `=` và cặp nháy bao giá trị trong cách viết của bài|
| Giữa hai thuộc tính HTML |Dấu cách|
| Giữa tên đặc tính CSS và giá trị |Dấu `:`|
| Giữa hai khai báo CSS trong style |Dấu `;`|
Chẳng hạn `style="color:blue font-size:18px"` thiếu dấu `;` giữa hai khai báo. Trình duyệt có thể bỏ qua phần không hợp lệ; việc trang vẫn mở được chưa chứng minh định dạng đã đúng.
Bài luyện
Trong ví dụ đầu tiên, nhận xét nào đúng?
Đúng. Hai thuộc tính đều nằm trong thẻ mở p.
Thuộc tính không tạo thành phần tử con.
ghi-chu là giá trị của id.
Tên phần tử là p, còn color:blue là giá trị style.
Lời giải
Sau tên thẻ p có id="ghi-chu" và style="color:blue". Vì vậy có hai thuộc tính là id và style, mỗi thuộc tính có một giá trị; không đếm chúng thành phần tử con.
Bài luyện
Trong ví dụ style có color và font-size, phải dùng dấu nào để ngăn hai khai báo trình bày?
Dấu / không ngăn hai khai báo CSS.
Dấu = dùng giữa tên thuộc tính HTML và giá trị.
Đúng. Dấu ; ngăn các khai báo trong style.
Dấu < mở dấu đánh dấu thẻ, không ngăn khai báo CSS.
Lời giải
Hai khai báo có dạng color:blue và font-size:18px. Chúng được đặt trong cùng giá trị style và ngăn nhau bằng dấu chấm phẩy, thành color:blue;font-size:18px.
Bài luyện
Trong `<p style="color:blue;font-size:18px">Đọc lại phần kết.</p>`, số thuộc tính HTML và số khai báo CSS trong style lần lượt là bao nhiêu?
color và font-size không phải hai thuộc tính HTML ở đây.
Chỉ style là thuộc tính HTML của thẻ đã cho.
Trong style có cả color và font-size.
Đúng. Một thuộc tính style chứa hai khai báo.
Lời giải
Thẻ mở chỉ có thuộc tính style. Giá trị của nó chứa color:blue và font-size:18px, tức hai khai báo CSS. Cần tách việc đếm thuộc tính HTML khỏi việc đếm khai báo bên trong giá trị style.
Đang học