033.2 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.2 Bộ Chọn trong CSS và Ứng dụng Kiểu |
Bài: |
1 trên 1 |
Giới thiệu
Khi viết một quy tắc CSS, chúng ta phải báo cho trình duyệt biết quy tắc đó áp dụng cho những phần tử nào. Chúng ta có thể làm được điều này bằng cách chỉ định bộ chọn - tức là một mẫu có thể khớp với một phần tử hoặc một nhóm phần tử. Bộ chọn có nhiều dạng khác nhau, có thể dựa trên tên, thuộc tính, vị trí tương đối của phần tử trong cấu trúc tài liệu hoặc sự kết hợp giữa các đặc điểm này.
Kiểu Trang tổng thể
Một trong những ưu điểm của việc sử dụng CSS là bạn sẽ không cần phải viết các quy tắc riêng lẻ cho các phần tử có cùng kiểu. Dấu hoa thị sẽ áp dụng quy tắc cho tất cả các phần tử trong trang web như được minh họa trong ví dụ sau:
* {
color: purple;
font-size: large;
}
Bộ chọn *
không phải là phương pháp duy nhất để áp dụng quy tắc kiểu cho toàn bộ phần tử trong trang. Một bộ chọn mà chỉ khớp một phần tử theo tên thẻ của nó sẽ được gọi là bộ chọn kiểu; do đó, bất kỳ tên thẻ HTML nào (chẳng hạn như body
, p
, table
, em
, v.v.) cũng đều có thể được sử dụng làm bộ chọn. Trong CSS, kiểu của phần tử mẹ sẽ được các phần tử con của nó kế thừa. Vì vậy, trong thực tế, việc sử dụng bộ chọn *
có tác dụng tương tự như việc áp dụng một quy tắc cho phần tử body
:
body {
color: purple;
font-size: large;
}
Hơn nữa, tính năng xếp tầng của CSS sẽ cho phép bạn tinh chỉnh các đặc tính kế thừa của một phần tử. Bạn có thể viết quy tắc CSS chung áp dụng cho toàn bộ các phần tử trong trang, sau đó viết quy tắc cho các phần tử hoặc các tập hợp phần tử cụ thể.
Nếu một phần tử cùng khớp với hai hoặc nhiều quy tắc xung đột, trình duyệt sẽ áp dụng quy tắc từ bộ chọn cụ thể nhất. Hãy lấy các quy tắc CSS sau đây làm ví dụ:
body {
color: purple;
font-size: large;
}
li {
font-size: small;
}
Trình duyệt sẽ áp dụng kiểu color: purple
và font-size: large
cho tất cả các phần tử bên trong phần tử body
. Tuy nhiên, nếu có các phần tử li
trong trang, trình duyệt sẽ thay thế kiểu font-size: large
bằng kiểu font-size: small
bởi bộ chọn li
có mối quan hệ chặt chẽ với ` li` hơn bộ chọn body
.
CSS không giới hạn số lượng bộ chọn tương đương trong cùng một biểu định kiểu; vì vậy, ta có thể có hai hoặc nhiều quy tắc sử dụng cùng một bộ chọn:
li {
font-size: small;
}
li {
font-size: x-small;
}
Trong trường hợp này, cả hai quy tắc đều áp dụng cho phần tử li
. Trình duyệt không thể áp dụng các quy tắc xung đột; do đó, trình duyệt sẽ chọn quy tắc xuất hiện sau trong tệp CSS. Để tránh nhầm lẫn, chúng ta nên nhóm tất cả các thuộc tính sử dụng cùng một bộ chọn lại với nhau.
Thứ tự các quy tắc xuất hiện trong biểu định kiểu sẽ ảnh hưởng đến cách chúng được áp dụng trong tài liệu, nhưng ta có thể ghi đè lên hành vi này bằng cách sử dụng quy tắc important
(quan trọng). Nếu vì bất kỳ lý do gì mà bạn muốn giữ hai quy tắc li
riêng biệt, nhưng cũng muốn bắt buộc áp dụng quy tắc đầu tiên thay vì quy tắc thứ hai, hãy đánh dấu quy tắc đầu tiên là quan trọng:
li {
font-size: small !important;
}
li {
font-size: x-small;
}
Bạn cần thận trọng khi sử dụng các quy tắc được đánh dấu bằng !important
vì chúng sẽ phá vỡ tầng biểu định kiểu tự nhiên và khiến việc tìm và khắc phục sự cố trong tệp CSS trở nên khó khăn hơn.
Bộ chọn Hạn chế
Chúng ta đã thấy rằng có thể thay đổi một số đặc tính kế thừa nhất định bằng cách sử dụng bộ chọn khớp với các thẻ cụ thể. Tuy nhiên, chúng ta thường sẽ cần sử dụng các kiểu riêng biệt cho các phần tử cùng loại.
Các thuộc tính của thẻ HTML có thể được kết hợp vào bộ chọn để hạn chế tập hợp các phần tử mà chúng tham chiếu. Giả sử trang HTML mà bạn đang xử lý có hai loại danh sách không có thứ tự (<ul>
): một loại được sử dụng ở đầu trang làm menu cho các phần của trang web và loại còn lại được sử dụng cho danh sách thông thường trong phần thân văn bản:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
<div id="content">
<p>The three rocky planets of the solar system are:</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ul>
<p>The outer giant planets made most of gas are:</p>
<ul>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div><!-- #content -->
<div id="footer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
</body>
</html>
Theo mặc định, mỗi danh mục sẽ có một hình tròn màu đen ở bên trái của nó. Có thể bạn sẽ muốn xóa các hình tròn này khỏi danh sách menu trên cùng trong khi để lại các hình tròn trong danh sách còn lại. Tuy nhiên, ta không thể chỉ đơn giản sử dụng bộ chọn li
vì làm như vậy cũng sẽ loại bỏ các hình tròn trong các danh sách khác bên trong nội dung văn bản. Chúng ta sẽ cần một cách để yêu cầu trình duyệt chỉ sửa đổi các danh mục trong một danh sách nhất định chứ không phải danh sách khác.
Có một số cách để viết các bộ chọn khớp với các phần tử cụ thể trong trang. Như đã đề cập trước đó, trước tiên, chúng ta sẽ xem thử cách sử dụng các thuộc tính của phần tử để thực hiện điều này. Riêng đối với ví dụ này, chúng ta có thể sử dụng thuộc tính id
để chỉ định duy nhất danh sách ở trên cùng.
Thuộc tính id
sẽ gán một mã định danh duy nhất cho phần tử tương ứng mà chúng ta có thể sử dụng làm bộ chọn của quy tắc CSS. Trước khi viết quy tắc CSS, hãy chỉnh sửa tệp HTML mẫu và thêm id="topmenu"
vào phần tử ul
được sử dụng cho menu trên cùng:
<ul id="topmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
Đã có một phần tử link
trong phần head
của tài liệu HTML trỏ đến tệp biểu định kiểu style.css
trong cùng một thư mục. Vì vậy, chúng ta có thể thêm các quy tắc CSS sau vào đó:
ul#topmenu {
list-style-type: none
}
Dấu thăng được sử dụng trong bộ chọn theo sau một phần tử là để chỉ định một ID (không có dấu cách ngăn cách chúng). Tên thẻ ở bên trái của dấu thăng là tùy chọn vì sẽ không có phần tử nào khác có cùng ID. Do đó, bộ chọn có thể được viết dưới dạng #topmenu
.
Mặc dù đặc tính list-style-type
không phải là đặc tính trực tiếp của phần tử ul
, nhưng các thuộc tính CSS của phần tử mẹ sẽ được kế thừa bởi các phần tử con của nó. Vì vậy, kiểu được gán cho phần tử ul
sẽ được kế thừa bởi các phần tử li
con của nó.
Không phải tất cả các phần tử đều sẽ có ID riêng để có thể được chọn. Chỉ một vài phần tử bố cục chính trong một trang được coi là có ID. Ví dụ: lấy danh sách các hành tinh được sử dụng trong mã mẫu. Mặc dù có thể gán các ID duy nhất cho từng phần tử lặp lại riêng lẻ như thế này, nhưng phương pháp này không thực tế đối với các trang dài có nhiều nội dung. Thay vào đó, chúng ta có thể sử dụng ID của phần tử div
gốc làm bộ chọn để thay đổi đặc tính của các phần tử bên trong nó.
Tuy nhiên, phần tử div
lại không liên quan trực tiếp đến danh sách HTML. Vì vậy, việc thêm thuộc tính list-style-type
vào phần tử này sẽ không ảnh hưởng đến phần tử con của nó. Do đó, để thay đổi hình tròn màu đen trong danh sách bên trong nội dung div
thành hình tròn rỗng, chúng ta nên sử dụng bộ chọn hậu duệ:
#topmenu {
list-style-type: none
}
#content ul {
list-style-type: circle
}
Bộ chọn #content ul
được gọi là bộ chọn hậu duệ vì nó chỉ khớp với các phần tử ul
là phần tử con của phần tử có ID là content
. Chúng ta có thể sử dụng nhiều cấp độ hậu duệ nếu cần. Ví dụ: sử dụng #content ul li
sẽ chỉ khớp với các phần tử li
là phần tử con của phần tử ul
, ul
cũng lại là phần tử con của phần tử có ID là content
. Nhưng trong ví dụ này, bộ chọn #content ul li
sẽ có tác dụng tương tự như khi sử dụng #content ul
bởi vì các phần tử li
sẽ kế thừa các đặc tính CSS được đặt cho phần tử mẹ của chúng là ul
. Bộ chọn hậu duệ là một kỹ thuật thiết yếu khi bố cục trang ngày càng trở nên phức tạp hơn.
Giả sử bây giờ ta muốn thay đổi đặc tính font-style
(kiểu chữ) của các danh mục trong danh sách topmenu
và trong danh sách trong phần footer div để biến chúng thành chữ nghiêng đậm. Ta không thể chỉ viết một quy tắc CSS bằng cách sử dụng ul
làm bộ chọn bởi vì nó cũng sẽ thay đổi các danh mục trong content div. Cho đến nay, chúng ta đã thay đổi các đặc tính CSS bằng cách sử dụng mỗi lần một bộ chọn. Phương pháp này cũng có thể được sử dụng cho tác vụ trước mắt:
#topmenu {
font-style: oblique
}
#footer ul {
font-style: oblique
}
Tuy nhiên, các bộ chọn riêng biệt không phải là cách duy nhất để làm điều đó. CSS cho phép chúng ta nhóm các bộ chọn có chung một hoặc nhiều kiểu bằng cách sử dụng danh sách các bộ chọn được phân tách bằng dấu phẩy:
#topmenu, #footer ul {
font-style: oblique
}
Việc nhóm các bộ chọn sẽ giúp ta giảm thiểu việc viết đi viết lại các kiểu trùng lặp. Hơn nữa, chúng ta có thể sẽ muốn thay đổi đặc tính một lần nữa trong tương lai và sẽ không thể nhớ được tất cả các vị trí khác nhau của đặc tính đó.
Hạng
Nếu không muốn lo lắng quá nhiều về hệ thống phân cấp phần tử, ta chỉ cần thêm class
(hạng) vào tập hợp các phần tử mà mình muốn tùy chỉnh. Hạng cũng tương tự như ID, nhưng thay vì chỉ xác định một phần tử duy nhất trong trang, chúng có thể xác định một nhóm phần tử có chung đặc điểm.
Lấy ví dụ như trang HTML mẫu mà chúng ta đang xử lý. Trong các trang thực tế, không chắc chúng ta có thể tìm thấy các cấu trúc đơn giản như vậy. Vì vậy, sẽ thực tế hơn nếu ta chọn một phần tử chỉ bằng cách sử dụng các hạng hoặc kết hợp các hạng và hậu duệ. Để áp dụng thuộc tính font-style: oblique
cho các danh sách menu bằng cách sử dụng hạng, trước tiên, chúng ta cần thêm thuộc tính class
vào các thành phần trong tệp HTML. Chúng ta sẽ làm điều này với menu trên cùng đầu tiên:
<ul id="topmenu" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
Và sau đó trong menu chân trang:
<div id="footer">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
Cùng với đó, chúng ta có thể thay thế nhóm bộ chọn #topmenu, #footer ul
bằng bộ chọn dựa trên hạng .menu
:
.menu {
font-style: oblique
}
Như với bộ chọn dựa trên ID, việc thêm tên thẻ vào bên trái dấu chấm trong bộ chọn dựa trên hạng là tùy chọn. Tuy nhiên, không giống như ID, cùng một hạng nên được sử dụng trong nhiều phần tử và các phần tử đó thậm chí không cần phải là cùng loại với nhau. Do đó, nếu hạng menu
được chia sẻ giữa các loại phần tử khác nhau thì việc sử dụng bộ chọn ul.menu
sẽ chỉ khớp với các phần tử ul
có hạng menu
. Thay vào đó, việc sử dụng .menu
làm bộ chọn sẽ khớp với bất kỳ phần tử nào có hạng menu
, bất kể nó thuộc loại gì.
Hơn nữa, các phần tử có thể được liên kết với nhiều hạng khác nhau. Chúng ta có thể phân biệt giữa menu trên cùng và menu dưới cùng bằng cách thêm một hạng bổ sung cho mỗi menu:
<ul id="topmenu" class="menu top">
Và trong menu chân trang:
<ul class="menu footer">
Khi thuộc tính class
có nhiều hơn một hạng, chúng phải được phân tách bằng dấu cách. Bây giờ, ngoài quy tắc CSS được chia sẻ giữa các phần tử của hạng menu
, chúng ta có thể xử lý menu trên cùng và menu chân trang bằng cách sử dụng các hạng tương ứng của chúng:
.menu {
font-style: oblique
}
.menu.top {
font-size: large
}
.menu.footer {
font-size: small
}
Hãy lưu ý rằng cách viết .menu.top
sẽ khác với .menu .top
(có dấu cách giữa các từ). Bộ chọn đầu tiên sẽ khớp với các phần tử có cả hai hạng menu
và top
, trong khi bộ chọn thứ hai sẽ khớp với các phần tử có hạng top
và một phần tử mẹ có hạng menu
.
Bộ chọn Đặc biệt
Bộ chọn CSS cũng có thể khớp với trạng thái động của các phần tử. Các bộ chọn này đặc biệt hữu ích cho các phần tử tương tác, chẳng hạn như siêu liên kết. Có thể bạn sẽ cần sự xuất hiện của các siêu liên kết khi con trỏ chuột di chuyển qua chúng để thu hút sự chú ý của khách truy cập.
Quay lại trang mẫu của chúng ta, ta có thể xóa phần gạch chân khỏi các liên kết trong menu trên cùng và chỉ hiển thị một dòng duy nhất khi con trỏ chuột di chuyển qua liên kết tương ứng. Để làm được điều này, trước tiên, chúng ta phải viết một quy tắc để xóa phần gạch chân khỏi các liên kết trong menu trên cùng:
.menu.top a {
text-decoration: none
}
Sau đó, chúng ta sử dụng hạng giả :hover
(di qua) trên cùng các phần tử đó để tạo quy tắc CSS sẽ chỉ áp dụng khi con trỏ chuột di chuyển đến phần tử tương ứng:
.menu.top a:hover {
text-decoration: underline
}
Bộ chọn hạng giả :hover
sẽ chấp nhận tất cả các đặc tính CSS của các quy tắc CSS thông thường. Các hạng giả khác bao gồm :visited
(đã truy cập) - phù hợp với các siêu liên kết đã được truy cập và :focus
(tập trung) - phù hợp với các phần tử biểu mẫu đã vào tiêu điểm.
Bài tập Hướng dẫn
-
Giả sử một trang HTML có một biểu định kiểu được liên kết với nó có chứa hai quy tắc sau:
p { color: green; } p { color: red; }
Trình duyệt sẽ áp dụng màu gì cho văn bản bên trong các phần tử
p
? -
Sự khác biệt giữa việc sử dụng bộ chọn ID
div#main
và#main
là gì? -
Bộ chọn nào sẽ phù hợp với tất cả các phần tử
p
được sử dụng bên trongdiv
với thuộc tính ID#main
? -
Sự khác biệt giữa việc sử dụng bộ chọn hạng
p.highlight
và.highlight
là gì?
Bài tập Mở rộng
-
Hãy viết một quy tắc CSS duy nhất để thay đổi đặc tính
font-style
thànhoblique
. Quy tắc chỉ được khớp với các phần tửa
bên trong<div id="sidebar"></div>
hoặc<ul class="links"></ul>
. -
Giả sử bạn muốn thay đổi kiểu của các phần tử có thuộc tính
class
được đặt thànharticle reference
như trong<p class="article reference">
. Tuy nhiên, bộ chọn.article .reference
dường như lại không làm thay đổi diện mạo của chúng. Tại sao bộ chọn lại không khớp với các phần tử như được mong đợi? -
Hãy viết một quy tắc CSS để thay đổi đặc tính
color
của tất cả các liên kết đã truy cập trong trang thànhred
.
Tóm tắt
Bài học này đã đề cập tới cách sử dụng bộ chọn CSS và cách trình duyệt quyết định kiểu nào sẽ áp dụng cho phần tử nào. Tách biệt với phần đánh dấu HTML, CSS cung cấp nhiều bộ chọn để khớp với các phần tử riêng lẻ hoặc nhóm phần tử trong trang. Bài học đã đi qua các khái niệm và quy trình sau:
-
Kiểu Trang Tổng thể và Kế thừa Kiểu.
-
Tạo kiểu cho các phần tử theo loại.
-
Sử dụng ID phần tử và hạng làm bộ chọn.
-
Bộ chọn kết hợp.
-
Sử dụng các hạng giả để thiết kế động cho các phần tử.
Đáp án Bài tập Hướng dẫn
-
Giả sử một trang HTML có một biểu định kiểu được liên kết với nó có chứa hai quy tắc sau:
p { color: green; } p { color: red; }
Trình duyệt sẽ áp dụng màu gì cho văn bản bên trong các phần tử
p
?Màu đỏ (
red
). Khi hai hoặc nhiều bộ chọn tương đương có thuộc tính xung đột, trình duyệt sẽ chọn bộ chọn cuối cùng. -
Sự khác biệt giữa việc sử dụng bộ chọn ID
div#main
và#main
là gì?Bộ chọn
div#main
sẽ khớp với phần tửdiv
có IDmain
, trong khi bộ chọn#main
sẽ khớp với phần tử có IDmain
bất kể nó thuộc loại gì. -
Bộ chọn nào sẽ phù hợp với tất cả các phần tử
p
được sử dụng bên trongdiv
với thuộc tính ID#main
?Bộ chọn
#main p
hoặcdiv#main p
. -
Sự khác biệt giữa việc sử dụng bộ chọn hạng
p.highlight
và.highlight
là gì?Bộ chọn
p.highlight
sẽ chỉ khớp với các phần tử thuộc loạip
có hạnghighlight
, trong khi bộ chọn.highlight
sẽ khớp với tất cả các phần tử có hạnghighlight
bất kể chúng thuộc loại gì.
Đáp án Bài tập Mở rộng
-
Hãy viết một quy tắc CSS duy nhất để thay đổi đặc tính
font-style
thànhoblique
. Quy tắc chỉ được khớp với các phần tửa
bên trong<div id="sidebar"></div>
hoặc<ul class="links"></ul>
.#sidebar a, ul.links a { font-style: oblique }
-
Giả sử bạn muốn thay đổi kiểu của các phần tử có thuộc tính
class
được đặt thànharticle reference
như trong<p class="article reference">
. Tuy nhiên, bộ chọn.article .reference
dường như lại không làm thay đổi diện mạo của chúng. Tại sao bộ chọn lại không khớp với các phần tử như được mong đợi?Bộ chọn
.article .reference
sẽ khớp với các phần tử có hạngreference
là hậu duệ của các phần tử có hạngarticle
. Để khớp các phần tử có cả hai hạngarticle
vàreference
, bộ chọn phải là.article.reference
(không có khoảng cách giữa chúng). -
Hãy viết một quy tắc CSS để thay đổi đặc tính
color
của tất cả các liên kết đã truy cập trong trang thànhred
.a:visited { color: red; }