• 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]
(1)1
CSS - Cascading Style Sheet
(2)2
Nội dung
1 Giới thiệu
2 Định nghĩa style
3 Phân loại sử dụng
(3)1 Giới thiệu
• Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu
– Giữ tính thống cho trang HTML
– Định dạng số tính chất thơng thường lúc cho tất đối tượng 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 ==> tự động cập nhật thay đổi
– Có thể dùng CSS với JavaScript để tạo hiệu ứng đặc biệt
• Bất lợi:
(4)4
2 Đị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 ghi */
SelectorName{
(5)5
2 Định nghĩa Style
(6)6
3 Phân loại sử dụng
1 Inline Style Sheet
Style định nghĩa tag 2 Internal Style Sheet
Style định nghĩa tag <style> 3 External Style Sheet
(7)3.1 Inline Style Sheet
• Sử dụng thuộc tính style bên tag muốn định dạng
• Cú pháp:
<TagName style=”property1: value1; property2:
value2; …”>
Nội dung văn muốn định dạng
(8)3.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>
(9)3.2 Internal Style Sheet
• Thích hợp cho trang riêng lẻ
• Cách tạo: Tạo bảng mẫu chung phần đầu trang cặp tag <head>
• Sử dụng: Trong phần body, nội dung muốn sử dụng định dạng theo bảng mẫu đặt tag định nghĩa phần head
(10)3.2 Internal Style Sheet (tt) – Ví dụ