1. Cú pháp CSS:
Trước khi tìm hiểu CSS mời các bạn theo dõi ví dụ dưới đây.
Ví dụ: để đổ “xanh nhạt” cho website thì bạn
cần dùng code
+
Trong HTML: <body bgcolor=”#00BFF3”>
+
Trong CSS: body { background-color:#00BFF3; }
Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS. Tiếp theo bạn sẽ xem ví dụ dưới đây.
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ùng tồn tại trong 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.
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
lối 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ư thế nà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
}
2. Đơn vị của CSS:
Trong CSS2 hỗ trợ các loại đơn vị
là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cường độ âm thanh và màu
sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc.
Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS.
Đơn vị chiều dài
Đơn vị
|
Mô
tả
|
Đơn vị
|
Mô
tả
|
%
|
Phần trăm
|
ex
|
1 ex bằng chiều cao của chữ
x in thường của font hiện hành.
Do đó, đơn vị này không
những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng
1 cỡ
14px
nhưng chiều cao chữ x của font Times và font
Tohama là khác nhau.
|
in
|
Inch (1 inch = 2.54 cm)
|
||
cm
|
Centimeter
|
||
mm
|
Millimeter
|
||
em
|
1
em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px
thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang
web.
|
pt
|
Point (1 pt = 1/72 inch)
|
pc
|
Pica (1 pc = 12 pt)
|
||
px
|
Pixels
(điểm ảnh trên màn hình máy tính)
|
Đơn vị màu sắc
Đơn vị
|
Mô
tả
|
Color-name
|
Tên
màu tiếng Anh. Ví dụ: black, white, red, green, blue, cyan, magenta,…
|
RGB (r,g,b)
|
Màu
RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số
màu.
|
RGB
(%r,%g,%b)
|
Màu RGB với 3 giá trị R, G, B có trị từ 0 –
100% kết hợp.
|
Hexadecimal
RGB
|
Mã
màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ
tươi.
|
0 nhận xét:
Đăng nhận xét