Thứ Bảy, 28 tháng 12, 2013
CSS Phân nhóm và Nesting chọn lọc
Nhóm chọn lọc
Trong phong cách thường có yếu tố với cùng một phong cách.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
Để giảm thiểu các mã, bạn có thể chọn cùng nhóm.
Tách riêng từng chọn bằng dấu phẩy.
Trong ví dụ dưới đây, chúng tôi đã được nhóm các bộ chọn từ các mã trên:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p
{
color:green;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
Chọn lọc làm tổ
Có thể áp dụng một phong cách cho một chọn trong một chọn.
Trong ví dụ dưới đây, một phong cách được quy định cho tất cả các yếu tố p, một phong cách được quy định cho tất cả các phần tử với class = "đánh dấu", và một phong cách thứ ba được quy định chỉ cho các yếu tố p trong các thành phần với class = "đánh dấu":
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
This isn't a paragraph, therefore has no blue text nor alignment.
</div>
<div class="marked">
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</div>
</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