033.1 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
033 Tạo kiểu Nội dung CSS |
Mục tiêu: |
033.1 Khái niệm cơ bản về CSS |
Bài: |
1 trên 1 |
Giới thiệu
Tất cả các trình duyệt web đều hiển thị các trang HTML bằng cách sử dụng các quy tắc trình bày mặc định mang tính thực tế và đơn giản nhưng lại không được bắt mắt. Bản thân HTML có cung cấp một số tính năng để viết các trang có nội dung phức tạp hơn dựa trên các kiểu trải nghiệm của người dùng hiện đại. Sau khi viết các trang HTML đơn giản, có lẽ bạn cũng đã nhận ra rằng chúng không so sánh được với các trang được thiết kế rất đẹp mắt trên Internet. Điều này là do trong HTML hiện đại, mã đánh dấu dành cho cấu trúc và chức năng của các phần tử trong tài liệu (tức nội dung ngữ nghĩa) được tách biệt hoàn toàn với các quy tắc xác định giao diện của các phần tử (tức phần trình bày). Các quy tắc trình bày được viết bằng một ngôn ngữ khác gọi là Tệp định kiểu Xếp tầng (Cascading Style Sheets - CSS). Nó cho phép bạn thay đổi gần như tất cả các khía cạnh trực quan của tài liệu như phông chữ, màu sắc và vị trí của các thành phần trong cả trang.
Trong hầu hết các trường hợp, các tài liệu HTML sẽ không được thiết kế để hiển thị theo một bố cục cố định như tệp PDF. Thay vào đó, các trang web dựa trên HTML có thể sẽ được hiển thị trên nhiều kích cỡ màn hình khác nhau hoặc thậm chí là được in ra. CSS cung cấp các tùy chọn có thể điều chỉnh để đảm bảo rằng trang web sẽ được hiển thị đúng như mong muốn và được điều chỉnh cho phù hợp với thiết bị hoặc ứng dụng mở trang web đó.
Áp dụng các Kiểu
Có nhiều cách để đưa CSS vào tài liệu HTML: viết CSS trực tiếp vào thẻ của phần tử trong một phần riêng của mã nguồn trang hoặc trong một tệp bên ngoài để trang HTML tham chiếu.
Thuộc tính style
Cách đơn giản nhất để sửa đổi kiểu của một phần tử cụ thể là viết trực tiếp vào thẻ phần tử bằng cách sử dụng thuộc tính style
(kiểu). Tất cả các phần tử HTML hiển thị đều có thuộc tính style
với giá trị có thể là một hoặc nhiều quy tắc CSS hay còn được gọi là đặc tính. Hãy bắt đầu với một ví dụ đơn giản là một phần tử đoạn văn bản:
<p>My stylized paragraph</p>
Cú pháp cơ bản của đặc tính CSS tùy chỉnh là property: value
, trong đó property
là một khía cạnh cụ thể mà bạn muốn thay đổi trong phần tử và value
sẽ xác định phép thay thế cho tùy chọn mặc định do trình duyệt tạo. Một số đặc tính có thể áp dụng cho tất cả các phần tử và một số đặc tính lại chỉ áp dụng được cho một số phần tử cụ thể. Tương tự như vậy, ta sẽ có những giá trị thích hợp được sử dụng trong mỗi đặc tính.
Ví dụ: để thay đổi màu của đoạn văn bản đơn thuần, chúng ta sẽ sử dụng đặc tính color
(màu). Đặc tính color
là đặc tính màu tiền cảnh, tức màu của các chữ cái trong đoạn văn bản. Bản thân yếu tố màu sắc đã nằm trong phần giá trị của quy tắc và nó có thể được chỉ định ở nhiều định dạng khác nhau, bao gồm các tên đơn giản như red
, green
, blue
, yellow
, v.v. Do đó, để đổi màu chữ của đoạn văn thành purple
(tím), hãy thêm đặc tính tùy chỉnh color: purple
vào thuộc tính style
của phần tử:
<p style="color: purple">My first stylized paragraph</p>
Các đặc tính tùy chỉnh khác có thể nằm trong cùng một đặc tính style
nhưng chúng phải được phân tách bằng dấu chấm phẩy. Ví dụ: nếu bạn muốn làm cho kích thước của phông chữ lớn hơn, hãy thêm font-size:larger
vào đặc tính style
:
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
Note
|
Không cần thiết phải thêm khoảng trắng xung quanh dấu hai chấm và dấu chấm phẩy, nhưng chúng có thể giúp ta đọc mã CSS một cách dễ dàng hơn. |
Để xem kết quả của những thay đổi này, hãy lưu HTML sau vào một tệp rồi mở tệp đó trong trình duyệt web (kết quả sẽ được hiển thị trong [img-033-1-fig01]):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
</head>
<body>
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
<p style="color: green; font-size: larger">My second stylized paragraph</p>
</body>
</html>
Một thay đổi giao diện rất đơn giản sử dụng CSS. image::./images/fig01.png[]
Bạn có thể tưởng tượng rằng mỗi phần tử trong trang là một hình chữ nhật hoặc một chiếc hộp có các đặc tính hình học và cách trang trí mà bạn có thể thay đổi bằng CSS. Cơ chế kết xuất sử dụng hai khái niệm tiêu chuẩn cơ bản cho việc sắp xếp phần tử: sắp xếp theo khối và sắp xếp nội tuyến. Các phần tử khối chiếm toàn bộ không gian theo chiều ngang của phần tử mẹ và sẽ được đặt tuần tự từ trên xuống dưới. Chiều cao của chúng (tức chiều dọc của chúng, đừng nhầm lẫn với vị trí trên cùng của chúng trong trang) thường phụ thuộc vào lượng nội dung mà chúng có. Các phần tử nội tuyến sẽ tuân theo quy tắc từ trái sang phải tương tự như các ngôn ngữ viết của phương Tây: các phần tử được đặt theo chiều ngang, từ trái sang phải cho đến khi không còn khoảng trống ở phía bên phải, sau đó phần tử sẽ tiếp tục trên một dòng mới ngay bên dưới dòng hiện tại. Các phần tử như p
, div
và section
sẽ được đặt dưới dạng khối theo mặc định, trong khi các phần tử như span
, em
, a
và các chữ cái đơn sẽ được đặt ở trong dòng (nội tuyến). Các phương thức sắp xếp cơ bản này có thể được sửa đổi cơ bản theo các quy tắc CSS.
Hình chữ nhật tương ứng với phần tử p
trong nội dung của tài liệu HTML mẫu sẽ hiển thị nếu bạn thêm đặc tính background-color
vào quy tắc (Figure 1):
<p style="color: purple; font-size: larger; background-color: silver">My first stylized paragraph</p>
<p style="color: green; font-size: larger; background-color: silver">My second stylized paragraph</p>
Khi thêm các đặc tính tùy chỉnh CSS mới vào thuộc tính style
, ta sẽ thấy được rằng toàn bộ đoạn mã đã bắt đầu trở nên lộn xộn. Việc viết quá nhiều quy tắc CSS trong thuộc tính style
sẽ làm suy yếu sự tách biệt giữa cấu trúc (HTML) và phần trình bày (CSS). Hơn nữa, bạn sẽ sớm nhận ra rằng có nhiều phong cách có thể được áp dụng cho các phần tử khác nhau và việc lặp lại chúng trong mọi phần tử sẽ không phải là một ý hay.
Quy tắc CSS
Thay vì tạo kiểu trực tiếp cho các phần tử trong thuộc tính style
của chúng, việc thông báo cho trình duyệt về toàn bộ tập hợp các phần tử áp dụng kiểu tùy chỉnh sẽ thực tế hơn nhiều. Chúng ta có thể làm điều đó bằng cách thêm bộ chọn vào các đặc tính tùy chỉnh, khớp các phần tử theo loại, hạng, ID duy nhất, vị trí tương đối, v.v. Sự kết hợp giữa bộ chọn và các đặc tính tùy chỉnh tương ứng — hay còn được gọi là đặc tính khai báo — được gọi là Quy tắc CSS. Cú pháp cơ bản của quy tắc CSS là selector { property: value }
. Như trong thuộc tính style
, các đặc tính được phân tách bằng dấu chấm phẩy có thể được nhóm lại với nhau (ví dụ như p { color: purple; font-size: larger }
). Quy tắc này khớp với mọi thành phần p
trong trang và cũng áp dụng các đặc tính color
và font-size
tùy chỉnh.
Quy tắc CSS cho một phần tử mẹ sẽ tự động khớp với tất cả các phần tử con của nó. Điều này có nghĩa là chúng ta có thể áp dụng các đặc tính tùy chỉnh cho toàn bộ phần văn bản trong trang (bất kể văn bản đó ở bên trong hay bên ngoài thẻ <p>
) bằng cách sử dụng bộ chọn body
để thay thế: body { color: purple; font-size: larger }
. Chiến lược này sẽ giải phóng chúng ta khỏi việc viết lại cùng một quy tắc cho tất cả các phần tử con của nó, nhưng có thể chúng ta sẽ phải phải viết các quy tắc bổ sung để “huỷ bỏ” hoặc sửa đổi các quy tắc kế thừa.
Thẻ style
Thẻ <style>
cho phép chúng ta viết các quy tắc CSS bên trong trang HTML mà mình muốn thiết kế. Nó cho phép trình duyệt phân biệt mã CSS với mã HTML. Thẻ <style>
sẽ nằm trong phần head
của tài liệu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<style type="text/css">
p { color: purple; font-size: larger }
</style>
</head>
<body>
<p>My first stylized paragraph</p>
<p>My second stylized paragraph</p>
</body>
</html>
Thuộc tính type
sẽ cho trình duyệt biết loại nội dung bên trong thẻ <style>
, tức là loại MIME của nó vì mọi trình duyệt hỗ trợ CSS đều giả định rằng kiểu của thẻ <style>
là text/css
theo mặc định (bao gồm cả thuộc tính type
là tùy chọn). Ngoài ra còn có thuộc tính media
cho biết phương tiện — ví dụ như màn hình máy tính hoặc bản in — áp dụng các quy tắc CSS trong thẻ <style>
. Theo mặc định, các quy tắc CSS sẽ áp dụng cho bất kỳ phương tiện nào nơi tài liệu được kết xuất.
Như trong mã HTML, việc ngắt dòng và lùi đầu dòng trong mã sẽ không thay đổi cách trình duyệt diễn giải các quy tắc CSS. Đoạn:
<style type="text/css">
p { color: purple; font-size: larger }
</style>
sẽ cho ra kết quả giống y hệt như đoạn:
<style type="text/css">
p {
color: purple;
font-size: larger;
}
</style>
Các byte bổ sung được sử dụng bởi khoảng trắng và dấu ngắt dòng sẽ không tạo ra khác biệt quá lớn trong kích thước cuối cùng của tài liệu và sẽ không có tác động đáng kể đến thời gian tải trang; vì vậy, việc lựa chọn bố cục là tuỳ theo sở thích của từng cá nhân. Hãy lưu ý dấu chấm phẩy đứng sau phần khai báo cuối cùng (font-size: larger;
) của quy tắc CSS. Dấu chấm phẩy không phải là bắt buộc, nhưng có nó ở đó sẽ giúp ta dễ dàng thêm một phần khai báo khác vào dòng tiếp theo mà không lo thiếu dấu chấm phẩy.
Việc có các phần khai báo riêng trong từng dòng cũng rất hữu ích khi bạn cần chú giải một khai báo nào đó. Ví dụ: bất cứ khi nào bạn muốn tạm thời vô hiệu hóa một khai báo vì lý do khắc phục sự cố, bạn có thể đính kèm /*
và */
vào dòng tương ứng:
p {
color: purple;
/*
font-size: larger;
*/
}
hoặc:
p {
color: purple;
/* font-size: larger; */
}
Khi được viết như thế này, phần khai báo font-size: larger
sẽ bị trình duyệt bỏ qua. Hãy cẩn thận với việc mở và đóng chú thích đúng cách; nếu không, trình duyệt có thể sẽ không hiểu được các quy tắc.
Chú thích cũng khá là hữu ích trong việc viết lời nhắc về các quy tắc:
/* Texts inside <p> are purple and larger */
p {
color: purple;
font-size: larger;
}
Lời nhắc giống như trong ví dụ có thể là không cần thiết lắm trong biểu định kiểu có chứa một số quy tắc nhỏ, nhưng chúng lại rất hữu ích trong việc điều hướng biểu định kiểu với hàng trăm quy tắc hoặc nhiều hơn.
Mặc dù thuộc tính style
và thẻ <style>
đều đủ để thử nghiệm các kiểu tùy chỉnh và hữu ích trong một số tình huống cụ thể nhưng chúng lại không được sử dụng phổ biến. Thay vào đó, các quy tắc CSS thường được giữ trong một tệp riêng biệt có thể được tham chiếu từ tài liệu HTML.
CSS trong Tệp bên ngoài
Một phương pháp được ưa chuộng để liên kết các định nghĩa CSS với tài liệu HTML là lưu trữ CSS trong một tệp riêng biệt. Phương pháp này có hai ưu điểm chính so với các phương pháp trước:
-
Các quy tắc tạo kiểu giống nhau có thể được chia sẻ giữa các tài liệu riêng biệt.
-
Tệp CSS thường được lưu trong bộ nhớ đệm của trình duyệt giúp cải thiện thời gian tải trong tương lai.
Các tệp CSS có phần mở rộng .css
và, cũng giống như các tệp HTML, chúng có thể được chỉnh sửa bởi bất kỳ trình soạn thảo văn bản thuần túy nào. Khác với các tệp HTML, các tệp CSS không có cấu trúc cấp cao nhất được xây dựng bằng các thẻ phân cấp như <head>
hoặc <body>
. Thay vào đó, tệp CSS chỉ là một danh sách các quy tắc được trình duyệt xử lý theo tuần tự. Thay vào đó, các quy tắc tương tự được viết bên trong thẻ <style>
có thể được đặt trong một tệp CSS.
Mối liên hệ giữa tài liệu HTML và các quy tắc CSS được lưu trữ trong một tệp sẽ chỉ được xác định trong tài liệu HTML. Đối với tệp CSS, việc các phần tử phù hợp với quy tắc của nó có tồn tại hay không không quan trọng; vì vậy, ta không cần liệt kê các tài liệu HTML mà nó được liên kết đến trong tệp CSS. Về phía HTML, mọi biểu định kiểu được liên kết sẽ được áp dụng cho tài liệu cũng giống như các quy tắc được viết trong thẻ <style>
.
Thẻ HTML <link>
sẽ xác định biểu định kiểu bên ngoài được sử dụng trong tài liệu hiện tại và sẽ nằm trong phần head
của tài liệu HTML:
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link href="style.css" rel="stylesheet">
</head>
Giờ đây, bạn có thể đặt quy tắc cho phần tử p
mà chúng ta đã sử dụng trước đó vào tệp style.css
và kết quả mà khách truy cập vào trang web nhìn thấy sẽ giống nhau. Nếu tệp CSS không nằm trong cùng thư mục với tài liệu HTML, hãy chỉ định đường dẫn đầy đủ hoặc tương đối của nó trong thuộc tính href
. Thẻ <link>
có thể liên kết nhiều loại tài nguyên bên ngoài khác nhau; vì vậy, điều quan trọng là thiết lập mối quan hệ của tài nguyên bên ngoài với tài liệu hiện tại. Đối với các tệp CSS bên ngoài, mối quan hệ sẽ được xác định trong rel="stylesheet"
.
Thuộc tính media
có thể được sử dụng theo cách tương tự như đối với thẻ <style>
: nó cho biết về phương tiện như màn hình máy tính hoặc bản in; các phương tiện này sẽ áp dụng các quy tắc trong tệp bên ngoài.
CSS hoàn toàn có thể thay đổi một phần tử, nhưng điều quan trọng vẫn là phải sử dụng phần tử thích hợp cho các thành phần của trang. Nếu không, các công nghệ hỗ trợ như trình đọc màn hình có thể sẽ không xác định được đúng các phần của trang.
Bài tập Hướng dẫn
-
Những phương pháp nào có thể được sử dụng để thay đổi giao diện của các phần tử HTML sử dụng CSS?
-
Tại sao không nên sử dụng thuộc tính
style
của thẻ<p>
nếu có các đoạn văn bản giống nhau? -
Chính sách sắp đặt mặc định để đặt phần tử
div
là gì? -
Thuộc tính nào của thẻ
<link>
sẽ cho biết vị trí của tệp CSS bên ngoài? -
Phần nào bên trong tài liệu HTML có thể chèn phần tử
link
vào?
Bài tập Mở rộng
-
Tại sao không nên sử dụng thẻ
<div>
để xác định một từ trong một câu thông thường? -
Điều gì sẽ xảy ra nếu bạn bắt đầu một chú thích bằng
/*
ở giữa tệp CSS nhưng lại quên đóng nó bằng*/
? -
Hãy viết quy tắc CSS để gạch chân tất cả các phần tử
em
của tài liệu. -
Làm cách nào để có thể cho biết biểu định kiểu từ thẻ
<style>
hoặc<link>
chỉ nên được sử dụng bởi bộ tổng hợp giọng nói?
Tóm tắt
Bài học này bao gồm các khái niệm cơ bản về CSS và cách tích hợp nó với HTML. Các quy tắc được viết trong biểu định kiểu CSS là phương pháp tiêu chuẩn để thay đổi giao diện của tài liệu HTML. CSS cho phép chúng ta giữ nội dung ngữ nghĩa tách biệt với các cách trình bày. Bài học này đã đi qua các khái niệm và quy trình sau:
-
Cách thay đổi đặc tính CSS bằng thuộc tính
style
. -
Cú pháp quy tắc CSS cơ bản.
-
Sử dụng thẻ
<style>
để nhúng các quy tắc CSS vào tài liệu. -
Sử dụng thẻ
<link>
để kết hợp các biểu định kiểu bên ngoài vào tài liệu.
Đáp án Bài tập Hướng dẫn
-
Những phương pháp nào có thể được sử dụng để thay đổi giao diện của các phần tử HTML sử dụng CSS?
Ba phương pháp cơ bản: Viết trực tiếp trong thẻ của phần tử, trong một phần riêng của mã nguồn của trang hoặc trong một tệp bên ngoài được trang HTML tham chiếu.
-
Tại sao không nên sử dụng thuộc tính
style
của thẻ<p>
nếu có các đoạn văn bản giống nhau?Việc khai báo CSS sẽ cần phải được sao chép trong các thẻ
<p>
khác. Điều này gây tốn thời gian, tăng kích thước tệp và dễ bị lỗi. -
Chính sách sắp đặt mặc định để đặt phần tử
div
là gì?Phần tử
div
được coi là phần tử khối theo mặc định. Do đó, phần tử này sẽ chiếm toàn bộ không gian theo chiều ngang của phần tử mẹ và chiều cao của phần tử này sẽ phụ thuộc vào nội dung của chính nó. -
Thuộc tính nào của thẻ
<link>
sẽ cho biết vị trí của tệp CSS bên ngoài?Thuộc tính
href
. -
Phần nào bên trong tài liệu HTML có thể chèn phần tử
link
vào?Phần tử
link
phải nằm trong phầnhead
của tài liệu HTML.
Đáp án Bài tập Mở rộng
-
Tại sao không nên sử dụng thẻ
<div>
để xác định một từ trong một câu thông thường?Thẻ
<div>
cung cấp một sự phân tách về ngữ nghĩa giữa hai phần riêng biệt của tài liệu và sẽ cản trở các công cụ trợ năng khi nó được sử dụng cho các thành phần văn bản trong dòng (nội tuyến). -
Điều gì sẽ xảy ra nếu bạn bắt đầu một chú thích bằng
/*
ở giữa tệp CSS nhưng lại quên đóng nó bằng*/
?Tất cả các quy tắc đứng sau chú thích sẽ bị trình duyệt bỏ qua.
-
Hãy viết quy tắc CSS để gạch chân tất cả các phần tử
em
của tài liệu.em { text-decoration: underline }
hoặc
em { text-decoration-line: underline }
-
Làm cách nào để có thể cho biết biểu định kiểu từ thẻ
<style>
hoặc<link>
chỉ nên được sử dụng bởi bộ tổng hợp giọng nói?Giá trị của thuộc tính
media
phải làspeech
.