Bài giảng Lập trình Web - Chương 3: Cascading Style Sheet - Trần Phước Tuấn

pdf 20 trang cucquyet12 5870
Bạn đang xem tài liệu "Bài giảng Lập trình Web - Chương 3: Cascading Style Sheet - Trần Phước Tuấn", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuong_3_cascading_style_sheet_tran.pdf

Nội dung text: Bài giảng Lập trình Web - Chương 3: Cascading Style Sheet - Trần Phước Tuấn

  1. CascadingCascading StyleStyle SheetSheet Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com
  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 2
  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 3
  4. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Định nghĩa Style .SelectorName { SelectorName{ Cú pháp ghi chú: /* */ property1: value1;/*Ghichu1*/ /* Đây là ghi chú */ property2: value2;/*Ghichu2*/ } 7/24/2009 Lập trình Web - Trần Phước Tuấn 4
  5. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Định nghĩa Style VVíí ddụụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 5
  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 6
  7. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Phân loại và sử dụng ExternalExternal StyleStyle SheetSheet 7/24/2009 Lập trình Web - Trần Phước Tuấn 7
  8. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Phân loại và sử dụng ExternalExternal StyleStyle SheetSheet 7/24/2009 Lập trình Web - Trần Phước Tuấn 8
  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 9
  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 ƯƯuu TiênTiên 3. External Style Sheet GiGiảảmm 4. Browser Default DDầầnn 7/24/2009 Lập trình Web - Trần Phước Tuấn 10
  11. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Selector trong CSS CCáácc loloạạii SelectorSelector 7/24/2009 Lập trình Web - Trần Phước Tuấn 11
  12. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Selector trong CSS CCáácc loloạạii SelectorSelector a:active { color: green; } 7/24/2009 Lập trình Web - Trần Phước Tuấn 12
  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 13
  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 14
  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 15
  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 16
  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 17
  18. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. CSS – Pseudo Class DDùùngng phphíímm tabtab đđểể activeactive linklink 7/24/2009 Lập trình Web - Trần Phước Tuấn 18
  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 19
  20. ĐẠ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