Cú pháp và Selector trong CSS
Cú pháp và Selector trong CSS
Cú pháp CSS
B quy t c c a CSS g m có công c ch n (selector) và kh i khai báo ộ ắ ủ ồ ụ ọ ố
(declaration). Công c ch n tr t i ph n tụ ọ ỏ ớ ầ ừ HTML mà b n mu n t o ki u ạ ố ạ ể
cách. Kh i khai báo ch a m t ho c nhi u khai báo, phân tách v i nhau ố ứ ộ ặ ề ớ
b ng các d u ch m ph y. M i khai báo g m tên và giá tr đ c tính CSS, ằ ấ ấ ẩ ỗ ồ ị ặ
phân tách b ng d u ph y.ằ ấ ẩ
Khai báo CSS luôn k t thúc b ng d u ch m ph y, kh i khai báo n m trong ế ằ ấ ấ ẩ ố ằ
các d u ngo c móc. Trong ví d d i đây, các ph n tấ ặ ụ ướ ầ ử <p> s đ c căn ẽ ượ
gi a, ch màu đ .ữ ữ ỏ
p {
color: red;
text-align: center;
}
CSS Selector
Công c ch n trong CSS dùng đ tìm (và ch n) ph n t HTML d a trên ụ ọ ể ọ ầ ử ự
tên, id, class, thu c tính… c a ph n t .ộ ủ ầ ử
Element Selector
Đây là công c ch n ph n t d a vào tên ph n t . B n có th ch n t t c ụ ọ ầ ử ự ầ ử ạ ể ọ ấ ả
các ph n tầ ử <p> trên trang nh d i đây (trong tr ng h p này, t t c ư ướ ườ ợ ấ ả
ph n tầ ử <p> s đ c căn gi a và có màu đ ).ẽ ượ ữ ỏ
p {
text-align: center;
color: red;
}
id Selector
Công c này dùng thu c tính id c a ph n t HTML đ ch n.ụ ộ ủ ầ ử ể ọ id c a m t ủ ộ
ph n t trong trang ph i là đ c nh t nên id Selector dùng đ ch n m t ầ ử ả ộ ấ ể ọ ộ
ph n t duy nh t.ầ ử ấ
Đ ch n ph n t b ngể ọ ầ ử ằ id, dùng kí t # phía tr c, sau đó là id c a ph n t .ự ướ ủ ầ ử
Quy đ nh ki u cách d i đây s áp d ng cho ph n t HTML ị ể ướ ẽ ụ ầ ử
có id=”para1”.
#para1 {
text-align: center;
color: red;
}
L u ý: Tênư id không th b t đ u b ng s .ể ắ ầ ằ ố
class Selector
Công c này ch n ph n t b ng thu c tínhụ ọ ầ ử ằ ộ class. Đ ch n, vi t kí t (.) ể ọ ế ự
sau đó là tên l p. ví d d i đây, t t c các ph n t HTML có ớ Ở ụ ướ ấ ả ầ ử
class="center" s có màu đ và đ c căn gi a.ẽ ỏ ượ ữ
.center {
text-align: center;
color: red;
}
B n có th ch đ nh ch nh ng ph n t HTML nh t đ nh là ch u tác đ ng ạ ể ỉ ị ỉ ữ ầ ử ấ ị ị ộ
c aủ class. ví d d i đây ch ph n tỞ ụ ướ ỉ ầ ử <p> có class="center" là đ c căn ượ
gi a.ữ
p.center {
text-align: center;
color: red;
}
Ph n t HTML có th tham chi u t i nhi u h n m t l p. ví d d i ầ ử ể ế ớ ề ơ ộ ớ Ở ụ ướ
đây, ph n tầ ử <p>đ c t o ki u cách theoượ ạ ể class="center" và class="large".
<p class="center large">Đo n văn s d ng hai l p.</p>ạ ử ụ ớ
L u ýư: tên class không th b t đ u b ng s .ể ắ ầ ằ ố
Group Selector
N u có các ph n t cùng ki u cách nh th này:ế ầ ử ể ư ế
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
B n có th nhóm các công c ch n l i đ t i gi n hóa code, các công c ạ ể ụ ọ ạ ể ố ả ụ
ch n phân tách b ng d u ph y. D i đây là cách nhóm các công c ch n ọ ằ ấ ẩ ướ ụ ọ
bên trên.
h1, h2, p {
text-align: center;
color: red;
}
Comment trong CSS
Comment đ c dùng đ gi i thích đo n mã, có th giúp ch nh s a l i mã ượ ể ả ạ ể ỉ ử ạ
ngu n v sau khi c n. Trình duy t s không hi n th các comment. ồ ề ầ ệ ẽ ể ị
Comment trong CSS b t đ u b ng /* và k t thúc b ng */ và có th tr i dài ắ ầ ằ ế ằ ể ả
trên nhi u dòng.ề
p {
color: red;
/* Đây là bình lu n m t dòng */ậ ộ
text-align: center;
}
/* Đây là
bình lu nậ
nhi u dòng */ề
Hãy th c đo n code d i đây và xem cách trình duy t hi n th trong nh ử ả ạ ướ ệ ể ị ả
bên d i.ướ
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Tiêu đ này đ c gi nguyên</h1>ề ượ ữ
<p class="center">Tiêu đ này có màu đ và đ c căn gi a.</p>ề ỏ ượ ữ
<p class="center large">Tiêu đ này có màu đ , đ c căn gi a và có kích ề ỏ ượ ữ
th c ướ
to.</p>
</body>
</html>
Dùng công c ch n đ t o ki u cách cho ph n t HTMLụ ọ ể ạ ể ầ ử
có thể bạn quan tâm
Nghiên cứu phương pháp điều khiển mạng OBS trong phương pháp làm lệch...
66
894
288
Khoa học tự nhiên
66
(New)
Các mối nguy liên quan đến ATVSTP, giải pháp trong nuôi trồng thủy sản
28
967
281
Kỹ thuật
28
(New)
Văn hoá doanh nghiệp và tầm quan trọng của yếu tố văn hoá trong DN, đá...
74
845
331
Kinh tế quản lý
74
(New)
THỰC TRẠNG VÀ GIẢI PHÁP TĂNG TỶ TRỌNG THU TỪ HOẠT ĐỘNG DỊCH VỤ TRONG C...
97
864
401
Thạc sĩ cao học
97
(New)
Luận văn: Đánh giá, nghiên cứu và đề xuất các giải pháp nhằm nâng cao...
56
738
367
Kinh tế quản lý
56
(New)
Phân tích tình hình thị trường trong nước và một số giải pháp cho vấn...
85
835
354
Kinh tế - Thương mại
85
(New)
Ứng dụng kháng thể kháng ovalbumin tinh chế định lượng ovalbumin trong...
75
733
318
Khoa học tự nhiên
75
(New)
Tìm hiểu pháp luật về bảo hiểm xã hội của Việt Nam và Singapore và một...
60
736
301
Kinh tế quản lý
60
(New)
thông tin tài liệu
Bộ quy tắc của CSS gồm có công cụ chọn (selector) và khối khai báo (declaration). Công cụ chọn trỏ tới phần từ HTML mà bạn muốn tạo kiểu cách. Khối khai báo chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo gồm tên và giá trị đặc tính CSS, phân tách bằng dấu phẩy.
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
xem nhiều trong tuần
Giáo trình Quản trị học của Đại học kinh tế quốc dân
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
MẪU GIỚI THIỆU CHUYỂN SINH HOẠT HỘI
PHÂN TÍCH CHUỖI CUNG ỨNG CỦA COCA COLA VIỆT NAM
Địa lý 12 Phát triển cây công nghiệp lâu năm Tây Nguyên
IOE tiếng Anh lớp 10 lần 21 niên khóa 2016
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
