VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Link trong CSS


Image trong CSS
Bảng trong CSS

Ngoài những cách thông thường để tạo và trang trí đường link mà bạn đã biết trong HTML, thì trong CSS, bạn sẽ có các thuộc tính đa dạng với nhiều giá trị để giúp được link trong Webpage của bạn trở nên đẹp và chuyên nghiệp hơn.


Nội dung chính

  • Tạo link style trong CSS
  • Thiết lập màu cho Link trong CSS
  • Thiết lập màu cho Visited Link trong CSS
  • Thay đổi màu cho Link khi di chuyển chuột qua
  • Thay đổi màu cho Actived Link trong CSS
  • Sử dụng thuộc tính text-decoration với Link trong CSS
  • Thiết lập màu nền cho Link trong CSS

Tạo link style trong CSS

Để tạo Link Style, chẳng hạn như tạo màu, font, … cho các đường link trong CSS, bạn có thể sử dụng nhiều thuộc tính CSS đa dạng, ví dụ như color, font-family, background, …

Ví dụ:


<html>
<head>
<meta charset="UTF-8">
<style>
a {
    color: green;
}
</style>
</head>
<body>
<p>
<b><a href="index" target="_blank">Đây là một link</a></b>
</p>
</body>
</html>

Ngoài ra, để thiết lập các trạng thái khác nhau cho link, bạn có thể sử dụng các thuộc tính:

  • Trạng thái :link – biểu thị rằng trang web này trình duyệt chưa lưu (tức người sử dụng lần đầu tiên click vào đường dẫn này).

  • Trạng thái :visited – biểu thị rằng đường dẫn tới trang web này đã được lưu bởi trình duyệt (tức là người sử dụng đã click vào đường dẫn này trước đó rồi).

  • Trạng thái :hover – biểu thị rằng khi người sử dụng di chuyển chuột qua phần tử mà chứa link đó (tức là phần tử đó là một link khi người sử dụng di chuyển chuột qua phần tử đó).

  • Trạng thái :active – biểu thị đường link là active khi người sử dụng click chuột vào.

Lưu ý: Trạng thái :hover PHẢI theo sau các trạng thái :link và :visited trong định nghĩa CSS thì mới có hoạt động. Nếu thiếu một trong hai trạng thái trên, thì các Style Rule bạn đã định nghĩa cho :hover sẽ không có giá trị.

Trạng thái :active PHẢI theo sau trạng thái :hover trong định nghĩa CSS.

Ví dụ:


<style type="text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Tiếp theo, chúng ta sẽ cùng tìm hiểu cách sử dụng các thuộc tính này để tạo các hiệu ứng khác nhau cho đường link trong CSS.



Thiết lập màu cho Link trong CSS

Để thiết lập màu cho Link, bạn sử dụng thuộc tính color trong CSS. Như đã trình bày trong chương Màu trong CSS, giá trị của thuộc tính color này có thể là tên màu hoặc một giá trị Hex Code, …


<html>
<head>
<meta charset="UTF-8">
      <style type="text/css">
         a:link {color:#000000}
     </style>
   </head>
   <body>
      <a href="">Click vao link nay</a>
   </body>
</html>

Kết quả:


Thiết lập màu cho Visited Link trong CSS

Trạng thái :visited chỉ rằng đường link này đã được lưu bởi trình duyệt. Để thiết lập màu cho loại đường này, bạn theo dõi ví dụ sau:


<html>
<head>
<meta charset="UTF-8">
      <style type="text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href="#"> Click vào link này </a> 
   </body>
</html> 

Khi bạn click vào đường link này, màu của link sẽ chuyển sang màu xanh lá cây.

Kết quả:



Thay đổi màu cho Link khi di chuyển chuột qua

Với trường hợp này, bạn sử dụng trạng thái :hover. Nên ghi nhớ rằng, trong phần định nghĩa CSS, để đường Link này có thể hoạt động, bạn nên đặt trạng thái này sau hai trạng thái :link và :visited. Tuy nhiên, để cho đơn giản thì trong ví dụ sau mình thực hiện như sau:


<html>
<head>
<meta charset="UTF-8">
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="#">Click vào link này </a>
   </body>
</html> 

Khi bạn di chuyển chuột qua đường link trên, màu link sẽ chuyển sang màu vàng.


Thay đổi màu cho Actived Link trong CSS

Để biểu thị một link nào đó đang active, bạn có thể thay đổi màu của link đó sang một màu khác chẳng hạn. Để thiết lập trạng thái này, bạn sử dụng :active trong CSS. Ví dụ sau minh họa cách thay đổi màu cho Actived Link bởi sử dụng thuộc tính color trong CSS.


<html>
<head>
<meta charset="UTF-8">
      <style type="text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href="">Click vào link này</a>
   </body>
</html> 

Khi bạn click chuột vào link này, màu của link sẽ chuyển sang màu hồng.

Kết quả:



Sử dụng thuộc tính text-decoration với Link trong CSS

Nếu bạn để ý các ví dụ trên, bạn sẽ thấy rằng các đường link trên đều có dấu gạch chân bên dưới. Vậy làm cách nào để làm biến mất dấu gạch chân này cho đường link, bạn sử dụng thuộc tính text-decoration với giá trị là none. (Bạn tham khảo chương Text trong CSS để có các giá trị cho thuộc tính này)

Ví dụ


<html>
<head>
<meta charset="UTF-8">
<style>
a:link {
    text-decoration: none;
}a:visited {
    text-decoration: none;
}a:hover {
    text-decoration: underline;
}a:active {
    text-decoration: underline;
}
</style>
</head>
<body>
<p>
<b><a href="#" target="_blank">Đây là một link</a></b>
</p>
<p>
<b>Note:</b> a:hover phải theo sau a:link và a:visited thì mới hiệu lực.
</p>
<p>
<b>Note:</b> a:active phải theo sau a:hover thì mới hiệu lực.
</p>
</body>
</html>

Thiết lập màu nền cho Link trong CSS

Để thiết lập màu nền cho Link, bạn sử dụng thuộc tính background-color trong CSS. Để tìm hiểu các giá trị của thuộc tính này, bạn tham khảo chương Color trong CSS.

Ví dụ


<html>
<head>
<meta charset="UTF-8">
<style>
a:link {
    background-color: yellow;
}a:visited {
    background-color: cyan;
}a:hover {
    background-color: lightgreen;
}a:active {
    background-color: hotpink;
} 
</style>
</head>
<body>
<p>
<b><a href="#" target="_blank">Đây là một link</a></b>
</p>
<p>
<b>Note:</b> a:hover phải theo sau a:link và a:visited thì mới hiệu lực.
</p>
<p>
<b>Note:</b> a:active phải theo sau a:hover thì mới hiệu lực.
</p>
</body>
</html>

Ngoài ra, bạn có thể kết hợp nhiều thuộc tính khác nhau trong CSS để làm cho Link của bạn giống như một Box, hoặc một Button.

Sử dụng ví dụ trên, bạn chỉ cần thay Style Rule:


a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}a:hover, a:active {
    background-color: red;
}

Image trong CSS
Bảng trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml