Yếu tố giả

Podcast CSS – 014: Phần tử giả

Nếu bạn đã có một bài viết về nội dung và bạn muốn chữ cái đầu tiên phải là chữ cái lớn hơn nhiều— làm cách nào để đạt được điều đó?

Trong CSS, bạn có thể sử dụng phần tử giả ::first-letter để có được loại chi tiết thiết kế này.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Phần tử giả giống như việc thêm hoặc nhắm mục tiêu một phần tử bổ sung mà không phải thêm HTML khác. Giải pháp mẫu này, sử dụng ::first-letter, là một trong nhiều phần tử giả. Họ có nhiều vai trò, Trong bài học này, bạn sẽ tìm hiểu những phần tử giả có sẵn và cách sử dụng chúng.

::before và ::after

Cả hai thuộc tính ::before và ::after phần tử giả tạo phần tử con bên trong một phần tử chỉ khi bạn xác định thuộc tính content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content có thể là bất kỳ chuỗi nào —kể cả một lời nhắc trống— nhưng hãy lưu ý rằng trình đọc màn hình đều có thể thông báo bất kỳ nội dung nào khác ngoài một chuỗi trống. Bạn có thể thêm hình ảnh url, Thao tác này sẽ chèn hình ảnh theo kích thước ban đầu, nên bạn sẽ không thể đổi kích thước ảnh. Bạn cũng có thể chèn counter.

Sau khi tạo một phần tử ::before hoặc ::after, bạn có thể tạo kiểu theo ý muốn mà không có giới hạn. Bạn chỉ có thể chèn phần tử ::before hoặc ::after vào một phần tử chấp nhận các phần tử con (các thành phần có cây tài liệu), do đó các phần tử như <img />, <video> và <input> sẽ không hoạt động.

::first-letter

Chúng ta đã gặp phần tử giả này ở đầu bài học. Xin lưu ý rằng không phải thuộc tính CSS nào cũng có thể sử dụng khi nhắm mục tiêu ::first-letter. Sau đây là các cơ sở lưu trú hiện có:

• color
• Tài sản background (chẳng hạn như background-image)
• Tài sản border (chẳng hạn như border-color)
• float
• Tài sản font (chẳng hạn như font-size và font-weight)
• thuộc tính văn bản (chẳng hạn như text-decoration và word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line phần tử giả sẽ cho phép bạn tạo kiểu cho dòng văn bản đầu tiên chỉ khi phần tử có ::first-line được áp dụng có giá trị display là block, inline-block, list-item, table-caption hoặc table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Giống như phần tử giả ::first-letter, bạn chỉ có thể sử dụng một số thuộc tính CSS:

• color
• background cơ sở lưu trú
• font cơ sở lưu trú
• text cơ sở lưu trú

::backdrop

Nếu bạn có một phần tử hiển thị ở chế độ toàn màn hình, chẳng hạn như <dialog> hoặc <video>, bạn có thể tạo kiểu cho phông nền—khoảng cách giữa phần tử và phần còn lại của trang—bằng Phần tử giả ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker phần tử giả cho phép bạn tạo kiểu cho dấu đầu dòng hoặc số cho một mục danh sách hoặc mũi tên của phần tử <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Chỉ một số ít tài sản CSS được hỗ trợ cho ::marker:

• color
• content
• white-space
• font cơ sở lưu trú
• Các thuộc tính animation và transition

Bạn có thể thay đổi biểu tượng đánh dấu bằng cách sử dụng thuộc tính content. Ví dụ: bạn có thể sử dụng thuộc tính này để đặt dấu cộng và dấu trừ cho trạng thái đóng và trống của phần tử <summary>.

::selection

::selection phần tử giả cho phép bạn tạo kiểu cho văn bản đã chọn.

::selection {
  background: green;
  color: white;
}

Bạn có thể sử dụng phần tử giả này để tạo kiểu cho tất cả văn bản đã chọn như trong bản minh hoạ ở trên. Bạn cũng có thể sử dụng mã này kết hợp với các bộ chọn khác để có kiểu lựa chọn cụ thể hơn.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Giống như các phần tử giả khác, chỉ cho phép một số thuộc tính CSS:

• color
• background-color nhưng không phải background-image
• text cơ sở lưu trú

::placeholder

Bạn có thể thêm gợi ý trợ giúp vào các thành phần biểu mẫu, chẳng hạn như <input> có thuộc tính placeholder. ::placeholder phần tử giả cho phép bạn tạo kiểu cho văn bản đó.

input::placeholder {
  color: darkcyan;
}

::placeholder chỉ hỗ trợ một số quy tắc CSS:

• color
• background cơ sở lưu trú
• font cơ sở lưu trú
• text cơ sở lưu trú

::cue

Cuối cùng trong chuyến tham quan phần tử giả này là Phần tử giả ::cue. Điều này cho phép bạn tạo kiểu cho các tín hiệu WebVTT, là phụ đề của phần tử <video>.

Bạn cũng có thể truyền bộ chọn vào ::cue, công cụ này cho phép bạn tạo kiểu cho các phần tử cụ thể bên trong phụ đề.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về phần tử giả