Cách sử dụng các phần tử giả trước và sau trong CSS

Cách sử dụng các phần tử giả trước và sau trong CSS

Phần tử giả là một trong những bộ chọn nâng cao hơn có sẵn để sử dụng trong CSS. Mục đích chính đằng sau các bộ chọn này là tạo kiểu duy nhất, mà không làm thay đổi tài liệu HTML được sử dụng để tạo cấu trúc cơ bản của một trang web nhất định.





Đây là cách sử dụng phần tử giả trong CSS.



làm thế nào để xóa khác trên iPhone

Yếu tố giả phổ biến

Có một danh sách phong phú các yếu tố giả có sẵn để làm cho cuộc sống của một nhà phát triển web trở nên dễ dàng hơn. Một số phần tử giả này bao gồm:





  • Trước
  • Sau
  • Phông nền
  • Dòng đầu tiên
  • Chữ cái đầu tiên

Trong các tình huống cụ thể, một số phần tử giả sẽ được chứng minh là phù hợp hơn những phần tử khác, nhưng một điều không đổi là cấu trúc chung để sử dụng bất kỳ phần tử giả nào.

Ví dụ về cấu trúc phần tử giả


selector::pseudo-element{
/* css code */
}

Mặc dù bạn có thể sử dụng phần tử HTML làm bộ chọn, nhưng bạn nên sử dụng một lớp hoặc một id để tránh nhắm mục tiêu các phần tử không mong muốn trong bố cục của mình. Phần tử, kiểu hoặc dữ liệu mà bạn muốn chèn ở vị trí mong muốn phải được đặt giữa các dấu ngoặc nhọn.



Các phần tử giả trước và sau là phổ biến nhất trong danh sách và do có nhiều cách thực tế để sử dụng chúng — không khó để hiểu tại sao.

Sử dụng phần tử Before Pseudo-trong CSS

Mặc dù không phải là không thể, nhưng rất khó để chồng hình ảnh bằng văn bản có thể đọc được trong CSS. Điều này chủ yếu là do hình ảnh và văn bản sẽ chiếm cùng một vị trí trên một trang web.



Nó tương đối dễ dàng để gửi một hình ảnh đến nền của một nhóm văn bản , nhưng khi hình ảnh đó quá sáng, nó có xu hướng lấn át văn bản trên đó. Trong những trường hợp này, bước tiếp theo là cố gắng làm cho hình ảnh bớt mờ hơn bằng cách sử dụng thuộc tính opacity.

Vấn đề duy nhất là vì hình ảnh và văn bản chiếm cùng một vị trí nên văn bản cũng sẽ trở nên trong suốt hơn một chút.



Một trong số ít cách hiệu quả để giải quyết vấn đề này là sử dụng phần tử giả trước.

Sử dụng ví dụ trước phần tử giả


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Đoạn mã trên được tạo để sử dụng đồng thời với lớp HTML landingPage bên dưới. Như được hiển thị trong đoạn mã trên, bằng cách sử dụng phần tử giả trước, chúng ta có thể nhắm mục tiêu hình ảnh và sử dụng thuộc tính độ mờ trên nó trước khi hình ảnh được kết hợp với văn bản.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Điều này sẽ dẫn đến một lớp phủ được đặt trên hình ảnh và văn bản rõ ràng được hiển thị ở trên cùng, như thể hiện trong hình ảnh bên dưới:

Sử dụng phần tử After Pseudo trong CSS

Một cách sử dụng thực tế cho phần tử giả sau là để hỗ trợ việc tạo một biểu mẫu HTML. Hầu hết các biểu mẫu được tạo với một tập hợp các trường yêu cầu dữ liệu để gửi biểu mẫu thành công.

Một cách để chỉ ra rằng một trường trong biểu mẫu yêu cầu dữ liệu là đặt dấu hoa thị sau nhãn cho trường này. Phần tử giả sau cung cấp một cách thực tế để bạn thực hiện việc này.

Sử dụng Ví dụ về phần tử giả sau


.required::after{
content: '*';
color: red;
}

Chèn mã ở trên vào phần CSS của biểu mẫu của bạn sẽ đảm bảo rằng mọi nhãn có chứa lớp bắt buộc sẽ được theo sau bởi một dấu hoa thị màu đỏ. Phần tử giả sau cũng thực tế trong ví dụ này vì nó giúp tách kiểu dáng khỏi cấu trúc (điều này luôn lý tưởng trong phát triển phần mềm.)

cách chơi pokemon trên máy tính bảng android

Thuộc tính nội dung

Như được hiển thị trong ví dụ sau phần tử giả ở trên, thuộc tính nội dung là công cụ được sử dụng để chèn nội dung mới vào trang web. Thuộc tính này chỉ được sử dụng với các phần tử giả trước và sau.

Điều quan trọng cần lưu ý là ngay cả khi không có sẵn nội dung để cung cấp cho thuộc tính nội dung (chẳng hạn như trong ví dụ về phần tử giả trước ở trên), bạn vẫn được yêu cầu sử dụng thuộc tính nội dung trong các tham số của trước hoặc sau phần tử giả để chúng hoạt động như dự định.

Bây giờ bạn có thể sử dụng phần tử giả trong CSS

Trong bài viết này, bạn đã học cách xác định và sử dụng phần tử giả trong các chương trình CSS của mình. Bạn đã được giới thiệu về các phần tử giả trước và sau và được cung cấp các cách thực tế để sử dụng cả hai. Bạn cũng có thể thấy tại sao thuộc tính nội dung lại cần thiết để sử dụng thành công các phần tử giả trước và sau.

Đăng lại Đăng lại tiếng riu ríu E-mail 10 ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phút

Cần trợ giúp với CSS? Hãy thử các ví dụ mã CSS cơ bản này để bắt đầu, sau đó áp dụng chúng cho các trang web của riêng bạn.

Đọc tiếp Chủ đề liên quan
  • Lập trình
  • Thiết kế web
  • CSS
Giới thiệu về tác giả Kadeisha Kean(21 bài báo đã xuất bản)

Kadeisha Kean là Nhà phát triển Phần mềm Full-Stack và Người viết Kỹ thuật / Công nghệ. Cô ấy có khả năng khác biệt để đơn giản hóa một số khái niệm công nghệ phức tạp nhất; sản xuất vật liệu có thể dễ dàng hiểu được bởi bất kỳ người mới làm quen với công nghệ. Cô ấy đam mê viết lách, phát triển phần mềm thú vị và đi khắp thế giới (thông qua phim tài liệu).

Xem thêm từ Kadeisha Kean

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký