Chủ Nhật, 29 tháng 12, 2013
CSS Pseudo-elements
CSS pseudo-yếu tố được sử dụng để thêm các hiệu ứng đặc biệt để một số bộ chọn.
Cú pháp
Cú pháp của giả yếu tố:
selector:pseudo-element {property:value;}
Lớp CSS cũng có thể được sử dụng với giả yếu tố:
selector.class:pseudo-element {property:value;}
Các: dòng đầu tiên Pseudo-yếu tố
Các "tuyến đầu" giả yếu tố được sử dụng để thêm một phong cách đặc biệt để dòng đầu tiên của một văn bản.
Các "tuyến đầu" giả yếu tố duy nhất có thể được áp dụng để ngăn chặn các yếu tố cấp.
Ví dụ
Định dạng dòng đầu tiên của văn bản trong các yếu tố p:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can use the :first-line pseudo-element to add a special effect to the first line of a text.</p>
</body>
</html>
Thử nó cho mình »
Các thuộc tính sau áp dụng cho các "tuyến đầu" giả yếu tố:
- các thuộc tính font
- đặc tính màu sắc
- tính chất nền
- từ-khoảng cách
- letter-spacing
- trang trí văn bản
- dọc-align
- văn bản chuyển đổi
- line-height
- trong
Các: đầu tiên chữ Pseudo-yếu tố
"Đầu tiên chữ" giả yếu tố được sử dụng để thêm một phong cách đặc biệt để các chữ cái đầu tiên của một văn bản.
"Đầu tiên chữ" giả yếu tố duy nhất có thể được áp dụng để ngăn chặn các yếu tố cấp.
Ví dụ
Định dạng chữ cái đầu tiên của văn bản trong các yếu tố p:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Thử nó cho mình »
Các thuộc tính sau áp dụng cho các "đầu tiên chữ" giả yếu tố:
- các thuộc tính font
- đặc tính màu sắc
- tính chất nền
- thuộc tính lề
- tính chất đệm
- tính biên giới
- trang trí văn bản
- dọc-align (chỉ khi có "phao" là "không")
- văn bản chuyển đổi
- line-height
- phao
- trong
Giả thành phần và lớp học CSS
Giả thành phần có thể được kết hợp với các lớp CSS:
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
<p class="article">A paragraph in an article</p>
Ví dụ trên sẽ hiển thị các chữ cái đầu tiên của tất cả các đoạn văn với class = "bài viết", màu đỏ.
Nhiều Giả thành phần
Một số giả yếu tố này cũng có thể được kết hợp.
Trong ví dụ sau, chữ cái đầu tiên của một đoạn văn sẽ có màu đỏ, trong một kích thước phông chữ xx-lớn. Phần còn lại của dòng đầu tiên sẽ có màu xanh, và trong nhỏ mũ. Phần còn lại của đoạn văn sẽ được kích thước font chữ mặc định và màu sắc:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
Thử nó cho mình »
CSS - Các: trước khi Pseudo-yếu tố
Các ": trước khi" giả yếu tố có thể được sử dụng để chèn một số nội dung trước khi nội dung của một phần tử.
Ví dụ sau đây sẽ chèn một hình ảnh trước khi mỗi phần tử <h1>:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property
only if a !DOCTYPE is specified.</p>
</body>
</html>
Thử nó cho mình »
CSS - Các: sau khi giả phần tử
Các ": sau khi" giả yếu tố có thể được sử dụng để chèn một số nội dung sau khi nội dung của một phần tử.
Ví dụ sau đây sẽ chèn một hình ảnh sau khi mỗi phần tử <h1>:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1:after {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét