Bài 3: Các bộ chọn CSS – CSS Selectors
Nội dung
Các bộ chọn CSS
Các bộ chọn của CSS cho phép bạn chọn và thực thi định dạng cho các phần tử HTML.
Các bộ chọn của CSS thường được sử dụng để “tìm” (hoặc lựa chọn) các phần tử HTML dựa trên id, class, type, thuộc tính (attribute) ….
Bộ chọn phần tử – Element Selector
Bộ chọn phần tử là tên của thẻ HTML được dùng để định nghĩa các định dạng cho thẻ đó.
Bạn có thể chọn định dạng tất cả thẻ <p> trên một trang ví dụ như thẻ <p> này sẽ được căn lề vào giữa (center-aligned), với màu đỏ cho phần màu text). Người ta hay dùng bộ chọn này để định nghĩa các thẻ có cùng định dạng trên tất cả trang.
Ví dụ
p {
text-align: center;
color: red;
}
Sử dung dưới đây, các phần tử <p> có sẽ có cùng định dạng:
<p>Every paragraph will be affected by the style.</p>
<p id=”para1″>Me too!</p>
Bộ chọn Id – Id Selector
Bộ chọn Id sử dụng thuộc tính Id của phần tử HTML để chọn phần tử đó.
Một Id nên là duy nhất trong một trang. Với bộ chọn Id, bạn chỉ định dạng trên phần tử HTML duy nhất này.
Để chọn một phần tử với một Id cụ thể, đặt tên bộ chọn trùng với tên của Id của thẻ cùng với dấu #.
Quy luật định kiểu dưới đây được áp dụng cho phân tử HTML có id=”para1″:
Ví dụ
#para1 {
text-align: center;
color: red;
}
Sử dụng bộ chọn như sau:
<p id=”para1″>Hello World!</p>
 |
Không bắt đầu tên ID với chữ số! |
|---|
Bộ chọn class – Class Selector
Bộ chọn class chọn các phần tử HTML cụ thể dựa vào thuộc tính class.
Bộ chọn class có thể đặt tên bất kỳ, theo sau dấu chấm.
Trong ví dụ dưới, tất cả các phần tử HTML với class = “center” sẽ bị căn vào giữa:
Ví dụ
.center {
text-align: center;
color: red;
}
Sử dụng như sau:
<p class=”center”>Red and center-aligned paragraph.</p>
Bạn cũng có thể chỉ rõ phần tử HTML cụ thể nào sẽ bị ảnh hưởng bởi riêng một bộ chọn class nào đó. Ví dụ dưới, tất cả các phần tử <p> với class=”center” sẽ được căn giữa:
Ví dụ
p.center {
text-align: center;
color: red;
}
Với ví dụ sử dụng bên dưới thì chỉ thẻ <p> dùng được định dạng trên.
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
|
Không bắt đầu tên class với chữ số! |
|---|
Bộ chọn nhóm – Grouping Selectors
Nếu bạn có các phần tử mà có cùng định nghĩa kiểu như sau:
h1 {
text-align: center;
color: red;
}h2 {
text-align: center;
color: red;
}p {
text-align: center;
color: red;
}
Bạn có thể nhóm các bộ chọn để giảm thiểu code. Để nhóm các bộ chọn, ngăn cách mỗi bộ chọn bằng dấu phảy.
Ví dụ bên dưới bạn đã nhóm các bộ chọn từ code ở trên:
Ví dụ
h1, h2, p {
text-align: center;
color: red;
}
Lúc này các thẻ h1, h2, p có cùng định dạng:
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
Tôi đọc bài này giờ tôi mới hiểu rõ hơn về CSS. Cảm ơn tác giả