Tìm hiểu về pseudo-element trong CSS – Freetuts

Ở bài trước mình đã khám phá về Pseudo-classes là gì, và mình cũng đã lấy ví dụ cho một số ít pseudo-class .

Bài viết này được đăng tại

freetuts.net

, không được copy dưới mọi hình thức.

Trong bài học kinh nghiệm này mình tìm hiểu và khám phá về Pseudo-Elements là gì ? CSS tương hỗ những pseudo-element nào. Mình cùng tìm hiểu và khám phá trong bài học kinh nghiệm này nhé .

1 .Pseudo-Element là gì

 Pseudo-Element được sử dụng để định kiểu các phần được chỉ định của một phần tử.

Ví dụ, nó hoàn toàn có thể được sử dụng để :Bài viết này được đăng tại [ không lấy phí tuts. net ]
Định dạng style cho vần âm tiên phong hoặc dòng tiên phong của một thành phần .
Chèn nội dung trước hoặc sau nội dung của một thành phần .

Cú pháp

selector::pseudo-element {
property:value;
}

Lưu ý ký hiệu hai dấu hai chấm – :: first-line so với : first-line
Dấu hai chấm kép đã thay thế sửa chữa ký hiệu dấu hai chấm đơn cho những pseudo-element trong CSS3. Đây là một nỗ lực từ W3C để phân biệt giữa pseudo-classes và pseudo-element .
Cú pháp dấu hai chấm đơn được sử dụng cho cả hai pseudo-classes và pseudo-element trong CSS2 và CSS1 .
Để thích hợp ngược, cú pháp dấu hai chấm đơn được gật đầu cho những pseudo-element trong CSS2 và CSS1 .

2. Một số pseudo-element

Trong CSS có tất cả các pseudo-element sau ::first-line, ::first-letter, ::before, ::after, ::selection

::first-line

 ::first-line được sử dụng để thêm style CSS cho dòng đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho dòng đầu tiên của phần tử p

Ví dụ
RUN

p::first-line {color: red;};
span::first-line {color: red;}

Và tác dụng của ví dụ trên :

Từ tác dụng trên ta có 1 số ít điểm quan tâm sau :

::first-line chỉ áp dụng cho phần tử block như div, p, h1–h6 …

Các thuộc tính sau được áp dụng cho ::first-line:

• các thuộc tính font
• các thuộc tính color
• các thuộc tính background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter

::first-letter được sử dụng để thêm style CSS cho ký tự đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho ký tự đầu tiên của phần tử p

Ví dụ
RUN

p::first-letter {color: red; }
span::first-letter {color: red;}

Và tác dụng của ví dụ trên :

Từ tác dụng trên ta có 1 số ít điểm quan tâm sau :

::first-letter chỉ áp dụng cho phần tử block như div, p, h1–h6 …

Các thuộc tính sau được vận dụng cho :: first-letter :

• Các thuộc tính font
• Các thuộc tính color 
• Các thuộc tính background 
• Các thuộc tính margin 
• Các thuộc tính padding 
• Các thuộc tính border 
• text-decoration
• vertical-align (chỉ khi “float” là “none”)
• text-transform
• line-height
• float
• clear

::before

::before được sử dụng để chèn một số nội dung trước nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười ở phía trước nội dung của phần tử h1

Ví dụ
RUN

h1::before {
   content: url(https://final-blade.com/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và tác dụng của ví dụ trên :

::after

::after dùng để chèn một số nội dung sau nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười sau nội dung của phần tử h1.

Ví dụ
RUN

h1::after {
   content: url(https://final-blade.com/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và hiệu quả của ví dụ trên :

::selection

::selection dùng để thiết lập style CSS cho nội dung phần tử được chọn bởi người dùng (bằng thao tác như double-click vào nội dung hay giữ chuột trái để chọn nội dung).

Ở ví dụ này, mình sẽ thiết lập màu nền (background) là màu vàng và màu chữ (color) là màu đỏ nội dung được chọn của phần tử p, div, span.

Ví dụ
RUN

::-moz-selection {
   color: red;
   background: yellow;
}
::selection {
   color: red;
   background: yellow;
}

Lưu ý:

::selection không được hỗ trợ cho trình duyệt Internet Explorer 8 và phiên bản trước đó.

Firefox hỗ trợ pseudo-element thay thế đó là ::-moz-selection

Một số thuộc tính CSS sau có thể áp dụng cho ::selection như color, background, cursor, và outline.

3. Lời kết

Như vậy là mình đã trình bày xong pseudo-element trong CSS là gì và cũng đã lấy vị dụ cho các pseudo-element như ::before, ::after, ::selection, ::first-line, ::first-letter.

Trong quy trình viết không tránh khỏi sai sót, nếu có điều gì không hài hòa và hợp lý rất mong nhận được sự góp ý chân thành của những bạn để bài viết của mình ngày một tốt hơn .
Cám ơn những bạn đã đọc. Chúc những bạn vận dụng tốt .
Tham khảo : w3shool.com

Source: https://final-blade.com
Category : Kiến thức Internet