Bài F10. Định kiểu CSS cho siêu liên kết và danh sách

1. Định kiểu CSS cho siêu liên kết

• Siêu liên kết là đường dẫn đến phần khác của trang web hoặc một trang web khác, được tạo bằng thẻ <a> và thuộc tính href.

• Khi định kiểu CSS cho siêu liên kết, ta thường quan tâm đến 5 trạng thái: bình thường (normal), lướt qua (hover), kích hoạt (active), đã truy cập (visited). tập trung (focus)

• Các trạng thái này được định kiểu bằng các lớp giả (pseudo-class), ví dụ:
  a:hover, a:active, a:visited, a:focus​

a) Trạng thái bình thường

• Trạng thái mặc định khi chưa có tương tác.

• Định kiểu bằng cách chọn a, ví dụ:

a {
  color: orange;
  text-decoration: none;
}

• color: orange: màu cam cho liên kết

• text-decoration: none: bỏ gạch chân

b) Trạng thái lướt qua (hover)

• Khi con trỏ chuột nằm trên siêu liên kết.

• Định kiểu bằng a:hover, ví dụ:

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

c) Trạng thái kích hoạt (active)

• Khi đang nhấn chuột vào liên kết.

• Định kiểu bằng a:active, ví dụ:

a:active {
  color: green;
}

d) Trạng thái đã truy cập (visited)

• Khi người dùng đã truy cập liên kết trước đó.

• Định kiểu bằng a:visited, ví dụ:

a:visited {
  color: pink;
}

e) Trạng thái tập trung (focus)

• Khi người dùng chọn liên kết bằng bàn phím.

• Định kiểu bằng a:focus, ví dụ:

a:focus {
  outline: 2px solid yellow;
}

2. Định kiểu CSS cho danh sách

• Ngoài màu sắc, nền, căn lề,… CSS còn cho phép định kiểu cho dấu đầu dòng của danh sách.

a) Đánh số hoặc dấu đầu dòng theo những kiểu có sẵn

• Dùng thuộc tính list-style-type để định kiểu dấu đầu dòng theo CSS quy định sẵn.

• Ví dụ: Định kiểu dấu đầu dòng là hình tròn rỗng:

ul {
  list-style-type: circle;
}

Bảng 1: Một số giá trị của list-style-type

​ul {
  list-style-image: url('pointer.svg');
}

ul {
  list-style-image: url('pointer.svg');
  list-style-position: outside;
}​