Phát triển ứng dụng Web – Web Programming - CSS - Cascading Style Sheet

1CSS - Cascading Style Sheet Msc. Luong Tran Hy Hien, FIT of HCMUP, VietNam 2Nộ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 1. Giới thiệu • Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu – Giữ tính thống nhất cho trang HTML. – Định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên 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 ==> sẽ tự động cập nhật sự thay đổi đó. – Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt. • Bất lợi: – Không được hỗ trợ đầy đủ trên tất cả các trình duyệt. 42. Đị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*/ } 52. Định nghĩa Style Ví dụ 63. Phân loại và sử dụng 1. Inline Style Sheet Style định nghĩa trong tag 2. Internal Style Sheet Style định nghĩa trong tag 3. External Style Sheet Style định nghĩa trong file *.css 3.1 Inline Style Sheet • Sử dụng thuộc tính style bên trong tag muốn định dạng • Cú pháp: <TagName style=”property1: value1; property2: value2; ”> Nội dung văn bản muốn định dạng 7 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 8 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 trên phần đầu trang trong cặp tag • Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần head 9 3.2 Internal Style Sheet (tt) – Ví dụ 10 3.3 External Style Sheet • Được lưu trữ thành 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 13 14 3.3 External Style Sheet (tt) Cách 1: Cách 2: 15 3. Phân loại và cách sử dụng 16 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 17 4. Selector trong CSS Các loại Selector 18 4. Selector trong CSS Các loại Selector a:active { color: green; } body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Selector Declaration Block Attribute Name Value CSS Rule ● Predefined names: white black red ● 8-bit hexadecimal intensities for red, green, blue: ● 0-255 decimal intensities: ● Percentage intensities: CSS Color Specifiers #ff0000 R G B rgb(255,255,0) R G B 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 22 4.1. CSS - ELEMENT 23 4.2. CSS - ID 24 4.3. CSS - CLASS 25 4.3. CSS – ELEMENT_CLASS 26 4.4. CSS – CONTEXTUAL 27 4.5. CSS – Pseudo Class Dùng phím tab để active link 28 4.5. CSS – Pseudo Element 29 4.5. CSS – Pseudo Element Q & A THE END