Tự học CSS
- redesign-pro
- June 11, 2012
- Tự học CSS
- 3,714 views
B2: Cách sử dụng CSS - cú pháp viết CSS
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
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.
Công ty thiết kế website, lập trình phần mềm NEVICOM
Bình luận