Cú pháp là cấu trúc của ngôn ngữ. Mỗi ngôn ngữ tự nhiên đều có một cú pháp trong cấu trúc để tạo nên câu. Cú pháp là cấu trúc của ngôn ngữ. Mỗi ngôn ngữ tự nhiên đều có một cú pháp trong cấu trúc để tạo nên câu. Ngôn ngữ máy tính cũng có cú pháp trong cấu trúc câu lệnh của chúng. HTML, CSS, XHTML không ngọai lệ. Chúng cũng có cấu trúc, gọi là cú pháp, theo thuật ngữ lập trình. Để mã HTML, CSS, XHTML được đọc và dịch bởi Browser, chúng ta phải dùng các quy tắc cú pháp. Ngược lại, trình duyệt sẽ không thể dịch được mã. Nếu trong cú pháp có lỗi, người lướt web sẽ nhận được thông báo lỗi cú pháp không hợp lệ. CSS cấu tạo ngôn ngữ của nó bằng cách sắp xếp một tập hợp các quy tắc áp dụng cho thành phần hay còn gọi là selector. Thành phần gồm các đặc tính mà chúng ta khai báo để hiển thị trên trang. Ví dụ, nếu chúng ta muốn đổi màu nền (background color), chúng ta dùng thuộc tính cho màu nền theo cú pháp của CSS là: background-color:. Nguyên tắc mà CSS dùng gồm 2 phần khai báo: Khai báo thành phần(element) hay còn gọi là bộ chọn (selector) và Khai báo thuộc tính (property) và giá trị (value hoặc attribute) cho thuộc tính của thành phần đó. Từ đây trở đi, chúng ta sử dụng thuật ngữ Selector khi nói về element và declaration cho phần khai báo.
1-Cú pháp là gì?
Bao gồm tất cả các thành phần của HTML. Chẳng hạn Thẻ <p>, thẻ <BODY>, thẻ <H>... là các selector.
b-Khai báo:
Để bắt đầu khai báo thuộc tính (property) trong thành phần chúng ta dùng dấu { (gọi là bracket). Khai báo thuộc tính trong thành phần bao gồm tên của thuộc tính và giá trị của thuộc tính. Giữa thuộc tính và giá trị cách nhau bởi dấu 2 chấm (:). Kết thúc một khai báo dùng dấu đóng }. Chẳng hạn trong HTML để font chữ có màu xanh chúng ta viết : <font >. Trong CSS chúng ta khai báo là : {color:blue;}.
Vì một Selector bao gồm một hoặc nhiều thuộc tính, nên giữa mỗi thuộc tính khai báo trong thành phần chúng cách nhau bởi dấu chấm phẩy (;)
c-Ví dụ:
Diễn đạt thì dài dòng vậy, nhưng với ví dụ dưới đây, bạn sẽ hiểu cách viết. Trước hết, để hiểu được cú pháp, hẳn bạn đã đọc bài phương pháp nhúng CSS. Những ví dụ trong các bài học đôi khi sử dụng External Embed, Heading Embed và Inline Embed. Bạn cần lưu ý:
Khi viết:
P {font-family: Tahoma, Verdana, Arial; font-size:12px; color: blue;}
thì bạn hiểu câu này dùng cho File External CSS.
Khi viết:
<style>
P {font-family: Tahoma, Verdana, Arial; font-size:12px; color: blue;}
</style>
thì bạn hiểu đây là Heading Embed.
Khi viết:
<P style="font-family: Tahoma, Verdana, Arial; font-size:12px; color: blue;">
thì bạn hiểu đây là Inline Embed.
Trong ví dụ trên:
P {font-family: Tahoma, Verdana, Arial; font-size:12px; color: blue;}
Selector chính là thành phần P(paragraph). Các khai báo thuộc tính gồm: font-family: tahoma,verdana,arial; là bộ chữ dùng cho thẻ P. font-size:12px; kích thước chữ là 12 pixels và color:blue; màu chữ là Blue. Cuối cùng chúng ta đóng khai báo bằng dấu }.
Chúng ta cũng có thể viết câu trên một cách gọn hơn như sau:
P {font:12px, Tahoma, Verdana, Arial; color: blue;}
Với đọan codes trên đây, chúng ta yêu cầu trình duyệt rằng: tất cả các đọan văn bản bắt đầu bằng <p> trong trang HTML đều dùng cỡ chữ 12 pixels, và ưu tiên font chọn đầu tiên là Tahoma, kế đến là verdana và cuối cùng là Arial. Màu chữ là màu xanh.
Phần khai báo chọn font chữ và kích thước chữ là giá trị hay thuộc tính của đặc tính font (font property). Thuật ngữ value và attribue được sử dụng hóan đổi qua lại và có nghĩa tương tự. Thật sự, các chữ property, attribute và value dễ nhầm lẫn. Hãy xem minh họa bên dưới:
Selector {property: value or attribute;}
Bạn có thể sử dụng các thuộc tính và giá trị Text Properties, Font Properties, Color and background Properties... cho thẻ này. Tham khảo thêm trong các bài tương ứng của CSS (mục lục).
©2008 Tien Thanh| Firebug Theme by Blog Oh! Blog | Converted to Blogger by Blogger Accessories
Đăng nhận xét