Cú pháp CSS cơ bản:
Selector { property:value; }
Trong đó:+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là
các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).
Ví dụ: body, h2, p, img, #title, #content, .username,…
Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể
viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết
selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho
các ảnh nằm trong #entry.
Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ
như thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác
nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên nếu khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần.
Nên trong trường hợp này, nếu bạn có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ
nền ghi là img .visitors thôi.
Một kiểu viết tên selector nữa đó là dựa trên tên các thuộc tính có trong
HTML. Ví dụ trong HTML ta có đoạn mã như vầy: <input name=”Search”
type=”Text” value=”Key Word”>. Để áp dụng thuộc tính CSS cho riêng ô tìm
kiếm này chúng ta sẽ dùng selector input[name=”Search”].
Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector
đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web
làm cho chúng có text màu đỏ.
+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: backgroundcolor, font-family, color, padding, margin,…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc
tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách
các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp
ngoặc nhọn sau selector.
Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }
Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó
sẽ làm tăng dung lượng lưu trữ CSS của bạn.
Ví dụ:
body {
background:#FFF;
bolor:#FF0000;
font-size:14pt
}
Đối với một trang web có nhiều thành phần có cùng một số thuộc tính,chúng ta có thể thực hiện gom gọn lại như sau:
h1 { color:#0000FF;
text-transform:uppercase } h2 {
color:#0000FF;
text-transform:uppercase;
}
h3 {
color:#0000FF;
text-transform:uppercase;
}
h1, h2, h3 {
color:#0000FF;
text-transform:uppercase;
}
+ Value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính là #FFF dùng để
định màu trắng cho nền trang.
Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu ngoặc
kép. Ví dụ: font-family:”Times New Roman”
Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo
với đơn vị của nó. Ví dụ: width:100 px. Nó sẽ làm CSS của bạn bị vô hiệu trên
Mozilla/Firefox hay Netscape.
Chú thích trong CSS:
Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú
thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau.
Chú thích trong CSS được viết như sau /* Nội dung chú thích */
Ví dụ:
/* Màu chữ cho trang web */
body {
color:red
}
Như vậy là ta đã biết cách viết CSS rồi phải không nào nhưng chưa hết mời bạn đọc phần tiếp theo Đơn vị CSS