Khi tạo kiểu cho các liên kết, điều quan trọng là phải hiểu cách sử dụng các lớp giả để tạo kiểu cho trạng thái của chúng một cách hiệu quả. Điều quan trọng nữa là phải biết cách tạo kiểu cho các liên kết để sử dụng trong các tính năng giao diện phổ biến có nội dung khác nhau, chẳng hạn như menu điều hướng và tab. Chúng ta sẽ xem xét cả hai chủ đề này trong bài viết này Show Chúng tôi đã xem xét cách các liên kết được triển khai trong HTML của bạn theo các phương pháp hay nhất trong Tạo siêu liên kết. Trong bài viết này, chúng tôi sẽ xây dựng dựa trên kiến thức này, chỉ cho bạn các phương pháp hay nhất để tạo kiểu cho chúng Điều đầu tiên cần hiểu là khái niệm về trạng thái liên kết - các trạng thái khác nhau mà liên kết có thể tồn tại trong. Chúng có thể được tạo kiểu bằng cách sử dụng khác nhau
Ví dụ sau đây minh họa cách hoạt động của một liên kết theo mặc định (CSS đang phóng to và căn giữa văn bản để làm cho văn bản nổi bật hơn) Ghi chú. Tất cả các liên kết trong các ví dụ trên trang này đều là liên kết giả — một Bạn sẽ nhận thấy một số điều khi khám phá các kiểu mặc định
Điều thú vị là, các kiểu mặc định này gần giống như chúng đã trở lại trong những ngày đầu của trình duyệt vào giữa những năm 1990. Điều này là do người dùng biết và mong đợi hành vi này - nếu các liên kết được tạo kiểu khác, nó sẽ gây nhầm lẫn cho nhiều người. Điều này không có nghĩa là bạn hoàn toàn không nên tạo kiểu cho các liên kết. Nó chỉ có nghĩa là bạn không nên đi quá xa so với hành vi dự kiến. Bạn nên ít nhất
Có thể tắt/thay đổi các kiểu mặc định bằng cách sử dụng các thuộc tính CSS sau
Ghi chú. Bạn không chỉ bị giới hạn ở các thuộc tính trên để tạo kiểu cho các liên kết của mình — bạn có thể tự do sử dụng bất kỳ thuộc tính nào bạn thích Bây giờ chúng ta đã xem xét một số trạng thái mặc định một cách chi tiết, hãy xem xét một tập hợp các kiểu liên kết điển hình Để bắt đầu, chúng tôi sẽ viết ra các bộ quy tắc trống của chúng tôi Thứ tự này rất quan trọng vì các kiểu liên kết được xây dựng dựa trên nhau. Ví dụ: các kiểu trong quy tắc đầu tiên sẽ áp dụng cho tất cả các quy tắc tiếp theo. Khi một liên kết được kích hoạt, nó cũng thường được di chuột qua. Nếu bạn đặt những thứ này sai thứ tự và bạn đang thay đổi các thuộc tính giống nhau trong mỗi bộ quy tắc, thì mọi thứ sẽ không hoạt động như bạn mong đợi. Để ghi nhớ thứ tự, bạn có thể thử sử dụng cách ghi nhớ như LoVe Fears HAte Bây giờ, hãy thêm một số thông tin khác để tạo kiểu đúng cách Chúng tôi cũng sẽ cung cấp một số HTML mẫu để áp dụng CSS cho Đặt cả hai lại với nhau cho chúng ta kết quả này Vậy chúng ta đã làm gì ở đây?
Trong phần học tập tích cực này, chúng tôi muốn bạn sử dụng bộ quy tắc trống của chúng tôi và thêm các khai báo của riêng bạn để làm cho các liên kết trông thật bắt mắt. Sử dụng trí tưởng tượng của bạn, đi hoang dã. Chúng tôi chắc chắn rằng bạn có thể nghĩ ra thứ gì đó thú vị hơn và có đầy đủ chức năng như ví dụ của chúng tôi ở trên Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để chèn ví dụ mà chúng tôi đã trình bày ở trên Một thực tế phổ biến là bao gồm các biểu tượng trên các liên kết để cung cấp thêm chỉ báo về loại nội dung mà liên kết trỏ đến. Hãy xem một ví dụ thực sự đơn giản về việc thêm một biểu tượng vào các liên kết bên ngoài (các liên kết dẫn đến các trang web khác). Một biểu tượng như vậy thường trông giống như một mũi tên nhỏ chỉ ra khỏi hộp. Đối với ví dụ này, chúng tôi sẽ sử dụng ví dụ tuyệt vời này từ icon8. com Hãy xem một số HTML và CSS sẽ mang lại cho chúng ta hiệu ứng mà chúng ta muốn. Đầu tiên, một số HTML đơn giản để tạo kiểu Tiếp theo, CSS Vì vậy, những gì đang xảy ra ở đây? . Quy tắc cuối cùng, tuy nhiên, là thú vị. chúng tôi đang chèn một hình nền tùy chỉnh vào các liên kết bên ngoài theo cách tương tự như cách chúng tôi đã xử lý trong bài viết trước. Tuy nhiên, lần này, chúng tôi đang sử dụng tốc ký Chúng tôi cũng sử dụng Cuối cùng, chúng tôi đặt một số Một lời cuối cùng. làm cách nào chúng tôi chỉ chọn các liên kết bên ngoài? . Do đó, văn bản "http" chỉ xuất hiện trong các liên kết bên ngoài (như liên kết thứ hai và thứ ba) và chúng tôi có thể chọn liên kết này bằng một. À chính nó đấy. Hãy thử xem lại phần học tích cực ở trên và thử kỹ thuật mới này Ghi chú. Các giá trị Ghi chú. Đừng lo lắng nếu bạn chưa quen với nền và thiết kế web đáp ứng; Các công cụ bạn đã khám phá cho đến nay trong bài viết này cũng có thể được sử dụng theo những cách khác. Ví dụ: các trạng thái như di chuột có thể được sử dụng để tạo kiểu cho nhiều phần tử khác nhau, không chỉ các liên kết — bạn có thể muốn tạo kiểu cho trạng thái di chuột của đoạn văn, mục danh sách hoặc những thứ khác Ngoài ra, các liên kết được tạo kiểu khá phổ biến để trông và hoạt động giống như các nút trong một số trường hợp nhất định. Menu điều hướng trang web có thể được đánh dấu là một tập hợp các liên kết và điều này có thể được tạo kiểu để trông giống như một tập hợp các nút hoặc tab điều khiển cung cấp cho người dùng quyền truy cập vào các phần khác của trang web. Hãy cùng khám phá cách Đầu tiên, một số HTML Và bây giờ CSS của chúng tôi Điều này cho chúng ta kết quả sau HTML định nghĩa phần tử CSS bao gồm kiểu dáng cho vùng chứa và các liên kết chứa trong đó
Chúng tôi hy vọng bài viết này đã cung cấp cho bạn tất cả những gì bạn cần biết về liên kết — hiện tại. Bài viết cuối cùng trong mô-đun văn bản Kiểu dáng của chúng tôi nêu chi tiết cách sử dụng phông chữ tùy chỉnh trên trang web của bạn (hoặc phông chữ web, vì chúng được biết đến nhiều hơn) |
