Thực hành định dạng nhiều trang bằng CSS

Giải nén ZIP. khong_css.html, css_trong.html và css_noi_tuyen.html giúp so sánh trang chưa đặt CSS riêng, CSS trong và CSS nội tuyến. doc_sach.html, ve_tranh.html dùng link tới styles.css; css_import.html dùng @import tới cùng tệp. Nhiệm vụ là kiểm tác dụng của các quy tắc, rồi sửa một tệp CSS để đổi màu các đoạn văn của cả hai trang nhóm. Dùng nội dung riêng của mẫu, không cần thay bằng bài lịch sử hoặc tài liệu bên ngoài.

1. Mở khong_css.html và css_trong.html. Nội dung giống nhau; trang dùng CSS trong có chữ h1/h2 màu navy, viền teal 2px; hai p màu maroon và dòng đầu thụt 12px. 2. Mở css_noi_tuyen.html. Chỉ p đầu được đặt màu và thụt dòng riêng; p sau không có style ấy. Đối chiếu mã để thấy nơi đặt khai báo. 3. Mở doc_sach.html và ve_tranh.html. Kiểm head của cả hai cùng có link đúng tới styles.css. Mở css_import.html để so sánh kết quả nhập cùng tệp bằng @import. 4. Trên bản sao của bộ mẫu, đổi `color: maroon;` thành `color: green;` trong quy tắc p của styles.css. Lưu rồi tải lại hai trang nhóm và trang import. Các p phù hợp đổi sang xanh lá; quy tắc h1/h2 không đổi. 5. Mở lại css_trong.html: trang này giữ CSS riêng bên trong nên không đổi chỉ vì styles.css ngoài được sửa. Đưa tệp ngoài về nội dung ban đầu khi kết thúc.

Mẫu định dạng đoạn văn trong phần mềm soạn thảo và CSS có cùng ý tưởng: thiết lập định dạng tại một nơi rồi áp dụng lặp lại, thay vì sửa từng đoạn. Khi mẫu dùng chung thay đổi, các chỗ đang dùng có thể cập nhật theo. Trong CSS của bài này, bộ chọn xác định các phần tử nhận quy tắc. Đây không có nghĩa cú pháp hoặc tệp mẫu của phần mềm soạn thảo tự dùng được làm CSS. Cần phân biệt ý tưởng định dạng dùng chung với cách lưu và áp dụng của từng công cụ.

| Dấu hiệu | Cần kiểm | |---|---| | Màu nền đổi nhưng chữ chưa đúng |Đang dùng color hay background-color| | Trang không nhận tệp ngoài |link/rel/href hoặc @import; tệp và đường dẫn| | Hai khai báo không có kết quả mong đợi |Dấu hai chấm, chấm phẩy, ngoặc nhọn và giá trị| | Sửa CSS ngoài nhưng trang CSS trong giữ nguyên |Trang ấy có liên kết tệp ngoài hay dùng bản trong riêng| | Sửa nhưng vẫn nhìn thấy kết quả cũ |Đã lưu đúng tệp, tải lại đúng trang và dùng đúng tệp CSS chưa| Chỉ kết luận tác dụng sau khi mở và quan sát trang. Chọn câu luyện đúng kiểm được cách đọc mã; việc tạo và sửa sản phẩm vẫn cần thực hiện trên máy.