Tệp ngoài chỉ chứa mã CSS
```css
/* Mẫu dùng chung cho hai trang nhóm */
h1, h2 {
color: navy;
border: 2px solid teal;
}
p {
color: maroon;
text-indent: 12px;
}
```
Lưu thành styles.css. Tệp này chứa quy tắc CSS, không bọc trong cặp thẻ style hoặc cấu trúc html/head/body. Phần giữa `/*` và `*/` là chú thích CSS.
Hai trang doc_sach.html và ve_tranh.html dùng chung tệp này. Cùng một bộ chọn có thể khớp nhiều phần tử ở mỗi trang; không phải CSS tự gộp nội dung hai trang.
Kết nối từ head của từng trang
```html
<link rel="stylesheet" href="styles.css">
```
rel="stylesheet" cho biết liên kết tới bảng định dạng; href chỉ tệp CSS. Đặt phần tử link trong head của mỗi trang cần dùng. Trong mẫu, styles.css cùng thư mục với hai tệp HTML nên dùng đường dẫn trên.
Nếu chuyển CSS vào thư mục con css, đường dẫn từ hai HTML cần đổi thành css/styles.css. Viết đúng quy tắc trong tệp chưa đủ nếu trang không tải được đúng tệp.
Một cách khác để dùng CSS ngoài
```html
<style>
@import "styles.css";
</style>
```
Mẫu css_import.html dùng @import trong style ở head. Với dạng đơn giản này, đặt @import trước các quy tắc định dạng khác; viết sau các quy tắc có thể làm lệnh nhập bị bỏ qua.
Trong mỗi mẫu chỉ dùng một cách liên kết để quan sát. Có cả link và @import cùng nhập một tệp là không cần thiết cho bài thực hành này.
Bài luyện
Trong styles.css ngoài, cách lưu nào đúng cho quy tắc p?
Tệp CSS không cần cấu trúc HTML.
Đúng. Tệp ngoài chứa CSS trực tiếp.
Ngoặc nhọn thuộc cú pháp quy tắc CSS.
Thẻ style dùng khi chứa CSS trong HTML, không bọc tệp CSS ngoài.
Lời giải
styles.css được trình duyệt đọc như CSS khi liên kết đúng. Nó chứa bộ chọn và khai báo trực tiếp; các thẻ HTML không phải lớp bọc cần có của tệp này.
Bài luyện
Từ HTML ở ngoài thư mục css, styles.css nằm trong css. href phù hợp là gì?
../ đi lên, không vào thư mục con css.
Tên này tìm tệp cùng thư mục HTML.
Đúng. Đi vào css rồi tìm styles.css.
Dấu # là tham chiếu định danh, không chọn tệp CSS ngoài này.
Lời giải
Đường dẫn tương đối bắt đầu từ thư mục chứa HTML. Tệp nằm dưới thư mục con css nên dùng css/styles.css, gồm tên thư mục rồi tên tệp.
Bài luyện
Trong style đơn giản đang học, @import nên đặt ở đâu?
Đúng. Lệnh nhập phải đứng trước các quy tắc định dạng khác trong mẫu.
@import là cú pháp CSS, không đặt như nội dung p.
Đặt sau có thể bị bỏ qua.
@import không phải giá trị của color.
Lời giải
Mẫu đặt @import "styles.css"; ở đầu phần CSS trước các quy tắc khác. Thứ tự này giúp lệnh nhập hợp lệ trong dạng đang học; không đưa nó vào một khai báo màu.
Bài luyện
Hai HTML tải chung styles.css. Chỉ sửa lời văn trong doc_sach.html. Điều gì đúng?
CSS chia sẻ định dạng, không tự chia sẻ nội dung chữ.
Liên kết CSS không gộp tệp HTML.
CSS không tự dịch nội dung.
Đúng. Nội dung nằm trong từng HTML riêng.
Lời giải
styles.css chứa quy tắc trình bày. Lời văn của doc_sach.html và ve_tranh.html nằm trong các tài liệu riêng, nên sửa một tài liệu không tự sửa lời văn tài liệu kia.
Đang học