Cú pháp của CSS được tạo nên bởi 3 thành phần:
- Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
- Thuộc tính (Property)
- Giá trị (Value)
Cú pháp của CSS được thể hiện như sau:
Selector {
Property1: Value1;
Property2: Value2;
}
- Selector thường là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà bạn muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó được phân cách bởi dấu hai chấm (
. Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu chấm phảy (
. Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu ngoặc nhọn ({})Ví dụ
body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/hay:
p {text-align: center} /*tất cả các thẻ <P> trong trang HTML sẽ được canh giữa.*/hay định nghĩa nhiều thuộc tính:
p
{
text-align: center;
color: red;
font-family: arial
}
Nhóm các thẻ
Trong trường hợp bạn muốn định nghĩa nhiều thẻ giống nhau bạn có thể nhóm các thẻ lại. Ví dụ dưới đây sẽ nhóm tất cả các thẻ Header lại và định nghĩa chúng sẽ có màu xanh:
h1,h2,h3,h4,h5,h6
{
color: green
}
Tạo các lớp
Bằng việc tạo ra các lớp, bạn có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web.
Các lớp gắn với 1 thẻ cụ thể
Ví dụ: Trên trang web của bạn có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó bạn có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như sau:
p.trai {text-align: left}
p.phai {text-align: right}
p.giua {text-align: center}
Tiếp theo, trong trang HTML bạn sử dụng như sau:
<p class="trai">Đoạn văn này được canh lề trái.</p>
<p class="phai">Đoạn văn này được canh lề phải.</p>
<p class="giua">Đoạn văn này được canh lề giữa.</p>
Chú ý:
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết bạn cần phải cẩn thận trong việc sử dụng chữ hoa, chữ thường.
- Trong trang HTML, bạn chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.
Ví dụ về sử dụng lớp sai:
<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>
Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là ta không sử dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt động:
<td class="trai">Ví dụ này không hoạt động</td>
Các lớp không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ):
Rất đơn giản, bạn có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên trang web bằng cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)
Ví dụ:
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào
.giua{text-align="center"}
và trong trang HTML ta sử dụng như sau:
<p class="giua">Đoạn văn này được canh lề giữa.</p>
<td class="giua">Câu này cũng được canh lề giữa.</p>
Tạo các định danh (ID)
Tương tự như các lớp, các định danh cũng cho phép chúng ta chia các thẻ thành nhiều loại khác nhau. Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên 1 trang web.
Các ví dụ:
1. Đoạn mã dưới đây có thể áp dụng cho thẻ <P> có ID là para1
p#para1
{
text-align: center;
color: red
}
Khi sử dụng như sau:
<P id="para1">Đoạn văn bản</p>
2. Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz:
*#xyz {color: green}
Khi sử dụng:
<p id="xyz">Đoạn văn bản</P>
3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ <P> đầu tiên:
p#wer345 {color: green}
Khi sử dụng:
<p id="wer345">Đoạn văn bản</p>
Và đoạn dưới đây không có hiệu lực:
<h1 id="wer345">Đoạn văn bản không được áp dụng</p>
Chú thích trong CSS
Bạn có thể bổ xung các chú thích cho đoạn mã của mình trong CSS. Các đoạn chú thích sẽ được trình duyệt bỏ qua. Đoạn chú thích được tạo ra tương tự như trong C++ (đặt bắt đầu bởi /* và kết thúc bởi */)
Ví dụ:
/* Đây là đoạn chú thích*/
p
{
text-align: center;
/* Và đây là một đoạn chú thích khác */
color: black;
font-family: arial
}
Tạm thời thế đã, bây giờ chúng ta sẽ xem 2 ví dụ về dùng CSS dưới đây. Trong các ví dụ này ở khung phái trên bên trái là đoạn mã HTML của trang web, khung bên phải là mã CSS và ở phía dưới là kết quả.
Ví dụ 1: http://www.w3schools.com/css/showit.asp?filename=ex1
Ví dụ 2: http://www.w3schools.com/css/showit.asp?filename=ex2
