Một trong những điểm mạnh của CSS, đó là ngôn ngữ này cho phép chúng ta tạo ra các đối tượng động, nghĩa là có thể thay đổi hình dáng, phản ứng với một số tương tác nhất định của người dùng ngay cả sau khi việc tải trang đã hoàn thành. Để thực hiện điều này, CSS cung cấp 1 tính năng mạnh mẽ : các định dạng giả.

Trong bài học này, chúng ta sẽ cùng tìm hiểu cách thay đổi ngoại hình của đối tượng :

• Khi trỏ chuột lên đối tượng
• Khi kích chuột lên đối tượng
• Khi đối tượng được chọn
• Khi đối tượng đường dẫn đã được duyệt

Nhiều bất ngờ thú vị đang ở phía trước !

Trong khuôn khổ bài học này, chúng ta sẽ tiếp xúc với nhiều định dạng giả khác nhau trong CSS. Cái đầu tiên mà tôi muốn giới thiệu với các bạn là :hover. Giống như tất cả các định dạng giả khác của CSS, đây là 1 khối thông tin mà chúng ta sẽ thêm vào sau tên thẻ hay tên lớp mà chúng ta chọn với CSS.

a:hover {
}

:hover mang ý nghĩa là « khi chuột trỏ lên đối tượng ». Vậy nên a:hover sẽ tương đương với « khi chuột trỏ lên thẻ a »

Nhờ đó, kể từ giờ, chúng ta có thể thoải mái áp dụng các thay đổi ngoại hình lên 1 đường dẫn được chuột trỏ vào. Tất cả phụ thuộc vào trí tưởng tượng của các bạn.

Dưới đây là 1 đoạn mã ngắn minh họa cách sử dụng định dạng giả lên các đường dẫn.

a { /* Duong dan mac dinh */
   text-decoration: none;
   color: red;
   font-style: italic;
}

a:hover { /* Duong dan khi duoc chuot tro len */
   text-decoration: underline;
   color: green;
}

Trong này, chúng ta đã định nghĩa 2 phiên bản đường dẫn trong 2 trạng thái : mặc định và khi được chuột trỏ lên.

Dưới đây là kết quả chúng ta nhận được.

Đơn giản quá, phải không ?

Dù đa phần trường hợp chúng ta sử dụng lên đường dẫn nhưng thực tế là chúng ta có thể sử dụng định dạng này lên bất cứ đối tượng nào. Ví dụ thay đổi hình thức văn bản của khổ văn bản khi chúng ta trỏ chuột lên đó.

p:hover { /* Khi tro chuot len kho van ban */
}

Chúng ta thậm chí có thể đi xa hơn nữa với CSS. Phần dưới đây thảo luận về cách chúng ta có thể thay đổi ngoại hình đối tượng khi chúng ta kích và giữ chuột trên nó hay khi chúng ta lựa chọn nó bằng cách sử dụng bàn phím.

Định dạng giả :active cho phép áp dụng thay đổi ngoại hình lên đối tượng vào thời điểm chúng ta ấn kích chuột trên nó. Về cơ bản thì thao tác này thường chỉ được sử dụng trên các đường dẫn.

Sự thay đổi ngoại hình của đường dẫn sẽ chỉ trong thời gian rất ngắn, chính xác là trong khoảng thời gian mà chúng ta nhấn và giữ chuột. Nói tóm lại, thay đổi này không phải lúc nào cũng dễ dàng quan sát.

Hãy thử nghiệm thay đổi màu nên của đường dẫn khi được ấn.

a:active { /* Khi nguoi dung an chuot len duong dan */
    background-color: #FFCC66;
}

Định dạng giả :focus được áp dụng khi đối tượng « được chọn ».

? Vậy « được chọn » là thế nào ?

Được chọn được hiểu là sau khi chúng ta kích chuột lên đối tượng hay khi dùng bàn phím để chọn đối tượng. Ví dụ dễ thấy nhất là ở 1 đường dẫn đã được ấn chuột, đường dẫn này được coi là được chọn và chúng ta sẽ thấy viền chấm nhỏ quanh nó.

! Định dạng giả này có thể áp dụng lên các thẻ HTML khác ngoài đường dẫn ví dụ như các thành phần của đối tượng bản khai mẫu.

a:focus { /* Sau khi nguoi dung chon duong dan */
    background-color: #FFCC66;
}

! Trong Google Chrome và Safari, hiệu ứng chỉ có thể thấy khi chúng ta giữ phím Tab.

Chúng ta có thể thay đổi hình dáng của 1 đường dẫn đã từng được duyệt. Mặc định thì các đường dẫn đó được trình duyệt tô màu tím.

Để thay đổi ngoại hình đối tượng này, chúng ta dùng đến định dạng giả :visited, nghĩa là đã duyệt qua. Trong thực tiễn, với các đường dẫn đã duyệt qua, chúng ta không thể thay đổi quá nhiều thứ, thường chỉ có thể áp dụng thay đổi về màu sắc.

a:visited { /* Khi duong dan da duoc duyet qua */
    color: #AAA; /* Mau xam */
}

Nếu các bạn không muốn thấy các đường dẫn đã duyệt qua hiển thị màu khác với đường dẫn thường, chúng ta chỉ cần áp dụng màu gốc của đường dẫn lên đường dẫn đã duyệt. Rất nhiều trang web sử dụng thủ thuật này. Trường hợp ngoại lệ rất đáng chú ý là Google. Trong trường hợp này thì màu sắc khác biệt khá thực tiễn do chúng ta có thể dễ dàng phân biệt kết quả nào đã được tra cứu và kết quả nào mới.

• Với CSS, chúng ta có thể thực hiện thay đổi ngoại hình đối tượng ngay cả sau khi hoàn thành việc tải trang. Đây là các xử lý động phản ứng với các tác động của người dùng. Chúng ta sử dụng tính năng gọi là định dạng giả.
• Định dạng giả :hover cho phép chúng ta thay đổi ngoại hình đối tượng khi chuột trỏ lên đối tượng đó, ví dụ a:hover áp dụng khi chuột trỏ lên đường dẫn.
• Định dạng giả :active thay đổi hình thức đối tượng đường dẫn khi chúng ta kích và giữ chuột trên đối tượng. :visited thay đổi hình thức đường đã được duyệt qua.
• :focus cho phép thay đổi ngoại hình của đối tượng được chọn.