Bài giảng Lập trình web - Chương 3: CSS (Casscading Style Sheets)

Nội dung text: Bài giảng Lập trình web - Chương 3: CSS (Casscading Style Sheets)

1. CHƯƠNG 3 CSS (Casscading Style Sheets) 1
2. 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 2
3. Lợi ích khi dùng CSS ➢ Thời khóa biểu quả khoa HTTT 3
4. 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) 4
5. Cách dùng H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white } ĐHCNTT 5
6. Định nghĩa Style Dạng 1: Vídụ: ĐHCNTT 6
7. Định nghĩa Style Dạng 2: SelectorName { property1:value1; property2:value2; propertyN:valueN; } 7
8. Định nghĩa Style (tt) Ví dụ 1: Ví dụ 2: content="text/html; charset=UTF-8" /> Cach dung CSS Cach dung CSS H2{ FONT-WEIGHT: bold; .TieuDe1 FONT-SIZE: 16pt; { COLOR: white; color: red; FONT-STYLE: italic; font-family: Verdana, sans-serif; FONT-FAMILY: Arial; } BACKGROUND-COLOR: red; ĐHCNTT font-color: white } ĐHCNTT ĐHCNTT 8
9. Ghi chú trong style ⚫ Giống Ghi chú trong C++ ⚫ Sử dụng /*Ghichú*/ ⚫ Ví dụ: SelectorName { property1:value1;/*Ghichu1*/ property2:value2;/*Ghichu2*/ propertyN:valueN; } 9
10. Phân loại CSS Gồm 3 loại CSS • 1. Inline Style Sheet • 2. Embedding Style Sheet • 3. External Style Sheet 10
11. Inline style Sheet ⚫ Định nghĩa style trong thuộc tính style của từng tag HTML ⚫ Theo cú pháp dạng 1 Vídụ: This is yellow 11
12. Embedding Style Sheet • Nhúng trong tag của trang HTML • Định nghĩa style theo cú pháp Dạng 2 12
13. Ví dụ Embedded Style Sheet This is red this is green, 12 pt and Garamond 13
14. External Style Sheet ⚫ Mọi style đều lưu trong file có phần mở rộng là *.CSS (được sử dụng phổ biến) ⚫ Định nghĩa style theo cú pháp dạng 2 ⚫ Tạo liên kết đến file CSS • Trong trang HTML: Liên kết bằng tag link. Cúpháp: 14
15. External Style Sheet (tt) 2.Trong trang HTML: Liên kết bằng tag style với @import url. Cú pháp @import url(URL); 15
16. Ví dụ ⚫ Trong file style.CSS H2{ FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white; } 16
17. Ví dụ (tt) ⚫ Sử dụng file style.CSS Cascading Style Sheets This is an H2 17
18. So sánh, đánh giá Inline style sheet Embedding style sheet External style sheet Khai báo Dạng 1 Dạng 2 Dạng 2 Cú pháp Ưu điểm Dể quản lý style theo từng tag + Dể quản lý style theo + Thiết lập style cho từng tài liệu web nhiều tài liệu + Không cần thêm các + Thông tin các style trang thông tin khác được trình duyệt cho style cache lại Khuyết điểm Cần khai báo style trong từng Cần khai báo lại style + Tốn thời gian tag của tài liệu lại cho các trang khác download file .css -> làm chậm quá trình biên dịch web ở trình duyệt trong lần đầu tiên sử dụng18
19. Độ ưu tiên ➢ Thứ tự độ ưu tiên áp dụng định dạng style dùng trong các trang web (Độ ưu tiên giảm dần) ⚫ 1. Inline style sheet ⚫ 2. Embedding style sheet ⚫ 3. External style sheet ⚫ 4. Browser Default 19
20. Selector trong CSS và phạm vi ảnh hưởng ⚫ Selector • Là tên 1 style tương ứng với một thành phần được áp định dạng • Vídụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } ĐHCNTT 20
21. Selector trong CSS và phạm vi ảnh hưởng (tt) Lọai Mô tả phạm vi ảnh hưởng Ví dụ Element Định dạng áp dụng cho Nội dung H1{color:red} tất cả các tag element trong tài /*nội dung của thẻ liệu Web bị định dạng màu chữ đỏ*/ #id Định dạng áp dụng cho Nội dung #test {color: green;} tất cả các tab có thuộc tính id /* ND củabất kỳtag trong tài liệu Web cóthuộctínhid=test đềubịđịnhdạngmàuch ữ=xanhlá*/ 21
22. Selector trong CSS và phạm vi ảnh hưởng (tt) .class Định dạng áp dụng cho .note {color: red;}/* ND tất cả các tab có thuộc củabấtkỳtag tính class trong tài liệu cóthuộctínhclass=note Web đềubịđịnhdạngmàuchữ=đ ỏ*/ element.class Định dạng áp dụng cho h1.note {text-decoration: Nội dung tag Element underline;}/*ND có thuộc tính class củacácthẻ tương ứng cóthuộctính class=note đềubịđịnhdạnggạchchân */ 22
23. Ví dụ về “element” P{color:red} Em{color:blue} ĐHCNTT He thong thong tin csdl 23
24. Ví dụ “ID rules” #id1{color:red} #id2{ color:blue; font-size: 20px; } ĐHCNTT He thong thong tin 24
25. Class rules .maunen{background-color:red;} ĐHCNTT Khoa HTTT 25
26. Ví dụ element.class Element.class p.trai {text-align: left} p.phai {text-align: right} p.giua {text-align: center} Đoạn văn này được canh lề trái. Đoạn văn này được canh lề phải. Đoạn văn này được canh lề giữa. 26
27. Tạo css trong Dreamweaver ⚫ Bướ 1: Tạo mới một file .css + file -> new -> Basic page -> css 27
28. Tạo css trong Dreamweaver (tt) ⚫ Bước 2: Định nghĩa style mới • Chọn menu window->style – New css rule New css rule 28
29. Tạo css trong Dreamweaver (tt) ⚫ Class: Định nghĩa style kiểu class ⚫ Tag: Định nghĩa style cho một tag nhất định ⚫ Advanced: Định nghĩa style có ID nhất định ⚫ Name: Tên của style 29
30. Tạo css trong Dreamweaver (tt) Bước 3: Nếu cần định nghĩa thêm style ta quay lại bước 2 Bước 4: Lưu file css lại 30
31. Bài 1 31
32. Bài 2 ⚫ Kết hợp javascript làm highline menu cho trang Web them đoạn code hướng dẫn sau .mainmenu{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #CC0033; text-decoration: underline; background-color: #99FF33; } .mainmenu_over{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #CC0033; 32 text-decoration: underline; background-color:#009999;
33. Bài 2 (tt) function HightLight(what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } 33
34. Bài 2 (tt) 34