Download miễn phí Bài giảng Thiết kế web - CSS – Cascading Style Sheet
Gồm 3 loại CSS:
Inline Style Sheet: dùng thuộc tính style cho từng thẻ HTML
Embedding 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>)
http://s1.liketly.com/flash/edoc/jh2i1fkjb33wa7b577g9lou48iyvfkz6-swf-2014-02-11-bai_giang_thiet_ke_web_css_cascading_style_she.L7DYw2rcm7.swf /tai-lieu/de-tai-ung-dung-tren-liketly-57976/Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
1
THIẾT KẾ WEB
CSS – Cascading Style Sheet
ĐẠI HỌC SÀI GÒN – KHOA CNTT
GV: Trần Đình Nghĩa
[email protected]
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
2
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. cách GET/POST
4. Tag Marquee
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
3
Nội dung
1. Giới thiệu CSS
2. Định nghĩa Style
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
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
4
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 hay cả
site nhanh chóng linh hoạt thay đổi cách
thể hiện.
……
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
5
Định nghĩa Style
Phân biệt chữ hoa, chữ thường
Kiểu 1 Kiểu 2
<tag style=
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…
SelectorName{
property1:value1;
property2:value2;
………
propertyN:valueN;
}
<tag class =
“SelectorName”>
………
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
6
Định nghĩa Style
Vd kiểu 1 Vd kiểu 2
<h1 style=“
color : blue;
font-family : Arial;”> SGU
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }
SGU
Ghi chú Ví dụ
Giống ghi chú
trongC++
Sử dung
/* Ghi chú */
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
7
Phân loại CSS
Gồm 3 loại CSS:
Inline Style Sheet: dùng thuộc tính
style cho từng thẻ HTML
Embedding Style Sheet: định nghĩa
các định dạng trong thẻ
trong phần 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
)
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
8
Phân loại CSS – Inline Style Sheet
Định nghĩa Style trong thuộc tính style
của từng tag HTML
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
9
Phân loại CSS – Embedding Style Sheet
Định nghĩa các định dạng trong thẻ
, đặt trong phần của
trang HTML
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
10
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
)
Đị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
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
11
Phân loại CSS – External Style Sheet
Browser
File .CSS
File HTML
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
12
CSS – so sánh và đánh giá
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
13
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)
Inline Style Sheet
Embedding Style Sheet
External Style Sheet
Browser Default
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
14
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ụ:
h1 {
color:#006;
font:28px "arial black";
margin-top:0px;
padding-top:0px;
}
Properties & values
Selector
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
15
Phạm vi áp dụng CSS (selector)
Browse
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
16
Các loại selector
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
17
Ví dụ phạm vi sử dụng các Selector - Elements
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
18
Ví dụ phạm vi sử dụng các Selector - #ID
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
19
Ví dụ phạm vi sử dụng các Selector - .CLASS
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
20
Ví dụ Các Selector - Element.CLASS
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
21
Ví dụ Các Selector - Contextual
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
22
Ví dụ Các Selector – Others
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
23
Một số tag HTML dùng riêng CSS
CSS Positioning
and
Multi-Column Layouts
HTML Tag
…
…
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
24
Một số tag HTML dùng riêng CSS
Code View
Design View
Browser View
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
25
Khác biệt giữa và
: thẻ trung hòa, bản thân thẻ không
tạo bất kỳ thay đổi thấy được nào
Dùng css kết hợp để định dạng phần tử
theo ý muốn
: dùng chia trang web thành những phân đoạn
khác nhau
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
26
Một số tag HTML dùng riêng CSS
Demonstration Basic Three-Column Layout
• position:static, position: relative, position: absolute and position: float.
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
27
Một số tag HTML dùng riêng CSS
Demonstration Basic Three-Column Layout
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
28
Tham Khảo
Tìm hiểu thêm:
Designing without table with CSS Google
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
29
THIẾT KẾ WEB
THỰC HÀNH
CSS – Cascading Style Sheet
ĐẠI HỌC SÀI GÒN – KHOA CNTT
TH
IẾ
T
K
Ế
V
À
L
Ậ
P
T
R
ÌN
H
W
E
B
30
Bài thực hành
Thực hành CSS
Làm lại các bài tập trước, sử dụng
CSS
Hướng dẫn tìm kiếm và sử dụng
Templates cho Đồ án cuối kỳ.
...
