Bài giảng Thiết kế & lập trình web - Chương 3: Cascading Style Sheet - Trần Phước Tuấn

Cascading Style Sheet Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com 7/24/2009 Lập trình Web - Trần Phước Tuấn 2 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN 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ình Web - Trần Phước Tuấn 3 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN 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ình Web - Trần Phước Tuấn 4 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Định nghĩa Style <tag style= “property1 :value1; property2 :value2; propertyN :valueN;” > .SelectorName { property1 :value1; property2 :value2; propertyN :valueN; } Cú pháp ghi chú: /* */ /* Đây là ghi chú */ SelectorName{ property1: value1;/*Ghichu1*/ property2: value2;/*Ghichu2*/ } 7/24/2009 Lập trình Web - Trần Phước Tuấn 5 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Định nghĩa Style Ví dụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 6 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN 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 3. External Style Sheet Style định nghĩa trong file *.css 7/24/2009 Lập trình Web - Trần Phước Tuấn 7 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Phân loại và sử dụng External Style Sheet 7/24/2009 Lập trình Web - Trần Phước Tuấn 8 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Phân loại và sử dụng External Style Sheet 7/24/2009 Lập trình Web - Trần Phước Tuấn 9 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Phân loại và cách sử dụng 7/24/2009 Lập trình Web - Trần Phước Tuấn 10 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN 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 Độ Ưu Tiên Giảm Dần 7/24/2009 Lập trình Web - Trần Phước Tuấn 11 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Selector trong CSS Các loại Selector 7/24/2009 Lập trình Web - Trần Phước Tuấn 12 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Selector trong CSS Các loại Selector a:active { color: green; } 7/24/2009 Lập trình Web - Trần Phước Tuấn 13 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS - ELEMENT 7/24/2009 Lập trình Web - Trần Phước Tuấn 14 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS - ID 7/24/2009 Lập trình Web - Trần Phước Tuấn 15 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS - CLASS 7/24/2009 Lập trình Web - Trần Phước Tuấn 16 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – ELEMENT_CLASS 7/24/2009 Lập trình Web - Trần Phước Tuấn 17 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – CONTEXTUAL 7/24/2009 Lập trình Web - Trần Phước Tuấn 18 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – Pseudo Class Dùng phím tab để active link 7/24/2009 Lập trình Web - Trần Phước Tuấn 19 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – Pseudo Element 7/24/2009 Lập trình Web - Trần Phước Tuấn 20 ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – Pseudo Element