Thực hành trang học Web với trạng thái CSS

Tạo thư mục riêng với goc_hoc_web.html, styles.css và hai ảnh nhãn nhan_html.svg, nhan_css.svg do BTVN dựng. Bộ tải về có đủ HTML hoàn chỉnh với DOCTYPE, meta charset UTF-8 và link đến styles.css cùng thư mục. 1. Nhập phần body dưới đây. Hai đích html, css tương ứng liên kết đầu trang. Các nút có type="button" và đứng liền trước ảnh tương ứng. 2. Lưu CSS dưới đây vào styles.css, mở HTML rồi tải lại. Kiểm h1 đỏ căn giữa, h2 xanh dương, các mục điều hướng nằm ngang và căn phải; trên màn hình hẹp chúng có thể xuống dòng. 3. Đưa chuột lên liên kết: chữ đỏ, nền aqua. Dùng Tab để kiểm đường bao tiêu điểm. Các p liền sau h2 có chữ đỏ, các p khác giữ màu mặc định. 4. Ảnh ban đầu ẩn. Giữ nút chuột chính trên nút “Giữ chuột để xem…” để hiện riêng ảnh liền sau; thả chuột thì ảnh ẩn lại. Đây là ví dụ :active, không phải nút bật/tắt lưu trạng thái. 5. Tên Nhóm Mây là ngữ liệu giả định được đánh dấu em.ten, có chữ nghiêng và viền teal. Nếu chỉ cụm ấy thiếu viền, kiểm class ten; nếu mọi kiểu mất, kiểm link và tệp CSS. Nếu giữ nút mà ảnh không hiện, kiểm ảnh có nằm liền sau nút và đường dẫn ảnh có đúng tên tệp. Không chèn phần tử khác vào giữa .xem và img trong ví dụ này. ```html <h1>Góc học Web</h1> <nav><ul> <li><a href="#html">Phần HTML</a></li> <li><a href="#css">Phần CSS</a></li> </ul></nav> <h2 id="html">HTML tạo cấu trúc</h2> <p><em class="ten">Nhóm Mây</em> dùng HTML để đánh dấu tiêu đề, đoạn và liên kết.</p> <p>Các phần tử được sắp xếp trong cấu trúc cây của tài liệu.</p> <button type="button" class="xem">Giữ chuột để xem ảnh HTML</button> <img src="nhan_html.svg" alt="Ảnh nhãn HTML do BTVN dựng" width="180" height="80"> <h2 id="css">CSS đặt cách trình bày</h2> <p><em class="ten">Nhóm Mây</em> dùng CSS để đặt màu, phông và cách hiển thị.</p> <p>Mỗi quy tắc có bộ chọn và các khai báo thuộc tính, giá trị.</p> <button type="button" class="xem">Giữ chuột để xem ảnh CSS</button> <img src="nhan_css.svg" alt="Ảnh nhãn CSS do BTVN dựng" width="180" height="80"> ``` ```css h1 { color: red; text-align: center; } h2 { color: blue; } nav { text-align: right; } nav li { display: inline; border: 1px solid blue; padding: 5px; background-color: lime; } a:hover { color: red; background-color: aqua; } a:focus { outline: 2px solid blue; } h2 + p { color: red; } img { display: none; } .xem:active + img { display: block; } em.ten { border: 1px solid teal; font-style: italic; } ```