B2: Cách sử dụng CSS - cú pháp viết CSS

Trang chủ Danh mục bài viết Học thiết kế web - làm website Tự học CSS

Tự học CSS

redesign-pro
June 11, 2012
Tự học CSS
2,954 views

B2: Cách sử dụng CSS - cú pháp viết CSS

Khi bắt đầu học thiết kế web, bạn đang lo lắng rằng: CSS hay vậy nhưng viết code css như thế nào? chèn vào vị trí nào của tài liệu HTML, cách chèn css như thế nào?..

Trong nội dung học thiết kế web này, chúng ta sẽ tìm hiểu về các vấn đề như sau:

- Cách chèn CSS vào tài liệu HTML

- Cú pháp CSS

- Ghi chú trong CSS

1. Cách chèn CSS vào tài liệu HTML

Chúng ta sử dụng thẻ style, như là 1 thẻ trong HTML.

Cú pháp đầy đủ:

Ở đây, chúng ta có thêm 1 thuộc tính type="text/css" trong thẻ style, với thuộc tính này, trình duyệt web sẽ nhận ra đây là code CSS chứ không phải là code HTML, nên chúng không hiển thị ra web.

Ghi chú:

- Theo các trình duyệt web hiện nay thì không cần có thuộc tính type="text/css" thì chúng vẫn hiểu đây là code CSS, tuy nhiên theo w3c thì lại không hợp lệ.

- Chúng ta có thể sử dụng cú pháp đơn giản hơn như sau:

Thì trình duyệt web vẫn biên dịch chính xác.

2. Vị trí chèn:

Vậy chèn đoạn code trên vào vị trí nào của tài liệu HTML?

Trả lời: Chèn được bất cứ nơi nào trong tài liệu HTML của bạn. Tuy nhiên:

- Không được chèn trong thẻ HTML

- Chèn trước văn bản cần css tác dụng vào. Nên chèn trong thẻ head của tài liệu HTML của bạn

Ví dụ về cách chèn code CSS vào tài liệu HTML

3. Cú pháp viết CSS

Trong thẻ style, chúng ta sử dụng theo cú pháp như sau:

ten_css{

          thuoc_tinh1: gia_tri1;
          thuoc_tinh2: gia_tri1   gia_tri2 .....;
           ...
          thuoc_tinhn: .....;
}

- ten_css: là tên chúng ta tự đặt, muốn đặt tên gì cũng được, tất nhiên phải tuân thủ theo quy tắt đặt tên mà CSS đã quy định

- thuoc_tinh1, thuoc_tinh2, ...: là những thuộc tính đã được quy định bởi CSS, chúng ta không tự tạo ra được. Mỗi thuộc tính sẽ có 1 hoặc nhiều giá trị tương ứng.

- Thuộc tính và giá trị được phân cách bởi dấu hai chấm ( : )

- Nếu thuộc tính có nhiều giá trị tương ứng, thì mỗi giá trị phải được phân cách nhau bởi ít nhất 1 kí tự trắng.

- Sử dụng dấy chấm phẩy ( ; ) để kết thúc giá trị của 1 thuộc tính nào đó.

- Không phân biệt xuống dòng hay nằm cùng dòng, cứ sau dấu chấm phẩy là kết thúc giá trị của 1 thuộc tính.

- Không phân biệt chữ hoa, chữ thường (Khuyên nên sử dụng chữ thường)

- Tất cả các thuộc tính, giá trị tương ứng được bao bọc bởi cặp dấu ngoặc { }

ví dụ:

h1{
color: red;
font-size: 30px;
}

Trong ví dụ trên thì:

ten_css: h1 là tên chúng ta tự đặt

Các thuộc tính: color, font-size

Các giá trị tương ứng của color là red và font-size là 30px

Hoặc chúng ta cũng có thể viết như sau:

h1{color: red; font-size: 30px;}

là hoàn toàn hợp lệ.

Xem kết quả của ví dụ này tại đây

Xem kết quả khi không có CSS

4. Ghi chú trong CSS

Ghi chú để chương trình sáng sủa hơn, giúp lập trình dễ quản lí hơn. Còn đối với trình duyệt thì khi gặp dòng ghi chú này, chúng sẽ bỏ qua, không thèm quan tâm.

Cú pháp: chúng ta sử dụng cặp dấu /* và */

/* nội dung ghi chú ở đây*/

Hoặc

/*

Nội dung ghi chú
Nội dung ghi chú

*/

Ví dụ:

Xem kết quả của ví dụ này tại đây

Kết thúc bài học này: Cách sử dụng CSS - cú pháp viết CSS thì chúng ta vẫn chưa thể thiết kế web bằng CSS được đâu các bạn ạ, chúng ta cần phải học bài số 03 kìa.

Trong phần kế tiếp chúng ta sẽ tìm hiểu về quy tắt đặt tên trong CSS, cũng như quy luật tác dụng của CSS lên phần tử HTML của trang web bạn.