Bộ chọn CSS (CSS selector) đóng vai trò rất quan trọng, vì nếu bạn chọn sai thì các quy tắc CSS đó sẽ không được thực thi hoặc thực thi không đúng chỗ. Vì thế bạn nên nắm rõ quy tắc Bộ chọn CSS (CSS selector). Bài này quan trọng nên tôi sẽ viết kỹ.
1. CSS Selector (Bộ chọn CSS)
Bộ chọn CSS được sử dụng để “tìm” (hoặc chọn) phần tử HTML dựa trên tên thẻ, id, class, thuộc tính (attribute) của chúng … (hầu như bạn có thể chọn bất cứ cái gì bên trong cặp thẻ <body>)
Bạn chỉ cần nhớ rằng Bộ chọn CSS có thể là tên thẻ HTML hoặc thuộc tính của HTML.
2. Bộ chọn CSS dựa trên tên thẻ
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
Như hình trên bộ chọn CSS là thẻ p. Có tên thuộc tính CSS lần lượt là text-align và color. Có giá trị lần lượt là center và red.
3. Bộ chọn CSS dựa trên id
Bộ chọn CSS dựa trên id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.
id của một phần tử phải là duy nhất trong một trang, vì vậy bộ chọn CSS dựa trên id được sử dụng để chọn một phần tử duy nhất!
Cú pháp: #tên-id
Như hình trên bạn thấy thẻ <p> nào có id=”ten” mới được áp dụng kiểu CSS.
Lưu ý:
+ Một tên id không thể bắt đầu bằng một số!
4. Bộ chọn CSS dựa trên class
Một class có thể được sử dụng cho nhiều thẻ trên một trang tập tin HTML, còn id thì chỉ được sử dụng một lần duy nhất cho một thẻ.
Cú pháp: .tên-class
Như hình trên bạn thấy thẻ nào có class=”center” sẽ được áp dụng CSS
Lưu ý:
+ Một tên class không thể bắt đầu bằng một số!
+ Như hình trên ngoài cách viết .center còn có một cách viết bộ chọn theo class khác là viết kèm theo tên thẻ đang sử dụng class đó như p.center, lưu ý là phải viết sát nhau.
+ Một thẻ có thể sẽ chứa nhiều class khác nhau và mỗi tên class sẽ được cách nhau bởi khoảng trắng.
Như hình trên tại bộ chọn bạn đã chỉ định là thẻ p (p.center và p.large) nên khi bạn áp dụng class cho thẻ h1 thì nó sẽ không thực thi class đó.
5. Bộ chọn CSS dựa trên nhóm
Nếu bạn có các phần tử với các định nghĩa kiểu giống nhau, như sau
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Sẽ tốt hơn nếu nhóm các bộ chọn, để giảm thiểu code.
Để nhóm bộ chọn, hãy tách riêng từng bộ chọn bằng dấu phẩy.
Trong ví dụ dưới đây tôi đã nhóm các bộ chọn từ code trên.
6. Các ví dụ
6.1 Ví dụ 1
Giả sử tôi có đoạn code như bên dưới. Bây giờ tôi muốn từ lớp 1 đến lớp 5 có chữ màu đỏ, cỡ chữ 30px thì phải làm sao?
<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>Lớp 1</li> <li>Lớp 2</li> <li>Lớp 3</li> <li>Lớp 4</li> <li>Lớp 5</li> </ul> <ul> <li>Lớp 6</li> <li>Lớp 7</li> <li>Lớp 8</li> <li>Lớp 9</li> </ul> </body> </html>
Tôi sẽ làm như hình dưới
6.2 Ví dụ 2
Giả sử tôi có đoạn code như bên dưới. Bây giờ tôi muốn lớp 1A, lớp 1B, lớp 1C, lớp 2A, lớp 2B, lớp 2C có chữ màu đỏ, cỡ chữ 30px thì phải làm sao?
<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>Lớp 1 <ul> <li>Lớp 1A</li> <li>Lớp 1B</li> <li>Lớp 1C</li> </ul> </li> <li>Lớp 2 <ul> <li>Lớp 2A</li> <li>Lớp 2B</li> <li>Lớp 2C</li> </ul> </li> <li>Lớp 3</li> </ul> </body> </html>
Tôi sẽ làm như hình dưới
6.3 ví dụ 3
Giả sử tôi có đoạn code như bên dưới. Bây giờ tôi muốn lớp 1A, lớp 1B có chữ màu xanh da trời (blue) và lớp 2A, lớp 2B có chữ màu đỏ thì phải làm sao?
<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>Lớp 1 <ul> <li>Lớp 1A</li> <li>Lớp 1B</li> </ul> </li> <li>Lớp 2 <ul> <li>Lớp 2A</li> <li>Lớp 2B</li> </ul> </li> <li>Lớp 3</li> </ul> </body> </html>
Tôi sẽ làm như hình dưới
7. Các bài tập
7.1 Bài tập 1
Thay đổi màu sắc của tất cả các phần tử <p> thành “màu đỏ”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn.</p> <p>Đoạn văn khác.</p> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
7.2 Bài tập 2
Thay đổi màu sắc của phần tử với id = “doanvan”, thành “đỏ”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p id="doanvan">Đoạn văn.</p> <p>Đoạn văn khác.</p> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
#doanvan {
color: red;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p id="doanvan">Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
7.3 Bài tập 3
Thay đổi màu của tất cả các phần tử với class “colortext”, thành “đỏ”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn.</p> <p class="colortext">Đoạn văn khác.</p> <p class="colortext">Đoạn văn khác nữa.</p> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
.colortext {
color: red;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
<p class="colortext">Đoạn văn khác.</p>
<p class="colortext">Đoạn văn khác nữa.</p>
</body>
</html>
7.4 Bài tập 4
Thay đổi màu sắc của tất cả các phần tử <p> và <h1>, thành “màu đỏ”. Nhóm bộ chọn để giảm thiểu code.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề lớn</h1> <h2>Tiêu đề nhỏ hơn</h2> <p>Đoạn văn.</p> <p>Đoạn văn khác.</p> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
h1, p {
color: red;
}
</style>
</head>
<body>
<h1>Tiêu đề lớn</h1>
<h2>Tiêu đề nhỏ hơn</h2>
<p>Đoạn văn.</p>
<p>Đoạn văn khác.</p>
</body>
</html>
8. Lời cuối bài
Đến đây là kết thúc bài viết những điều cần biết về bộ chọn (selector) trong CSS. Ở bài sau tôi sẽ viết về cách tạo kiểu nền (Background) trong CSS.
The post [CSS bài 5] Những điều cần biết về bộ chọn (selector) trong CSS appeared first on Học online.
from WordPress http://ift.tt/2etFcSZ
via IFTTT
