Khái niệm Links, Lists và Các thuộc tính của thẻ a, ul và ol trong Css - #12

Đăng bởi: Minacode|Cập nhật:09-01-2024

Ok anh em, Tiếp theo trong chuỗi bài viết liên quan đến chủ đề học nhanh Css cùng Minacode. Bài viết này mình sẽ nói về các khái niệm Links, Lists và các thuộc tính của các thẻ a, ul và ol nhé! Nào Let's go thôi.

Liên kết-links trong Css

Với Css, các liên kết hay còn gọi là các thẻ a trong Html có thể được style nhiều cách khác nhau như: color: , font-family, background.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>Minacode|Links</h2>

<p><b><a href="https://minacode.net/" target="_blank">Xem chi tiết</a></b></p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
a {
 color: hotpink;
}
</style>
</head>
<body>

<h2>Minacode|Links</h2>

<p><b><a href="https://minacode.net/" target="_blank">Xem chi tiết</a></b></p>

</body>
</html>

Ta có:

Ngoài ra, các liên kết có thể có các kiểu khác nhau tùy thuộc vào trạng thái của chúng.

Bốn trạng thái liên kết là:

+ a:link: một liên kết bình thường, chưa được truy cập
+ a:visited: một liên kết người dùng đã truy cập
+ a:hover: một liên kết khi người dùng di chuột qua nó
+ a:active: một liên kết ngay khi nó được nhấp vào

Ví dụ:

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Khi style cho một số trạng thái liên kết, có một số quy tắc thứ tự các bạn cần phải lưu ý sau:

+ a:hover PHẢI đứng sau a:link và a:visited
+ a:active PHẢI xuất hiện sau a:hover

text-decoration cho Links:

Thuộc tính text-decoration chủ yếu được sử dụng để xóa phần gạch chân khỏi các liên kết.

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
background-color cho Links
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

Link Button

Mình sẽ style một link thành một button như sau:

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Minacode|Link Button</h2>

<p>Một thẻ a đã được style thanh a button:</p>
<a href="https://minacode.net/" target="_blank">Xem website</a>

</body>
</html>

Ta được:

Danh sách - Lists trong Css

Trong HTML, có hai loại danh sách chính:

+ Danh sách không có thứ tự (<ul>): các mục trong danh sách được đánh dấu bằng dấu đầu dòng
+ Danh sách có thứ tự (<ol>): các mục trong danh sách được đánh dấu bằng số hoặc chữ cái

Thuộc tính danh sách trong Css cho phép bạn:

+ Đánh dấu mục danh sách theo các kiểu khác nhau
+ Dùng hình ảnh để đánh dấu mục danh sách
+ Thêm màu nền vào danh sách và mục danh sách

list-style-type:

Thuộc tính list-style-type chỉ định kiểu đánh dấu mục danh sách.

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
 list-style-type: circle;
}

ul.b {
 list-style-type: square;
}

ol.c {
 list-style-type: upper-roman;
}

ol.d {
 list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>Minacode|list-style-type</h2>

<p>Không có thứ tự:</p>
<ul class="a">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ul>

<ul class="b">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ul>

<p>Theo thứ tự:</p>
<ol class="c">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ol>

<ol class="d">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ol>

</body>
</html>

Ta có:

list-style-image

Thuộc tính list-style-image chỉ định một hình ảnh để đánh dấu mục danh sách:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>Minacode|list-style-image</h2>

<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ul>

</body>
</html>

Ta có:

list-style-position

Thuộc tính list-style-position chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng):

list-style-position: outside;

Có nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Điểm bắt đầu của mỗi dòng trong danh sách sẽ được căn chỉnh theo chiều dọc. Đây là mặc định

list-style-position: inside;

Có nghĩa là các dấu đầu dòng sẽ nằm trong mục danh sách. Vì nó là một phần của mục danh sách nên nó sẽ là một phần của văn bản và đẩy văn bản vào đầu

Xóa cài đặt mặc định

Thuộc tính này list-style-type:none cũng có thể được sử dụng để xóa điểm đánh dấu đầu dòng. Lưu ý rằng danh sách cũng có margin và phần padding mặc định. Để loại bỏ phần này, hãy thêm margin:0 và padding:0 vào thẻ <ul> hoặc <ol>:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list-style

Thuộc tính list-style là một thuộc tính viết tắt. Nó được sử dụng để đặt tất cả các thuộc tính danh sách trong một khai báo:

ul {
  list-style: square inside url("sqpurple.gif");
}

Khi sử dụng viết tắt, thứ tự của các giá trị thuộc tính là:

1, list-style-type
2, list-style-position
3, list-style-image

Nếu thiếu một trong các giá trị thuộc tính ở trên thì giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn vào, nếu có.

Color trong List

Chúng ta cũng có thể style cho danh sách bằng màu sắc để làm cho chúng trông thú vị hơn một chút.

Lưu ý: Bất cứ điều gì được thêm vào thẻ <ol> hoặc <ul> sẽ ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến từng mục trong danh sách:

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

Ta có:

>>Còn tiếp nhé>>