Giải chi tiết tin học ứng dụng 12 cánh diều bài 9 Thực hành định dạng một số thuộc tính CSS
Hướng dẫn giải bài 9 Thực hành định dạng một số thuộc tính CSS sách mới Tin học ứng dụng 12 Cánh diều. Lời giải chi tiết, chuẩn xác, dễ hiểu sẽ giúp các em hoàn thành tốt các bài tập trong chương trình học. Baivan.net giải chi tiết tất cả các bài tập trong sgk. Hi vọng sẽ trở thành người bạn đồng hành cùng các em trong suốt quá trình học tập.
VẬN DỤNG
Tạo website cá nhân:
Em hãy hoàn thiện website cá nhân đã tạo từ các bài học trước bằng cách khai báo và áp dụng các quy tắc định dạng trình bày để các tiêu đề sử dụng phông chữ và màu sắc đa dạng.
Gợi ý thực hiện:
- Tạo thư mục con styles trong thư mục myHomepage.
Tạo tệp mới và ghi lưu vào thư mục styles với tên “style.css”.
Khai báo các quy tắc định dạng trong tệp “style.css” để trình bày, ví dụ: tiêu đề h1 sử dụng phông chữ Verdana, chữ màu đỏ, tiêu đề h2 sử dụng phông chữ Verdana, chữ màu xanh.
- Bổ sung khai báo tham chiếu sử dụng external CSS vào phần tử head của các tệp: "index.html", "hobbies.html", "album.html".
Bài làm chi tiết:
Tạo thư mục con "styles" trong thư mục "myHomepage":
Trong thư mục "myHomepage", tạo một thư mục con mới có tên là "styles".
Tạo tệp "style.css" trong thư mục "styles":
Mở trình soạn thảo văn bản và tạo một tệp mới.
Ghi các quy tắc định dạng CSS vào tệp "style.css" theo yêu cầu:
/* style.css */
h1 {
font-family: Verdana, sans-serif;
color: red;
}
h2 {
font-family: Verdana, sans-serif;
color: blue;
}
Bổ sung khai báo tham chiếu vào các tệp HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang chủ</title>
<link rel="stylesheet" href="styles/style.css"> <!-- Liên kết với tệp CSS external -->
</head>
<body>
<!-- Nội dung của trang -->
</body>
</html>
Thêm thẻ <link> vào phần <head> của tệp "hobbies.html":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sở thích của tôi</title>
<link rel="stylesheet" href="styles/style.css"> <!-- Liên kết với tệp CSS external -->
</head>
<body>
<!-- Nội dung của trang -->
</body>
</html>
Thêm thẻ <link> vào phần <head> của tệp "album.html":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Album ảnh</title>
<link rel="stylesheet" href="styles/style.css"> <!-- Liên kết với tệp CSS external -->
</head>
<body>
<!-- Nội dung của trang -->
</body>
</html>
Giải Tin học ứng dụng 12 Cánh diều, Giải bài 9 Thực hành định dạng một số Tin học ứng dụng 12 Cánh diều, Giải Tin học ứng dụng 12 Cánh diều bài 9 Thực hành định dạng một số