Bài giảng lập trình web và ứng dụng css cascading style sheet
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (958.65 KB, 22 trang )
10/11/23
Phát triển ứng dụng web 1
Đại Học Sài Gòn – Khoa CNTT
CSS - Cascading Style Sheet
GV: Phan Thị Kim Loan
1
6 – CSS
1
Nội dung buổi học trước
1. Khái niệm và mục đích Form
2. Các đối tượng Form Fields
3. Phương thức GET/POST
4. Tag Marquee
6 – CSS
2
2
1
10/11/23
Nội dung
1. Giới thiệu CSS
2. Định nghĩa Style và các đơn vị tính
3. Phân loại CSS
4. Phạm vi áp dụng CSS (selector)
5. Một số tag HTML dùng riêng CSS
6. Thực hành
3
6 – CSS
3
Giới thiệu CSS
§ CSS = Cascading Style Sheet
§ Dùng định dạng các thành phần trong trang web
§ Sử dụng tương tự như định dạng template
§ Thống nhất cách thể hiện và tái sử dụng cho nhiều
webpage trong website.
§ Có thể thay đổi thuộc tính từng trang
hoặc cả site
nhanh chóng à linh hoạt thay đổi cách thể hiện.
– ……
6 – CSS
4
4
2
10/11/23
Định nghĩa Style
Kiểu 1
Kiểu 2
SelectorName{
“property1:value1;
property1:value1;
property2:value2;
property2:value2;
………
………
propertyN:valueN;”>…
propertyN:valueN;
</tag>
}
………
</tag>
5
6 – CSS
5
Định nghĩa Style
Vd kiểu 1
Vd kiểu 2
.TieuDe1 {
color : blue;
color: red;
font-family : Arial;”> SGU
font-family: Verdana, sans-serif; }
SGU
Ghi chú
Ví dụ
Giống ghi chú trongC++
Sử dung
/* Ghi chú */
6 – CSS
6
6
3
10/11/23
Measurement units
§ Absolute length: inch, cm, point …
§ Relative length: pixel, em, ex, ...
§ pixel (px): relative to the screen resolution
• Ex: LCD 14’’2 (1024x768) thì DPI = 96
•
è có 96 pixel trờn 1 inch
Đ Point: 1pt = 1/72 inch.
ã
ố có 1 pixel = 0.75pt
Font-size = 16pt
7
6 – CSS
7
Measurement Units
§ Relative length: em, ex, ...
• em and ex - relative to the parent element
• Ex: em
• Ex: ex
• CSS:
6 – CSS
8
8
4
10/11/23
Phân loại CSS
§ Gồm 3 lại CSS:
1. Inline Style Sheet
2. Embedding Style Sheet (Internal SS)
3. External Style Sheet
9
6 – CSS
9
Phân loại CSS
§ Inline style sheet: dùng thuộc tính style cho
từng thẻ HTML
§ Embedded style sheet: định nghĩa các định
dạng trong thẻ <style> trong phần <head> của
webpage
§ External style sheet: định nghĩa các định dạng
trong file .css và các webpage link tới file .css
(trong phần <head>)
6 – CSS
10
10
5
10/11/23
Phân loại CSS – Inline Style Sheet
§ Định nghĩa Style trong thuộc tính style của từng
tag HTML
§ Ví dụ:
6 – CSS
11
11
Phân loại CSS – Embedding Style Sheet
§ Định nghĩa các định dạng trong thẻ <style>,
đặt trong phần <head> của trang HTML.
§ Ví dụ:
6 – CSS
12
12
6
10/11/23
Phân loại CSS – External Style Sheet
§ Định nghĩa style lưu trong file .CSS và các page
liên kết tới file .CSS (link đặt trong <head>)
§ Định nghĩa style theo cú pháp kiểu 2
§ Tạo liên kết đến file .CSS.
Liên kết bằng tag Link
LK bằng tag style với @import URL
13
6 – CSS
13
Phân loại CSS – External Style Sheet
File HTML
File .CSS
6 – CSS
Browser
14
14
7
10/11/23
CSS – so sánh và đánh giá
15
6 – CSS
15
CSS – độ ưu tiên
Thứ tự ưu tiên áp dụng định dạng khi sử dụng
các loại CSS (độ ưu tiên giảm dần)
1. Inline Style Sheet
2. Embedding Style Sheet
3. External Style Sheet
4. Browser Default
6 – CSS
16
16
8
10/11/23
Phạm vi áp dụng CSS (selector)
§ Selector : tên 1 style tương ứng với một thành
phần được áp dụng style đó.
§ Ví dụ:
Properties & values
h1 {
color:#006;
Selector
font:28px "arial black";
margin-top:0px;
padding-top:0px;
}
17
6 – CSS
17
Phạm vi áp dụng CSS (selector)
§ Ví dụ:
§ Browse à
6 – CSS
18
18
9
10/11/23
Các loại selector
6 – CSS
19
19
Ví dụ phạm vi sử dụng các Selector - Elements
6 – CSS
20
20
10
10/11/23
Ví dụ phạm vi sử dụng các Selector - #ID
6 – CSS
21
21
Ví dụ phạm vi sử dụng các Selector - .CLASS
6 – CSS
22
22
11
10/11/23
Ví dụ Các Selector - Element.CLASS
23
6 – CSS
23
Ví dụ Các Selector - Contextual
6 – CSS
24
24
12
10/11/23
Ví dụ Các Selector – Others
25
6 – CSS
25
Một số tag HTML dùng riêng CSS
CSS Positioning
and
Multi-Column Layouts
HTML Tag
§<div>…</div>
§<span>…</span>
6 – CSS
26
26
13
10/11/23
Một số tag HTML dùng riêng CSS
Code View
Browser View
Design View
27
6 – CSS
27
Một số tag HTML dùng riêng CSS
Demonstration Basic Three-Column Layout
• position:static, position: relative, position: absolute and position: float.
6 – CSS
28
28
14
10/11/23
Một số tag HTML dùng riêng CSS
Demonstration Basic Three-Column Layout
29
6 – CSS
29
Tham Khảo
/>§ Tìm hiểu thêm:
Designing without table with CSS à Google
6 – CSS
30
30
15
10/11/23
Bài thực hành
Đại Học Sài Gòn – Khoa CNTT
CSS - Cascading Style Sheet
GV: Phan Thị Kim Loan
31
6 – CSS
31
Bài thực hành
§ Hồn tất danh sách đăng ký đề tài
§ Thực hành CSS
§ Làm lại các bài tập trước, sử dụng CSS
6 – CSS
32
32
16
10/11/23
CSS cơ bản
§ 1. CSS Linking and Setup
§ 2.Understanding_levels_of_inheritance
§
33
6 – CSS
33
CSS cơ bản
§ 1. CSS Linking and Setup:
§ 01-body-style.html + external.css
6 – CSS
34
34
17
10/11/23
CSS cơ bản
§ Understanding_levels_of_inheritance:
§ 02-inheritance.html + external.css
§ <span></span> (<div></div>)
35
6 – CSS
35
CSS cơ bản
§ 03-levels
§ 03-levels.html + external.css
6 – CSS
36
36
18
10/11/23
CSS cơ bản
§ 04.span and div
§ 04-span-div.html + external.css
span
div
37
6 – CSS
37
CSS cơ bản
§ 05.selectors
§ 05-selectors.html + external.css
6 – CSS
38
38
19
10/11/23
CSS cơ bản
§ 05.selectors
39
6 – CSS
39
CSS cơ bản
§ 05.selectors
6 – CSS
40
40
20
10/11/23
CSS cơ bản
§ 05.selectors
41
6 – CSS
41
CSS cơ bản
§
06.Units
§ 06-units.html + external.css
6 – CSS
42
42
21
10/11/23
Thank you !
6 – CSS
GV: Phan Thị Kim Loan
43
43
22
