Thiết kế và Lập trình Web 1-Bài 4 CSS – Casscading Style Sheets

Giới thiệu về CSSCSS = Casscading Style Sheets 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)
Nội dung trích xuất từ tài liệu:
Thiết kế và Lập trình Web 1-Bài 4 CSS – Casscading Style Sheets Thiết kế và Lập trình Web 1Bài 4CSS – Casscading Style SheetsCSS Khoa CNTT – ĐH.KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetNội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetNội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetGiới thiệu về CSS CSS = Casscading Style Sheets 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) © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetNội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetĐịnh nghĩa StyleKiểu 1 Kiểu 2… propertyN:valueN;} ……… Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHKHTN © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetĐịnh nghĩa Style – Ghi chú Giống Ghi chú trong C++ Sử dung /*Ghi chú*/ Ví dụ : SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ ……… propertyN:valueN;} © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetNội dung Giới thiệu CSS Định nghĩa Style Sử dụng và Phân loại CSS Selector trong CSS và phạm vi ảnh hưởng © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetCác loại CSS Gồm 3 loại CSS 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet1. Inline Style Sheet Định nghĩa style trong thuộc tính style của từng tag HTML Theo cú pháp kiểu 1 … Ví dụ: This is yellow © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet2. Embedding Style Sheet • Nhúng trong tag của trang HTML Định nghĩa style theo cú pháp kiểu 2 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetEmbedding Style Sheet – Ví dụ This is green This is red, 12 pt. and Garamond. Embedded Style Sheet 12 © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet3. External Style Sheet Mọi style đều lưu trong file có phần mở rộng là *.CSS Định nghĩa style theo cú pháp kiểu 2 Tạo liên kết đến file CSS 1. Trong trang HTML: liên kết bằng tag link. Cú pháp: 2. Trong trang HTML: Liên kết bằng tag style với @import url. Cú pháp @import url(URL); © 2007 Khoa CNTT – ĐH KHTN Thiết kế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style SheetExternal Style Sheet – Ví dụ Trong trang Web có sử dụng Trong tập tin MyStyle.CSS MyStyle.CSS ...