1. LOGO
Ứng dụng phân tán – Xây dựng UD Web
Chủ đề 2
Thiết kế giao diện
ở client với CSS
GV:
Nguyễn
Trường
Sơn
2. Nội dung
• Giới
thiệu
CSS
• Định
nghĩa
Style
• Sử
dụng
và
Phân
loại
CSS
• Selector
trong
CSS
và
phạm
vi
ảnh
hưởng
3. Nội dung
• Giới
thiệu
CSS
• Định
nghĩa
Style
• Sử
dụng
và
Phân
loại
CSS
• Selector
trong
CSS
và
phạm
vi
ảnh
hưởng
4. Giới thiệu về CSS
• CSS
=
Casscading
Style
Sheets
• Dùng
để
mô
tả
cách
hiển
thị
các
thành
phần
trên
trang
WEB
• 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
cnh
từng
trang
hoặc
cả
site
nhanh
chóng
(cascading)
5. Giới thiệu về CSS – Ví dụ 1
Một style xuất hiện nhiều nơi trên trang một / nhiều trang web CSS
6. Giới thiệu về CSS – Ví dụ 2
Style hồng
Style xanh
Thay đổi cách trình bày của toàn bộ trang web CSS
7. Giới thiệu CSS
§ Ý
tưởng
của
CSS:
Tách
rời
phần
nội
dung
khỏi
phần
hiển
thị
của
một
trang
web
8. Ví dụ 3
• Tạo
menu/tab
dễ
dàng:
• Có
nhiều
website
cho
phép
thiết
kế
những
menu
CSS:
– hnp://cssmenumaker.com
– Google:
Menu
CSS,
Tab
CSS,
…
9. Ví dụ 4
• Layout
một
trang
web
có
chất
lượng
• Có
nhiều
trang
web,
công
cụ
hỗ
trợ
tạo
template
cho
website:
– hnp://www.dotemplate.com:
thiết
kế,
download
css,
…
10. Tổng kết: Lợi ích của CSS
• Độc
lập
thành
phần
nội
dung
với
thành
phần
trình
bày
của
một
trang
web
• Việc
viết
code
cho
trang
web
trở
nên
dễ
dàng
• Dễ
dàng
để
tạo
nên
sự
thay
đổi
giao
diện
cho
toàn
bộ
các
trang
web
(site-‐wide
changes)
• Việc
hiển
thị
(download)
trang
web
sẽ
nhanh
hơn
• Dễ
dàng
cho
phép
người
sử
dụng
customize
thành
style
mong
muốn
(style
swichers)
• Sử
dụng
CSS
để
tạo
menu,
tab,
layout,
template,
…
11. Nội dung
• Giới
thiệu
CSS
• Định
nghĩa
Style
• Sử
dụng
và
Phân
loại
CSS
• Selector
trong
CSS
và
phạm
vi
ảnh
hưởng
12. Định nghĩa style - Kiểu 1
• Định
nghĩa
và
sử
dụng
trực
{ếp
trong
các
thẻ
HTML
• Cú
pháp:
<tag
style
=
"property1:
value1;
property2:
value2;…
">
Dữ
liệu
</tag>
• Trong
đó:
tag
:
thẻ
HTML
property1,
property2,
...:
thuộc
cnh
value1,
value2,
...:
giá
trị
của
thuộc
cnh
14. Định nghĩa style - Kiểu 2
Khai
báo
Sử
dụng
selector_name
{
– Tuỳ
loại
của
selector_name
property1:
value1
;
mà
có
cách
sử
dụng
khác
property2:
value2
;
nhau.
...
– Ví
dụ:
}
<tag
class="selector_name">
– selector_name:
quy
định
phạm
vi
ảnh
hưởng
của
style.
...
– property1,
property1
:
thuộc
<tag/>
cnh
– value1,
value2
:
giá
trị
16. Định nghĩa style – Ghi chú
• Giống
ghi
chú
trong
C++
• Sử
dụng:
/*Ghi
chu
*/
• Ví
dụ
:
.TieuDe1
{
background-‐color:
green;
/*nền
màu
xanh
*/
color:
yellow;
/*chữ
màu
vàng
*/
font-‐weight:
bold;
/*chữ
đậm
*/
}
17. Nội dung
• Giới
thiệu
CSS
• Định
nghĩa
Style
• Sử
dụng
và
Phân
loại
CSS
• Selector
trong
CSS
và
phạm
vi
ảnh
hưởng
18. Các loại CSS
• Gồm
3
loại
CSS
1
2
3
---------- ---------
---------- ---------
------------ css file
------------
– 1
-‐
Inline
Style
Sheet:
Nhúng
CSS
vào
tag
HTML
– 2
-‐
Embedding
Style
Sheet
/
Internal
Style
Sheet:
Nhúng
CSS
vào
trang
web
– 3
-‐
External
Style
Sheet:
Liên
kết
CSS
với
trang
web
19. Inline Style Sheet
• Định
nghĩa
style
trong
thuộc
cnh
style
của
từng
tag
HTML.
• Theo
cú
pháp
kiểu
1.
• Không
sử
dụng
lại
được.
20. Embedding Style Sheet
• Còn
gọi
là
Internal
Style
Sheet
hoặc
Document-‐Wide
Style
Sheet
• Mọi
định
nghĩa
type
nằm
trong
tag
<style>
của
trang
HTML.
• Định
nghĩa
style
theo
cú
pháp
kiểu
2.
<head>
<style
type=“text/css”
media="all
|
print
|
screen"
>
style
rules
style
rules
</style>
</head>
22. External Style Sheet
• Mọi
style
đều
lưu
trong
tập
{n
có
phần
mở
rộng
là
*.CSS.
• Tập
{n
CSS:
lưu
trữ
nhiều
style
theo
cú
pháp
kiểu
2.
• Trong
file
HTML:
Sử
dụng
thẻ
link:
<head>
<link
rel=“stylesheet”
href=“URL_of_cssfile”
type="text/css">
</head>
Sử
dụng
@import
url:
<head>
<style
type=“text/css”
media="all
|
print
|
screen"
>
@import
url(URL_of_cssfile);
</style>
</head>
24. So sánh, Đánh giá
Inline
Style
Sheet
Embedding
Style
Sheet
External
Style
Sheet
Khai
báo
Kiểu
1
Kiểu
2
Kiểu
2
Cú
pháp
sử
<p
style=“color:red;”>
<style
type=“text/css”>
<link
rel=“stylesheet
“
dụng
Test
.TieuDe1{color:
red;}
href=“main.css”
/>
</p> </style>
<p
class=“TieuDe1”>
<p
class=“TieuDe1”>
Test
Test
</p>
</p>
Ưu
điểm
•
Dễ
dàng
quản
lý
Style
theo
•
Dễ
dàng
quản
lý
Style
theo
•
Có
thể
thiết
lập
Style
cho
từng
tag
của
tài
liệu
web.
từng
tài
liệu
web.
nhiều
tài
liệu
web.
•
Không
cần
tải
thêm
các
trang
•
Thông
{n
các
Style
được
thông
{n
khác
cho
style
trình
duyệt
cache
lại
Khuyết
điểm
•
Cần
phải
Khai
báo
lại
thông
•
Cần
phải
khai
báo
lại
thông
{n
•
Tốn
thời
gian
download
file
{n
style
trong
từng
tài
liệu
style
cho
các
tài
liệu
khác
trong
*.css
và
làm
chậm
quá
trình
Web
và
các
tài
liệu
khác
một
mỗi
lần
sử
dụng
biên
dịch
web
ở
trình
duyệt
cách
thủ
công.
trong
lần
đầu
sử
dụng
•
Khó
cập
nhật
style
25. Sử dụng CSS
mystyle.css
Sample1.html
Màu nào đây ?
27. Độ ưu tiên
• Thứ
tự
ưu
{ên
áp
dụng
định
dạng
khi
sử
dụng
các
loại
CSS
(độ
ưu
{ên
giảm
dần)
:
1. Inline
Style
Sheet
2. Embedding
Style
Sheet
(Internal
Style
Sheet)
3. External
Style
Sheet
4. Browser
Default
28. Nội dung
• Giới
thiệu
CSS
• Định
nghĩa
Style
• Sử
dụng
và
Phân
loại
CSS
• Selector
trong
CSS
và
phạm
vi
ảnh
hưởng
– Element
selector
– ID
rules
– Class
rules
– Kết
hợp
– Contextual
– Pseudo
class
– Pseudo
element
29. Selector
• Được
sử
dụng
để
mô
tả
phạm
vi
trong
tài
liệu
HTML
mà
định
dạng
CSS
được
áp
dụng.
• Các
dạng
selectors
§
HTML
element
selectors
§ Class
selectors
§ ID
selectors
§ ....
30. Element selector
Khai
báo
Sử
dụng
tag_name
{
– Style
sẽ
có
hiệu
ứng
trên
tất
property1:
value1
;
cả
các
thẻ
tag_name
property2:
value2
;
...
}
– tag_name:
tên
các
thẻ
HTML
– Ví
dụ:
h1
{
background-‐color:green;
}
33. ID rules selector
Khai
báo
Sử
dụng
#id
{
– Style
sẽ
có
hiệu
ứng
trên
tất
property1:
value1;
cả
các
thẻ
mà
có
giá
trị
của
property2:
value2;
...
thuộc
cnh
id
=
id.
}
– Muốn
sử
dụng
thì
phải
khai
báo
giá
trị
cho
thuộc
cnh
id
– id:
giá
trị
id
của
một
thẻ
của
thẻ.
muốn
áp
dụng
style
– Giá
trị
của
id
thường
duy
nhất
– Ví
dụ:
– Ví
dụ:
#xtle
{
<div
id="xtle">
background-‐color:green;
.....
}
</div>
36. Class rules
Khai
báo
Sử
dụng
.class_name{
– Stlye
sẽ
được
áp
dụng
trên
tất
property1:
value1;
cả
các
thẻ
mà
có
giá
trị
của
property2:
value2;
...
thuộc
cnh
class
=
class_name.
}
– Ví
dụ:
– Ví
dụ:
<p
class="bkgr_style">
.bkgr_style{
.....
background-‐color:green;
</p>
}
37. Class rules
• Có
hiệu
ứng
trên
tất
cả
các
loại
tag
có
cùng
giá
trị
thuộc
cnh
class.
• Ví
dụ
:
39. Kết hợp element và class selector
Khai
báo
Sử
dụng
tag_name
.class_name{
– Style
sẽ
được
áp
dụng
cho
các
property1:
value1;
thẻ
có
tên
là
tag_name
đồng
property2:
value2;
...
thời
giá
trị
của
thuộc
cnh
class
=
class_name
}
– Ví
dụ:
– Ví
dụ:
h1.veryimportant
{
<h1
class="veryimportant">
background-‐color:yellow;
.....
}
</h1>
41. Kết hợp – Contextual selector
Khai
báo
Sử
dụng
tag1
tag2{
– Style
sẽ
được
áp
dụng
nếu
nội
property1:
value1;
dung
nằm
trong
các
thẻ
lồng
property2:
value2;
...
nhau
theo
đúng
thứ
tự
tag1à
tag2
}
– Ví
dụ:
– Ví
dụ:
<div>
div
b
{
<b>
background-‐color:
yellow;
....
}
</b>
</div>
45. Kết hợp – Contextual selector
Firefox Internet Explorer Chrome
46. Pseudo class selector
• Định
dạng
dựa
vào
trạng
thái
của
liên
kết,
sự
kiện
chuột.
• Có
thể
kết
hợp
với
Selector
khác.
unvisited
hover
active
visitted
50. Selector: Tổng kết
Loại
Mô
tả
phạm
vi
ảnh
hưởng
Ví
dụ
element Định dạng áp dụng cho ND tất cả các tag h1
{color:
red;}
Element trong tài liệu Web /*
ND
của
thẻ
<h1>
bị
định
dạng
màu
chữ=đỏ
*/
#id
Định dạng áp dụng cho ND tất cả các #test
{color:
green;}
tab có thuộc tính id trong tà liệu Web /*
ND
của
bất
kỳ
tag
có
thuộc
cnh
id=test
đều
bị
định
dạng
màu
chữ=xanh
lá
*/
.class
Định dạng áp dụng cho ND tất cả các .note
{color:
yellow;}
tab có thuộc tính class trong tà liệu Web /*
ND
của
bất
kỳ
tag
có
thuộc
cnh
class=note
đều
bị
định
dạng
màu
chữ=vàng*/
element
.
class
Định dạng áp dụng cho ND các tag h1.note
{text-‐decora{on:
underline;}
Element có thuộc tính class tương ứng /*
ND
của
các
thẻ
<h1>
có
thuộc
cnh
class=note
đều
bị
định
dạng
gạch
chân
*/
Grouping
Định dạng áp dụng cho ND một nhóm h1,h2,h3
{background-‐color:
orange;}
các tag trong tài liệu. /*
ND
của
các
thẻ
<h1>
<h2>
<h3>
đều
bị
định
dạng
màu
nền
=
màu
cam
*/
Contextual
Định dạng áp dụng cho ND các thẻ được p
strong
{color:
purple;}
lồng trong một thẻ cha nào đó /*
ND
của
các
thẻ
<strong>
nằm
trong
thẻ
<p>
đều
bị
định
dạng
màu
chữ=màu
ca
*/
Pseudo Class Định dạng được áp dụng dựa vào trạng
Pseudo element thái của các Element. (Không xuất hiện
trong mã lệnh HTML)
51. Đặt tên cho element
• Trình
duyệt
phân
biệt
chữ
hoa
chữ
thường
• Đặt
tên
theo
cnh
chất
hay
theo
ý
nghĩa
?
– VD:
Định
dạng
cho
các
label
báo
lỗi
• Classname
=
‘LabelRed’
• Classname
=
‘LabelError’
?
51
53. Firefox Add-ons: Web Developer 1.1.6
• hnps://addons.mozilla.org/en-‐US/firefox/addon/60
• Công
cụ
sử
dụng
để
xem
các
thông
{n
của
một
trang
web:
– Cookies
– Images
– Forms
– CSS
– …
54. Sử dụng CSS để layout website
• Sử
dụng
thẻ
<div>
để
layout
website
thay
vì
sử
dụng
thẻ
<table>
• Bước
1:
Chuẩn
bị
layout
• Bước
2:
Đo
kích
thước
chuẩn
cho
khung
sườn
• Bước
3:
Layout
với
css
với
kỹ
thuật
float-‐based
layout
54
