Khóa học CSS - Bài 25 - Phần tử giả lập Pseudo-elements

Quay về MỤC LỤC TỰ HỌC CSS

1. Cú pháp và công dụng của phần tử giả lập

·         Cú pháp:

Tên thẻ chọn::tên phần tử giả lập{thuộc tính: giá trị}

Ví dụ:

h1::after {
    content: url(linh.jpg);
}

·         Công dụng:

o   Định dạng dòng đầu tiên, chữ đầu tiên của đối tượng đã chọn.

o   Chèn nội dung dung vào trước (before) hoặc sau(after) nội dung phần tử đã chọn.

2. Phần tử giả lập ::first-line

Ví dụ:

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

3. Phần tử giả lập ::first-letter

Ví dụ:

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

4. Phần tử giả lập và lớp CSS

Ví dụ:

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

5. Khai báo nhiều phần tử giả lập

6. Phần tử giả lập ::before

Ví dụ:

h1::before {
    content: url(linh.jpg);
}

Chú ý: nội dung chèn vào phải đặt cùng cấp thư mục với tập tin hiện hành và tên file không được có khoảng trắng.

7. Phần tử giả lập ::after

Ví dụ:

h1::after {
    content: url(linh.jpg);
}

8. Phần tử giả lập ::selection

Dùng để định dạng phần chữ được quét khối trong trang web.

Ví dụ:

::-moz-selection { /*dùng cho Firefox*/
    color: red;
    background: yellow;
}

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

Nếu còn thắc mắc các bạn xem video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm