Lý thuyết Tin học 12 Bài 8 (Cánh diều): Làm quen với CSS

Lý thuyết Tin học 12 Bài 8: Làm quen với CSS

1. Bảng định dạng CSS

Bảng định dạng (Cascading Style Sheets – CSS) là ngôn ngữ dùng để khai báo kiểu trình bày các phần tử HTML trên trang web. CSS bao gồm các quy tắc định dạng, mỗi quy tắc bao gồm:

- Bộ chọn (selector): Xác định các phần tử HTML được áp dụng kiểu trình bày.

- Khai báo thuộc tính CSS (CSS properties): Xác định kiểu trình bày cho phần tử, ví dụ: màu sắc, phông chữ, kích cỡ, đường viền, v.v.

Lợi ích của CSS:

- Tách biệt nội dung và định dạng: Giúp dễ dàng chỉnh sửa và tái sử dụng khai báo CSS.

- Thống nhất trình bày: Cho phép nhiều trang web hoặc toàn bộ website sử dụng chung quy tắc định dạng.

Trình duyệt web áp dụng CSS bằng cách chọn các phần tử HTML khớp với bộ chọn trong CSS và sử dụng các quy tắc định dạng tương ứng.

- Phiên bản đầu tiên (CSS1): Công bố năm 1996.

- Phiên bản hiện tại trong sách: CSS3.

2. Khai báo bộ chọn phần tử và áp dụng CSS

Bộ chọn phần tử được sử dụng để áp dụng CSS cho một hoặc nhiều phần tử cụ thể trong văn bản HTML, nhằm tạo sự thống nhất trong trình bày. Ví dụ: trình bày chữ in nghiêng cho các đoạn văn bản trên trang web. Mỗi phần tử HTML có một bộ chọn CSS tương ứng, và bộ chọn này thường được đặt tên theo tên phần tử đó.

Bộ chọn phần tử được khai báo như sau:

Tên_bộ chọn_phần_tử (thuộc tỉnh 1 : giá trị,...; thuộc tính n : giá trị; }

3. Một số thuộc tính định dạng CSS

a) Thuộc tính định dạng màu sắc:

Thuộc tính color định dạng màu chữ, được khai báo như sau:

color: Màu,

Trong đó, giá trị Màu thường được xác định bởi tên màu phổ biến như red, green, blue, yellow, brown,...

b) Thuộc tính định dạng phông chữ

Thuộc tính c định tên phông chữ, áp dụng được cho tất cả phần tử HTML, được khai báo như sau:

- n phông chữ,

Trong đó, Tên phông chữ là một hoặc nhiều tên phông chữ được ngăn cách nhau bởi dấu “,”. Chú ý, nếu tên phông chữ có dấu cách thì phải được đặt trong cặp dấu nháy kép (" ").

Thuộc tính font-size xác định kích cỡ chữ, áp dụng được cho tất cả các phần tử, được khai báo như sau:

- font-size: Kích cỡ,

Trong đó, giá trị Kích cỡ thường được tính theo đơn vị điểm ảnh (pixel) hoặc tỉ lệ phần trăm.

c) Thuộc tính định dạng đường viền:

Thuộc tính border-style xác định kiểu trình bày đường viền của phần tử, được khai báo như sau:

- border-style: Kiểu trình bày,

CSS quy định cụ thể các Kiểu trình bày. Một số kiểu trình bày thông dụng gồm: dotted — đường viền là những dấu chấm liền nhau, solid – đường viền là một đường đậm liền nét.

Thuộc tính border-color xác định màu đường viền của phần tử, được khai báo như sau:

- border-color: Màu,

Lưu ý: Định dạng thuộc tính border-color chỉ được áp dụng khi thuộc tính border-style được khai báo.

Trắc nghiệm: Làm quen với CSS

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Bộ chọn (selector) trong CSS dùng để làm gì?

A. Xác định các thuộc tính CSS.

B. Xác định các phần tử HTML được áp dụng kiểu trình bày.

C. Xác định màu sắc của phần tử.

D. Xác định phông chữ cho phần tử.

Câu 2: CSS giúp tách biệt nội dung và định dạng như thế nào?

A. Giúp thay đổi nội dung của trang web dễ dàng hơn.

B. Cho phép các nhà phát triển web sử dụng cùng một mã CSS trên nhiều trang web.

C. Cho phép thay đổi định dạng của nội dung mà không cần thay đổi mã HTML.

D. Giúp tối ưu hóa trang web cho công cụ tìm kiếm.

Câu 3: Thuộc tính CSS nào được sử dụng để định dạng màu chữ?

A. background-color

B. text-color

C. font-color

D. color

Câu 4: Để định dạng phông chữ, thuộc tính nào được sử dụng trong CSS?

A. font-style

B. font-weight

C. font-family

D. font-size

Câu 5: Giá trị của thuộc tính font-size trong CSS thường được tính bằng đơn vị nào?

A. inches

B. pixels

C. meters

D. kilograms

Câu 6: Thuộc tính border-style trong CSS dùng để làm gì?

A. Xác định màu đường viền.

B. Xác định độ dày của đường viền.

C. Xác định kiểu trình bày đường viền.

D. Xác định vị trí đường viền.

Câu 7: Khi nào thuộc tính border-color trong CSS được áp dụng?

A. Khi thuộc tính border-style được khai báo.

B. Khi thuộc tính color được khai báo.

C. Khi thuộc tính background-color được khai báo.

D. Khi thuộc tính font-size được khai báo.

Câu 8: Bộ chọn phần tử trong CSS thường được đặt tên như thế nào?

A. Tên phần tử HTML.

B. Tên lớp của phần tử.

C. ID của phần tử.

D. Nội dung của phần tử.

Câu 9: Phiên bản đầu tiên của CSS được công bố vào năm nào?

A. 1994

B. 1995

C. 1996

D. 1997

Câu 10: Phiên bản CSS hiện tại được đề cập trong sách là phiên bản nào?

A. CSS2

B. CSS3

C. CSS4

D. CSS5

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Để áp dụng định dạng màu sắc cho chữ trong CSS, thuộc tính sau đây được sử dụng? Đúng hay sai?

a) background-color

b) color

c) font-color

a) text-color

Câu 2: Để định dạng kiểu đường viền cho một phần tử trong CSS, thuộc tính sau đây được sử dụng đúng hay sai?

a) border-style

b) border-width

c) border-radius

d) border-spacing

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: CSS giúp làm gì trong việc trình bày các phần tử HTML trên trang web?

Câu 2: Để xác định kiểu đường viền cho một phần tử trong CSS, thuộc tính nào được sử dụng?

Câu 3: Để thay đổi kích cỡ chữ trong CSS, thuộc tính nào là đúng?