Web1012 slide 2
0 likes517 views
Tài liệu cung cấp cái nhìn tổng quan về CSS (Cascading Style Sheet), các phương pháp khởi tạo và viết CSS như inline, internal và external. Nó cũng mô tả về các quy tắc của CSS như kế thừa, tầng và độ ưu tiên giữa các quy tắc. Cuối cùng, tài liệu nhấn mạnh tầm quan trọng của bố cục (layout) trong thiết kế web, thường được chia theo dạng cột.
Web1012 slide 2
- 1. BÀI 2 CSS ( Cascading Style Sheet)
- 2. NHẮC LẠI BÀI TRƯỚC Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công việc thiết kế website Những kiến thức cơ bản về HTML ݺߣ 2 - CSS ( Cascading Style Sheet) 2
- 3. MỤC TIÊU BÀI HỌC Làm quen với CSS (Cascading Style Sheets) Khởi tạo CSS: Khởi tạo với Notepad Các cách viết CSS: • Embedded • Inline • Links Bố cục trang web với CSS ݺߣ 2 - CSS ( Cascading Style Sheet) 3
- 4. CSS (Cascading Style Sheet)
- 5. CSS (Cascading Style Sheet) Được sử dụng để thể hiện thêm các thuộc tính cho thành phần HTML Được thêm vào thành phần HTML bằng các cách sau: Inline – được viết luôn trong thẻ HTML Internal – viết trong thẻ <style> ở phần <head> External – viết ở file .css bên ngoài ݺߣ 2 - CSS ( Cascading Style Sheet) 5
- 6. CSS (Cascading Style Sheet) Một số quy tắc của CSS: Quy tắc kế thừa: nếu luật CSS được áp dụng cho thẻ cha thì cũng được mặc định áp dụng cho các thẻ con/nội dung trong đó Quy tắc tầng: nếu có 2 luật CSS, một luật áp dụng cho thẻ cha và một luật áp dụng cho thẻ con thì luật thứ 2 sẽ được áp dụng cho thẻ con Quy tắc dựa trên mức độ: nếu có 2 luật CSS cùng được áp dụng cho một đối tượng, luật nào có giá trị weight/specific lớn hơn thì sẽ được áp dụng Quy tắc !important: nếu luật được thêm từ khóa "!important" thì nó sẽ được áp dụng, không phụ thuộc vào các quy tắc khác ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 6
- 7. CSS (Cascading Style Sheet) 4 loại thẻ chọn trong CSS: Tags: Đối tượng áp dụng luật là thẻ HTML Classes: Đối tượng áp dụng luật là các thẻ div thuộc class tương ứng IDs: Đối tượng áp dụng luật thẻ thẻ div có id tương ứng Pseudo-class: Đối tượng áp dụng luật là các lớp giả đã được định nghĩa sẵn như: link, active, hover, …. ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 7
- 8. CSS (Cascading Style Sheet) Inline style sheet: Chỉ áp dụng cho một lần xuất hiện của một phần tử HTML <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 8
- 9. CSS (Cascading Style Sheet) Internal style sheet: Được viết trong phần <head> Sử dụng trong thẻ <style> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> External style sheet: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 9
- 10. KHỞI TẠO CSS VỚI DREAMWEAVER CS4
- 11. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 2 cách tạo CSS trong Dreamweaver: Sử dụng môi trường Design với các bảng liên quan CSS Sử dụng môi trường soạn thảo Code ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 11
- 12. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Sử dụng môi trường Design với các bảng liên quan: 1. sử dụng bảng INSERT kết hợp với bảng PROPERTIES, hộp thoại CSS Rule definition Common: Layout Forms Data Spry InContext Edditing Text Favorites Cung cấp các chức năng cho phép chèn hình ảnh, form, nội dung đa phương tiện vào web ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 12
- 13. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Ví dụ: định nghĩa CSS cho thẻ <h1>: Bước 1: sử dụng bảng INSERT chèn thẻ <h1>, nhập nội dung bất kỳ ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 13
- 14. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES để chỉnh sửa style (CSS) cho thẻ <h1> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 14
- 15. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Bước 3: đặt giá trị cho các thuộc tính trong hộp thoại CSS Rule definition Cột phân loại các thuộc tính Giá trị của các thuộc tính ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 15
- 16. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Thiết lập các giá trị liên quan ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 16
- 17. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Kết quả: Chỉnh sửa style với bảng CSS STYLES: • Đây là bảng hiển thị toàn bộ thuộc tính của các thành phần trên web ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 17
- 18. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tính và giá trị style của thẻ sẽ được hiển thị trên bảng CSS STYLES Vùng hiển thị thuộc tính và giá trị Vùng chỉnh sửa giá trị của các thuộc tính ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 18
- 19. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Sử dụng môi trường soạn thảo mã Code: Viết trong cặp thẻ <head> ở HTML Viết mã CSS Nội tuyến (inline) Viết trong một file .css riêng biệt ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 19
- 20. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết CSS trong cặp thẻ <head>…</head> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 20
- 21. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết CSS Inline <html> <body> <h1 style="font-family:Tahoma, Geneva, sans-serif; font-size:24px; fontstyle:italic; color:#F00">thực hành với thẻ <h1></h1> </body> </html> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 21
- 22. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết trong một file .css riêng biệt: • Bước 1: khởi tạo một file .css bằng cách lựa chọn File > New … lựa chọn CSS trong hộp thoại New Document ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 22
- 23. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 2: soạn thảo mã CSS cho thẻ <h1>, sau đó lưu file tại thư mục web (thư mục có chứa file .html) ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 23
- 24. KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 3: trong file .html, viết lệnh để gọi file .css <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB101- Thiết kế web</title> <link href=“common.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>thực hành với thẻ <h1></h1> </body> ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 24
- 25. BỐ CỤC WEBSITE VỚI CSS
- 26. BỐ CỤC WEBSITE VỚI CSS header v.v… content website footer Navigator (điều hướng) Layout là bố cục trình bày sắp xếp các thành phần của một trang web Layout website thường chia theo dạng cột ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 26
- 27. BỐ CỤC WEBSITE VỚI CSS ݺߣ 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 27
- 28. TỔNG KẾT HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ tạo nên các trang web thông qua các thẻ đánh dấu Thẻ là thành phần đánh dấu văn bản. Nội dung trong thẻ sẽ được trình duyệt xử lý dựa trên thẻ chứa nó CSS là ngôn ngữ đơn giản, hoạt động cùng với HTML để định dạng về mặt hình thức cho trang web Có 3 vị trí để đặt CSS: trong thẻ <head>, cùng dòng với thẻ (inline), ở một file .css bên ngoài Layout là bố cục trình bày sắp xếp các thành phần của một trang web, thường được chia theo dạng cột ݺߣ 2 - CSS ( Cascading Style Sheet) 28