Pseudo classes phân loại các thành phần dựa vào các yếu tố khác thay vì dựa vào tên, thuộc tính hay nội dung như các selector khác. Pseudo classes có tính động, có nghĩa là 1 thành phần có thể có được hoặc mất đi 1 pseudo class khi người dùng tương tác với thành phần đó (trừ :first- child và :last-child có thể rút trích ra từ document tree).
:first-child và :last-child - Chọn con đầu tiên hoặc con cuối cùng của một thành phần.
Ví dụ: giả sử có đoạn mã HTML sau
<div>
<h1> Welcome </h1> <p> Nha Trang City </p> <strong> 2013 </strong> </div>
với các định dạng
div:first-child {color : red;} /* Định dạng nội dung của thẻ h1 có màu đỏ */
div:last-child {color : blue;} /* Định dạng nội dung của thẻ strong có màu xanh */
:link - Thường được dùng với thẻ a nhằm định dạng liên kết chưa được truy cập.
Ví dụ: giả sử có đoạn mã HTML sau
<a class="external" href="http://out.side/">my link</a>
với định dạng
a.external:visited { color: blue }
:visited - Tương tự như :link nhưng dùng định dạng liên kết đã từng được truy cập.
:hover- có được khi người dùng di chuyển con trỏ chuột qua 1 thành phần nào đó.
:focus- có được khi 1 thành phần được chọn (focus)
:active - có được khi một thành phần được kích hoạt một sự kiện nào đó (ví dụ: sự
kiện diễn ra trong khoảng thời gian người dùng nhấn và thả một phím)
Ví dụ:
a:hover{ color: yellow;} a:active {font-size: 2em;}
input[type="text"]:focus {border: 1px solid red;}
Chú ý:Thứ tự ưu tiên của các selector
1. Id selector 2. Attribute selector 3. Class selector 4. Child selector
5. Adjacent sibling selector 6. Descendant selector 7. Type selector 8. Universal selector
Nếu như có nhiều selector cùng loại định dạng trên một thành phần trong cùng một mẫu định dạng thì selector được khai báo sau sẽ có độ ưu tiên cao hơn
Ví dụ: Xét mã HTML sau
<p>Hello <strong>World</strong></p>
với các định dạng
p strong {color:red;} strong {color:blue;}
thì từ "World" sẽ được định dạng chữ màu đỏ mặc dù trong mã CSS màu xanh định dạng sau vì định dạng chữ màu đỏ có độ ưu tiên cao hơn (Descendant selector so với Type selector).
3.2.Property (adsbygoogle = window.adsbygoogle || []).push({});
Là các thuộc tính quy định cách trình bày.
Ví dụ: background- color, font-family, color, padding, margin,…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì phân cách các thuộc tính bằng dấu ";". Tất cả các thuộc tính trong một selector sẽ được đặt trong cặp { } sau selector.
Ví dụ:
body { background:#FFF; color:#FF0000; font-size:14pt }
có thể viết các thuộc tính và giá trị thành các hàng riêng biệt
body { background : #FFF; color : #FF0000; font-size : 14pt } 3.3.Value
Mô tả giá trị của thuộc tính làm thay đổi định dạng thành phần được chọn của trang web.
Ví dụ:
body { background:#FFF; } /* Giá trị màu sắc của màu nền trang web là #FFF */
Đối với một giá trị có chứa khoảng trắng thì giá trị đó phải được đặt trong dấu nháy kép " "
hoặc nháy đơn ' '
Ví dụ:
font-family:"Times New Roman", Arial;
Đối với các giá trị là đơn vị đo, không đặt một khoảng cách giữa số đo với đơn vị của nó, nếu không thì định dạng đó sẽ bị vô hiệu hóa trên một số trình duyệt như FireFox.
Ví dụ:
không nên viết
font-size:14 pt;
mà phải viết
font-size:14pt;