Bài giảng Lập trình và Thiết kế Web 1 - Bài 4: CSS - Casscading Style Sheets - Lương Vĩ Minh

Nội dung text: Bài giảng Lập trình và Thiết kế Web 1 - Bài 4: CSS - Casscading Style Sheets - Lương Vĩ Minh

1. Lập trình và Thiết kế Web 1 Bài 4 CSS – Casscading Style Sheets Lương Vĩ Minh KhoaKhoa CNTTCNTT –– ĐH.KHTNĐH.KHTN © 2007 Khoa Công nghệ thông tin
2. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Nộ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 - ĐHKHTN
3. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Nộ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 - ĐHKHTN
4. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Giớ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 - ĐHKHTN
5. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Giới thiệu về CSS – Ví dụ Without CSS With CSS © 2007 Khoa CNTT - ĐHKHTN
6. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Nộ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 - ĐHKHTN
7. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Định nghĩa Style Kiểu 1 Kiểu 2 propertyN:valueN;} Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHKHTN © 2007 Khoa CNTT - ĐHKHTN
8. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte 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 - ĐHKHTN
9. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Nộ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 - ĐHKHTN
10. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS – Phân loại § Gồm 3 loại CSS – Inline Style Sheet (Nhúng CSS vào tag HTML) – Embedding Style Sheet (Nhúng CSS vào trang web) – External Style Sheet (Liên kết CSS với trang web) © 2007 Khoa CNTT - ĐHKHTN
11. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS - 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. . § Không sử dụng lại được. § Ví dụ: This is yellow © 2007 Khoa CNTT - ĐHKHTN
12. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS - Embedding Style Sheet § Còn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet § Mọi định nghĩa style được đặt trong tag của trang HTML. § Định nghĩa style theo cú pháp kiểu 2. § Trang HTML có nội dung như sau: © 2007 Khoa CNTT - ĐHKHTN
13. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS - Embedding Style Sheet Embedded Style Sheet This is green This is red, 12 pt. and Garamond. © 2007 Khoa CNTT - ĐHKHTN
14. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS - External Style Sheet § Mọi style đều lưu trong file có phần mở rộng là *.CSS. § File CSS: lưu trữ nhiều style theo cú pháp kiểu 2. § Trong file HTML: liên kết bằng tag link. Cú pháp: § Trang HTML : Liên kết bằng tag style với @import url. Cú pháp @import url(URL); © 2007 Khoa CNTT - ĐHKHTN
15. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS - External Style Sheet Trong tập tin MyStyle.CSS Trong trang Web : demo.htm H2 { FONT-WEIGHT: bold; Cass FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; This is an H2 BACKGROUND-COLOR: red; font-color: white } © 2007 Khoa CNTT - ĐHKHTN
16. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS – So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu 1 Kiểu 2 Kiểu 2 Cú pháp Test Test Ưu điểm • Dễ dàng quản lý Style theo • Dễ dàng quản lý Style theo • Có thể thiết lập Style cho từng tag của tài liệu web. từng tài liệu web. nhiều tài liệu web. • Có độ ưu tiên cao nhất • Không cần tải thêm các • Thông tin các Style được trang thông tin khác cho trình duyệt cache lại style Khuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download file thông tin style trong từng tài thông tin style cho các tài *.css và làm chậm quá trình liệu Web và các tài liệu khác liệu khác trong mỗi lần sử biên dịch web ở trình duyệt một cách thủ công. dụng trong lần đầu sử dụng • Khó cập nhật style © 2007 Khoa CNTT - ĐHKHTN
17. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Sử dụng và Phân loại CSS – Độ ưu tiên § Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default © 2007 Khoa CNTT - ĐHKHTN
18. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet © 2007 Khoa CNTT - ĐHKHTN
19. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Nộ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 - ĐHKHTN
20. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector § Là tên 1 style tương ứng với một thành phần được áp dụng định dạng § Các dạng selectors § HTML element selectors § Class selectors Ví dụ: .TieuDe1 { § ID selectors color: red; font-family: Verdana, sans-serif; } § DHKHTN © 2007 Khoa CNTT - ĐHKHTN
21. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
22. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS - Element § Có hiệu ứng trên tất cả element cùng loại tag § Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
23. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
24. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS – ID rules § Có hiệu ứng duy nhất trên một element có đúng id. § Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
25. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
26. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS – Class rules § Có hiệu ứng trên tất cả các loại tag có cùng giá trị thuộc tính class. § Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
27. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
28. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS – Kết hợp Element và Class § Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
29. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
30. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS - Contextual Selection § Định dạng được áp dụng cho nội dung trong chuỗi tag theo đúng thứ tự § Ví dụ : © 2007 Khoa CNTT - ĐHKHTN
31. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả các tag h1 {color: red;} Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả các #test {color: green;} tab có thuộc tính id trong tà liệu Web /* ND của bất kỳ tag có thuộc tính id=test đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả các .note {color: yellow;} tab có thuộc tính class trong tà liệu Web /* ND của bất kỳ tag có thuộc tính class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các tag h1.note {text-decoration: underline;} Element có thuộc tính class tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ Grouping Định dạng áp dụng cho ND một nhóm h1,h2,h3 {background-color: orange;} các tag trong tài liệu. /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các thẻ được p strong {color: purple;} lồng trong một thẻ cha nào đó /* ND của các thẻ nằm trong thẻ đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào trạng Pseudo element thái của các Element. (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT - ĐHKHTN
32. Lập trình và Thiết kế Web 1 – Bài 4 :CSS – Casscading Styte Sheet Selector trong CSS – Pseudo Class § Định dạng dựa vào trạng thái của liên kết, sự kiện chuột. § Có thể kết hợp với Selector khác. © 2007 Khoa CNTT - ĐHKHTN