Tin học 12 - Bài 13. Khái niệm, vai trò của CSS

1. Khái niệm mẫu định dạng CSS

Mẫu định dạng: Cascading Style Sheet và viết tắt là CSS. Dùng để thiết lập các mẫu định dạng cho trang web. Ví dụ đoạn mã sau được viết trong phần tử head của trang web.

<style>
    h1 {color: red;}
    h1 {border: 2px solid blue;}
    p {text-indent: 15px;}
</style>

CSS là định dạng độc lập với chuẩn HTML. Các mẫu định dạng được ghi trong thẻ <style>.... </style> (trong phần tử head):

Chỉ cần viết mẫu định dạng một lần và được áp dụng đồng thời cho tất cả các phần tử trong trang.

2. Cấu trúc CSS

Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declaration block).

Vùng mô tả bao gồm một hay nhiều quy định có dạng {thuộc tính: giá trị;} , các quy định được viết cách nhau bởi dấu chấm phẩy (;)

Cấu trúc CSS:

bộ chọn {
    thuộc tính 1: giá trị 1;
    thuộc tính 2: giá trị 2;
    thuộc tính n: giá trị n;
}

Ví dụ 1: Mẫu CSS gồm hai quy định, thụt lề dòng đầu và chữ màu xanh áp dụng cho bộ chọn là tất cả các thẻ <p>.

p {
    text-indent: 15px; 
    color: blue;
}

Ví dụ 2: Mẫu CSS sau thiết lập định dạng chữ đỏ cho đồng thời các thẻ h1, h2, h3. Các thẻ này được viết cách nhau bởi dấu phẩy.

h1, h2, h3 {
    color: red;
}

Cách thiết lập CSS

Có ba cách thiết lập CSS là CSS trong (internal CSS), CSS ngoài (external CSS) và CSS nội tuyến (inline CSS).

a. Cách thiết lập CSS trong

Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ <style> và đặt trong phần tử head của tệp HTML.

Các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện thời. (ví dụ ở Hoạt động 1 là thiết lập CSS trong).

b. Cách thiết lập CSS ngoài

Các mẫu định dạng CSS được viết trong một tệp css. Gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS.

Sau đó, cần thực hiện thao tác kết nối, liên kết tệp HTML với tệp định dạng css.

styles.css

/* tệp thông tin CSS */
h1 {color: red; }
h1 {border: 2px solid blue;}
p {text-indent: 15px;}

Cách kết nối tệp HTML với CSS như sau:

Cách 1: Sử dụng thẻ link đặt trong vùng head của trang web, ví dụ:

<head>
    <link href="styles.css" rel="stylesheet" type = "text/css">
</head>

Cách 2: Sử dụng lệnh @import đặt trong phần tử style và nằm trong phần head của trang web, ví dụ:

<style>
    @import "styles.css";
</style>

Lưu ý: Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web.

c. Cách thiết lập CSS nội tuyến

Định dạng CSS trực tiếp bên trong thẻ mở của các phần tử HTML: viết các thuộc tính và giá trị cho thuộc tính style.

3. Vai trò, ý nghĩa của CSS

Nếu không dùng CSS thì khi định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML.

CSS ra đời để phục vụ việc định dạng nội dung trang web một cách thống nhất, nhanh chóng và thuận tiện.

Làm giảm nhẹ công việc nhập nội dung, tăng tính chuyên nghiệp của việc định dạng.
Các định dạng được thiết lập một lần và được dùng nhiều lần.
Các mẫu định dạng có thể viết trong tệp CSS ngoài và kết nối vào bất kì trang web nào.

Luyện tập

Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML, đúng hay sai? => Sai.
Khẳng định sau là đúng hay sai:
Có thể chỉ cần thay đổi thông tin của một tệp CSS sẽ làm thay đổi định dạng của nhiều trang web, thậm chí cả một website. => Đúng.

Câu hỏi trắc nghiệm (dạng D1 và D2) khái niệm và vai trò của 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

Phương án nào sau đây mô tả đúng nhất về CSS?

Ngôn ngữ lập trình để tạo trang web động

Công cụ định dạng độc lập với HTML dùng thiết lập mẫu trình bày

Phần mềm thiết kế đồ họa cho website

Cơ sở dữ liệu lưu trữ thông tin định dạng

Bộ phận nào trong cấu trúc CSS quy định phần tử HTML được áp dụng định dạng?

Vùng mô tả

Bộ chọn (selector)

Thuộc tính

Giá trị

Đoạn mã CSS nào sau đây thiết lập màu chữ xanh và cỡ chữ 16px cho tất cả thẻ <p>?

p {color: blue; size: 16px;}

p {color: blue; font-size: 16px;}

p {text-color: blue; font: 16px;}

selector p {blue; 16px}

Cách thiết lập CSS ngoài được thực hiện bằng phương án nào?

Viết CSS trực tiếp trong thẻ <body>

Sử dụng thẻ <link> trong phần <head> để liên kết tệp .css

Nhúng CSS vào thuộc tính style của phần tử HTML

Viết CSS trong phần <footer> của trang

Trang web có mã CSS:
h1, h2 {border: 2px solid red;}
Kết quả nào sau đây đúng?

Tất cả thẻ <h1> và <h2> đều có viền màu đỏ

Chỉ thẻ <h1> có viền đỏ

Thẻ <h1> và <h2> có nền đỏ

CSS này gây lỗi cú pháp

Ưu điểm chính của việc sử dụng CSS ngoài là:

Dễ dàng thay đổi định dạng cho nhiều trang web cùng lúc

Tốc độ tải trang nhanh hơn

Không cần liên kết với tệp HTML

Chỉ áp dụng cho một phần tử duy nhất

Đoạn mã nào sau đây là ví dụ về CSS nội tuyến?

@import "style.css";

Thuộc tính nào trong CSS dùng để thụt lề dòng đầu tiên của đoạn văn?

text-align

margin-left

text-indent

padding

Đoạn mã HTML sau:
<h1 style="color: blue; border: 1px solid black;">Tiêu đề</h1>
Kết quả hiển thị sẽ là:

Tiêu đề màu xanh, không viền

Tiêu đề màu xanh, viền đen 1px

Tiêu đề màu đen, viền xanh 1px

Tiêu đề in đậm, viền xanh

Phương án nào KHÔNG phải là cách thiết lập CSS?

CSS trong (internal)

CSS ngoài (external)

CSS động (dynamic)

CSS nội tuyến (inline)

Bộ chọn h1, h2, h3 trong CSS có ý nghĩa gì?

Áp dụng định dạng cho thẻ <h1> con của <h2> và <h3>

Áp dụng định dạng đồng thời cho cả ba thẻ <h1>, <h2>, <h3>

Chỉ áp dụng khi cả ba thẻ cùng xuất hiện

Gây lỗi cú pháp

Trong CSS, cú pháp nào sau đây đúng?

p { color=red; }

p { color: red }

p { color: red; }

p [color: red;]

Tác dụng của việc tách CSS và HTML là:

Giảm kích thước tệp HTML

Dễ dàng bảo trì và thống nhất định dạng

Tăng tốc độ xử lý JavaScript

Hỗ trợ các hiệu ứng động

Thẻ nào dùng để nhúng CSS vào phần <head> của HTML?

<link>

<meta>

<css>

Đoạn mã sau:
body { font-family: Arial; }
ảnh hưởng đến:

Toàn bộ văn bản trong thẻ <body>

Chỉ các thẻ <p> trong <body>

Tiêu đề trang

Không có hiệu lực

Mục đích chính của CSS là:

Thêm chức năng tương tác cho trang web

Định dạng và trình bày nội dung HTML

Lưu trữ dữ liệu người dùng

Tạo hiệu ứng chuyển động

Để áp dụng CSS cho một lớp (class), bộ chọn sẽ bắt đầu bằng ký hiệu nào?

Đoạn mã CSS nào thiết lập nền màu vàng cho tất cả thẻ <div>?

div {background-color: yellow;}

div {color: yellow;}

div {bgcolor: yellow;}

div {background: yellow-color;}

Tệp CSS ngoài thường có phần mở rộng là:

.html

.js

.css

.txt

Khi một phần tử HTML được định dạng bằng cả CSS nội tuyến và CSS ngoài, ưu tiên áp dụng:

CSS ngoài

CSS nội tuyến

CSS trong

Không xác định

Một học sinh thiết kế trang web với mã HTML sau:
<head> <style> p { font-size: 14px; color: blue; } </style> </head> <body> <p>Chào mừng đến với trang web!</p> <p style="color: red;">Khóa học Tin học</p> </body>
Các phát biểu:

NB Tất cả thẻ p đều có chữ màu xanh

Đúng Sai

NB Thẻ p thứ hai có kích thước chữ 14px

Đúng Sai

TH CSS nội tuyến được ưu tiên hơn CSS trong

Đúng Sai

VD Đoạn mã này không sử dụng CSS ngoài

Đúng Sai

CSS ngoài được lưu trong tệp `style.css` với nội dung:
h1 { text-align: center; }
Trang HTML liên kết với tệp này bằng thẻ <link> trong phần <head>. Các phát biểu:

NB Tất cả thẻ h1 trong trang đều được căn giữa.

Đúng Sai

NB Thay đổi nội dung `style.css` sẽ ảnh hưởng đến mọi trang liên kết.

Đúng Sai

TH CSS này có thể viết trực tiếp trong thẻ <body>.

Đúng Sai

VD Tệp `style.css` phải đặt trong thư mục chứa hình ảnh.

Đúng Sai

Mẫu CSS:
#header { background: gray; } Các phát biểu:

NB #header là bộ chọn lớp (class).

Đúng Sai

NB Mẫu này áp dụng cho phần tử có `id="header"`.

Đúng Sai

TH Thuộc tính `background` thiết lập màu nền.

Đúng Sai

VD Dấu # trong CSS dùng để chọn thẻ HTML.

Đúng Sai

Trang web có CSS:
body { font-family: Arial; } p.error { color: red; }
Và HTML:
<p class="error">Lỗi đăng nhập!</p> Các phát biểu:

NB Đoạn văn "Lỗi đăng nhập!" có màu đỏ.

Đúng Sai

NB Thẻ <p> này sử dụng bộ chọn lớp.

Đúng Sai

TH Tất cả thẻ <p> đều có font Arial.

Đúng Sai

VD Thuộc tính `font-family` chỉ ảnh hưởng đến tiêu đề.

Đúng Sai

Bảng xếp hạng

Hạng	Họ tên	Điểm số	Thời gian
1	Võ Thanh Sang 9 lần thi	100/100	37 giây
2	Mai 10 lần thi	100/100	41 giây
3	Phan Kim Ngân 4 lần thi	100/100	44 giây
4	Phạm Thị Phương Oanh 13 lần thi	100/100	47 giây
5	Diệp Huỳnh Như 4 lần thi	100/100	51 giây
6	. 11 lần thi	100/100	52 giây
7	thị trinh 1 lần thi	100/100	56 giây
8	Võ Như Ngọc 3 lần thi	100/100	58 giây
9	Nguyễn Xuyên Thành 2 lần thi	100/100	1 phút 5 giây
10	Trần Ngọc Hào 3 lần thi	100/100	1 phút 8 giây
11	Trần Ngọc Thư 9 lần thi	100/100	1 phút 9 giây
12	Đồng Đăng Khoa 2 lần thi	100/100	1 phút 11 giây
13	Cao Thị Cẩm Ly 12 lần thi	100/100	1 phút 16 giây
14	Huỳnh Gia Nghĩa 3 lần thi	100/100	1 phút 22 giây
15	Lăng Trường Khả 1 lần thi	100/100	1 phút 26 giây
16	Nguyễn Như Ý 3 lần thi	100/100	1 phút 28 giây
17	Thúy Quyên 4 lần thi	100/100	1 phút 30 giây
18	Võ Như Ngoc 3 lần thi	100/100	1 phút 32 giây
19	Nguyễn Thành Đạt 1 lần thi	100/100	1 phút 50 giây
20	Mau 1 lần thi	100/100	1 phút 50 giây
21	Kn 1 lần thi	100/100	1 phút 52 giây
22	Dương Hoàng Trọng 1 lần thi	100/100	2 phút 16 giây
23	Lê Trâm Anh 2 lần thi	100/100	2 phút 55 giây
24	A 2 lần thi	100/100	2 phút 56 giây
25	Trọng 1 lần thi	100/100	3 phút 18 giây
26	Nguyễn Hiếu Nghĩa 1 lần thi	100/100	3 phút 40 giây