NTM Solutions

Thứ Sáu, 20 tháng 4, 2018

Tự 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:

Nguồn: Lớp học vi tính .COM