Sách bài tập Tin học 12 Bài 8 (Cánh diều): Làm quen với CSS

Giải SBT Tin học 12 Bài 8: Làm quen với CSS

Câu F123 trang 46 SBT Tin học 12: 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:

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

Câu F124 trang 46 SBT Tin học 12: 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:

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 F125 trang 46 SBT Tin học 12: 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:

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 F126 trang 46 SBT Tin học 12: 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:

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 F127 trang 46 SBT Tin học 12: 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:

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 F128 trang 46 SBT Tin học 12: 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:

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 F129 trang 47 SBT Tin học 12: 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;}{}

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

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

Lời giải:

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

Câu F130 trang 47 SBT Tin học 12: Có bao nhiêu lỗi cú pháp khai báo CSS trong tệp “default.css” sau?

p {color: blue}

h1 {}

a; h2 {background-color: yellow;}

A. 1.

B. 2.

C. 3.

D. 4.

Lời giải:

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 F131 trang 47 SBT Tin học 12: Cho khai báo CSS sau:

h1 {

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:

Đị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 F132 trang 48 SBT Tin học 12: 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:

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 F133 trang 48 SBT Tin học 12: 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:

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 F134 trang 48 SBT Tin học 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:

a) Đúng

b) Sai

c) Đúng

d) Sai

Câu F135 trang 48 SBT Tin học 12: 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:

a) Đúng

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

c) Đúng

d) Đúng

Câu F136 trang 48 SBT Tin học 12: 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; }

Lời giải:

a) Sai – Thiếu dấy 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 F137 trang 49 SBT Tin học 12: 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:

a) Sai.

b) Đúng.

c) Đúng.

d) Sai.

Câu F138 trang 49 SBT Tin học 12: 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:

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 F139 trang 49 SBT Tin học 12: Thuộc tính CSS nào được dùng để thiết lập màu chữ?

Lời giải:

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

Câu F140 trang 49 SBT Tin học 12: Thuộc tính CSS nào được dùng để thiết lập màu nền?

Lời giải:

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

Câu F141 trang 49 SBT Tin học 12: Thuộc tính CSS nào được dùng để thiết lập phông chữ?

Lời giải:

Thuộc tính CSS ng để thiết lập phông chữ.

Câu F142 trang 49 SBT Tin học 12: 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:

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 F143 trang 49 SBT Tin học 12: 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:

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 F144 trang 49 SBT Tin học 12: 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:

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 F145 trang 49 SBT Tin học 12: 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:

h1 {color:red; }

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

Câu F146 trang 50 SBT Tin học 12: 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:

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 { color: red;}

p {background-color: grey; border-style: solid; border-color: blue; 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 Hoa ) 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 F147 trang 50 SBT Tin học 12: 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 đề hi 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:

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ả.

Xem thêm lời giải Sách bài tập Tin học lớp 12 bộ sách Cánh diều hay, chi tiết khác:

Bài 7: Thực hành tạo biểu mẫu

Bài 9: Thực hành định dạng một số thuộc tính CSS

Bài 10: Bộ chọn lớp, bộ chọn định danh

Bài 11: Mô hình hộp, bố cục trang web

Bài 12: Dự án nhỏ: Tạo trang web báo tường