Hướng dẫn pseudo element css - yếu tố giả css

Nội dung

• Pseudo-Elements là gì?
• Cú pháp
• Một số Pseudo-element
  • ::first-line
  • ::first-letter
  • ::before
  • ::after
  • ::marker
  • ::selection
• Pseudo-elements và CSS Classes
• Multiple Pseudo-elements
• Pseudo Elements trong CSS

Pseudo-Elements là gì?

Cú pháp
Ví dụ, nó có thể sử dụng để:

• Một số Pseudo-element
• Pseudo-elements và CSS Classes

Cú pháp

Một số Pseudo-element

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

Một số Pseudo-element

::first-line

Pseudo-elements và CSS Classes
Ví dụ này định dạng dòng đầu tiên của văn bản trong tất cả các phần tử

:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Multiple Pseudo-elements ::first-line chỉ có thể áp dụng cho phần tử block.

Pseudo Elements trong CSS

• Pseudo-element được sử dụng để định kiểu (style) cho một phần được chỉ định của một phần tử. Ví dụ, nó có thể sử dụng để:
• Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử.
• Chèn nội dung trước hoặc sau nội dung của một phần tử.

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  4

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  5

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  6

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  7

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  8

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  9

• 
  p::first-letter {
    color: #ff0000;
    font-size: xx-large;
  }
  

  0

::first-letter

Cú pháp của pseudo-elements:
Ví dụ này định dạng chữ cái đầu tiên của văn bản trong tất cả các phần tử

:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::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 định dạng dòng đầu tiên của văn bản trong tất cả các phần tử : ::first-letter chỉ có thể áp dụng cho phần tử block.

Lưu ý: ::first-line chỉ có thể áp dụng cho phần tử block.

• Pseudo-element được sử dụng để định kiểu (style) cho một phần được chỉ định của một phần tử. Ví dụ, nó có thể sử dụng để:
• Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử.
• Chèn nội dung trước hoặc sau nội dung của một phần tử.
• Cú pháp của pseudo-elements:
• ::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 định dạng dòng đầu tiên của văn bản trong tất cả các phần tử :
• Lưu ý: ::first-line chỉ có thể áp dụng cho phần tử block.

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  6
• Các thuộc tính sau áp dụng cho ::first-line :

• 
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  8
• Thuộc tính

  
  p::first-line {
    color: #ff0000;
    font-variant: small-caps;
  }
  

  1

• 
  h2::before {
    content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
  }
  

  3

• 
  p::first-letter {
    color: #ff0000;
    font-size: xx-large;
  }
  

  0

::before

Thuộc tính

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

::after

Thuộc tính

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

::marker

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::marker {
  color: red;
  font-size: 23px;
}

::selection

Lưu ý: ::first-letter chỉ có thể áp dụng cho phần tử block.
Các thuộc tính sau đâu có thể được áp dụng cho

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

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

Pseudo-elements và CSS Classes

Multiple Pseudo-elements

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Multiple Pseudo-elements

Pseudo Elements trong CSS
Trong ví dụ này, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước phông chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có chữ hoa nhỏ. Phần còn lại của đoạn văn sẽ có kích thước và màu phông chữ mặc định:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Pseudo Elements trong CSS

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}

h2::before {
  content: url(https://timoday.edu.vn/wp-content/uploads/2021/05/smiley.gif);
}