Web1012 slide 2

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


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



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


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, ….



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>


<!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>


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:


<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


2 cách tạo CSS trong Dreamweaver:

Sử dụng môi trường Designvới các bảng liên quan


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


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


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


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ỳ



Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES đểchỉnh sửa style (CSS) cho thẻ <h1>



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


Giá trị của các thuộctính



Thiết lập các giá trịliên quan


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


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


• 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ị


• 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


Sử dụng môi trường soạn thảo mã Code:

Viết trong cặpthẻ <head> ở

HTML


Viết mã CSS Nội tuyến (inline)

Viết trong mộtfile .css riêng biệt


Viết CSS trong cặp thẻ <head>…</head>



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>



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



• 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)



• 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>


<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


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


Navigator(điều

hướng)footer



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


Documents

Web1012 slide 2