Bài 2 - CSS Selector

Để có thể định dạng cho một phần tử trên trang web chúng ta cần phải chọn ra phần tử đó. Cách chọn một phần tử như vậy được gọi là 1 CSS selector. CSS selector là kiến thức mà bạn cần phải nắm vững trước khi học CSS.

Thông thường chúng ta thường hay sử dụng môt trong các CSS selector bên dưới đây

• Tag CSS selector
• ID CSS selector
• Class CSS selector
• CSS selector kết hợp giữa tag/id/class
• Attribute CSS selector

Tag CSS selector

Đối với loại CSS selector này chúng ta sẽ định dạng cho phần tử bằng cách chọn theo tên thẻ

Ví dụ: 

p {color:blue;font-size:12px}

 Trong ví dụ trên chúng ta quy định tất cả các đoạn văn bản trên web sẽ có màu chữ là màu xanh dương và kích thước font chữ là 12px.

ID CSS selector

Với loại CSS selector này chúng ta sẽ chọn phần tử theo ID, mỗi phần tử HTML trên trang web chỉ có duy nhất một ID, nếu như bạn đặt 2 phần tử với cùng 1 ID thì chỉ có phần tử với ID đầu tiên sẽ được chọn và áp dụng hiệu ứng CSS.

Ví dụ:

#menu {background-color: green} 

 Trong ví dụ này chúng ta chỉ định phần tử HTML với id="menu" sẽ có màu nền là màu xanh (ví dụ <nav id="menu">). Do ID CSS selector có độ ưu tiên lớn hơn so với các loại CSS selector còn lại nên chúng ta có thể sử dụng ID CSS selector để override lại các thuộc tính CSS đã được thiết lập trước đó trên phần tử.

Class CSS selector

Đối với loại CSS selector này thì chúng ta sẽ chọn CSS theo class của phần tử HTML. Tất cả các phần tử có cùng class với nhau sẽ được áp dụng cùng một hiệu ứng CSS. Bằng cách sử dụng Class CSS selector chúng ta sẽ dễ dàng sử dụng lại các định dạng CSS cho các phần tử với cùng class.

Ví dụ:

.tieude {font-weight: bold}

 Với định dạng CSS trên chúng ta sẽ in đậm nội dung văn bản của các phần tử HTML với class="tieude"

CSS selector kết hợp giữa tag/id/class

Trong một số trường hợp chúng ta có thể sẽ phải kết hợp giữa tag / class / id để có thể chọn ra một phần tử HTML.

Ví dụ:

#menu a {text-decoration: none} 

Nếu như chúng ta chỉ sử dụng thẻ a thì định dạng CSS sẽ áp dụng lên toàn bộ các liên kết trên website, trong trường hợp này bằng cách đăt thêm id của phần tử ở phía trước chúng ta có thể dễ dàng giới hạn hiệu ứng CSS chỉ áp dụng lên thẻ a trong phần tử với id="menu"

Attribute CSS selector

Cách này thường ít khi sử dụng và phần lớn được sử dụng để định dạng cho các phần tử trong form.

Ví dụ:

input[type=”text”] {border-color: blue}

Ở đây chúng ta sẽ thiết lập màu viền cho textfield trên toàn bộ trang web là màu xanh dương.

Đối với một trang web có nhiều thành phần có cùng một số thuộc tính,chúng ta có thể thực hiện gom các CSS selector lại và ngăn cách nhau bằng dấu ,

Ví dụ:

.filter input[type=text], .filter select {
		background-color: #fff;
}