Thứ Năm, 26 tháng 12, 2013
CSS Id & Class
Id và lớp chọn lọc
Ngoài ra thiết lập một phong cách cho một phần tử HTML, CSS cho phép bạn chỉ định bộ chọn của riêng bạn được gọi là "id" và "đẳng cấp".
Id Selector
Bộ chọn id được sử dụng để xác định một phong cách cho một, yếu tố độc đáo duy nhất.
Bộ chọn id sử dụng thuộc tính id của phần tử HTML, và được định nghĩa với một "#".
Các quy tắc phong cách dưới đây sẽ được áp dụng cho các phần tử với id = "para1":
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Thử nó cho mình »
 | Làm không bắt đầu một tên ID với một số! |
|---|
Lớp Selector
Bộ chọn lớp được sử dụng để xác định một phong cách cho một nhóm các yếu tố. Không giống như các bộ chọn id, chọn lớp thường được sử dụng trên một số yếu tố.
Điều này cho phép bạn thiết lập một phong cách đặc biệt đối với nhiều phần tử HTML với cùng một lớp.
Bộ chọn lớp học sử dụng thuộc tính class HTML, và được định nghĩa với một "."
Trong ví dụ dưới đây, tất cả các phần tử HTML với class = "trung tâm" sẽ được căn giữa:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Thử nó cho mình »
Bạn cũng có thể xác định rằng các phần tử HTML chỉ cụ thể nên bị ảnh hưởng bởi một lớp.
Trong ví dụ dưới đây, tất cả các yếu tố p với class = "trung tâm" sẽ được căn giữa:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
Thử nó cho mình »
| Làm không bắt đầu một tên lớp với một số! |
|---|
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét