Tìm hiểu Link trong CSS, cú pháp và ví dụ

Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

Bằng cách chỉnh sửa các thuộc tính CSS (bao gồm color, font-family, background, ...) chúng ta có thể tạo và chỉnh sửa các link theo ý muốn. Tham khảo tiếp bài viết link trong CSS dưới đây của Taimienphi.vn để tìm hiểu thông tin chi tiết nhé.

link trong css

Tìm hiểu Link trong CSS

Mục Lục bài viết:
1. Link trong CSS.
2. Thuộc tính text-decoration trong CSS.
3. Thuộc tính Background-Color.
4. Link Button trong CSS.

1. Link trong CSS

Để thiết lập các trạng thái link khác nhau, chúng ta có thể sử dụng các thuộc tính dưới đây:
a:link - link chưa được truy cập.
a:visited - link mà người dùng đã truy cập.
a:hover - link khi người dùng di chuột qua.
a:active - link hoạt động khi người dùng click chuột.

Ví dụ:

link trong css

Kết quả đầu ra có dạng:

link trong css 2

Khi thiết lập style cho các link trạng thái, chúng ta cần lưu ý các quy tắc dưới đây:

a:hover phải theo sau trạng thái a:linka:visited.

a:active phải theo sau trạng thái a:hover.

2. Thuộc tính text-decoration trong CSS

Thuộc tính text-decoration trong CSS được sử dụng để xóa các dấu gạch chân trong mỗi link.

Ví dụ:

link trong css 3

Kết quả đầu ra có dạng:

link trong css 4

3. Thuộc tính Background-Color.

Thuộc tính background-color được sử dụng để thiết lập màu nền cho link trong CSS.

Ví dụ:

link trong css 5

Kết quả đầu ra có dạng:

link trong css 6

4. Link Button trong CSS.

Ví dụ: dưới đây minh họa cách kết hợp một số thuộc tính CSS để hiển thị các link dưới dạng các hộp (box) / nút (button):

link trong css 7

Kết quả đầu ra có dạng:

link trong css 8

https://thuthuat.taimienphi.vn/link-trong-css-49088n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn link trong CSS. Trong các bài học CSS tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các thuộc tính định dạng bảng trong CSS. Nếu bạn có thắc mắc gì bạn có thể bình luận bài viết dưới đây để Taimienphi.vn có thể giải đáp giúp bạn học CSS tốt hơn.

Tác giả: Trần Hoạt     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Học thuộc tính cursor trong CSS, có ví dụ
Thuộc tính định dạng danh sách (list) trong CSS
Thuộc tính padding trong CSS
Tìm hiểu cú pháp và Selector trong CSS
Cách nhúng, chèn CSS vào tài liệu HTML
Từ khoá liên quan:

link trong css

, css, hoc css,

SOFT LIÊN QUAN
  • Rapid CSS

    Chỉnh sửa mã nguồn CSS

    Rapid CSS là một trình soạn thảo nâng cao có thể giúp bạn dễ dàng tạo và sửa tập tin định dạng CSS với bất kỳ kích thước và độ phức tạp cao với rất nhiều chức năng trợ giúp như tự động hoàn thành, khảo sát mã và kiểm tra ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong CSS.

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong CSS.

  • Tổng hợp Code Elona Mobile

    Bạn đang tìm Code Elona Mobile mới thực sự hoạt động? Bạn đã tới đúng nơi rồi đấy. Hãy theo dõi bài viết này để biết cách nhập Code Elona Mobile để có thể nhận tiền vàng, lọ thuốc tình yêu, tiền bạch kim, mực chuyển đổi và các vật phẩm độc quyền khác.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá