Dựa trên bài dịch của Pearl tại phpcodevn.com
2.1. Cú pháp CSS: Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.
Ví dụ:
Để định màu nền cho một trang web là xanh nhạt chúng ta dùng đoạn mã sau:
HTML | 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. Bây giờ hãy nhìn vào ví dụ và các bạn xem nó có giống với cấu trúc sau không nhé.
Cú pháp cơ bản của CSS:
1 | Selector { property:value; } |
Trong đó:
- Selector: Chọn đối tượng
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 thẻ 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. Và 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ư vầy: . Để á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: Thuộc tính
Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color, 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.
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.
1 | body { background : #FFF ; color : #FF0000 ; font-size : 14pt } |
1 | body { |
2 | background : #FFF ; |
3 | color : #FF0000 ; |
4 | font-size : 14pt ; |
5 | } |
Đố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:
chúng ta có thể thực hiện gom gọn lại như sau:
01 | h 1 { |
02 | color : #0000FF ; |
03 | text-transform : uppercase ; |
04 | } |
05 | h 2 { |
06 | color : #0000FF ; |
07 | text-transform : uppercase ; |
08 | } |
09 | h 3 { |
10 | color : #0000FF ; |
11 | text-transform : uppercase ; |
12 | } |
1 | h 1 ,h 2 ,h 3 { |
2 | color : #0000FF ; |
3 | text-transform : uppercase ; |
4 | } |
- 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 */
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 */
1 | /* Màu chữ cho trang web */ |
2 | body { |
3 | color : red ; |
4 | } |
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ả |
% | phần trăm |
in | inch (1 inch = 2,54 cm) |
cm | centimeter |
mm | millimeter |
em | 1 em tương đương kích thước của font chữ đang được sử dụng trong đối tượng, nếu font chữ đang dùng là 14px thì 1 em = 14px. Đơn vị này rất hữu ích trong việc hiển thị để tránh phá vỡ cấu trúc trang, nếu như người dùng tăng cỡ chữ trong trình duyệt |
ex | 1 ex bằng chiều cao của chữ x in thường của font chữ đang được sử dụng trong đối tượng. Do đó, đơn vị này không những phụ thuộc và cỡ chữ mà còn phụ thuộc vào font chữ, vì chiều cao chữ x của font Times và font Tahoma không giống nhau. |
pt | point ( 1 pt = 1/72 inch – với mặc định của màn hình máy tính là 72dpi (dot per inch)) |
pc | pica (1 pc = 12 pt) |
px | pixel (điểm ảnh trên màn hình máy tính) |
Đơn vị màu sắc
Đơn vị | Mô tả |
Tên màu sắc | Tên tiếng Anh Ví dụ: blue, red, orange, green… |
RGB (r,g,b) | Màu RGB với giá trị tuyệt đối R,G,B từ 0 tới 255 |
RGB (%r,%g,%b) | Màu RGB với giá trị tương đối R,G,B tính theo % |
Hệ số 16 (Hex) | Màu RGB trong hệ số 16 Ví dụ: #FFFFFF: trắng, #000000: đen |
Ở trên chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML?
Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML
- Nội tuyến (kiểu thuộc tính)
Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.
Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:1
<
html
>
2
<
head
>
3
<
title
>Ví dụ
title
>
4
head
>
5
<
body
style=”background-color=#FFF;”>
6
<
p
style=”color:green”>^_^ Welcome To My Blog ^_^
p
>
7
body
>
8
html
>
- Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa ấy mà).
Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:Lưu ý: Thẻ style nên đặt trong thẻ head.01
<
html
>
02
<
head
>
03
<
title
>Ví dụ
title
>
04
<
style
type=”text/css”>
05
body { background-color:#FFF }
06
p { color:#00FF00 }
07
style
>
08
head
>
09
<
body
>
10
<
p
>^_^ Welcome To My Blog ^_^
p
>
11
body
>
12
html
>
Đối với những trình duyệt cũ, không thể nhận ra thẻ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.