• Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần head. 9.[r]
Trang 1CSS - C ascading S tyle S heet
Msc Luong Tran Hy Hien, FIT of HCMUP, VietNam
Trang 2Nội dung
1 Giới thiệu
2 Định nghĩa style
3 Phân loại và sử dụng
4 Selector trong CSS
Trang 31 Giới thiệu
• Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu
– Giữ tính thống nhất cho trang HTML.
– Định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang.
• Lợi ích:
– Tiết kiệm thời gian
– Để thay đổi định dạng ==> cần thay đổi thuộc tính
CSS ==> sẽ tự động cập nhật sự thay đổi đó.
– Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt.
• Bất lợi:
Trang 42 Định nghĩa Style
<tag style=
“property1 : value1 ;
property2 : value2 ;
………
propertyN : valueN ; ”
>
…
</tag>
.SelectorName {
property1 :value1;
property2 :value2;
………
propertyN :valueN;
}
<tag class=“SelectorName”>
…
</tag>
Cú pháp ghi chú : /* … */
/* Đây là ghi chú */
SelectorName{
property1: value1 ;/* Ghichu1 */ property2: value2 ;/* Ghichu2 */ }
Trang 52 Định nghĩa Style
Ví dụ
Trang 63 Phân loại và sử dụng
1 Inline Style Sheet
Style định nghĩa trong tag
2 Internal Style Sheet
Style định nghĩa trong tag <style>
3 External Style Sheet
Style định nghĩa trong file *.css
Trang 73.1 Inline Style Sheet
• Sử dụng thuộc tính style bên trong tag muốn
định dạng
• Cú pháp:
<TagName style =” property1 : value1; property2 :
value2; …”>
Nội dung văn bản muốn định dạng
Trang 83.1 Inline Style Sheet (tt) – Ví dụ
<BODY>
<P style="color:#0033CC; border:#FF0000">
This paragraph has an inline style applied to it</P>
<P> This paragraph is displayed in the default style
<P> Can you see the <SPAN style = “color:red”> difference </SPAN>in this line
</BODY>
8
Trang 93.2 Internal Style Sheet
• Thích hợp cho trang riêng lẻ
• Cách tạo: Tạo bảng mẫu chung trên phần đầu
trang trong cặp tag <head>
• Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần head
Trang 103.2 Internal Style Sheet (tt) – Ví dụ
10