Trang Chủ Xã hội Truyền thông Làm thế nào để sử dụng Pseudo-Classes để Liên kết Phong cách cho HTML5 và CSS3 Lập trình

Làm thế nào để sử dụng Pseudo-Classes để Liên kết Phong cách cho HTML5 và CSS3 Lập trình

Mục lục:

Video: CSS Efecto - 03 PseudoClases @JoseCodFacilito 2025

Video: CSS Efecto - 03 PseudoClases @JoseCodFacilito 2025
Anonim

Một khi bạn có một số phong cách đi vào HTML5 và CSS3 trang web của bạn, bạn có thể được một chút quan tâm đến các liên kết xấu xí. Các kiểu liên kết mặc định là hữu ích, nhưng chúng có thể không phù hợp với bảng màu của bạn.

Cách sắp xếp một liên kết chuẩn

Việc thêm phong cách vào liên kết thật dễ dàng. Sau khi tất cả, (thẻ xác định liên kết) chỉ là một thẻ HTML, và bạn có thể thêm một phong cách cho bất kỳ thẻ nào. Dưới đây là ví dụ, nơi các liên kết có màu đen với nền màu vàng:

a (màu: đen; background-color: yellow;}

Điều đó hoạt động tốt, nhưng liên kết phức tạp hơn một vài yếu tố khác. Liên kết thực sự có ba trạng thái :

  • Bình thường: Đây là trạng thái chuẩn. Không có CSS ​​nào được thêm vào, hầu hết các trình duyệt hiển thị các liên kết không được duyệt như là văn bản được gạch chân màu xanh lam.

  • Đã truy cập: Trạng thái này được bật khi người dùng truy cập một liên kết và quay lại trang hiện tại. Hầu hết các trình duyệt đều sử dụng kiểu gạch dưới màu tím để cho biết rằng một liên kết đã được truy cập.

  • Hover: Trạng thái di chuột được kích hoạt khi con chuột của người dùng kéo dài qua phần tử. Hầu hết các trình duyệt không sử dụng trạng thái di chuột trong cài đặt mặc định của họ.

Nếu bạn áp dụng một phong cách cho các thẻ trong một trang, phong cách sẽ được áp dụng cho tất cả các trạng thái của tất cả các neo.

Cách sắp xếp trạng thái liên kết

Bạn có thể áp dụng một phong cách khác cho mỗi tiểu bang. Trong ví dụ này, các đường liên kết màu đen trên nền trắng. Một liên kết truy cập có màu đen trên màu vàng; và, nếu con chuột đang di chuột qua một liên kết, liên kết là màu trắng với một nền đen.

Hãy xem mã và xem nó được thực hiện như thế nào:

linkStates. html a (màu: đen; background-color: white;} a: visited {color: black; background-color: # FFFF33;} a: hover {màu sắc: trắng; Màu nền: màu đen;}

Các lớp giả và liên kết

Liên kết này là bình thường

Liên kết này đã được truy cập

Con chuột đang lơ lửng trên liên kết

Không có gì đặc biệt về các liên kết trong phần HTML của mã. Các liên kết thay đổi trạng thái của họ một cách năng động trong khi người dùng tương tác với trang. Kiểu dáng xác định điều gì sẽ xảy ra ở các trạng thái khác nhau. Đây là cách bạn tiếp cận cách đặt mã với nhau:

  1. Xác định kiểu liên kết thông thường đầu tiên bằng cách tạo kiểu cho thẻ.

    Nếu bạn không xác định bất kỳ lớp giả khác, tất cả các liên kết sẽ theo phong cách liên kết bình thường.

  2. Tạo kiểu cho các liên kết đã ghé thăm.

    Liên kết sẽ sử dụng kiểu này sau khi trang web đó được truy cập trong phiên trình duyệt hiện tại. Bộ chọn lệnh a: truy cập cho biết các liên kết đã được truy cập.

  3. Tạo kiểu cho các liên kết hovered.

    Phong cách a: hover được áp dụng cho liên kết chỉ khi con chuột di chuột qua liên kết. Ngay khi con chuột rời khỏi liên kết, phong cách này sẽ trở lại theo phong cách chuẩn hoặc truy cập, nếu thích hợp.

Phương pháp liên kết tốt nhất

Kiểu liên kết có một số đặc điểm đặc biệt. Bạn cần phải cẩn thận một chút về cách bạn áp dụng phong cách cho liên kết. Xem xét các vấn đề sau khi áp dụng phong cách cho liên kết:

  • Thứ tự là quan trọng. Hãy chắc chắn để xác định các neo thông thường đầu tiên. Các lớp giả dựa trên kiểu neo tiêu chuẩn.

  • Hãy chắc chắn rằng chúng vẫn giống như liên kết. Điều quan trọng là người dùng biết điều gì đó là một liên kết. Nếu bạn lấy đi phần gạch chân và màu sắc thường cho thấy liên kết, người dùng của bạn có thể bị nhầm. Nói chung, bạn có thể thay đổi màu sắc mà không có rắc rối, nhưng các liên kết phải là văn bản gạch chân hoặc cái gì đó trông giống như một nút.

  • Thử nghiệm các liên kết đã ghé thăm. Thử nghiệm các liên kết truy cập là một chút khó khăn bởi vì, sau khi bạn truy cập vào một liên kết, nó sẽ được truy cập. Hầu hết các trình duyệt đều cho phép bạn xóa lịch sử trình duyệt, cũng như xóa các trạng thái liên kết đến không hề thấy.

  • Không thay đổi kích thước phông chữ ở trạng thái di chuột. Di chuột sẽ thay đổi trang theo thời gian thực. Một phong cách di chuột có kích thước phông chữ khác với liên kết thông thường có thể gây ra vấn đề. Trang được định dạng lại để chấp nhận phông chữ lớn hơn, có thể di chuyển một lượng lớn văn bản trên màn hình một cách nhanh chóng. An toàn nhất để thay đổi màu sắc hoặc đường viền trên di chuột nhưng không phải là gia đình phông chữ hoặc kích thước phông chữ.

Làm thế nào để sử dụng Pseudo-Classes để Liên kết Phong cách cho HTML5 và CSS3 Lập trình

Lựa chọn của người biên tập

Làm thế nào để Thiết lập nhân viên trong QuickBooks Quá trình biên chế nâng cao - núm vú

Làm thế nào để Thiết lập nhân viên trong QuickBooks Quá trình biên chế nâng cao - núm vú

Sau khi bạn thành lập công ty của bạn thông tin cho bảng lương trong QuickBooks, bạn đã sẵn sàng để thiết lập nhân viên cho biên chế. Là một phần của quy trình Thiết lập biên chế nâng cao, QuickBooks hiển thị trang web nơi bạn có thể thêm nhân viên của mình. Bạn cũng có thể thêm nhân viên bằng cách hiển thị Trung tâm Nhân viên. (Chọn lệnh Employee → Employee Center và nhấp chuột ...

Làm thế nào để Thiết lập biểu đồ Tài khoản QuickBooks 2012 - núm vú

Làm thế nào để Thiết lập biểu đồ Tài khoản QuickBooks 2012 - núm vú

Biểu đồ tài khoản Danh sách trong QuickBooks 2012 là danh sách các tài khoản bạn sử dụng để phân loại thu nhập, chi phí, tài sản, nợ phải trả và số vốn chủ sở hữu của chủ sở hữu. Nếu bạn muốn xem chi tiết đơn hàng cụ thể của dữ liệu tài chính trên báo cáo, bạn cần một tài khoản cho chi tiết đơn hàng đó. Nếu bạn muốn ngân sách ...

Cách Thiết lập Máy in để in QuickBooks 2015 Hóa đơn - núm vú

Cách Thiết lập Máy in để in QuickBooks 2015 Hóa đơn - núm vú

Nếu bạn dự định in hóa đơn từ QuickBooks 2015, bạn chỉ cần cài đặt máy in hóa đơn một lần, nhưng bạn cần phải chỉ rõ một số quy tắc in ấn chung về hoá đơn. Các quy tắc này cũng áp dụng cho các bản ghi nhớ tín dụng và các đơn đặt hàng, bằng cách này. Để cài đặt máy in của bạn để in hóa đơn, làm theo các bước sau: Chọn ...

Lựa chọn của người biên tập

Hình ảnh Các chế độ phát trên một Canon EOS 70D - núm vú

Hình ảnh Các chế độ phát trên một Canon EOS 70D - núm vú

Một trong những điều tốt nhất về Canon EOS 70D của bạn có thể xem ảnh ngay sau khi bạn chụp chúng. Không còn đoán xem bạn có bị bắn mà bạn muốn hay cần thử lại; không còn lãng phí tiền bạc khi phát triển và in những bức ảnh bốc mùi. Để chuyển máy ảnh sang chế độ Phát lại, chỉ cần ...

Lựa chọn của người biên tập

Cách xem tab Thông báo của bạn trên Twitter - những con cần

Cách xem tab Thông báo của bạn trên Twitter - những con cần

Xem ai đang tương tác với bạn trên Twitter trực tiếp qua @replies và @mentions (Tweets để đáp ứng hoặc nói chung đề cập đến người dùng cá nhân), các mục yêu thích (cách thừa nhận hoặc đánh dấu trang Tweets) và retweets (chia sẻ nội dung đã được đăng bởi một người dùng Twitter khác). Yêu thích Nhấn vào biểu tượng ngôi sao, hoặc nút Video yêu thích, thêm vào Tweet của bạn ...

Sai lầm Twitter # 1: @reply versus @mention - núm vú

Sai lầm Twitter # 1: @reply versus @mention - núm vú

Mọi người dùng Twitter - mới và cũ - đã trở thành nạn nhân của sự nhầm lẫn giữa @reply versus @mention. Khi nhà phát triển thịnh vượng và nhà chiến lược nội dung Anum Hussein giới thiệu 21 mẹo đăng bài xã hội trên hội nghị INBOUND hàng năm, mẹo để hiểu sự khác biệt giữa @reply và @mention là số một ...

Mẹo vặt để xây dựng sự hiện diện của cá nhân trên Twitter

Mẹo vặt để xây dựng sự hiện diện của cá nhân trên Twitter

Twitter ban đầu phổ biến để giúp các cá nhân giữ liên lạc với bạn bè và người quen của họ qua các cập nhật nhỏ. Nhiều Twitterers cá nhân vẫn có xu hướng sử dụng Twitter theo cách này, cập nhật một vòng tròn gần gũi của bạn bè về những suy nghĩ và những sự kiện xảy ra trong cuộc sống của họ. Theo thời gian, bạn có thể theo kịp với những người mà bạn có thể không liên hệ ...