Câu hỏi:

09/08/2024 216

Tạo trang web sử dụng CSS.

Yêu cầu: Em hãy soạn văn bản HTML áp dụng các CSS đã khai báo trong các bài F172, F173 để tạo trang web, khi mở trên trình duyệt web có kết quả như minh hoạ ở Hình 1.

Tạo trang web sử dụng CSS.  Yêu cầu: Em hãy soạn văn bản (ảnh 1)

Quảng cáo

Trả lời:

verified
Giải bởi Vietjack

Trả lời:

Bước 1. Tạo cấu trúc trang web

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>F174</title>

</head>

<body>

</body>

</html>

Bước 2. Khai báo internal CSS trong nội dung phần tử head. <style>

h2.blue{color: blue; font-weight: bold;}

h2.red {color: red; }

.black{

color: black;

background-color: yellow;

}

#khung

background-color: cyan;

}

</style>

border-style:solid; border-color: black;

Bước 3. Khai báo nội dung sử dụng bộ chọn lớp trong phần tử body.

<h2 class=“blue”> Tiêu đề mục áp dụng bộ chọn lớp định dạng chữ màu xanh khai báo ở bài tập F172 </h2>

<h2 class=“red”> Tiêu đề mục áp dụng bộ chọn lớp định dạng chữ màu đỏ khai bảo ở bài tập F172</h2>

<h2 class="black"> Tiêu đề mục áp dụng bộ chọn lớp khai báo ở bài tập F173 </h2>

<p id=“khung”> Đoạn văn áp dụng bộ chọn định danh được khai báo ở bài tập F88 </p>

Bước 4. Chọn File\Save, ghi lưu tệp với tên “F174.html”.

Bước 5. Mở tệp bằng trình duyệt web và xem kết quả.

Bình luận


Bình luận

CÂU HỎI HOT CÙNG CHỦ ĐỀ

Câu 1:

Khai báo CSS nào sau đây đúng cú pháp”?

A. ticude color: red; background-color: yellow; 

B. tiende color: yellow; background-color: red; 

C. ht color: red; background-color: yellow;} 

D. tiende color: yellow; background-color: red;}

Xem đáp án » 09/08/2024 2,630

Câu 2:

Mỗi phát biểu sau đây về bộ chọn lớp là đúng hay sai?

a) Tên bộ chọn lớp do HTML định nghĩa.

b) Không thể khai báo bộ chọn lớp có tên .h1.

c) Khai báo CSS p.blue {color:blue;} sẽ thiết lập màu chữ xanh cho các phần tử p trong văn bản HTML có thuộc tính class = "blue".

d) Sử dụng khai báo p.red {color: red;} sẽ thiết lập màu chữ đỏ cho các phần tử trong văn bản HTML có thuộc tính class = "red”.

Xem đáp án » 09/08/2024 2,495

Câu 3:

Khai báo CSS nào sau đây sử dụng bộ chọn lớp?

A. h1 {color: blue; } 

B. tieude {color: red; } 

C. #h7 {background-color: yellow;} 

D. footer {background-color: yellow;}

Xem đáp án » 09/08/2024 2,249

Câu 4:

khai báo CSS sử dụng bộ chọn định danh nào sau đây đúng cú pháp 

A. ficummies { font-size: 20px!

B. 452font-family: "Arial" font-size: 20px

C. #hs font-size: 20px!

D. ficumues ">

Xem đáp án » 09/08/2024 2,185

Câu 5:

Khai báo CSS nào sau đây đúng cú pháp?

A. nutlenh {color: blue; background-color: grey;} 

B. *nutlenh {color: blue; background-color: grey;} 

C. #nutlenh {color: blue; background-color: grey;} 

D. ^nutlenh {color: blue; background-color: grey;}

Xem đáp án » 09/08/2024 1,951

Câu 6:

Cho khai báo CSS sau: a#lienket {color: blue; }. Khai báo siêu liên kết nào sau đây sẽ áp dụng định dạng CSS trên?

A. <a href="https://www.htmlquick.com/tutorials.html">Hoc HTML </a> 

B. <a href="https://www.htmlquick.com/tutorials.html" class="green">Hoc

HTML Ja

C.-ahref="https://www.htmlquick.com/tutorials.html" id="lienket">Hoc

HTML </a>

D. <a href="https://www.htmlquick.com/tutorials.html" class="lienker"-Hoc

HTML/a>

Xem đáp án » 09/08/2024 1,521

Câu 7:

Cho khai báo CSS sau; a bold font-weight: bold; và áp dụng khai báo CSS cho văn bản “index.html”, mỗi phát biểu sau đây là đúng hay sai?

a) Khai bảo tạo bộ chọn lớp có tên bold cho phần tử a.

b) Các phần tử

chữ sẽ in đậm.

trong văn bản “index.html" có thuộc tỉnh class = "bold"

c) Phần tử a trong văn bản "index.html" chữ sẽ in đậm.

d) Khai báo CSS không đúng cú pháp vì bộ chọn lớp không thuộc một phần tử cụ thể.

Xem đáp án » 09/08/2024 1,447
Vietjack official store
Đăng ký gói thi VIP

VIP +1 - Luyện thi tất cả các đề có trên Website trong 1 tháng

  • Hơn 100K đề thi thử, đề minh hoạ, chính thức các năm
  • Với 2tr+ câu hỏi theo các mức độ Nhận biết, Thông hiểu, Vận dụng
  • Tải xuống đề thi [DOCX] với đầy đủ đáp án
  • Xem bài giảng đính kèm củng cố thêm kiến thức
  • Bao gồm tất cả các bậc từ Tiểu học đến Đại học
  • Chặn hiển thị quảng cáo tăng khả năng tập trung ôn luyện

Mua ngay

VIP +3 - Luyện thi tất cả các đề có trên Website trong 3 tháng

  • Hơn 100K đề thi thử, đề minh hoạ, chính thức các năm
  • Với 2tr+ câu hỏi theo các mức độ Nhận biết, Thông hiểu, Vận dụng
  • Tải xuống đề thi [DOCX] với đầy đủ đáp án
  • Xem bài giảng đính kèm củng cố thêm kiến thức
  • Bao gồm tất cả các bậc từ Tiểu học đến Đại học
  • Chặn hiển thị quảng cáo tăng khả năng tập trung ôn luyện

Mua ngay

VIP +6 - Luyện thi tất cả các đề có trên Website trong 6 tháng

  • Hơn 100K đề thi thử, đề minh hoạ, chính thức các năm
  • Với 2tr+ câu hỏi theo các mức độ Nhận biết, Thông hiểu, Vận dụng
  • Tải xuống đề thi [DOCX] với đầy đủ đáp án
  • Xem bài giảng đính kèm củng cố thêm kiến thức
  • Bao gồm tất cả các bậc từ Tiểu học đến Đại học
  • Chặn hiển thị quảng cáo tăng khả năng tập trung ôn luyện

Mua ngay

VIP +12 - Luyện thi tất cả các đề có trên Website trong 12 tháng

  • Hơn 100K đề thi thử, đề minh hoạ, chính thức các năm
  • Với 2tr+ câu hỏi theo các mức độ Nhận biết, Thông hiểu, Vận dụng
  • Tải xuống đề thi [DOCX] với đầy đủ đáp án
  • Xem bài giảng đính kèm củng cố thêm kiến thức
  • Bao gồm tất cả các bậc từ Tiểu học đến Đại học
  • Chặn hiển thị quảng cáo tăng khả năng tập trung ôn luyện

Mua ngay