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

31 486 1
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

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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

Ngày đăng: 28/04/2016, 12:59

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan