CSS trong áp dụng theo bộ chọn của tài liệu
```html
<style>
p {
color: maroon;
text-indent: 12px;
}
</style>
```
Đặt phần tử style trong head của trang. Các quy tắc bên trong chọn phần tử phù hợp trong chính tài liệu ấy. Nếu trang có hai p và không có định dạng khác thay đổi kết quả, cả hai cùng nhận hai khai báo của quy tắc p.
Phần tử style chứa mã CSS dù nằm trong tệp HTML. CSS trong không tự đi sang mọi tài liệu HTML khác, kể cả khi các tệp nằm cùng thư mục.
CSS nội tuyến nằm trên phần tử cần định dạng
```html
<p style="color: maroon; text-indent: 12px;">Đoạn được đặt định dạng riêng.</p>
```
Ở đây style là **thuộc tính** của p, khác phần tử style ở ví dụ trên. Giá trị thuộc tính chỉ ghi các khai báo; không viết lại bộ chọn p và ngoặc nhọn bên trong.
Trong css_noi_tuyen.html, p đầu có style như trên nên được đặt màu và thụt dòng riêng; p thứ hai không có style ấy. Cách đặt này thuận tiện cho một phần tử riêng nhưng khó sửa thống nhất nếu phải lặp lại ở nhiều nơi.
Chọn nơi đặt theo phạm vi dùng
| Cách đặt | Nơi viết | Phạm vi trực tiếp trong các mẫu đang xét |
|---|---|---|
| CSS trong |Phần tử style trong head|Các phần tử phù hợp bộ chọn ở tài liệu hiện tại|
| CSS nội tuyến |Thuộc tính style trên phần tử|Phần tử mang thuộc tính đó|
Các ví dụ tách từng cách đặt để thấy rõ tác dụng, chưa dùng chúng để suy ra quy tắc ưu tiên khi có nhiều định dạng xung đột. Dù đặt ở đâu, cần lưu đúng tệp và tải lại trang sau khi sửa.
Bài luyện
Đặt quy tắc p trong phần tử style ở head của trang A. Trang B cùng thư mục nhưng không liên kết CSS ấy. Điều gì đúng?
Cùng thư mục không chia sẻ CSS trong tự động.
Không có cơ chế tự chép như vậy.
Đúng. CSS trong thuộc tài liệu chứa nó.
title không quyết định chia sẻ CSS.
Lời giải
CSS trong nằm ở head của tài liệu A và định dạng các phần tử phù hợp trong A. Muốn B dùng cùng định dạng cần đặt hoặc liên kết CSS phù hợp cho B, không chỉ đặt cạnh tệp A.
Bài luyện
Cách viết thuộc tính style hợp lệ cho màu chữ p là gì?
Đúng. Giá trị style là phần khai báo.
Không đặt bộ chọn và vùng quy tắc như vậy trong thuộc tính style.
Khai báo CSS dùng dấu hai chấm.
Không lồng thẻ style vào giá trị thuộc tính.
Lời giải
CSS nội tuyến ghi các khai báo trực tiếp trong thuộc tính style. color: maroon; là khai báo đúng; bộ chọn và ngoặc nhọn dùng ở quy tắc CSS, không chép nguyên vào giá trị style.
Bài luyện
Hai p riêng biệt; chỉ p đầu có style="color: maroon;", không có CSS khác. Nhận xét nào phù hợp?
Thuộc tính này đặt trực tiếp trên p đầu.
Đúng. Hai phần tử riêng không tự chia sẻ thuộc tính style.
Định dạng màu không xóa phần tử.
Không có việc tự xuất tệp CSS ngoài.
Lời giải
Thuộc tính style thuộc p đầu nên đặt màu cho chính phần tử ấy. p thứ hai không mang khai báo đó và ví dụ không có quy tắc khác để đặt cùng màu.
Đang học