Bài giảng lập trình web cascading style sheet trần phước tuấn

Cascading Style Sheet Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Nội dung Giới thiệu Định nghĩa style Phân loại sử dụng Selector CSS 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Giới thiệu § CSS = Cascading Style Sheet § Dùng để mô tả cách hiển thị thành phần trang WEB § Sử dụng tương tự dạng TEMPLATE § Có thể sử dụng lại cho trang web khác § Có thể thay đổi thuộc tính trang site nhanh chóng (cascading) 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Định nghĩa Style … SelectorName { property1 :value1; property2 :value2; ……… propertyN :valueN; } … Cú pháp ghi chú: /* … */ /* Đây ghi */ 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 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Định nghĩa Style Ví dụ 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại sử dụng Inline Style Sheet Style định nghĩa tag Embedding Style Sheet Style định nghĩa tag External Style Sheet Style định nghĩa file *.css 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại sử dụng External Style Sheet 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại sử dụng External Style Sheet 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại cách sử dụng 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại cách sử dụng Inline Style Sheet Embedding Style Sheet External Style Sheet 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 Selector 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 Selector 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 [...]... 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. .. 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,... – 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Á... 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 ... Inline Style Sheet Style định nghĩa tag Embedding Style Sheet Style định nghĩa tag External Style Sheet Style định nghĩa file *.css 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. 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. .. External Style Sheet 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Phân loại sử dụng External Style Sheet 7/24/2009 Lập trì trình Web - Trầ