Hướng dẫn the a trong css - the a in css

Thẻ a đóng vai trò rất quan trọng vì nhiệm vụ của nó là giúp chuyển trang giữa các file trong hệ thống website. Không những vậy mà bên SEO nó cũng có tác dụng chuyển hướng trang để các công cụ tìm kiếm có thể lọc toàn bộ website của bạn.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Mỗi website sẽ có nhiều thẻ a và bạn muốn bắt mắt với người dùng thì buộc phải style cho nó như xác định chiều cao, độ lớn chữ, màu sắc, hover, ... Và trong bài này mình sẽ trình bày tất cả các vấn đề này.

Nội dung như sau::

• Chọn màu sắc
• Làm việc với

  a{
      background: blue;
      color:#FFF; /*white*/
  }

  0
• Thiết lập background
• Style các sự kiện (hover, visited, link, active)

Trong bài này mình có sử dụng kiến thức của bài cũ như

a{
    background: blue;
    color:#FFF; /*white*/
}

1,

a{
    background: blue;
    color:#FFF; /*white*/
}

0 nên nếu bạn chưa biết thì có thể xem lại bài các css định dạng text nhé.

Bài viết này được đăng tại [free tuts .net]

1. Chọn màu sắc cho thẻ a

Mặc định thẻ a nó có màu tím tím nên để chọn màu sắc thì bạn sẽ nhớ đến thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

1 và

a{
    background: blue;
    color:#FFF; /*white*/
}

5 của thẻ a thì chính là tên của nó luôn a.

Ví dụ: Chọn màu xanh cho thẻ a: Chọn màu xanh cho thẻ a

XEM DEMO

Bạn hãy thử lại với các màu khác và cảm nhận nhé.

2. Tắt gạch chân thẻ a với text-decoration

Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

9.

Ví dụ: Tắt gạch chân của thẻ a: Tắt gạch chân của thẻ a

XEM DEMO

a.non-textdecoration{
    color: red;
    text-decoration: none;
}

Bạn hãy thử lại với các màu khác và cảm nhận nhé.

2. Tắt gạch chân thẻ a với text-decoration

Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

9.: Chọn background màu xanh và màu chữ màu trắng cho thẻ a

Ví dụ: Tắt gạch chân của thẻ a

a{
    background: blue;
    color:#FFF; /*white*/
}

3. Chọn background cho thẻ a

Cũng tương tự các phần trên ta sẽ sử dụng một thuộc tính chuyên về CSS background đó là background.

• Ví dụ: Chọn background màu xanh và màu chữ màu trắng cho thẻ a
• XEM DEMO
• 4. Style các sự kiện (hover, visited, active, link)
• Các sự kiện này xay ra khi chúng ta dùng chuột thao tác lên nó.

selector:hover{}

selector:active{}

selector:link{}

selector:visited{}

0: Khi bạn hover chuột qua nó sẽ có tác dụng

selector:hover{}

selector:active{}

selector:link{}

selector:visited{}

selector:hover{}

selector:active{}

selector:link{}

selector:visited{}

1: khi ạn click vào the a thì trạng thái của thẻ a đó là visited.:

a:hover{}

a.home:active{}

a#contact:link{}

a:visited{}

selector:hover{}

selector:active{}

selector:link{}

selector:visited{}

2: Khi ạn click vào thẻ a nhưng nhấn giữ chuột

selector:hover{}

selector:active{}

selector:link{}

selector:visited{}

3: thẻ a nào bạn chưa click lần nào thì nó sẽ có tác dụng: Hover

Các sự kiện của thẻ a sẽ có quy tắc CSS selector như sau:màu đỏ và không có gạch chân.

XEM DEMO

a:hover{
    color: red;
    text-decoration: none;
}

Bạn hãy thử lại với các màu khác và cảm nhận nhé.: Visited

2. Tắt gạch chân thẻ a với text-decoration

Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

9.: Nếu bạn gõ URL là một trang web mà trình duyệt đã lưu thì nó sẽ là visted, chính vì vậy hãy đổi URL trong ví dụ sang một URL khác và xem kết quả.

XEM DEMO

a:visited{
    color: yellow;
}

Bạn hãy thử lại với các màu khác và cảm nhận nhé.: Link

2. Tắt gạch chân thẻ a với text-decoration: Nếu bạn gõ URL là một trang web mà trình duyệt đã lưu thì nó sẽ là visted, chính vì vậy hãy đổi URL trong ví dụ sang một URL khác và xem kết quả.

Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

9.

XEM DEMO

Bạn hãy thử lại với các màu khác và cảm nhận nhé.: Active

2. Tắt gạch chân thẻ a với text-decoration

XEM DEMO

a:active{
    color: yellow;
}

Bạn hãy thử lại với các màu khác và cảm nhận nhé.

2. Tắt gạch chân thẻ a với text-decoration

• Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

  a{
      background: blue;
      color:#FFF; /*white*/
  }

  9.link) màu sắc màu xanh, không gạch chân
• Ví dụ: Tắt gạch chân của thẻ ahover) thì màu sắc màu vàng, có gạch chân
• 3. Chọn background cho thẻ aactive) thì màu sắc màu trắng và không gạch chân
• Cũng tương tự các phần trên ta sẽ sử dụng một thuộc tính chuyên về CSS background đó là background.visited) thì màu sắc chuyển sang màu đen và có gạch chân.

XEM DEMO

a:link{
    color: blue;
    text-decoration: none;
}

a:visited{
    color: black;
    text-decoration: underline;
}

a:hover{
    color: yellow;
    text-decoration: underline;
}

a:active{
    color: white;
    text-decoration: none;
}

Bạn hãy thử lại với các màu khác và cảm nhận nhé.link -> visited -> hover -> active).

2. Tắt gạch chân thẻ a với text-decoration

Thông thường khi bạn tạo thẻ a thì theo mặc định nó có gạch chân nên để tắt gạch chân thì bạn sử dụng thuộc tính

a{
    background: blue;
    color:#FFF; /*white*/
}

9.

Ví dụ: Tắt gạch chân của thẻ athêm. Chúc bạn học tốt!