12/9/2013
2
Nội dung
• Giới thiệu CSS
• Định nghĩa Style
NGÔN NGỮ CSS
• Sử dụng và Phân loại CSS
• Selector trong CSS và phạm vi ảnh hưởng
CS201-Web Programming
Lương Vĩ Minh –
[email protected]
® 2012 - International Training & Education Center (ITEC)
University of Science - Ho Chi Minh City
227 Nguyen Van Cu, HCM city
http://www.itec.hcmuns.edu.vn/
12/9/2013
3
12/9/2013
4
Giới thiệu về CSS
• CSS = Casscading Style Sheets
• Dùng để mô tả cách hiển thị các thành phần trên trang
WEB
• Sử dụng tương tự như dạng TEMPLATE
• Có thể sử dụng lại cho các trang web khác
GIỚI THIỂU CSS
• Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh
chóng (cascading)
5
12/9/2013
12/9/2013
6
Nộ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
GIỚI THIỂU CSS
7
12/9/2013
Định nghĩa Style
12/9/2013
Ghi chú
Kiểu 1
Kiểu 2
• Giống Ghi chú trong C++
• Sử dung /*Ghi chú*/
…
SelectorName {
property1:value1;
property2:value2;
………
propertyN:valueN;}
………
Ví dụ:
Ví dụ:
DHKHTN
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }
DHKHTN
• Ví dụ :
• SelectorName {
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
8
12/9/2013
9
Định nghĩa Style – Lưu ý
12/9/2013
10
Nộ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
12/9/2013
11
12/9/2013
Sử dụng và Phân loại CSS – Phân loại
Inline Style Sheet
• 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)
• Định nghĩa style trong thuộc tính style của từng tag
HTML.
• Theo cú pháp kiểu 1.
….
• Không sử dụng lại được.
• Ví dụ:
This is yellow
12
13
12/9/2013
14
12/9/2013
Embedding Style Sheet
Embedding Style Sheet
• Còn gọi là Internal Style Sheet hoặc Document-Wide Style
Sheet
Embedded Style Sheet
• Mọi định nghĩa type nằm trong tag
SelectorName {
property1:value1;
property2:value2;
………
propertyN:valueN;}
This is green
This is red, 12 pt. and Garamond.
-->
12/9/2013