Tạo và kiểm trang Góc đọc sách
Tạo thư mục riêng, lưu tệp goc_doc_sach.html ở dạng văn bản UTF-8 và tệp styles.css cùng thư mục. Có thể tải bộ mẫu, giải nén rồi mở goc_doc_sach.html bằng trình duyệt để đối chiếu.
1. Dựng tài liệu có DOCTYPE, html, head, meta charset, title và body như các bài trước. Trong head đặt <link rel="stylesheet" href="styles.css">.
2. Thêm phần nội dung dưới đây vào body. Giữ strong và em là các phần tử con của từng li.
3. Lưu CSS dưới đây trong styles.css, rồi tải lại trang HTML.
4. Kiểm tiêu đề đỏ, bốn ý có dấu đầu dòng, chữ đầu ý đậm xanh dương, các cụm em nghiêng đỏ. Với cỡ chữ li là 16px, line-height:1.5 cho chiều cao dòng 24px.
Nếu toàn bộ kiểu riêng không xuất hiện, kiểm tên styles.css, vị trí tệp và href. Nếu chỉ một cụm em không đỏ, kiểm nó có cùng cha và đứng sau strong hay đã bị bọc vào span.
```html
<h1>GÓC ĐỌC SÁCH</h1>
<p>Bốn việc nhỏ giúp buổi đọc chung diễn ra thuận lợi.</p>
<ul>
<li><strong>Chọn sách.</strong> Cả nhóm thống nhất <em>một tác phẩm</em>.</li>
<li><strong>Đọc trước.</strong> Mỗi người ghi lại <em>một câu hỏi</em>.</li>
<li><strong>Trao đổi.</strong> Các ý kiến lần lượt được <em>lắng nghe</em>.</li>
<li><strong>Ghi nhớ.</strong> Cuối buổi cùng viết <em>một nhận xét</em>.</li>
</ul>
```
```css
h1 { color: red; }
li { line-height: 1.5; }
strong { color: blue; }
strong ~ em { color: red; }
```
Giữ nội dung khi đổi trình bày
Mẫu dùng ngữ liệu Góc đọc sách với bốn ý. strong đánh dấu nội dung quan trọng ở đầu ý; em đánh dấu phần cần nhấn mạnh bên trong. CSS đặt màu và chiều cao dòng dựa vào các phần tử đã đánh dấu, không tự hiểu văn bản để thêm strong hoặc em.
Khi sửa color của h1 từ red sang navy, chỉ màu tiêu đề đổi theo quy tắc ấy; các từ trong tiêu đề và bốn mục danh sách vẫn giữ. Lưu tệp CSS rồi tải lại HTML để kiểm, không cần đổi nội dung thành một trang mới.
Bài luyện
Trong danh sách mẫu, vì sao strong ~ em tô đỏ các cụm em?
Đúng. Mỗi mục có quan hệ anh em như yêu cầu.
Kiểu nghiêng không quyết định khớp bộ chọn.
Dấu ~ có điều kiện cùng cha và đứng sau.
strong và em là anh em cùng cha li.
Lời giải
Trong mỗi li, strong đứng trước em, và cả hai đều là con của li. Vì vậy strong ~ em khớp em và đặt màu đỏ. Kiểu nghiêng thường có của em là chuyện trình bày khác với điều kiện bộ chọn.
Bài luyện
Chuyển một cụm <em> vào trong <span> nhưng strong vẫn trực tiếp trong li. Vì sao cụm ấy không còn nhận đỏ từ strong ~ em?
Đánh dấu em vẫn còn.
CSS vẫn có thể chọn phần tử trong span.
Đúng. em có cha span, strong có cha li.
Dấu ~ cho phép phần tử xen giữa, nhưng đòi cùng cha.
Lời giải
Sau khi bọc, cha trực tiếp của em là span còn cha của strong là li. Hai phần tử không còn là anh em cùng cha nên không khớp strong ~ em; nguyên nhân không phải do mất kiểu nghiêng hay cần liền kề.
Bài luyện
Đã mở đúng HTML nhưng toàn bộ kiểu riêng trong styles.css không xuất hiện. Việc nào phù hợp để kiểm trước?
Đổi quan hệ bộ chọn không sửa đường dẫn CSS đang thiếu hoặc sai.
Đổi phần tử không sửa việc thiếu toàn bộ tệp CSS.
Tên tệp đổi nhưng href cũ có thể khiến trình duyệt không tìm đúng tệp.
Đúng. Kiểm tệp CSS có được trỏ đúng trước.
Lời giải
Mẫu dùng CSS ngoài. Nếu toàn bộ kiểu riêng vắng mặt, trước hết kiểm link có href đúng tên styles.css, tệp CSS có ở cùng thư mục và đã được lưu; sau đó tải lại HTML. Nếu chỉ một quy tắc không có tác dụng thì tiếp tục kiểm cú pháp và phần tử khớp bộ chọn.
Đang học