CSS Links

Xin chào mọi người, ở bài học hôm nay chúng ta hãy bắt tay cùng nhau tìm hiểu về một thuộc tính nữa của css đó là css links.

Css Links là gì?

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

Mỗi website có rất nhiều thẻ a và bạn muốn bắt mắt với người sử dụng thì buộc phải style cho nó. Và trong bài này của mình mình sẽ trình bày tất cả các vấn đề sau.

nội dung:

  •  chọn màu sắc
  • cách làm việc với text-decoration
  • Thiết lập về background
  • các sự kiện.

Chọn màu sắc ( color)

Mặc định của thẻ a là màu tím nên để chọnđược  màu sắc thì bạn sẽ dùng đến thuộc tính color và selector của thẻ a sẽ là tên của nó luôn .

Dưới đây mình sẽ demo cho các bạn làm thẻ a chuyển sang màu green.

Ví dụ:

a{
color:green;
}

Các bạn có thể thử với nhìu màu mà mình muốn nhé!

Bỏ gạch chân cho thẻ a với thuộc tính text-decoration của css.

Thông thường khi tạo một thẻ a thì theo mặc định của nó sẽ có dấu gạch ở dưới chân mỗi thẻ. Vậy lên ta cần dùng css text-decoration: none;

Ví dụ:

a.links{
    color: green;
    text-decoration: none;
}

Với ví dụ ở trên mình đã để thẻ a với class là links có color là green và đồng thời bỏ dấu gạch chân cho nó.

Chọn thuộc tính background cho thẻ a

Ta sẽ sử dụng thuộc tính background để tạo màu sắc nền cho thẻ a.

Ví dụ

a{
background:green;
color:red;
}

Ở ví dụ trên màu nền của thẻ a sẽ được chuyển thành màu xanh đồng thời màu của thẻ a sẽ là màu đỏ.

CSS sự kiện cho a

Các sự kiện sẽ được thực thi khi ta dùng chuột thao tác với nó.

  • hover: khi hover chuột thì css được thực thi.
  • visited:khi bạn click vào thẻ a thì trạng thái của thẻ a đó sẽ là visited.
  • active: khi click vào thẻ a nhưng giữ chuột.
  • link:  có tác dụng khi bạn chưa click vào.

Sau đây mình sẽ ví dụ cho từng thuộc tính.

Ví dụ về Hover :

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

ở ví dụ trên khi hover chuột thẻ a sẽ có color là màu vàng và bỏ đi gạch chân của nó.

Ví dụ về visited :

a:visited{
            color: red;
        }

Trong ví dụ này khi bạn click vào thẻ a đó nó sẽ mở sang tab khác (thẻ a có thuộc tính target=”_blank”) và màu sắc của nó sẽ biến thành màu vàng.

Ví dụ về active:

a:active{
    color: yellow;
}

Trong ví dụ này khi dữ chuột thì thẻ a sẽ được chuyển ssang màu vàng.

Ví dụ về link:

Lưu ý: 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ả.

a:link{
color: green;
}

Bạn có thể xem thêm các bài học hay:

CSS Styling Images

CSS Pagination Examples

CSS Media Queries – Examples

Cách sử dụng CSS Backgrounds

Lời kết

Bài viết của mình đến đây là kết thúc rồi hẹn các bạn trong các seri tiếp theo nhé. Chúc các bạn có một ngày mới vui vẻ thành công.

Bạn cũng có thể tham thêm tài liệu về lập trình tại đây.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *