BÀI 2CSS ( Cascading Style Sheet)
NHẮC LẠI BÀI TRƯỚC
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – server
Công việc thiết kế websiteNhững kiến thức cơ bản về HTML
Những khái niệm về website:Thành phần của trang webTên miền, địa chỉ IPClient – server
Công việc thiết kế websiteNhững kiến thức cơ bản về HTML
Slide 2 - CSS ( Cascading Style Sheet) 2
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 NotepadCác cách viết CSS:
• Embedded• Inline• Links
Bố cục trang web với CSS
Làm quen với CSS (Cascading Style Sheets)Khởi tạo CSS:
Khởi tạo với NotepadCác cách viết CSS:
• Embedded• Inline• Links
Bố cục trang web với CSS
Slide 2 - CSS ( Cascading Style Sheet) 3
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Được sử dụng để thể hiện thêm các thuộc tính chothành phần HTMLĐược thêm vào thành phần HTML bằng các cáchsau:
Inline – được viết luôn trong thẻ HTMLInternal – viết trong thẻ <style> ở phần <head>External – viết ở file .css bên ngoài
Được sử dụng để thể hiện thêm các thuộc tính chothành phần HTMLĐược thêm vào thành phần HTML bằng các cáchsau:
Inline – được viết luôn trong thẻ HTMLInternal – viết trong thẻ <style> ở phần <head>External – viết ở file .css bên ngoài
Slide 2 - CSS ( Cascading Style Sheet) 5
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ẻ chathì cũng được mặc định áp dụng cho các thẻ con/nội dungtrong đó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ẻ conQuy tắc dựa trên mức độ: nếu có 2 luật CSS cùng được ápdụng cho một đối tượng, luật nào có giá trị weight/specificlớn hơn thì sẽ được áp dụngQuy 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àocác quy tắc khác
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ẻ chathì cũng được mặc định áp dụng cho các thẻ con/nội dungtrong đó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ẻ conQuy tắc dựa trên mức độ: nếu có 2 luật CSS cùng được ápdụng cho một đối tượng, luật nào có giá trị weight/specificlớn hơn thì sẽ được áp dụngQuy 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àocác quy tắc khác
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 6
CSS (Cascading Style Sheet)
4 loại thẻ chọn trong CSS:Tags: Đối tượng áp dụng luật là thẻ HTMLClasses: Đối tượng áp dụng luật là các thẻ div thuộcclass tương ứngIDs: Đối tượng áp dụng luật thẻ thẻ div có id tươngứngPseudo-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, ….
4 loại thẻ chọn trong CSS:Tags: Đối tượng áp dụng luật là thẻ HTMLClasses: Đối tượng áp dụng luật là các thẻ div thuộcclass tương ứngIDs: Đối tượng áp dụng luật thẻ thẻ div có id tươngứngPseudo-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, ….
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 7
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>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 8
<!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>
CSS (Cascading Style Sheet)
Internal style sheet:Được viết trong phần <head>Sử dụng trong thẻ <style>
External style sheet:
<head><style type="text/css">
body {background-color:yellow;}p {color:blue;}
</style></head>
Internal style sheet:Được viết trong phần <head>Sử dụng trong thẻ <style>
External style sheet:
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 9
<head><style type="text/css">
body {background-color:yellow;}p {color:blue;}
</style></head>
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
2 cách tạo CSS trong Dreamweaver:
Sử dụng môi trường Designvới các bảng liên quan
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 11
CSS
Sử dụng môi trường Designvới các bảng liên quan
Sử dụng môi trường soạn thảoCode
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ảngPROPERTIES, hộp thoại CSS Rule definition
Common:LayoutFormsDataSpryInContext EdditingTextFavorites
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 12
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
Common:LayoutFormsDataSpryInContext EdditingTextFavorites
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ậpnội dung bất kỳ
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 13
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>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 14
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ạiCSS Rule definition
Cột phân loại cácthuộc tính
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 15
Giá trị của các thuộctính
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 16
Thiết lập các giá trịliên quan
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ầntrên web
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 17
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ầntrên web
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ínhvà giá trị style của thẻ sẽ được hiển thị trên bảng CSSSTYLES
Vùng hiển thị thuộc tính và giá trị
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 18
• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tínhvà giá trị style của thẻ sẽ được hiển thị trên bảng CSSSTYLES
Vùng chỉnh sửa giá trị của các thuộctính
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ặpthẻ <head> ở
HTML
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 19
Viết mã CSS Nội tuyến (inline)
Viết trong mộtfile .css riêng biệt
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Viết CSS trong cặp thẻ <head>…</head>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 20
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; font-style:italic; color:#F00">thực hành với thẻ <h1></h1></body></html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 21
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
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 22
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
• Bước 2: soạn thảo mã CSS cho thẻ <h1>, sau đó lưu filetại thư mục web (thư mục có chứa file .html)
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 23
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>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 24
<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>
BỐ CỤC WEBSITE VỚI CSS
BỐ CỤC WEBSITE VỚI CSS
Layout là bố cục trình bày sắp xếp các thành phầncủa một trang webLayout website thường chia theo dạng cột
website
header
contentv.v…
Layout là bố cục trình bày sắp xếp các thành phầncủa một trang webLayout website thường chia theo dạng cột
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 26
Navigator(điều
hướng)footer
BỐ CỤC WEBSITE VỚI CSS
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 27
TỔNG KẾT
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngônngữ tạo nên các trang web thông qua các thẻ đánhdấuThẻ là thành phần đánh dấu văn bản. Nội dungtrong 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ớiHTML để định dạng về mặt hình thức cho trang webCó 3 vị trí để đặt CSS: trong thẻ <head>, cùng dòngvới thẻ (inline), ở một file .css bên ngoàiLayout là bố cục trình bày sắp xếp các thành phầncủa một trang web, thường được chia theo dạng cột
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngônngữ tạo nên các trang web thông qua các thẻ đánhdấuThẻ là thành phần đánh dấu văn bản. Nội dungtrong 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ớiHTML để định dạng về mặt hình thức cho trang webCó 3 vị trí để đặt CSS: trong thẻ <head>, cùng dòngvới thẻ (inline), ở một file .css bên ngoàiLayout là bố cục trình bày sắp xếp các thành phầncủa một trang web, thường được chia theo dạng cột
Slide 2 - CSS ( Cascading Style Sheet) 28