Hiểu về yếu tố giả trước và sau

Biểu định kiểu xếp chồng (CSS) chủ yếu nhằm áp dụng các kiểu cho đánh dấu HTML, tuy nhiên trong một số trường hợp khi thêm đánh dấu bổ sung vào tài liệu là không cần thiết hoặc thực tế, có một tính năng trong CSS cho phép chúng tôi thêm đánh dấu bổ sung mà không làm gián đoạn tài liệu thực tế, cụ thể là yếu tố giả.

Bạn đã nghe về thuật ngữ này, đặc biệt là khi bạn đã theo dõi một số hướng dẫn của chúng tôi.

Thực tế có một vài thành viên gia đình CSS được phân loại là yếu tố giả chẳng hạn như :dòng đầu tiên, : chữ cái đầu tiên, :: lựa chọn, :trước và :sau. Nhưng, đối với bài viết này, chúng tôi sẽ giới hạn phạm vi bảo hiểm của chúng tôi chỉ :trước và :sau, “yếu tố giả” ở đây sẽ đề cập cụ thể đến cả hai. Chúng tôi sẽ xem xét chủ đề đặc biệt này từ những điều cơ bản.

Cú pháp và Hỗ trợ Trình duyệt

Các yếu tố giả đã thực sự tồn tại từ CSS1, nhưng :trước và :sau mà chúng ta đang thảo luận ở đây đã được phát hành tại CSS2.1. Lúc đầu, yếu tố giả sử dụng dấu hai chấm đơn cho cú pháp, sau đó khi web phát triển, trong CSS3, yếu tố giả đã được sửa đổi để sử dụng hai dấu hai chấm - trở thành ::trước & ::sau - để phân biệt với lớp giả (I E. :bay lượn, : hoạt động, và v.v.).

Tuy nhiên, cho dù bạn sử dụng định dạng dấu hai chấm đơn hay dấu hai chấm, các trình duyệt vẫn sẽ nhận ra. Và vì Internet Explorer 8 chỉ hỗ trợ định dạng dấu hai chấm, nên sử dụng dấu hai chấm sẽ an toàn hơn nếu bạn muốn tương thích trình duyệt rộng hơn.

Nó làm gì?

Nói tóm lại, yếu tố giả sẽ chèn thêm một yếu tố trước hoặc là sau yếu tố của nội dung, vì vậy khi chúng tôi thêm cả hai, chúng đều bằng nhau về mặt kỹ thuật, với đánh dấu sau.

:trước Đây là nội dung chính. :sau

Nhưng những yếu tố đó không thực sự được tạo ra trên tài liệu. Chúng vẫn có thể nhìn thấy trên bề mặt nhưng bạn sẽ không tìm thấy chúng trên nguồn tài liệu, vì vậy thực tế mà nói chúng là giả mạo yếu tố.

Sử dụng các yếu tố giả

Sử dụng yếu tố giả tương đối dễ dàng; cú pháp sau bộ chọn: trước sẽ thêm một yếu tố trước bộ chọn nội dung trong khi cú pháp này bộ chọn: sau sẽ thêm vào sau nó và để thêm một nội dung bên trong chúng, chúng ta có thể sử dụng Nội dung bất động sản.

Ví dụ: đoạn trích dưới đây sẽ thêm dấu ngoặc kép trước và sau blockquote.

 blockquote: trước nội dung: open-quote;  blockquote: after content: close-quote;

Tạo kiểu giả

Mặc dù là một yếu tố giả mạo, yếu tố giả thực sự hành động như một “thực” thành phần; chúng tôi có thể thêm bất kỳ khai báo kiểu nào theo chúng, chẳng hạn như thay đổi màu sắc, thêm nền, điều chỉnh kích thước phông chữ, căn chỉnh văn bản bên trong nó và vv.

 blockquote: trước nội dung: open-quote; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; nền: #ddd; phao: trái; vị trí: tương đối; trên cùng: 30px;  blockquote: after content: close-quote; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; nền: #ddd; phao: phải; vị trí: tương đối; dưới cùng: 40px;

Chỉ định kích thước

Các phần tử được tạo theo mặc định là một phần tử mức nội tuyến, vì vậy khi chúng ta sắp chỉ định chiều cao và chiều rộng, trước tiên chúng ta phải xác định nó là một phần tử khối bằng cách sử dụng hiển thị: khối tờ khai.

 blockquote: trước nội dung: open-quote; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; nền: #ddd; phao: trái; vị trí: tương đối; trên cùng: 30px; bán kính đường viền: 25px; / ** định nghĩa nó là một phần tử khối ** / display: block; chiều cao: 25px; chiều rộng: 25px;  blockquote: after content: close-quote; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; nền: #ddd; phao: phải; vị trí: tương đối; dưới cùng: 40px; bán kính đường viền: 25px; / ** định nghĩa nó là một phần tử khối ** / display: block; chiều cao: 25px; chiều rộng: 25px;

Đính kèm hình nền

Chúng tôi cũng có thể thay thế nội dung bằng một hình ảnh thay vì chỉ văn bản thuần túy. Mặc dù Nội dung tài sản cung cấp một url () chuỗi để chèn một hình ảnh, nhưng trong hầu hết các trường hợp, tôi thích sử dụng lý lịch tài sản để kiểm soát nhiều hơn đối với hình ảnh đính kèm.

 blockquote: trước nội dung: ""; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; phao: trái; vị trí: tương đối; trên cùng: 30px; bán kính đường viền: 25px; nền: url (hình ảnh / quotemark.png) -3px -3px #ddd; hiển thị: khối; chiều cao: 25px; chiều rộng: 25px;  blockquote: sau nội dung: ""; cỡ chữ: 24pt; văn bản-align: trung tâm; chiều cao dòng: 42px; màu: #fff; phao: phải; vị trí: tương đối; dưới cùng: 40px; bán kính đường viền: 25px; nền: url (hình ảnh / quotemark.png) -1px -32px #ddd; hiển thị: khối; chiều cao: 25px; chiều rộng: 25px;

Tuy nhiên, như bạn có thể thấy từ đoạn trích trên, chúng tôi vẫn đang khai báo Nội dung tài sản và lần này với một chuỗi rỗng. Các Nội dung tài sản là một yêu cầu và nên luôn luôn được áp dụng; nếu không yếu tố giả sẽ không làm việc bất cứ điều gì.

Kết hợp với các lớp giả

Mặc dù chúng là một loại khác nhau của giả, chúng ta có thể sử dụng lớp giả cùng với yếu tố giả ví dụ, cùng nhau trong một quy tắc CSS, nếu chúng ta muốn biến dấu ngoặc kép nền tối hơn một chút khi chúng ta di chuột qua blockquote.

 blockquote: hover: after, blockquote: hover: before background-color: # 555;

Thêm hiệu ứng chuyển tiếp

Và chúng ta thậm chí có thể áp dụng quá độ sở hữu chúng để tạo hiệu ứng chuyển màu duyên dáng.

 chuyển tiếp: tất cả 350ms; -o-chuyển tiếp: tất cả 350ms; -moz-quá độ: tất cả 350ms; -webkit-quá trình chuyển đổi: tất cả 350ms;

Thật không may, hiệu ứng chuyển tiếp dường như chỉ hoạt động trong phiên bản Firefox mới nhất. Hy vọng rằng nhiều trình duyệt sẽ bắt kịp để cho phép thuộc tính chuyển đổi được áp dụng trong yếu tố giả trong tương lai.

Bản giới thiệu
Tải xuống nguồn

Thêm cảm hứng

Để truyền cảm hứng cho bạn, chúng tôi đã chọn ba ví dụ thú vị có thể cung cấp cho bạn ý tưởng cho thiết kế web của bạn.

Bóng hấp dẫn

Trong hướng dẫn này, Paul Underwood đã giải thích cách tạo hiệu ứng bóng thực tế và hấp dẫn hơn bằng cách sử dụng :trước và :sau yếu tố giả. Cả hai đều được định vị tuyệt đối và được đặt ở phía sau với tiêu cực chỉ số z giá trị.

Hiệu ứng hình ảnh xếp chồng

Sử dụng yếu tố giả để tạo hiệu ứng hình ảnh xếp chồng lộn xộn chỉ với một hình ảnh duy nhất trên đánh dấu cũng có thể. Các yếu tố giả được sử dụng để tạo ảo ảnh của các hình ảnh xếp chồng lên nhau ở phía sau hình ảnh thực tế bằng cách sử dụng âm bản chỉ số z.

Phần kết luận

Pyếu tố seudo chỉ đơn giản là “mát mẻ” và cuối cùng có thể sử dụng, về cơ bản chúng ta có hai yếu tố tiền thưởng cho mọi yếu tố chúng ta thêm vào mà không can thiệp vào cấu trúc HTML thực tế, và sau đó biến chúng thành hầu hết mọi thứ chúng ta có thể tưởng tượng.

Thực sự có một số cải tiến cho yếu tố giả hiện đang được thực hiện, chẳng hạn như yếu tố giả lồng nhau div :: trước :: trước nội dung: "; và nhiều yếu tố giả div :: trước (3) nội dung: "; điều này rõ ràng sẽ mở ra nhiều khả năng hơn trong thực hành thiết kế web trong tương lai. Mặc dù chúng đang được triển khai trong các trình duyệt hiện tại, chúng ta hãy kiên nhẫn chờ đợi ngay bây giờ.