Bài 4 CSS – Casscading Style Sheets

Lập trình và Thiết kế Web 1
© 2007 Khoa Công nghệ thông tin
Khoa CNTT Khoa CNTT –– ĐH.KHTNĐH.KHTN
Bài4
CSS CSS ––Casscading Style SheetsCasscading Style Sheets
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Nội dungNội dung
§ Giới thiệu CSS
§ Định nghĩa Style
§ Sử dụng và Phân loại CSS
§ Selector trong CSS và phạm vi ảnh hưởng
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Nội dungNội dung
§ Giới thiệu CSS
§ Định nghĩa Style
§ Sử dụng và Phân loại CSS
§ Selector trong CSS và phạm vi ảnh hưởng
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Giới thiệu về CSSGiới thiệu về CSS
§ CSS = Casscading Style Sheets
§ Dùng để môtảcáchhiểnthị cácthànhphầntrêntrang
WEB
§ Sử dụngtươngtựnhư dạngTEMPLATE
§ Cóthể sử dụnglạichocáctrangwebkhác
§ Cóthể thay đổithuộctínhtừngtranghoặccảsite
nhanhchóng(cascading)
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN

Giới thiệu về CSS Giới thiệu về CSS ––Ví dụVí dụ
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Nội dungNội dung
§ Giới thiệu CSS
§ Định nghĩa Style
§ Sử dụng và Phân loại CSS
§ Selector trong CSS và phạm vi ảnh hưởng
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Định nghĩa Style
Kiểu 1
<tag style =
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…</tag>
Kiểu 2
SelectorName {
property1:value1;
property2:value2;
………
propertyN:valueN;}
<tag class = “SelectorName”>
………
</tag>
Vídụ:
<h1 style=“
color : blue;
font-family : Arial;” > DHKHTN </h1>

Vídụ:
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }
<h1 class=“TieuDe1”> DHKHTN </h1>
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Định nghĩa Style Định nghĩa Style ––Ghi chúGhi chú
§ Giống Ghi chú trong C++
§ Sử dung /*Ghi chú*/
§ Ví dụ :
§ SelectorName {
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Nội dungNội dung
§ Giới thiệu CSS
§ Định nghĩa Style
§ Sử dụng và Phân loại CSS
§ Selector trong CSS và phạm vi ảnh hưởng
Lập trình và Thiết kế Web 1 –Bài 4 :CSS –Casscading Styte Sheet
© 2007 Khoa CNTT - ĐHKHTN
Sử dụng và Phân loại CSS Sử dụng và Phân loại CSS ––Phân loạiPhân loại
§ Gồm 3 loại CSS
– Inline Style Sheet (Nhúng CSS vào tag HTML)
– Embedding Style Sheet (Nhúng CSS vào trang web)
– External Style Sheet (Liên kết CSS với trang web)