Giải SBT Tin học 12 Cánh diều bài 8

VnDoc xin giới thiệu bài Giải sách bài tập Tin học 12 bài 8: Làm quen với CSS sách Cánh diều hay, chi tiết giúp học sinh dễ dàng xem và so sánh lời giải từ đó biết cách làm bài tập trong SBT Tin học 12.

Bài: Làm quen với CSS

Câu 1: Phần tử nào sau đây được dùng để khai báo internal CSS?

A. link

B. base

C. style

D. meta

Lời giải chi tiết:

Phần tử sau đây style được dùng để khai báo internal CSS. Vậy đáp án đúng là: C. style

Câu 2: Khai báo nào sau đây được dùng để áp dụng các định dạng CSS được khai báo trong tệp “main.css’

A. <link stylesheet href= "main.css">

B. <style rel="stylesheet" href="main.css'

C. <link rel= "stylesheet" href="main.css">

D. <stylesheet href="main.css">

Lời giải chi tiết:

Khai báo sau đây <link rel= "stylesheet" href="main.css"> được dùng để áp dụng các định dạng CSS được khai báo trong tệp “main.css’. Vậy đáp án đúng là: C. <link rel= "stylesheet" href="main.css">

Câu 3: Khai báo định dạng nào sau đây đúng cú pháp?

A. p{color: red, font-size: 15px;}

B. p{color: red, fontsize: 15px;}

C. p{color: red; fontsize: 15px;}

D. p{color:red; font-size: 15px;}

Lời giải chi tiết:

Khai báo định dạng sau đây p{color:red; font-size: 15px;} đúng cú pháp. Vậy đáp án đúng là: D. p{color:red; font-size: 15px;}

Câu 4: Khai báo định dạng nào sau đây đúng cú pháp?

A. h2:color=red, font-size: 20px

B. {h2:color:red; font-size:20px;}

C. h2{color=red, font-size:20px;}

D. h2{color: red; font-size:20px;}

Lời giải chi tiết:

Khai báo định dạng sau đây h2{color: red; font-size:20px;} đúng cú pháp. Vậy đáp án đúng là: D. h2{color: red; font-size:20px;}

Câu 5: Khai báo định dạng nào sau đây đúng cú pháp?

A. h4 {background-color: yellow;}

B. {h4 background-color: yellow;}

C. h4. {background-color: yellow;}

D. {h4.all background-color: yellow;}

Lời giải chi tiết:

Khai báo định dạng sau đây h4 {background-color: yellow;} đúng cú pháp. Vậy đáp án đúng là: A. h4 {background-color: yellow;}

Câu 6: Khai báo định dạng nào sau đây đúng cú pháp?

A. {hl font-size:bold;}

B. hl{font-weight:bold;}

C. <h1 style="font-size:bold">

D. <h1 font-weight: bold>

Lời giải chi tiết:

Khai báo định dạng sau đây hl{font-weight:bold;} đúng cú pháp. Vậy đáp án đúng là: B. hl{font-weight:bold;}

Câu 7: Khai báo định dạng nào sau đây đúng cú pháp?

A. p{}color: redfont-weight: bold

B. body{background-color: grey;}{color:green;}{font-family: Arial;}

C. a {color: blue; font-size: 20px;}

D. li {style="color: cyan";}

Lời giải chi tiết:

Khai báo định dạng sau đây đúng cú pháp: C. a {color: blue; font-size: 20px;}

Câu 8: Có bao nhiêu lỗi cú pháp khai báo CSS trong tệp “default.css” sau?

p {color: blue}

h1 {font-family: "Arial", font-size: 20px;}

a; h2 {background-color: yellow;}

A. 1.

B. 2.

C. 3.

D. 4.

Lời giải chi tiết:

Có 03 lỗi, đó là: Thiếu dấu “;” sau blue; ngăn cách thuộc tính trong bộ chọn h1 phải là dấu “;”; ngăn cách giữa các bộ chọn a và h2 phải là dấu “,”. Vậy đáp án đúng là: C. 3.

Câu 9: Cho khai báo CSS sau:

h1 {

font-family:"Arial";

font-size: 20px;

}

border-color: red;

background-color: yellow;

Định dạng phần tử h1 như thế nào khi hiển thị trên màn hình trình duyệt web?

A. Phông chữ Arial, cỡ chữ 20 pixel, có đường viền màu đỏ, nền tô màu vàng.

B. Phông chữ Arial, cỡ chữ 20 pixel, không có đường viền, nền tô màu vàng.

C. Phông chữ Arial, cỡ chữ 20 point, không có đường viền, nền tô màu vàng.

D. Phông chữ Arial, cỡ chữ 20 point, có đường viền màu đỏ, nền tô màu vàng.

Lời giải chi tiết:

Định dạng phần tử h1 khi hiển thị trên màn hình trình duyệt web như sau:

A. Phông chữ Arial, cỡ chữ 20 pixel, có đường viền màu đỏ, nền tô màu vàng.

Câu 10: Khai báo CSS nào sau đây sẽ thiết lập siêu liên kết chữ có màu đỏ, cỡ chữ 15 pixel?

A. a color red; font-size: 15px;}

B. a {color: red, font-size: 15px;}

C. a {color: red; font-size: 15px}

D. a {color: red; font-size: 15px;}

Lời giải chi tiết:

Khai báo CSS sau đây sẽ thiết lập siêu liên kết chữ có màu đỏ, cỡ chữ 15 pixel: D. a {color: red; font-size: 15px;}

Câu 11: Khai báo CSS nào sau đây sẽ thiết lập các phần tử h4, h5 cùng sử dụng chung định dạng?

A. h4 h5 {color: grey; border-style: solid;}

B. h4, h5 {color: grey; border-style: solid;}

C. h4; h5 {color: grey; border-style: solid;}

D. h4. h5 {color: grey; border-style: solid;}

Câu trắc nghiệm đúng sai. Trong mỗi ý a), b), c), d) ở mỗi câu, em chọn đúng hoặc sai.

Lời giải chi tiết:

Khai báo CSS sau đây sẽ thiết lập các phần tử h4, h5 cùng sử dụng chung định dạng: B. h4, h5 {color: grey; border-style: solid;}

Câu 12: Mỗi phát biểu sau đây về CSS là đúng hay sai?

a) Tên bộ chọn phần tử trùng với tên của phần tử.

b) CSS cho phép người sử dụng định nghĩa các bộ chọn phần tử.

c) CSS hỗ trợ thiết lập định dạng cho nhiều bộ chọn phần tử trong n

khai báo.

d) CSS không hỗ trợ thiết lập định dạng cho nhiều bộ chọn phần tử trong một khai báo.

Lời giải chi tiết:

a) Đúng

b) Sai

c) Đúng

d) Sai

Câu 13: Mỗi phát biểu sau đây về CSS là đúng hay sai?

a) Thuộc tính CSS border-color chỉ được áp dụng khi thuộc tính border- style được khai báo.

b) Thuộc tính CSS background-color chỉ thiết lập màu nền cho một số phần tử mà nội dung có chứa văn bản.

c) Thuộc tính CSS font-size thiết lập cỡ chữ.

d) Thuộc tính CSS color thiết lập màu chữ cho nội dung văn bản.

Lời giải chi tiết:

a) Đúng

b) Sai. Vì áp dụng cho mọi phần tử

c) Đúng

d) Đúng

Câu 14: Mỗi khai báo CSS sau là đúng hay sai cú pháp?

a) h2 h3 {margin: 20px; color: grey;}

b) p, h4 {margin: 20px; padding: 5px;}

c) tieude {color: red; font-size: 25px;}

d) a; img {background-color: yellow; font-family: "Arial";}

Lời giải chi tiết:

a) Sai – Thiếu dấu phẩy phân tách hai bộ chọn phần tử h2, h3.

b) Đúng.

c) Sai – Không có phần tử tên tieude.

d) Sai – Phân cách giữa a và img viết sai cú pháp.

Câu 15: Mỗi khai báo CSS sau là đúng hay sai cú pháp?

a) <link stylesheet href= "main.css">

b) <link rel="stylesheet" href "stylesheet" href = "main.css">

c) h4 {background-color: yellow;}

d) p {color: red, font-size:20px;}

Lời giải chi tiết:

a) Sai.

b) Đúng.

c) Đúng.

d) Sai.

Câu 16: Mỗi phát biểu sau đây về CSS là đúng hay sai?

a) Các quy tắc định dạng có thể được ghi lưu dưới dạng tệp có phần mở rộng *.css.

b) Để áp dụng external CSS, trong văn bản HTML phải khai báo tham chiếu đến tệp CSS.

c) Mỗi quy tắc định dạng CSS gồm bộ chọn và các thuộc tính CSS.

d) Các quy tắc định dạng trong khai báo internal CSS phải được khai báo trong nội dung phần tử head.

Lời giải chi tiết:

a) Đúng.

b) Đúng.

c) Đúng.

d) Sai - Không bắt buộc nhưng thường được khai báo trong nội dung phần tử head.

Câu 17: Thuộc tính CSS nào được dùng để thiết lập màu chữ?

Lời giải chi tiết:

Thuộc tính CSS color được dùng để thiết lập màu chữ.

Câu 18: Thuộc tính CSS nào được dùng để thiết lập màu nền?

Lời giải chi tiết:

Thuộc tính CSS background-color. được dùng để thiết lập màu nền.

Câu 19: Thuộc tính CSS nào được dùng để thiết lập phông chữ?

Lời giải chi tiết:

Thuộc tính CSS font-family được dùng để thiết lập phông chữ.

Câu 20: Cho các cụm từ sau: “đường viền màu đen nét liền mảnh”, “đường viền màu đen nét liền đậm”, “đường viền màu xanh nét liền mảnh”, “đường viền màu xanh nét liền đậm”. Hãy chọn một cụm từ phù hợp điền vào chỗ chấm (... ) trong câu sau: “Khi gán giá trị solid cho thuộc tính CSS border-style, phần tử có ...”.

Lời giải chi tiết:

Cụm từ phù hợp điền vào chỗ chấm (... ) là: “đường viền màu đen liền nét đậm”.

Câu 21: Em hãy tìm hiểu và cho biết tác dụng của thuộc tính CSS border-style.

Lời giải chi tiết:

Thuộc tính border-style thiết lập kiểu hiển thị đường viền bao quanh phần tử. Phiên bản CSS hiện tại cung cấp 10 kiểu thiết lập đường viền khác nhau. dotted, dashed, solid, double là các giá trị thường được sử dụng.

Câu 22: Sử dụng thuộc tính CSS border để viết khai báo thiết lập định dạng đường viền cho phần tử p được trình bày là các đường kẻ màu xanh có kích thước 4 pixel. Bài tập thực hành.

Lời giải chi tiết:

p {border-style: solid; border-width: 4px; border-color: blue;} hoặc sử dụng dạng viết gộp p{ border: 4px solid blue;}, khi đó giá trị của thuộc tính border được viết dưới dạng: border: border-width border-style (bắt buộc)

border-color.

Câu 23: Khai báo CSS sử dụng bộ chọn phần tử.

Yêu cầu: Soạn các khai báo định dạng sau:

Tiêu đề mục h1 chữ có màu đỏ, phông chữ Times New Roman.

Đoạn văn bản p có màu nền xám (gray), đường viền có màu xanh (blue), nét đậm (solid), phông chữ Arial, cỡ chữ 20 pixel.

Lời giải chi tiết:

h1 {color:red; font-family: "Times New Roman";}

p {background-color: grey; border-style: solid; border-color: blue; font-family: "Arial"; font-size: 20px;}

Câu 24: Khai báo và áp dụng internal CSS

Yêu cầu: Soạn văn bản HTML và sử dụng internal CSS là các khai báo định dạng đã soạn ở bài F145 để tạo trang web khi hiển thị trên màn hình trình duyệt web như Hình 1.

Lời giải chi tiết:

Hướng dẫn thực hiện

Bước 1. Khai báo cấu trúc trang web

<!DOCTYPE html

<html>

<head>

<meta charset="utf-8">

<title>F146</title>

</head>

<body> </body>

</html>

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

h1 {font-family: "Times New Roman"; color: red;}

p {background-color: grey; border-style: solid; border-color: blue; font-family: Arial; font-size: 20px;}

</style>

Bước 3. Khai báo nội dung trong phần tử body.

<h1> Các điểm cực Việt Nam</h1>

<p>Việt Nam có 6 điểm cực, trong đó 4 điểm đất liền và 2 điểm trên tra Trong 4 điểm đất liền, có điểm cực Bắc (Lũng Cú, Hà Giang và điểm cực Tây (A Pa Chải, Điện Biên) nằm trong đất liền. Điểm cực Nam Đất M Cà Mau) và điểm cực Đông (Mũi Đôi, Khánh Hòa) tiếp cận biến. Hai điểm cực trên biển là Hòn Đá Lê (Cà Mau) và hải đăng đảo Tiên Nữ Khánh Hoà nằm ở biển Tây Nam và quần đảo Trường Sa của Việt Nam. <p> <em>(Nguồn: https://thanhnien.vn)</em>

Bước 4. Chọn File Save, ghi lưu tệp với tên “F146 htm. Bước 5. Mở tệp bằng trình duyệt web và xem kết quả

Câu 25: Khai báo và áp dụng external CSS.

Yêu cầu: Soạn văn bản HTML để tạo trang web và sử dụng tệp external CSS (style.cs”) để khi hiển thị trên màn hình trình duyệt web như Hình 2. Tiêu đề ghi chữ có màu xanh, cỡ chữ 20 pixel, nền tô màu vàng. Đoạn văn có màu nền lightgrey, cỡ chữ 20 pixel, đường viền màu đỏ kiểu dashed.

Lời giải chi tiết:

Hướng dẫn thực hiện:

Bước 1. Mở tệp “F146.html” và ghi lưu với tên tệp mới “F147bf. Bước 2. Tạo tệp “style.css” và lưu cùng thư mục chứa tập F17h. Bước 3. Soạn nội dung tệp “styles.css" và ghi hu

h1 {color:blue; font-size: 20px; background-color: yellow;}

p {background-color: lightgrey; font-size: 20px; border-style: dashed border-color: red;}

Bước 4. Mở tệp “F147.html”, bổ sung khai báo liên kết đến tệp “style.css” trong phần tử head.

<link rel="stylesheet" href="style.css">

Bước 5. Chọn File\Save, ghi lưu tệp.

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

>>> Bài tiếp theo: Giải SBT Tin học 12 Cánh diều bài 9