CASCADING STYLE SHEETCASCADING STYLE SHEET--CSSCSS
CHƯƠNG VIICHƯƠNG VII
I.I. GIỚI THIỆUGIỚI THIỆU
Bảng kiểu (style sheet)Bảng kiểu (style sheet) nhằm thoả mản nhu cầu nhằm thoả mản nhu cầu
–– Thẩm mỹThẩm mỹ
–– Giữ tính thống nhất cho trang HTML.Giữ tính thống nhất cho trang HTML.
–– Định dang một số tính chất thông thường cùng một lúc cho Định dang 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 tất cả các đối tượng trên trang
Tiện ích của CSS :Tiện ích của CSS :
–– Tiết kiệm thời gianTiết kiệm thời gian
–– Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang
khác sẽ tự động cập nhật sự thay đổi đókhác 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 Có thể dùng các CSS cùng với JavaScript để tạo các hiệu
ứng đặc biệtứng đặc biệt
Bất lợi của CSS:Bất lợi của CSS:
–– Không một trình duyệt nào chấp nhận nó hoàn toànKhông một trình duyệt nào chấp nhận nó hoàn toàn
–– Phải mất thời gian để học cách sử dụngPhải mất thời gian để học cách sử dụng
II.II. PHÂN LOẠIPHÂN LOẠI--CÁCH TẠOCÁCH TẠO
1.1. Phân loại :Phân loại : Có 3 loạiCó 3 loại
–– Inline styleInline style
–– Internal styleInternal style
–– External style External style
a)a) Inline styleInline style: L: Là kiểu được gán cho một dòng à kiểu được gán cho một dòng
hoặc một đoạn văn bản, bằng cách sử dụng hoặc một đoạn văn bản, bằng cách sử dụng
thuộc tính thuộc tính stylestyle bên trong tag muốn định dạngbên trong tag muốn định dạng
Cú phápCú pháp::
<TagName Style=”property1:value1;property2: <TagName Style=”property1:value1;property2:
value2; …”>value2; …”>
Nội dung văn bản muốn định dạngNội dung văn bản muốn định dạng
</TagName></TagName>
Ví dụVí dụ : :
<BODY><BODY>
<P style = “color:aqua ; font<P style = “color:aqua ; font--Style:italic; textStyle:italic; text--
Align:center”> Align:center”>
This paragraph has an inline style applied to itThis paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red> difference <P> Can you see the <SPAN style = color:red> difference
</SPAN> in this line</SPAN> in this line
</BODY></BODY>