Hướng dẫn link rel= stylesheet

Go to page2.html

page2.html

   
      Link States
      
      
   
   
       
page2.html
       
CSS link states:
       

          
a:link
          
a:visited
          
a:hover
          
a:focus
          
a:active
       
       
          Go to page1.html
       
   

Thêm một ví dụ đơn giản nữa về 5 trạng thái của một liên kết:

link-states-example.css

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
a:link {
  color: #265301;
}
a:visited {
  color: #437A16;
}
a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}
a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}
a:active {
  background: #265301;
  color: #CDFEAA;
}

link-states-example.html

   
      Link States
      
      
   
   
       
CSS Link State Example:
 
       
There are several browsers available, such as
         Mozilla Firefox,
         Google Chrome, and
         Microsoft Edge.
       
   

2- CSS text-decoration

Theo mặc định các liên kết thường có một "đường gạch dưới" [underline]. Chúng ta thường hay sử dung CSS text-decoration với giá trị none để loại bỏ "đường gạch dưới" [underline] này.

Các giá trị có thể của CSS text-decoration:

• overline
• line-through
• underline
• none

text-decoration-example.css

a:link {
     text-decoration: none;
}
a:visited {
     text-decoration: none;
}
a:hover {
     text-decoration: underline;
     background-color: #BAE498;
}
a:focus {
     text-decoration: underline;
     font-weight: normal;
}
a:active {
     text-decoration: underline;
     color: red;
     font-weight: bold;
}

text-decoration-example.html

   
      CSS Link text-decoration
      
      
   
   
       
CSS text-decoration
 
       
          This is a Link
       
   

Xem thêm:

Apple Facebook Google