Trạng thái nào sau đây là trạng thái của các liên kết trong css?

Nhiều yếu tố trên trang web hơi "dễ tha thứ" về mặt thiết kế—nếu chúng không "vừa phải" thì cũng không thành vấn đề lắm. Với danh sách và liên kết, đó là một câu chuyện khác—nếu bạn không hiểu đúng, bạn có thể gây ra một số vấn đề nghiêm trọng cho những người đang cố gắng sử dụng trang web của bạn

Nội dung chính Show

Các liên kết nói riêng có một số yêu cầu về kiểu chính và kỳ vọng của người dùng. Các liên kết có kiểu dáng kém có thể làm hỏng trải nghiệm người dùng trên một trang web, vì mọi người phải dừng lại và suy nghĩ về nơi để nhấp vào. Trong trường hợp xấu nhất, người dùng thậm chí có thể không biết mục nào trên trang thực sự là liên kết

Trong bài viết về Chương trình giảng dạy Tiêu chuẩn Web này, chúng ta sẽ xem xét các kỹ năng cốt lõi mà bạn cần để tạo các kiểu liên kết và danh sách mạnh mẽ. Chúng tôi cũng sẽ thảo luận về một số cách để tránh những cạm bẫy chính của các yếu tố này và tạo ra kết quả cuối cùng sẽ hoạt động trên các trình duyệt khác nhau và người dùng khuyết tật có thể truy cập được

Có một số ví dụ được sử dụng trong bài viết này, vì vậy bạn có thể tải xuống các tệp ví dụ danh sách và liên kết để theo dõi cùng với chúng

Danh sách tạo kiểu

Đầu tiên, tôi sẽ hướng dẫn bạn những kiến thức cơ bản về tạo kiểu danh sách bằng CSS, trước khi chuyển sang xem xét một số kỹ thuật phức tạp hơn một chút

Đạn và số cơ bản

Điều cơ bản cần xem xét khi tạo kiểu danh sách là bạn muốn sử dụng dạng dấu đầu dòng hoặc đánh số nào. Bạn cũng có thể chọn loại bỏ hoàn toàn dấu đầu dòng và số. Như bạn đã học trong bài viết Danh sách HTML, có rất nhiều tùy chọn có sẵn, được đặt bằng thuộc tính

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Ví dụ: để đặt tất cả các danh sách không có thứ tự trên trang web của bạn sử dụng các dấu đầu dòng vuông, hãy sử dụng CSS này

ul li {
  list-style-type: square;
}

Cái nào sẽ tạo ra một cái gì đó giống như Hình 1

Hình 1. Danh sách không có thứ tự với dấu đầu dòng vuông

Một số loại danh sách phổ biến được hiển thị trong Hình 2

Hình 2. Các kiểu danh sách phổ biến

Trang ví dụ về lựa chọn danh sách cơ bản hiển thị một số tùy chọn khác

Lưu ý rằng các dấu đầu dòng và số sẽ được hiển thị bằng cách sử dụng

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

3 được đặt cho hoặc kế thừa bởi

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

4. Nếu bạn cần dấu đầu dòng có màu khác với văn bản, thay vào đó, bạn sẽ cần sử dụng một hình ảnh hoặc khắc phục sự cố bằng cách sử dụng các thành phần khác trong các mục danh sách (ví dụ: điều này có thể dễ dàng nếu tất cả các mục đều là liên kết)

Dấu đầu dòng tùy chỉnh sử dụng hình ảnh

Bộ dấu đầu dòng tiêu chuẩn là đủ cho nội dung cơ bản, tuy nhiên, yêu cầu thiết kế phổ biến là thay thế chúng bằng một hình ảnh tùy chỉnh

Đặc tả CSS không bao gồm thuộc tính

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

5 để thêm hình ảnh danh sách tùy chỉnh. Tuy nhiên, thuộc tính có các tùy chọn định vị hạn chế cho hình nền và trong một số trường hợp hoàn toàn không hoạt động trong IE. Vì vậy, nó đã trở thành một thông lệ phổ biến hơn rất nhiều khi chỉ cần đặt một hình nền trên các mục trong danh sách

Hãy tưởng tượng bạn có một danh sách các nguồn cấp RSS và bạn muốn thay đổi dấu đầu dòng thành biểu tượng RSS màu cam tiêu chuẩn. Chúng tôi sẽ cung cấp cho danh sách lớp "rss" để phân biệt nó với các danh sách khác


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Trước tiên, chúng tôi sẽ đặt danh sách không có

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

2 và xóa lề và phần đệm. Sau đó, chỉ cần thêm một hình nền vào mỗi mục danh sách, một số phần đệm bên trái để di chuyển văn bản qua để hình ảnh hiển thị xuyên suốt và một số phần đệm dưới cùng để tạo khoảng trống cho các mục danh sách

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Điều này sẽ tạo ra một danh sách với hình ảnh RSS thay vì dấu đầu dòng, như trong Hình 3

Hình 3. Danh sách có dấu đầu dòng hình ảnh

Hãy nhớ rằng hình nền được định vị bằng pixel để có vị trí chính xác. Tùy thuộc vào thiết kế bạn đang tạo, bạn cũng có thể sử dụng các từ khóa

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

8 hoặc. Chỉ cần cẩn thận khi thiết kế của bạn làm nổi bật nội dung có thể khiến một mục danh sách bị bao bọc trên nhiều dòng—nếu bạn đặt nền thành

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

9 hoặc

ul li {
  list-style-type: square;
}

10 dọc, nó có thể trông khá lạ, như thể hiện trong Hình 4

hinh 4. Trình diễn các hình ảnh dấu đầu dòng được căn giữa theo chiều dọc trên một mục danh sách nhiều dòng

Bằng cách đặt hình ảnh nằm ở đầu mục danh sách, bạn duy trì hành vi dấu đầu dòng mặc định (nơi dấu đầu dòng nằm trên dòng đầu tiên)—xem Hình 5

Hình 5. Trình diễn các hình ảnh dấu đầu dòng được căn chỉnh trên cùng trên một mục danh sách nhiều dòng

Liệt kê lề và phần đệm

Việc sử dụng lề và phần đệm một cách khéo léo có thể làm cho danh sách trông bóng bẩy và chuyên nghiệp hơn nhiều, nhưng bạn cần biết mình đang làm gì và cũng lưu ý rằng tình huống khác nhau giữa các loại danh sách khác nhau. Trong phần này, tôi sẽ hướng dẫn bạn cách áp dụng lề hợp lý và phần đệm cho hai loại danh sách phổ biến nhất

danh sách không có thứ tự

Một điều mà bạn có thể sẽ nhận thấy khá nhanh là kiểu dáng mặc định cho các danh sách thụt lề nhiều hơn so với kiểu dáng mặc định cho các đoạn văn—xem Hình 6

Hình 6. Danh sách theo kiểu mặc định được thụt vào bên trái

Nếu bạn muốn các mục danh sách không có thứ tự của mình nằm ở cùng một điểm căn trái như phần còn lại của nội dung, bạn sẽ cần đặt một số kiểu để kiểm soát thụt lề theo ý thích của mình. Các trình duyệt khác nhau yêu cầu cài đặt khác nhau—một số cần xóa lề, một số khác cần xóa phần đệm. Vì vậy, để thiết lập lại cho tất cả các trình duyệt, thiết lập lại cả hai

ul li {
  list-style-type: square;
}

Điều này có thể không có tác dụng như bạn mong đợi, vì nó sẽ khiến văn bản nằm ngang bên trái nhưng các dấu đầu dòng sẽ nằm bên ngoài văn bản, như thể hiện trong Hình 7

Hình 7. Dấu đầu dòng được đặt ở bên trái của văn bản

Vì vậy, để căn chỉnh các dấu đầu dòng sang bên trái, giờ đây bạn có thể đặt lề trên các mục trong danh sách để sắp xếp mọi thứ

ul li {
  list-style-type: square;
}

tại thời điểm này, bạn vẫn sẽ tìm thấy sự khác biệt về cấp độ pixel giữa các trình duyệt nhưng hiệu quả về cơ bản là nhất quán nhất có thể—xem Hình 8

Hình 8. Các dấu đầu dòng được định vị cùng với các đoạn văn xung quanh

danh sách có thứ tự

Bây giờ bạn cần xem xét vấn đề tương tự như đã áp dụng cho danh sách có thứ tự. Chúng phức tạp hơn vì các điểm đánh dấu số được căn chỉnh theo mục danh sách có số lượng lớn nhất. Ví dụ: nếu bạn có 10 mục trong danh sách, số thập phân sẽ được định vị để cho phép mục "10" có hai chữ số, như thể hiện trong Hình 9

Hình 9. Điểm đánh dấu số cho các mục 1–9 có phần đệm trước để chúng căn phải với mục 10

Vì vậy, thực sự không có cách nào để làm cho văn bản này được căn trái một cách nhất quán ở cùng vị trí với văn bản xung quanh;

Hình 10. Các số 0 đứng đầu điền vào khoảng trống cho các mục 1–9

Phổ biến hơn là chỉ đơn giản là sống với sự khác biệt về khoảng cách. Tuy nhiên, điều đó có nghĩa là các điểm đánh dấu trong danh sách có thứ tự và không có thứ tự của bạn không thể dễ dàng được căn trái một cách nhất quán. Bạn chỉ có thể sắp xếp văn bản trong danh sách của mình

ul li {
  list-style-type: square;
}

Bạn cần ít nhất 2em lề trái để chứa cả danh sách có thứ tự và không có thứ tự. Trong Hình 11, lưu ý cách sắp xếp văn bản của các mục trong cả hai danh sách

Hình 11. Văn bản xếp hàng trong cả danh sách có thứ tự và không có thứ tự

Vậy lam gi?

Về cơ bản bạn có ba lựa chọn

Sống với vị trí mặc định của danh sách và điểm đánh dấu của chúng
Rõ ràng sắp xếp văn bản của danh sách của bạn

Đặt kiểu khác cho

ul li {
  list-style-type: square;
}

12 và

ul li {
  list-style-type: square;
}

Không có cách tiếp cận "đúng" hay "sai" và việc để mọi thứ ở chế độ cài đặt mặc định cho các danh sách trong nội dung chung là điều khá phổ biến

Sử dụng vị trí kiểu danh sách

Nếu bạn muốn văn bản của các mục danh sách nhiều dòng xuống dòng bên dưới điểm đánh dấu danh sách, bạn sẽ cần đặt thuộc tính

ul li {
  list-style-type: square;
}

14 thành

ul li {
  list-style-type: square;
}

15, thuộc tính này sẽ tạo ra kết quả như trong Hình 12

Hình 12. Vị trí liệt kê "bên trong" làm cho văn bản bị ngắt dòng bên dưới điểm đánh dấu thay vì thẳng hàng với văn bản được thụt lề

Đánh dấu vị trí bên trong không phải là một phong cách đặc biệt phổ biến. Theo mặc định,

ul li {
  list-style-type: square;
}

14 được đặt thành

ul li {
  list-style-type: square;
}

17, tạo ra các kết quả được thảo luận ở nơi khác trong bài viết này

Điều gì về danh sách định nghĩa?

Nói chung, danh sách định nghĩa không đòi hỏi nhiều sự chú ý, ngoại trừ việc đặt kiểu

ul li {
  list-style-type: square;
}

18 (văn bản thường được in đậm) và kiểm soát việc thụt lề của các định nghĩa

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Điều này thiết lập một phong cách rõ ràng và dễ dàng cho các danh sách định nghĩa, như trong Hình 13

Hình 13. Một danh sách định nghĩa theo kiểu đơn giản

Mặc dù danh sách định nghĩa có thể được sắp xếp lại bằng số float và vị trí, nhưng chúng rất kỳ quặc và nói chung, tốt hơn hết là giữ mọi thứ đơn giản. Chúng đủ hữu ích như hiện tại, chỉ với một chút trợ giúp để làm cho các thuật ngữ định nghĩa nổi bật hơn;

danh sách lồng nhau

Trong bài viết Danh sách HTML, bạn đã tìm hiểu về danh sách lồng nhau. Khi tạo CSS, bạn nên cẩn thận để duy trì các dấu hiệu thiết kế rõ ràng để thể hiện mối quan hệ giữa danh sách lồng nhau và danh sách chứa nó. Cho đến nay, cách phổ biến nhất để thực hiện việc này là thụt lề các mục danh sách lồng nhau—thực tế, đó là cài đặt mặc định trên các trình duyệt

Nếu bạn thiết lập thụt lề danh sách của riêng mình, cài đặt cơ sở của bạn sẽ đơn giản được nhân lên. Ví dụ: hãy xem xét CSS này

ul li {
  list-style-type: square;
}

Mỗi mục danh sách con tiếp theo trong chuỗi kế thừa giá trị

ul li {
  list-style-type: square;
}

19 từ mục danh sách mẹ của nó, ngoài ra còn có thêm 2 mục khác của riêng nó ở trên cùng. Vì vậy, mục danh sách cấp cao nhất (mục không có mục danh sách làm thành phần cha) sẽ có lề trái là 2em, sau đó mục danh sách con của mục danh sách đầu tiên sẽ kế thừa 2em từ cha của nó và sau đó có một mục khác

danh sách ngang

Một trong những thay đổi phổ biến nhất được yêu cầu để làm việc với danh sách là tạo một danh sách theo chiều ngang—nghĩa là làm cho các mục xuất hiện cạnh nhau thay vì lần lượt từng mục một. Đây là một thủ thuật phổ biến để điều hướng trang web. Hãy sử dụng một ví dụ từ bài viết về menu điều hướng (xem Hình 14)

Hình 14. Một danh sách đơn giản

Hãy chuyển đổi danh sách này thành một danh sách ngang, như trong Hình 15

Hình 15. Một danh sách ngang đơn giản

Để đạt được điều này, chúng ta cần thực hiện ba điều trong danh sách của mình

Xóa
```
ul li {
  list-style-type: square;
}
```
19 và
```
ul li {
  list-style-type: square;
}
```
31 khỏi
- Đặt các mục danh sách thành
```
ul li {
  list-style-type: square;
}
```
  32
- Cung cấp cho các mục danh sách một số khoảng cách ở bên phải, để tránh chúng chạy cùng nhau

Trong ví dụ, danh sách có ID "mainmenu", vì vậy chúng tôi sẽ sử dụng ID đó làm bộ chọn theo ngữ cảnh, để đảm bảo rằng chúng tôi chỉ thay đổi danh sách mà chúng tôi định thay đổi. CSS là

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Trong ví dụ đơn giản này, đặt các mục danh sách thành

ul li {
  list-style-type: square;
}

32 là đủ; . Bạn sẽ tìm hiểu thêm về float sau này trong khóa học

cột giả

Trước đó, chúng tôi đã tạo một danh sách các nguồn cấp RSS. Bây giờ, hãy tưởng tượng danh sách đó đã được đặt trong một thanh bên trên trang web của bạn. Người thiết kế muốn danh sách xuất hiện trong hai cột, với một đường viền xung quanh toàn bộ nhóm như trong Hình 16 (hãy xem phong cách-danh sách-ví dụ-cột. html cho ví dụ cột giả. )

Hình 16. Danh sách các nguồn cấp dữ liệu trong hai cột, với biểu tượng RSS cho mỗi dấu đầu dòng

Giả sử danh sách nằm trong một

thiết lập chiều rộng và đường viền. Danh sách cơ bản sẽ trông giống như Hình 17 (xem phong cách-danh sách-ví dụ-hình ảnh-đạn. html cho danh sách bắt đầu cơ bản)

Hình 17. Danh sách chưa được tạo kiểu bên trong đường viền

Để đạt được hiệu ứng cột giả, hãy thêm biểu tượng RSS như đã trình bày trước đó;

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Lưu ý rằng

ul li {
  list-style-type: square;
}

35 được thêm vào để ví dụ hiển thị chính xác trong Firefox 2

Chúng ta không cần thêm lề dưới vì mục danh sách cuối cùng sẽ thêm khoảng cách chính xác với phần đệm của nó, như trong Hình 18

Hình 18. Đi được nửa chặng đường—chúng ta hiện có khoảng cách chính xác và các dấu đầu dòng biểu tượng

Bây giờ, đặt các mục danh sách thành

ul li {
  list-style-type: square;
}

36 và đặt chiều rộng của chúng thành

ul li {
  list-style-type: square;
}

37 và lề phải thành

ul li {
  list-style-type: square;
}

38 (bạn cũng có thể sử dụng độ rộng pixel). Bạn cũng cần đặt rõ ràng

ul li {
  list-style-type: square;
}


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Trong hầu hết các trình duyệt, điều này là đủ để tạo hiệu ứng cột, nhưng bạn sẽ cần đặt IE một cách rõ ràng để di chuyển các mục danh sách sang bên trái. Hãy sử dụng kiểu có điều kiện cho tất cả các phiên bản cho đến IE7 (vì chúng tôi chưa biết các phiên bản trong tương lai sẽ làm gì)

Bây giờ chúng ta có hiệu ứng hai cột mong muốn, như trong Hình 19

Hình 19. Danh sách hoàn thành

trình duyệt cũ

Nếu bạn được yêu cầu tạo thiết kế này cho các trình duyệt cũ hơn không hỗ trợ khối nội tuyến, thì bạn sẽ cần thả nổi các mục danh sách sang bên trái trong tất cả các trình duyệt và sử dụng cách khắc phục xóa như được mô tả trong bài viết Xóa dấu phẩy . Rất may, vòng phát hành trình duyệt mới nhất đã làm cho

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

Liệt kê kết luận

Bây giờ chúng tôi đã đề cập đến một tập hợp cốt lõi các lựa chọn và phương pháp tạo kiểu cho danh sách. Bạn có thể xây dựng dựa trên những ví dụ này và kết hợp chúng để tạo ra một số lượng lớn các thiết kế. Vì các danh sách thường được kết hợp với các liên kết, hãy chuyển sang các liên kết

Liên kết tạo kiểu có thể là một chút hình thức nghệ thuật. Có nhiều yêu cầu khác nhau khi chơi và có thể khó đáp ứng tất cả, trong khi vẫn tạo ra một kết quả thẩm mỹ. Điều đó nói rằng, nó hoàn toàn có thể miễn là bạn ghi nhớ một số quy tắc đơn giản

hiểu các trạng thái liên kết khác nhau
không đi lạc quá xa so với mong đợi của người dùng
sử dụng màu cẩn thận

Nếu bạn tuân theo các quy tắc đó, bạn nên tạo các liên kết rõ ràng và dễ sử dụng

Hiểu trạng thái liên kết

Trước khi bạn có thể định kiểu liên kết, bạn cần hiểu các trạng thái liên kết khác nhau. Tổng cộng có năm tiểu bang. chưa được truy cập/mặc định, đã truy cập, tiêu điểm, di chuột và đang hoạt động

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

Bạn phải luôn chỉ định CSS cho mọi trạng thái này. Mỗi người truyền đạt thông tin cho người dùng về thực tế họ đang tương tác với một liên kết. Nếu nghi ngờ về

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

Lưu ý rằng các trạng thái này không hoàn toàn loại trừ lẫn nhau (mặc dù thực sự không thể có một liên kết không được truy cập và được truy cập cùng một lúc)—tuy nhiên, hoàn toàn có thể xảy ra trường hợp một liên kết được di chuột, hoạt động và được truy cập cùng một lúc

Quá trình phát triển của trình duyệt đặt kỳ vọng như thế nào

Để hiểu rõ hơn một số kỳ vọng phổ biến của người dùng về các liên kết, bạn nên biết một chút lịch sử web

Bạn có thể nghe mọi người đề cập đến "các giá trị mặc định của Netscape" cho các liên kết; . Điều này gợi lại những ngày đầu của web, khi các trình duyệt đặt màu cho nội dung và các tác giả không có nhiều quyền kiểm soát đối với việc hiển thị các trang của họ

Văn bản màu đen; . Các liên kết chưa được truy cập có màu xanh lam, các liên kết đã truy cập có màu tím và các liên kết đang hoạt động có màu đỏ…và đó là về nó. Xem Hình 20 để minh họa điều này

Hình 20. Ảnh chụp màn hình của Khảm

Mặc dù điều này hơi đơn điệu nhưng nó nhất quán—và nó đặt cơ sở cho kỳ vọng của người dùng. Đặc biệt, cho đến ngày nay, người dùng mong đợi văn bản được gạch chân là một liên kết. Họ có thể không mong đợi tất cả các liên kết đều có gạch chân, nhưng họ chắc chắn mong muốn văn bản được gạch chân có thể nhấp được. Tốt nhất là đừng xung đột với kỳ vọng đó

Một số trang web vẫn sử dụng các liên kết màu xanh lam và tím; . Mặc dù bạn luôn có thể chuyển sang phong cách cổ điển và gắn bó với bộ màu này, nhưng nhìn chung người dùng khá thoải mái với các tùy chọn khác—trong một số ranh giới nhất định

Kỳ vọng của người dùng

Có một số quy tắc chung cho kỳ vọng của người dùng về các liên kết

Người dùng mong muốn các liên kết trông khác với văn bản khác không phải là liên kết
Người dùng mong đợi các liên kết phản ứng khi họ di chuột hoặc tập trung vào liên kết
Người dùng mong đợi các liên kết thay đổi sau khi họ đã truy cập vào liên kết đó
Người dùng thích sự nhất quán trong các kiểu liên kết có cùng chức năng để họ biết phải nhấp vào cái gì
Người dùng mong muốn văn bản được gạch chân là một liên kết—vì vậy, đừng sử dụng gạch dưới cho bất kỳ mục đích nào khác

Bạn phải luôn tuân thủ các quy tắc cơ bản này vì chúng sẽ giúp người dùng của bạn nhanh chóng xác định và sử dụng các liên kết. Bạn muốn tạo phong cách không khiến mọi người phải dừng lại và suy nghĩ "bit nào là liên kết"?

Những kỳ vọng này chuyển thành một số quy tắc mã hóa đơn giản

đặt kiểu cho tất cả các trạng thái liên kết
chỉ sử dụng gạch chân cho các liên kết

Sử dụng màu cẩn thận

Khi bạn định kiểu liên kết, hãy cẩn thận không dựa hoàn toàn vào màu sắc để phân biệt giữa các trạng thái liên kết. Không phải ai cũng có thể nhìn thấy màu sắc giống nhau (ví dụ như những người bị mù màu), vì vậy bạn nên sử dụng màu sắc và kiểu dáng như gạch chân, biểu tượng hoặc màu đảo ngược khác nhau

Bạn cũng nên kiểm tra xem các lựa chọn màu của mình có đủ độ tương phản hay không—điều này thực sự dễ dàng khi sử dụng các công cụ như Trình phân tích độ tương phản màu (cho cả PC và Mac) hoặc Thanh công cụ hỗ trợ truy cập web dành cho Opera (cả hai đều từ Tập đoàn Paciello)

Color Contrast Analyzer (xem Hình 20) cho phép bạn sử dụng công cụ chọn màu để chọn màu nền trước và màu nền sau trên màn hình, sau đó nhận được đánh giá đơn giản về độ tương phản của chúng

Hình 21. Ảnh chụp màn hình của Máy phân tích độ tương phản màu đang được sử dụng

Nếu cả 4 kết quả đều pass, phối màu là ok. Hãy nhớ kiểm tra tất cả các trạng thái liên kết. Bạn có thể cần nhập một số trong số chúng theo cách thủ công vào trường "hex" để kiểm tra tiêu điểm, di chuột và hoạt động

Bắt tay vào kinh doanh. CSS

Bây giờ bạn đã hiểu một số quy tắc cơ bản cho liên kết, hãy bắt tay vào viết một số mã—phần này trình bày chi tiết tất cả CSS mà bạn sẽ cần để tạo kiểu liên kết thành công

Tạo kiểu cho các trạng thái liên kết theo đúng thứ tự

Trước hết, hãy lưu ý rằng nếu bạn không đặt các kiểu liên kết của mình theo đúng thứ tự trong biểu định kiểu của mình, các cài đặt sẽ ghi đè lên nhau và trạng thái liên kết sẽ không hoạt động. Các kiểu liên kết của bạn phải luôn theo thứ tự sau

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

```
ul li {
  list-style-type: square;
}
```
53
```
ul li {
  list-style-type: square;
}
```
55
```
ul li {
  list-style-type: square;
}
```
52

Một cách ghi nhớ phổ biến để ghi nhớ điều này là "Tay cầm cũ của Chúa tể Vader, Anakin". Nếu bạn không phải là người hâm mộ Chiến tranh giữa các vì sao, tôi e rằng bạn sẽ phải cố gắng nhớ nó một cách khó khăn hoặc sao chép và dán khối mã bên dưới

Cũng phổ biến là "LoVe Fears Hate" dễ nhớ, với "Fears" là viết tắt của "Focus"

Các trạng thái liên kết khác nhau được tạo kiểu bằng cách sử dụng "các lớp giả"—

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

ul li {
  list-style-type: square;
}


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Nếu bạn muốn đặt quy tắc CSS cho tất cả các liên kết ở tất cả các trạng thái, bạn có thể trực tiếp tạo kiểu

ul li {
  list-style-type: square;
}


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Điều này hữu ích nếu bạn dự định thay thế phần gạch dưới mặc định bằng đường viền dưới cùng, đây là cách phổ biến để kiểm soát kiểu trực quan tốt hơn

Kiểm soát mặc định

Theo mặc định, hầu hết các trình duyệt đặt tất cả các liên kết có gạch dưới và các liên kết trạng thái tiêu điểm có đường viền, như minh họa trong Hình 22

Hình 22. Trái sang phải. kiểu tiêu điểm mặc định cho Opera 9, Firefox 2 và IE7

Nếu bạn đang thay thế các kiểu này bằng kiểu khác, bạn có thể thay đổi hoặc tắt các kiểu mặc định này

gạch dưới

Gạch chân được đặt bằng thuộc tính


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Bạn có thể tắt gạch chân bằng cách đặt thuộc tính thành

ul li {
  list-style-type: square;
}


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Ngay cả khi bạn đang bảo tồn kiểu gạch chân, bạn có thể thấy dễ dàng hơn khi tắt

ul li {
  list-style-type: square;
}

ul li {
  list-style-type: square;
}

Đề cương

Đường viền tiêu điểm được kiểm soát bởi thuộc tính. Đường viền gần giống với đường viền, nhưng nó không chiếm dung lượng hoặc khiến trang phải chạy lại khi nó xuất hiện (lưu ý rằng nó không được hỗ trợ trong IE7 trở xuống). Cách dễ nhất để kiểm soát đường viền là sử dụng thuộc tính tốc ký


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Ví dụ này sẽ được hiển thị giống như Hình 23

Hình 23. kết xuất ví dụ về đường viền đen dày

Nếu bạn không biết phải làm gì với đường viền, chỉ cần để đường viền ở chế độ mặc định của trình duyệt

Ví dụ. tạo lại các giá trị mặc định của Netscape

Như một ví dụ dễ hiểu về các kiểu liên kết, hãy tạo lại các giá trị mặc định của Netscape là xanh dương, tím và đỏ. Chúng tôi sẽ giữ phần gạch dưới, nhưng mở rộng trạng thái hoạt động để sử dụng chữ in nghiêng. Chúng tôi sẽ tăng kích thước văn bản vì lợi ích của ví dụ và đặt trang sử dụng nền trắng


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Điều này sẽ tạo ra một cái gì đó giống như Hình 24

Hình 24. tạo lại các giá trị mặc định của Netscape

Gạch chân giả sử dụng border-bottom

Nhiều nhà thiết kế đã quan sát thấy rằng phần gạch chân hơi dày và cắt qua phần xuống dưới của kiểu chữ thường—nghĩa là đường kẻ đi qua phần dưới cùng của g, j, p, q và y. Điều này được minh họa trong hình 25

Hình 25. Gạch dưới cắt qua các dấu xuống kiểu chữ thường

Giả sử rằng người thiết kế trang web của bạn đồng ý và muốn phần gạch chân mỏng hơn và không chạm vào văn bản. Để thực hiện yêu cầu chung này, chúng ta sẽ sử dụng đường viền thay vì gạch dưới để nó giống như Hình 26

Hình 26. Sử dụng đường viền thay vì gạch chân sẽ cho kết quả đẹp hơn

Đầu tiên, tắt gạch dưới cho tất cả các trạng thái liên kết, sau đó đặt đường viền dưới cùng để khớp với màu liên kết cho từng trạng thái


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Điều này sẽ tạo ra một cái gì đó giống như Hình 27

Hình 27. Gạch dưới giả trong hành động

Nếu bạn sử dụng phương pháp tạo viền giả, hãy cẩn thận rằng bạn đã đặt đủ

ul li {
  list-style-type: square;
}

Phong cách không phụ thuộc vào màu sắc

Vì ví dụ cho đến nay hoàn toàn dựa vào màu sắc để phân biệt bốn trong số năm trạng thái liên kết, chúng ta nên thực hiện bước tiếp theo và thay đổi đường viền dưới cùng cho mục đã truy cập, tiêu điểm và di chuột. Hãy cung cấp cho các liên kết đã truy cập một đường viền chấm và các liên kết được di chuột và tập trung vào một đường viền đứt nét


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Điều này sẽ tạo ra một cái gì đó giống như Hình 28

Hình 28. Thay đổi kiểu đường viền cho từng trạng thái liên kết

Chấp nhận tiêu điểm và di chuột dưới dạng trạng thái theo kiểu tương đương, phương pháp này có nghĩa là trạng thái liên kết được phân biệt bằng nhiều màu sắc. Ngay cả khi bạn xem các liên kết này dưới dạng đen trắng, bạn vẫn có thể xác định các trạng thái liên kết khác nhau, như trong Hình 29

Hình 29. Các trạng thái liên kết hiện có thể phân biệt được ngay cả ở màu đen và trắng

Một số trang web sử dụng các biểu tượng và ký hiệu để thêm thông tin về các liên kết của họ. Ví dụ: một số trang web sử dụng mũi tên để chỉ ra rằng một liên kết dẫn đến một trang web bên ngoài;

Những hiệu ứng này rất đơn giản để đạt được với ảnh nền, như thể hiện trong Hình 30

Hình 30. Một ví dụ về các liên kết với các biểu tượng phân biệt

Để thêm biểu tượng mũi tên vào các liên kết bên ngoài, bạn có thể thêm lớp "bên ngoài" vào thẻ liên kết


  News
  Sport
  Weather
  Business
  Entertainment
  Funny News

Sau đó, trong biểu định kiểu của bạn, hãy đặt hình nền cho lớp đó—hãy nhớ thêm phần đệm để phù hợp với hình ảnh

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Ví dụ này sẽ áp dụng biểu tượng cho tất cả các trường hợp liên kết đã truy cập, ở tất cả các trạng thái. Nếu bạn muốn hạn chế biểu tượng chỉ với các liên kết bên ngoài chưa được truy cập, bạn có thể kết hợp các lớp và các lớp giả trạng thái liên kết trong bộ chọn của mình

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

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Kết hợp các lớp và trạng thái mở ra nhiều khả năng sáng tạo cho các liên kết của bạn. Nhớ kiểm tra màu sắc của bạn, hạn chế duy nhất của bạn từ thời điểm này là sự sáng tạo

Để minh họa một cách mang các danh sách và liên kết lại với nhau, zip ví dụ bao gồm một menu điều hướng thả xuống đơn giản, như trong Hình 31. Flyout menu là một hệ thống điều hướng rất phổ biến

Hình 31. Ảnh chụp màn hình của menu thả xuống ví dụ

Tóm lược

Nắm bắt tốt các danh sách kiểu dáng và liên kết là điều cần thiết cho các nhà phát triển web, vì chúng được sử dụng ở mọi nơi. Chúng được kết hợp thường xuyên để tạo điều hướng trang web; . Các kiểu liên kết xấu có thể gây nhầm lẫn nghiêm trọng cho mọi người và thậm chí có thể khiến một số người không sử dụng được trang web

câu hỏi bài tập

Làm cách nào để bạn chọn giữa các kiểu danh sách cơ bản, chẳng hạn như dấu đầu dòng vuông hoặc Chữ số La Mã trong danh sách có thứ tự?
Sprite hình ảnh là gì và tại sao bạn lại sử dụng nó?
Tại sao độ tương phản màu lại quan trọng và làm thế nào để bạn chắc chắn rằng màu liên kết của bạn đang sử dụng màu phù hợp?
Thứ tự chính xác để đặt kiểu trên các trạng thái liên kết khác nhau là gì?

đọc thêm

Ghi chú. Tài liệu này ban đầu được xuất bản như một phần của Chương trình giảng dạy tiêu chuẩn Web Opera, có sẵn dưới dạng 32. Danh sách tạo kiểu và liên kết, được viết bởi Ben Buchanan. Giống như bản gốc, nó được xuất bản theo Creative Commons Ghi công, Phi thương mại - Chia sẻ tương tự 2. 5 giấy phép

Trạng thái liên kết trong CSS là gì?

Liên kết là phần tử tương tác và có thể thay đổi cách hiển thị của chúng dựa trên trạng thái tương tác hiện tại của chúng với người dùng . Điều quan trọng là viết CSS cho từng trạng thái để biểu thị trực quan cho người dùng cách họ tương tác với liên kết.

Bốn trạng thái liên kết trong liên kết CSS là gì?

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

a. liên kết - một liên kết bình thường, chưa được truy cập

a. đã truy cập - một liên kết mà 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. hoạt động - một liên kết ngay khi nó được nhấp vào

5 trạng thái của liên kết a > là gì?

Có tổng cộng năm trạng thái khác nhau mà một siêu liên kết có thể có. bình thường, đã truy cập, di chuột, đang hoạt động, tiêu điểm .

Các liên kết có được gạch chân trong CSS không?

Các liên kết được gạch chân . Các liên kết chưa được truy cập có màu xanh lam.

programming css