Bài giảng lập trình web cascading style sheet trần phước tuấn
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (840 KB, 20 trang )
Cascading Style Sheet
Trần Phước Tuấn
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
Nộ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
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
2
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
1. Giới thiệu
§ CSS = Cascading Style Sheet
§ 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
§ Có thể thay đổi thuộc tính từng trang hoặc
cả site nhanh chóng (cascading)
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
3
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
2. Định nghĩa Style
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*/
}
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
4
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
2. Định nghĩa Style
Ví dụ
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
5
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
3. Phân loại và sử dụng
1. Inline Style Sheet
Style định nghĩa trong tag
2. Embedding Style Sheet
Style định nghĩa trong tag <style>
3. External Style Sheet
Style định nghĩa trong file *.css
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
6
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
3. Phân loại và sử dụng
External Style Sheet
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
7
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
3. Phân loại và sử dụng
External Style Sheet
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
8
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
3. Phân loại và cách sử dụng
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
9
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
3. Phân loại và cách sử dụng
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
Độ
Ưu
Tiên
Giảm
Dần
10
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4. Selector trong CSS
Các loại Selector
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
11
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4. Selector trong CSS
Các loại Selector
a:active { color: green; }
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
12
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS - ELEMENT
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
13
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS - ID
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
14
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS - CLASS
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
15
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS – ELEMENT_CLASS
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
16
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS – CONTEXTUAL
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
17
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS – Pseudo Class
Dùng phím tab để active link
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
18
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS – Pseudo Element
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
19
ĐẠI HỌ
HỌC SP. TPHCM, KHOA TOÁ
TOÁN – TIN HỌ
HỌC
4.1. CSS – Pseudo Element
7/24/2009
Lập trì
trình Web - Trầ
Trần Phướ
Phước Tuấ
Tuấn
20
