Bài giảng phát triển ứng dụng web – web programming chương 2 định nghĩa style, phân loại và cách sử dụng CSS,Selector trong CSS

CSS - Cascading Style Sheet Msc Luong Tran Hy Hien, FIT of HCMUP, VietNam Nội dung Giới thiệu Định nghĩa style Phân loại sử dụng Selector CSS Giới thiệu • Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu – Giữ tính thống cho trang HTML – Định dạng số tính chất thông thường lúc cho tất đối tượng trang • Lợi ích: – Tiết kiệm thời gian – Để thay đổi định dạng ==> cần thay đổi thuộc tính CSS ==> tự động cập nhật thay đổi – Có thể dùng CSS với JavaScript để tạo hiệu ứng đặc biệt • Bất lợi: – Không hỗ trợ đầy đủ tất trình duyệt Đị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*/ } Định nghĩa Style Ví dụ Phân loại sử dụng Inline Style Sheet Style định nghĩa tag Internal Style Sheet Style định nghĩa tag External Style Sheet Style định nghĩa file *.css 3.1 Inline Style Sheet • Sử dụng thuộc tính style bên tag muốn định dạng • Cú pháp: Nội dung văn muốn định dạng 3.1 Inline Style Sheet (tt) – Ví dụ This paragraph has an inline style applied to it This paragraph is displayed in the default style Can you see the difference in this line 3.2 Internal Style Sheet • Thích hợp cho trang riêng lẻ • Cách tạo: Tạo bảng mẫu chung phần đầu trang cặp tag • Sử dụng: Trong phần body, nội dung muốn sử dụng định dạng theo bảng mẫu đặt tag định nghĩa phần head 3.2 Internal Style Sheet (tt) – Ví dụ 10 Selector CSS Các loại Selector 17 Selector CSS Các loại Selector a:active { color: green; } 18 CSS Rule Selector Declaration Block body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Value Attribute Name CSS Color Specifiers ● Predefined names: white black red … ● 8-bit hexadecimal intensities for red, green, blue: #ff0000 R G B ● 0-255 decimal intensities: rgb(255,255,0) R G B ● Percentage intensities: rgb(80%,80%,100%) R G B CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units 4.1 CSS - ELEMENT 22 4.2 CSS - ID 23 4.3 CSS - CLASS 24 4.3 CSS – ELEMENT_CLASS 25 4.4 CSS – CONTEXTUAL 26 4.5 CSS – Pseudo Class Dùng phím tab để active link 27 4.5 CSS – Pseudo Element 28 4.5 CSS – Pseudo Element 29 Q&A THE END [...]... Sheet (tt) – Cách dùng 13 3.3 External Style Sheet (tt) Cách 1: Cách 2: 14 3 Phân loại và cách sử dụng 15 3 Phân loại và cách sử dụng 1 Inline Style Sheet 2 Embedding Style Sheet 3 External Style Sheet Độ Ưu Tiên Giảm Dần 4 Browser Default 16 4 Selector trong CSS Các loại Selector 17 4 Selector trong CSS Các loại Selector a:active { color: green; } 18 CSS Rule Selector Declaration Block body { font-family:... một file (* .css) riêng bên ngoài và được liên kết với trang HTML • Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của mộtwebsite (nếu có liên kết) • Cách tạo: – Tạo một tập tin văn bản mới – Nhập tên các tag muốn định dạng thuộc tính theo mẫu: – Lưu tập tin với định dạng Text Only và có phần mở rộng css 3.3 External Style Sheet (tt) – Ví dụ 12 3.3 External Style Sheet (tt) – Cách dùng... Name CSS Color Specifiers ● Predefined names: white black red … ● 8-bit hexadecimal intensities for red, green, blue: #ff0000 R G B ● 0 -25 5 decimal intensities: rgb (25 5 ,25 5,0) R G B ● Percentage intensities: rgb(80%,80%,100%) R G B CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units 4.1 CSS - ELEMENT 22 4 .2 CSS - ID 23 4.3 CSS -... centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units 4.1 CSS - ELEMENT 22 4 .2 CSS - ID 23 4.3 CSS - CLASS 24 4.3 CSS – ELEMENT_CLASS 25 4.4 CSS – CONTEXTUAL 26 4.5 CSS – Pseudo Class Dùng phím tab để active link 27 4.5 CSS – Pseudo Element 28 4.5 CSS – Pseudo Element 29 Q&A THE END ... External Style Sheet (tt) – Ví dụ 12 3.3 External Style Sheet (tt) – Cách dùng 13 3.3 External Style Sheet (tt) Cách 1: Cách 2: 14 Phân loại cách sử dụng 15 Phân loại cách sử dụng Inline Style Sheet... property2: value2;/*Ghichu2*/ } Định nghĩa Style Ví dụ Phân loại sử dụng Inline Style Sheet Style định nghĩa tag Internal Style Sheet Style định nghĩa tag External Style Sheet Style định nghĩa. .. B CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units 4.1 CSS - ELEMENT 22 4 .2 CSS - ID 23 4.3 CSS - CLASS 24 4.3 CSS – ELEMENT_CLASS