Web Programming B2 CSS

Web Programming
HTS
NỘI DUNG
Chương 2. Giới thiệu HTML, CSS và

cách dựng layout trong trang web
2
CASCADING STYLE SHEET
(CSS)
Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 3

MỤC TIÊU
- Sinh viên nắm bắt được các cách định dạng
- Sinh viên nắm bắt được các đối tượng được định dạng.
- Sinh viên xác định và vận dụng kiến thức để định dạng các đối tượng
trong web.
- Sinh viên vận dụng, phân tích để dựng được layout theo yêu cầu.
- Sinh viên phân tích được các templates, các layout của các website. Lấy và
tùy biến layout của các website theo yêu cầu.

CSS
• CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của các đối
tượng trong trang web. CSS cho phép bạn định dạng các đối tượng
với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông
thường không có. Bạn không thể định dạng 1 trang web cho đẹp
khi không có sự am hiểu nhiều về kỹ thuật CSS.

CÁCH ĐỊNH DẠNG CSS
Mức độ ảnh hưởng Áp dụng thực tế
1 3
1. ĐỊNH DẠNG TRỰC TIẾP TRÊN TAG
2 2
2. ĐỊNH DẠNG TRÊN 1 TRANG HTML
3 1
3. ĐỊNH DẠNG TRONG 1 FILE CSS

ĐỊNH DẠNG TRỰC TIẾP TRÊN TAG
• Áp dụng trực tiếp trên Tag.
• Tầm ảnh hưởng trực tiếp lên tag được định dạng.
• Các thuộc tính định dạng phải nằm trong thuộc tính style.
• Khuyên: hạn chế dùng cách này.
• Ví dụ 1:
7
ĐỊNH DẠNG TRÊN 1 TRANG HTML
• Áp dụng trong cặp thẻ <styles> </styles> đặt trong cặp thẻ
<head></head>
• Tầm ảnh hưởng lên 1 trang web.
• Các đối tượng cần định dạng được code tại cặp thẻ <styles> </styles>
• Sinh viên cần xác định đúng đối tượng cần định dạng: Tag HTML, Id,
Class, Componse.

ĐỊNH DẠNG TRÊN 1 TRANG HTML
• Ví dụ 2:
9
ĐỊNH DẠNG TRONG 1 FILE CSS
• Tạo 1 file css
• Tầm ảnh hưởng lên nhiều trang web (của 1 hoặc nhiều website)
• Thực tế dùng cách này, các thư viện, framework đang dùng.
• Sinh viên cần xác định đúng đối tượng cần định dạng: Tag HTML, Id, Class,
Componse.
• Sinh viên biết nhúng file css chèn vào trong trang html
<link rel="stylesheet" type="text/css" href="vd3.css">

ĐỊNH DẠNG TRONG 1 FILE CSS
• Ví dụ 3,4
11
CÁC ĐỐI TƯỢNG ĐỊNH DẠNG CSS
• Tag HTML
• Id
• Class
• Componse

TAG HTML
• Các thuộc tính sẽ ảnh hưởng lên các tag có trong trang web
• Ví dụ 1, 2, 3, 4

Id
• Các thuộc tính sẽ ảnh hưởng lên đối tượng Id trong trang web
• Cần nhớ: Id là duy nhất trong 1 trang web, trong 1 trang không có
2 id cùng tên.
• Ví dụ 5

Class
• Các thuộc tính sẽ ảnh hưởng lên các đối tượng Class trong trang web
• Cần nhớ: Trong 1 trang hoặc nhiều trang có thể có nhiều đối tượng
class cùng tên.
• Ví dụ 5

Componse
• Các thuộc tính sẽ ảnh hưởng lên đúng đối tượng cần định dạng
theo đường dẫn componse.
• Cần nhớ: định dạng này hay dùng trong web.
• Sinh viên cần nắm bố cục layout và cấu trúc HTML của trang web
để xác định đúng Componse.
• Ví dụ 5

THUỘC TÍNH VÀ GIÁ TRỊ
Thuộc tính:
 Giúp định dạng cách hiển thị của đối tượng như thế nào.
 Khi dùng thuộc tính phải xác định đối tượng cần định dạng là gì.
Giá trị: mỗi thuộc tính có thể có 1 hoặc nhiều giá trị. Người thiết kế
phải chọn giá trị phù hợp với yêu cầu đưa ra.
Các nhóm thuộc tính:
 Layout
 Text
 Border
 background

CÁC THUỘC TÍNH NHÓM LAYOUT
 Width, min-width, max-width
 Height, min-height, max-height
 Margin, padding
 Float, clear
 Display
 Overflow
…
CÁC THUỘC TÍNH NHÓM TEXT
 Color
 Font-family, font-size, font-style
 Text-align, Text-decoration, Text-shadow, Text-transform
 Display
 Overflow
…

CÁC THUỘC TÍNH NHÓM BORDER
 Border-width
 Border-style
 Border-color
 Border-radius
 ….

CÁC THUỘC TÍNH NHÓM BACKGROUND
 Background-position
 Background-size
 Background-repeat
 Background-color
 Background-images
 …..

THỰC HÀNH BÀI LAB
 LAB CSS-1  LAB CSS-6

TÀI LIỆU THAM KHẢO CSS
• Slide bài giảng CSS – thầy Sơn.
• Tài liệu giảng web tĩnh – thầy Sơn.
• Giáo trình lập trình web-Đã gửi sv.
• Website: https://www.w3schools.com/css/default.asp
• https://www.w3schools.com/cssref/index.php
• Các bài tập tham khảo CSS:
https://www.w3schools.com/css/css_exercises.asp
Các bài Quiz tham khảo CSS:
https://www.w3schools.com/css/css_quiz.asp
LAYOUT
 DIV
 LAB LAYOUT

Dặn dò về nhà
• Xem kỹ lại bài đã học hôm nay
• Đọc thêm các tài liệu tham khảo
• Ôn tập kiến thức: HTML, CSS

Thank You

Web Programming B2 CSS

Uploaded by

Document Information

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

Web Programming B2 CSS

Uploaded by

Copyright:

Available Formats

Web Programming

Chương 2. Giới thiệu HTML, CSS và

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 3

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 4

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 5

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 6

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 8

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 10

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 12

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 13

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 14

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 15

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 16

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 17

 Height, min-height, max-height

 Font-family, font-size, font-style

 Text-align, Text-decoration, Text-shadow, Text-transform

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 19

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 20

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 21

 LAB CSS-1  LAB CSS-6

 LAB CSS-2  LAB CSS-7

 LAB CSS-3  LAB CSS-8

 LAB CSS-4  LAB CSS-9

 LAB CSS-5  LAB CSS-10

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 24

Slide Bài Giảng HTML-THẦY HTS-LƯU HÀNH NỘI BỘ 25

You might also like