Bài 6: Pseudo-classes For Links

Pseodu ( hay dịch là Phần tử giả ): Là 1 phần quan trọng mà hầu hết các website đều có trong các liên kết ( Links) dùng để quy định cách hiển thị cho liên kết khi thực thi 1 hành động nào đó.

1. Hover
- Như đã nói bên trên do Pseodu áp dụng với liên kết nên trước tiên chúng ta cần phải xác định thành phần tác động đến là thẻ <a>
Ví dụ:

a:hover{ color: red; background: white; text-decoration: blink;}

Tức là: Khi di chuột qua liên kết thì nội dung bên trong cặp thẻ {…} sẽ hoạt động, cụ thể : Khi di chuột qua liên kết sẽ có màu đỏ, nền trắng và nháy.

2. Link
- Định các thuộc tính cho liên kết, mặc định màu của liên kết là xanh chúng ta có thể chuyển qua màu khác.
Vídụ:

a:link { color: gold; }

3. Active
- Định các thuộc tính cho liên kết khi liên kết đó hoạt động ( khi nhấn giữ chuột vào liên kết đó), tuy nhiên trường hợp này thực tế ít khi sử dụng.
Ví dụ:

a:active { background: gray; }

4. Visited
- Định các thuộc tính khi liên kết đã được ghé thăm ( Những liên kết chúng ta đã click ít nhất1 lần)
Ví dụ:

a:visited { color:color:#FF0000;}

Ví dụ:
Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.

<style>
a:link {
              color:#00FF00;    
              font-size:14px        
          }

a:hover {
                  color:#FF00FF;
                  font-size:1.2em;
                  text-decoration:blink
             }

a:visited {
                   color:#FF0000;
                   text-decoration:none
               }

a:active {
                  color:# 662D91;
                  font-variant:small-caps
              }
</style>
<h2>Môn học<h2>
<ul>
   <li><a href="#1">Toán học</a></li>
   <li><a href="#2">Vật lý</a></li>
   <li><a href="#3">Hóa học</a></li>
   <li><a href="#4">Sinh học</a></li>
</ul>