TÌM HIỂU VỀ SELECTOR – ID & CLASS – SERIE CSS – 3
Selector trong CSS đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn là kỹ thuật quan trọng đầu tiên khi bạn sử dụng CSS.
Selector trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ <body> đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất, ngoài ra còn có các kiểu sử dụng vùng chọn nâng cao khác mình sẽ nói ở gần cuối serie.
Selector là gì?
Trong CSS, selector nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì selector của bạn sẽ là h1.
Selector có thể là tên thẻ HTML hoặc thuộc tính của HTML.
Các loại Selector cơ bản
Selector dựa vào tên thẻ
Kiểu selector này là đơn giản nhất, đó là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa vào tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối style cho toàn bộ thẻ <h1> trong website thì sẽ có đoạn CSS sau với thẻ h1.
Dĩ nhiên với kiểu sử dụng này thì toàn bộ các thẻ <h1> HTML trong website được chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết CSS cho một khu vực độc lập.
Selector ID
Selector ID (tên định danh) nghĩa là bạn có thể chọn một phần tử cụ thể dựa vào giá trị của thuộc tính id trong thẻ HTML. Sở dĩ id được sử dụng để chọn một phần tử cụ thể là vì trên một trang tài liệu HTML thì mỗi phần tử phải mang một id riêng biệt không trùng nhau.
Id được thiết lập dựa vào thuộc tính id trong thẻ HTML và bất cứ thẻ nào cũng có thể sử dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng #tên-id đặt trước tên id để phân biệt với các loại vùng chọn khác. Ví dụ ta có thẻ h1 với id là “tên-id”, và ta muốn text của thẻ h1 này có màu đỏ :
<h1 id="tên-id"> Thẻ H1</h1> Thì ta dùng như sau:
tên-id { color : red}Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ h1 nhưng mình muốn viết CSS cho một thẻ h1 cụ thể nào đó thì sẽ đặt id riêng cho phần tử mà mình cần viết CSS thay vì sử dụng vùng chọn dựa theo tên thẻ.
Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử dụng id đó như h1#tên-id, lưu ý là phải viết sát nhau.
Hãy lưu ý rằng, một thẻ có thể sẽ chứa nhiều id khác nhau và mỗi tên id sẽ được cách nhau bởi khoảng trắng như thế này.
<h1 id="tên-id tên-id-2"> Thẻ H1 - 2 </h1> Selector Class
Class (lớp) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của class là một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì chỉ được sử dụng một lần duy nhất cho một phần tử.
Class được khai báo trong một phần tử HTML bởi thuộc tính class như <h1 class=”tên-class”> . Khi khai báo vùng chọn class trong CSS, thì tên class phải được đặt sau dấu chấm ( .tên-class ). Ví dụ về cách sử dụng class linh hoạt:
Cũng giống như id, class cũng có thể được viết kèm theo tên thẻ kiểu h1.tên-class và phải viết liền nhau.
Selector theo thứ cấp.
Cái này là gọi chung chứ mình gọi là Selector combo :D.
Kiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho website đó là chọn phần tử theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó.
Ví dụ mình có một đoạn HTML thế này :
<ul class=”menu”>
<li>Thẻ li 1</li>
<li>Thẻ li 2</li>
</ul>
<ul class=”menu2″>
<li>Thẻ li 1</li>
<li class=”menu-li-2″>Thẻ li 2</li>
</ul>Chúng ta sẽ viết như sau:
ul.menu li {
color:red;
}Kết quả trả về sẽ là :
Lưu ý là Class và ID tương tự nhau. Và trong quá trình làm quen với CSS bạn sẽ gặp những trường hợp như vầy rất nhiều.
Và tương tự nếu thẻ lồng trong thẻ thì chúng ta cứ việc gọi liên tục theo cú pháp :
thẻ-1 > thẻ-1-1 > thẻ-1-2 > thẻ-1-2-1 .v.v.hoặc
thẻ-1 thẻ-1-1 thẻ-1-2 thẻ-1-2-1 .v.v.Cả 2 cách viết đều sử dụng như nhau được ?
Ở trên là những kiểu thiết lập selector để viết CSS mà bạn sẽ thường xuyên sử dụng nhất, hầu như là dùng liên tục sau này khi viết CSS cho website nên bạn hãy cố gắng luyện tập cách sử dụng nhuần nhuyễn nhất có thể nhé.
Các bạn còn vướng mắc chỗ nào xin vui lòng để lại comment bên dưới, mình sẽ giải đáp ? .
Ở bài sau chúng ta đến với đơn vị trong css ( giống như milimet, centimet trong toán học ? ).