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:
Tác giả: #drM

Nguồn: Sưu Tầm


Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS