Tuan 3 Chuong 3 Lam Viec Voi CSS

www.hoasen.edu.
vn
CHƯƠNG 3
ĐỊNH DẠNG NỘI DUNG TRONG

TRANG WEB VỚI CSS
GV điều phối: ThS. PHẠM THỊ THANH TÂM
Email: tam.phamthithanh@hoasen.edu.vn
uu
www.hoasen.edu.vn
NỘI DUNG TRÌNH BÀY
1 • GIỚI THIỆU CSS
2 • CÁC LOẠI CSS
03/13/2023
uu 2
Chương 3: Định dạng nội dung trong trang web với CSS
www.hoasen.edu.vn
1. GIỚI THIỆU CSS

 CSS = Casscading Style Sheets: dùng để định dạng
các thành phần trên trang web
 Đặc điểm:
 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 (casscading)
 Đảm bảo tính nhất trong trong trình bày của
03/13/2023
website
uu 3
www.hoasen.edu.vn
2. CÁC LOẠI CSS

1. Inline Style Sheet: dùng để định dạng cho một đối tượng
(tag) cụ thể trong trang web (nhúng CSS vào trong tag
HTML)
 Cách sử dụng:
<tag style=“thuộc tính:giá trị; thuộc tính:giá trị;…”>
…
</tag>
<font
Ví dụ
style=“color:#F00; font-size:20px; font-weight:bold;”>
03/13/2023
Xin chào các bạn
</font>
uu 4
www.hoasen.edu.vn
2. CÁC LOẠI CSS (tt)

2. Internal Style Sheet (Embedded Style Sheet): dùng để định
dạng cho các đối tượng cụ thể trong trang web (nhúng CSS
vào trong trang web)
Cách sử dụng Cú pháp của CSS
<head> Selector
<style> {
… thuộc tính: giá tri;
… thuộc tính: giá trị
… …
03/13/2023
</style> …
</head> }
uu 5
www.hoasen.edu.vn

 Các loại Selector:
 ID Selector: dùng để tạo style cho một đối tượng
cụ thể (trước tên style có dấu #)
 Class Seclector: dùng để tạo style cho một nhóm
các đối tượng có định dạng giống nhau (trước trên
style có dấu chấm (.)
 Element Selector: dùng để tạo style cho tag
HTML (tên style là tên tag HMTL)
03/13/2023
 Descendant Selector: dùng để tạo style theo cấp
cha con
uu 6
www.hoasen.edu.vn

 Ví dụ
03/13/2023
uu 7
www.hoasen.edu.vn
03/13/2023
uu 8
www.hoasen.edu.vn
Kết quả hiển thị trên trình duyệt
03/13/2023
uu 9
www.hoasen.edu.vn

3. External Style Sheet: liên kết trang web đến một tập tin
(.css) có chứa các định dạng  liên kết nhiều trang web
đến cùng một tập tin .css và sử dụng các định dạng trong
tập tin này nhằm tạo cách trình bày thống nhất cho tất cả
các trang web trong cùng một website.
 Cách sử dụng:
 B1: Tạo tập tin external style sheet (.css)
 B2: Tạo liên kết từ trang web trong website đến
tập tin .css
03/13/2023
 B3: Áp dụng CSS đã tạo trong trang HTML
uu 10
www.hoasen.edu.vn
03/13/2023
uu 11
www.hoasen.edu.vn

 Bước 1: Tạo tập tin external style sheet (.css)
03/13/2023
uu 12
www.hoasen.edu.vn

 Bước 2: Tạo liên kết từ trang web trong website đến
tập tin .css
 Cách 1: Sử dụng tag <link>
<head>
…
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
03/13/2023
 Cách 2: vào menu Format > CSS Styles > Attach
Style Sheet
uu 13
www.hoasen.edu.vn
03/13/2023
uu 14
www.hoasen.edu.vn

 Lưu ý:
 Một trang web/website có thể sử dụng nhiều hơn
một style  xung đột
 Khi xảy ra xung đột, trình duyệt sẽ xác định mức
độ ưu tiên của các style theo thứ tự Inline Style
Sheet  Internal Style Sheet  External Style
Sheet
03/13/2023
uu 15
www.hoasen.edu.vn
HỎI - ĐÁP
03/13/2023
Chúc các bạn snh viên đạt kết quả tốt
uu 16

Tuan 3 Chuong 3 Lam Viec Voi CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tuan 3 Chuong 3 Lam Viec Voi CSS

Uploaded by

Copyright:

Available Formats

www.hoasen.edu.

ĐỊNH DẠNG NỘI DUNG TRONG

NỘI DUNG TRÌNH BÀY

1 • GIỚI THIỆU CSS

2 • CÁC LOẠI CSS

1. GIỚI THIỆU CSS

2. CÁC LOẠI CSS

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

Kết quả hiển thị trên trình duyệt

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

2. CÁC LOẠI CSS (tt)

You might also like