Tin học 12 - Bài 14. Định dạng văn bản bằng CSS

Sử dụng CSS để định dạng văn bản, phông chữ, màu chữ, định dạng dòng cùng với các tính hất kế thừa và ưu tiên trong CSS.

1. Định dạng văn bản bằng CSS

a. Định dạng phông chữ:

font-family: Chọn loại phông chữ (serif, sans-serif, monospace, cursive, fantasy).
font-size: Chọn cỡ chữ (đơn vị đo chính xác, tương đối, hoặc mức độ).
font-style: Chọn kiểu chữ (thường normal hoặc nghiêng italics).
font-weight: Chọn độ dày nét chữ (thường normal, đậm bold, hoặc giá trị từ 100 đến 900).

b. Định dạng màu chữ:

color: Thiết lập màu chữ (đen black, trắng white, tím purple, xanh dương blue, cam orange, đỏ red, xanh lá cây green, vàng yellow,…).

c. Định dạng dòng văn bản:

line-height: Thiết lập chiều cao dòng.
text-align: Căn lề (trái left, giữa center, phải right, đều hai bên justify).
text-decoration: Trang trí dòng văn bản (không trang trí none, gạch dưới underline, gạch trên overline, gạch giữa line-through).
text-indent: Thụt lề dòng đầu tiên.

Câu hỏi luyện tập

Câu 1. (SGK trang 79) Giải thích các mẫu định dạng CSS sau.

<style>
  h1 {color: red; text-align: center;}
  p {text-align: justify;}
</style>

Ý nghĩa:

Tất cả các tiêu đề <h1> đều có chữ màu đỏ, nội dung căn giữa.
Tất cả các đoạn văn bản (thẻ <p>) căn đều hai bên.

Câu 2. (SGK trang 79) Có mẫu định dạng CSS như sau, hãy kiểm tra tác dụng của nó là gì.

<style>
  body {color: blue;}
</style>

Kết quả: Tất cả nội dung chữ hiển thị trong trang web đều có màu xanh dương. Có thể sử dụng công cụ viết code online như https://otth.vn/codeweb/ kiểm tra.

2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

a. Tính kế thừa

Các định dạng CSS được áp dụng cho một phần tử HTML sẽ được kế thừa bởi các phần tử con cháu của nó.

b. Thứ tự ưu tiên

Trình duyệt sẽ ưu tiên áp dụng định dạng được viết cuối cùng trong CSS.
Kí hiệu * trong bộ chọn áp dụng cho mọi phần tử nhưng có độ ưu tiên thấp nhất.
Kí hiệu !important được sử dụng để đánh dấu thuộc tính có độ ưu tiên cao nhất.

Ví dụ về các định dạng quan trọng

p {
  font-family: Arial, sans-serif;   /* Phông chữ Arial, sans-serif */
  font-size: 16px;                 /* Cỡ chữ 16px */
  color: blue;                     /* Màu chữ xanh dương */
  text-align: justify;             /* Căn đều hai bên */
  text-indent: 2em;                 /* Thụt lề dòng đầu tiên 2em */
  line-height: 1.5;                 /* Chiều cao dòng 1.5 */
}

h1 {
  font-weight: bold; /* Chữ đậm */
  text-decoration: underline; /* Gạch chân */
}

Câu hỏi trắc nghiệm (dạng D1 và D2) Tin học 12 Bài 14. Định dạng văn bản bằng CSS

Họ và tên của bạn

Thời gian làm bài: 30 phút

Đáp án chỉ hiển thị sau khi hoàn thành bài làm

Câu hỏi sẽ được hiển thị ngẫu nhiên

Thuộc tính CSS nào thiết lập kiểu chữ nghiêng?

font-weight

font-style

text-decoration

line-height

Giá trị nào KHÔNG thuộc thuộc tính text-align?

left

middle

justify

center

Phông chữ nào sau đây thuộc loại "có chân" (serif)?

Arial

Times New Roman

Tahoma

Verdana

Đơn vị rem trong CSS được tính dựa trên:

Cỡ chữ của phần tử gốc (html)

Chiều rộng màn hình

Cỡ chữ của phần tử cha

Kích thước pixel

Thuộc tính text-decoration: line-through tạo hiệu ứng:

Gạch dưới

Gạch trên

Gạch ngang giữa chữ

Không trang trí

Đoạn mã nào sau đây căn phải văn bản và thụt lề dòng đầu 2em?

p { text-align: right; text-indent: 2em; }

p { text-align: left; text-indent: -2em; }

p { text-align: justify; line-height: 2em; }

p { text-decoration: underline; }

Đoạn mã nào đặt màu chữ đỏ cho tiêu đề và xanh lá cho các phần tử khác?

h1 { color: red; }
* { color: green; }

* { color: green; }
h1 { color: red; }

body { color: green; }
h1 { color: red; }

h1 { color: red !important; }
* { color: green; }

Khi viết font-family: "Courier New", monospace;, trình duyệt ưu tiên hiển thị phông nào?

Courier New

Monospace

Phông mặc định của trình duyệt

Tahoma

Giá trị font-weight: 900 tương đương với:

normal

bold

lighter

italic

Đoạn mã p { line-height: 150%; } có tác dụng:

Tăng khoảng cách giữa các ký tự

Tăng khoảng cách giữa các dòng

Thụt lề dòng đầu

Căn đều hai bên

Đoạn mã CSS sau có tác dụng gì?
div { text-indent: -1em; line-height: 2; }

Thụt lề treo và tăng khoảng cách dòng

Căn giữa văn bản

Đổi màu chữ thành đỏ

Tạo đường gạch chân

Một phần tử <span> kế thừa color: blue từ <body>, nhưng hiển thị màu đỏ. Nguyên nhân là:

CSS có span { color: red; }

CSS có * { color: red !important; }

<span> nằm trong <div> có color: red

Trình duyệt không hỗ trợ màu xanh

Đoạn mã nào khiến tiêu đề h1 có cỡ chữ 20px dù có * { font-size: 16px; }?

h1 { font-size: 20px !important; }

h1 { font-size: 20px; }
* { font-size: 16px; }

* { font-size: 16px; }
h1 { font-size: 20px; }

h1 { font-size: 20em; }

Đoạn mã nào thiết lập chữ đậm và nghiêng cho thẻ <em>?

em { font-style: italic; font-weight: bold; }

em { font-weight: 900; text-decoration: underline; }

em { font-family: serif; color: black; }

em { text-align: center; }

Một học sinh viết CSS sau:
body { font-family: Arial; color: black; } h1 { color: red; text-align: center; } p { text-indent: 2em; }
Nhận định:

NB Tiêu đề h1 sử dụng phông Arial

Đúng Sai

NB Đoạn văn thừa hưởng màu đen từ body

Đúng Sai

TH text-indent: 2em thụt lề dòng đầu tiên

Đúng Sai

VD Thêm p { color: blue; } sẽ đổi màu đoạn văn thành xanh

Đúng Sai

Với đoạn mã CSS:
h2 { font-size: 1.2em !important; } h2 { font-size: 24px; } * { font-family: serif; }
Nhận định:

NB h2 có cỡ chữ 24px

Đúng Sai

NB h2 dùng phông serif

Đúng Sai

TH !important ưu tiên thuộc tính viết trước

Đúng Sai

VD Các phần tử khác dùng phông serif

Đúng Sai

Trang web có CSS:
body { line-height: 1.5; } em { font-style: italic; color: green; }
Nhận định:

NB line-height: 1.5 tăng khoảng cách dòng

Đúng Sai

NB Văn bản trong <em> kế thừa màu từ body

Đúng Sai

TH font-style của <em> có thể bị ghi đè

Đúng Sai

VD line-height không ảnh hưởng đến căn lề

Đúng Sai

Với đoạn mã CSS sau:
p { text-align: justify; text-indent: 5%; } * { color: blue; } h1 { color: red !important; }
Nhận định:

NB Đoạn văn căn đều hai bên

Đúng Sai

NB text-indent: 5% tính theo chiều rộng phần tử cha

Đúng Sai

TH Tiêu đề h1 có màu đỏ

Đúng Sai

VD Tất cả phần tử có màu xanh

Đúng Sai

Bảng xếp hạng

Hạng	Họ tên	Điểm số	Thời gian
1	Mai 7 lần thi	100/100	29 giây
2	Võ Thanh Sang 5 lần thi	100/100	30 giây
3	. 10 lần thi	100/100	32 giây
4	Phạm Thị Phương Oanh 8 lần thi	100/100	33 giây
5	Phan Kim Ngân 3 lần thi	100/100	34 giây
6	Đồng Đăng Khoa 1 lần thi	100/100	42 giây
7	Lăng Trường Khả 1 lần thi	100/100	46 giây
8	Diệp Huỳnh Như 3 lần thi	100/100	46 giây
9	Nguyễn Thành Đạt 5 lần thi	100/100	57 giây
10	Trần ngọc thư 6 lần thi	100/100	58 giây
11	Trần Ngọc Hào 1 lần thi	100/100	59 giây
12	Cao Thị Cẩm Ly 9 lần thi	100/100	1 phút 0 giây
13	Trần Ngọc Thư 6 lần thi	100/100	1 phút 4 giây
14	Trần Quốc Minh 5 lần thi	100/100	1 phút 9 giây
15	Thuý Quyên 4 lần thi	100/100	1 phút 16 giây
16	Lê Như Mạnh 1 lần thi	100/100	1 phút 16 giây
17	Xvd 1 lần thi	100/100	2 phút 1 giây
18	Nguyễn Phước thiện 5 lần thi	100/100	2 phút 14 giây
19	Lê Trâm Anh 2 lần thi	100/100	2 phút 22 giây
20	Nguyễn Như Ý 1 lần thi	100/100	2 phút 55 giây
21	Nguyễn Hiếu Nghĩa 1 lần thi	100/100	3 phút 6 giây
22	Dương Hoàng Trọng 1 lần thi	100/100	4 phút 17 giây
23	B 1 lần thi	100/100	5 phút 46 giây
24	Thúy Quyên 4 lần thi	97/100	1 phút 46 giây