03 CSS Co Ban

KHOA CÔNG NGHỆ THÔNG TIN
THIẾT KẾ CÁC TRANG WEB
CSS
Cascading Style Sheet
GV: Phan Ngọc Yến 1

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
2
Nội dung
3
Giới thiệu về CSS
• CSS = Cascading Style Sheet
• 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 tính từng trang hoặc cả site
nhanh chóng (cascading)
4
Giới thiệu về CSS – Ví dụ
Without CSS
With CSS
5
Nội dung
6
Định nghĩa Style
Kiểu 1 Kiểu 2
<tag style = SelectorName {
“property1:value1; property1:value1;
property2:value2; property2:value2;
……… ………
propertyN:valueN;”> propertyN:valueN;}
… <tag class = “SelectorName”>
</tag> ………
</tag>
Ví dụ: Ví dụ:
<h1 style=“ .TieuDe1 {
color : blue; color: red;
font-family : Arial;” > font-family: Verdana, sans-serif; }
CĐN TĐ
<h1 class=“TieuDe1”> CĐN TĐ </h1>
</h1>
7
Định nghĩa Style – Ghi chú
• Giống Ghi chú trong C++
• Sử dung /*Ghi chú*/
Ví dụ :
• SelectorName{
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
8
Nội dung
9
Phân loại
• Gồm 3 loại CSS
– Inline Style Sheet
(Nhúng CSS vào tag HTML)
– Embedding Style Sheet
(Nhúng CSS vào trang web)
– External Style Sheet
(Liên kết CSS với trang web)
10
Inline Style Sheet
• Định nghĩa style trong thuộc tính style của từng
tag HTML.
• Theo cú pháp kiểu 1.
<tag style = “property1:value1;…propertyN:valueN;”> …. </tag>
• Không sử dụng lại được.

• Ví dụ:
<h1 style="color: yellow">This is yellow</h1>
11
Embedding Style Sheet
• Còn gọi là Internal Style Sheet hoặc Document-Wide
Style Sheet
• Mọi định nghĩa style được đặt trong tag <style> của trang
HTML.
• Định nghĩa style theo cú pháp kiểu 2.
• Trang HTML có nội dung như sau:
<head>
<style type=“text/css” >
SelectorName{
property1:value1;
property2:value2;
………
propertyN:valueN;
}
</style>
</head>
12
Embedding Style Sheet
<html>
<head>
<title>
embedded style sheet
</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#ffffff">
<h2>this is green</h2>
<p>this is red, 12 pt. and
garamond.</p>
</body>
</html>
13
External Style Sheet
• Mọi style đều lưu trong file có phần mở rộng là *.CSS
• File CSS: lưu trữ nhiều style theo cú pháp kiểu 2
• Trong file HTML: liên kết bằng tag link. Cú pháp:
<head>
<link rel=“stylesheet” href=“URL” type="text/css">
</head>
• Trang HTML : Liên kết bằng tag style với @import url.
Cú pháp
<head>
<style type=“text/css” media="all | print | screen" >
@import url(URL);
</style>
</head>
14
External Style Sheet
Trong tập tin MyStyle.CSS Trong trang Web: demo.htm
h2{ <html>
font-weight: bold; <head>
font-size: 16pt; <title>Cascading…</title>
color: white; <link HREF="MyStyle.css"
REL="stylesheet" >
font-style: italic;
</head>
font-family: arial;
<body>
background-color: red;
<h2>This is an H2 </h2>
}
</body>
</html>
15
Độ ư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
16
17
Nội dung
18
Selector
• Là tên 1 style tương ứng với một thành phần được

áp dụng định dạng
• Các dạng selectors
 HTML element selectors
 Class selectors
 ID selectors Ví dụ:
.TieuDe1{
color: red;
 .... }
font-family: Verdana, sans-serif;
<h1 class=“TieuDe1”> CĐN TĐ </h1>
19
Selector trong CSS - Element
• Có hiệu ứng trên tất cả element cùng loại tag
• Ví dụ :
20
Selector trong CSS – ID rules
• Có hiệu ứng duy nhất trên một element có

đúng id.
• Ví dụ :
21
Selector trong CSS – Class rules
• Có hiệu ứng trên tất cả các loại tag có cùng

giá trị thuộc tính class
• Ví dụ :
22
Kết hợp Element và Class
• Ví dụ :
23
Contextual Selection
• Định dạng được áp dụng cho nội dung trong
chuỗi tag theo đúng thứ tự
• Ví dụ :
24
Selector trong CSS – Pseudo Class
• Đị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.
25
Đơn vị đo lường CSS
Đơn vị Mô tả
% phần trăm
in inch
cm centimeter
mm milimeter
em 1em = kích thước font chữ hiện tại
1ex = 1 x-height của font (x-height = chiều cao
ex
ký tự „x‟)
pt point (1pt = 1/72 inch)
pc pica (1pc = 12 points)
px pixel (1 điểm trên màn hình)
26
Đơn vị đo lường CSS
• Đơn vị màu sắc
Đơn vị Mô tả
color_name Tên màu (ví dụ: red, green, blue...)
rgb(x,x,x) Giá trị RGB (ví dụ: rgb(255,0,0) Màu đỏ)
rgb(x%, x%, x%) Giá trị RGB theo phần trăm
#rrggbb Một số ở dạng thập lục (VD: #FF0000 -> màu đỏ)
27
Các nhóm thuộc tính trong CSS
• Thuộc tính định dạng font chữ, văn bản (font, text)
• Thuộc tính định dạng nền (background)
• Mô hình hộp (box model)
• Các thuộc tính định margin, padding, border
• Thuộc tính định dạng cách hiển thị (display)
• Thuộc tính xác định vị trí (position)
28
Font chữ
Các loại font chữ
• Font chữ có chân và font chữ không chân
Font chữ có chân Font chữ không chân
Times New Roman Arial
VNI-Cooper VNI-Franko
29
Thông tin định dạng font chữ
Thuôc tính Mô tả Giá trị
font-style
font-variant
font-weight
font-size/line-height
Thuộc tính rút gọn dùng
font-family
để thiết lập tất cả thuộc
font caption
tính cho một font trong
icon
một khai báo duy nhất
menu
message-box
small-caption
status-bar
Một danh sách thứ tự ưu
family-name
font-family tiên của các họ font cho
generic-family
một thành phần
30
xx-small
x-small
small
medium
large
Thiết lập kích cỡ cho
font-size x-large
một font chữ
xx-large
smaller
larger
length
%
normal
Thiết lập kiểu cách của
font-style italic
font chữ
oblique
31
Hiển thị văn bản

trong một font chữ normal
font-variant
hoa nhỏ hoặc một small-caps
font chữ thường
normal
bold
bolder
Thiết lập trọng lượng lighter
font-weight
của font 100, 200,
300, 400,
500, 600,
700, 800, 900
32
Thông tin định dạng văn bản
color Thiết lập màu cho văn bản color
Itr
direction Thiết lập hướng cho văn bản
rtl
Tăng hoặc giảm khoảng
normal
letter-spacing trống giữa các ký tự
length
trong văn bản
left
Căn chỉnh lề của văn bản right
text-align
trong một thành phần center
justify
none
underline
text-decoration Thêm trang trí cho văn bản overline
line-through
blink
33
Thông tin định dạng văn bản
Khoảng thụt vào ở dòng đầu length
text-indent tiên của văn bản trong một
thành phần %
none
text-shadow Thêm bóng cho vãn bản color
length
none
Chuyền đổi ký tự trong một capitalize
text-transform thành phần uppercase
lowercase
Thiết lập cách xử lý khoảng
trắng, tab, cách xuống dòng normal
white-space của văn bản trong một thành pre (preserve)
phần nowrap
Tăng hoặc giảm khoảng trống normal

word-spacing giữa các từ length
34
Thông tin định dạng nền
Thuộc tính Mô tả Giá trị
Một thuộc tính rút gọn background-color

để thiết lập tất cả background-image
background các thuộc tính nền background-repeaf
trong một khai báo. background-attachment
background-position
Thiêt lập liệu một ảnh có

đứng cố định một chỗ scroll
background-attachment hay cuộn theo
phần văn bản còn lại fixed
của trang.
color-rgb
Thiết lập màu nền color-hex
background-color của một phần tử color-name
transparent
35
Thông tin định dạng nền
Thuộc tính Mô tả Giá trị
background-image
Thiết lập một ảnh url
như nền của trang none
top left top center
top right center left
center center center right
Thiết lập
bottom left
background-position điểm xuất phát
bottom center
của một ảnh nền
bottom right
x-% y-%
x-pos y-pos
Thiết lập cách repeat
background-repeat
một ảnh sẽ repeat-x
được lặp lại repeat-y
như thế nào. no-repeat
36
BÀI TẬP
Tạo trang dinhdangVB.html kết hơp css để hiển thị:
• Phần tiêu đề H1 có cỡ chữ x-large, màu đỏ
• Phần tiêu đề H2 có cỡ chữ large, và màu xanh
37
BÀI TẬP
Viết thêm mã html, css (selector class) để:
• Hiển thị phần tiêu đề H1 màu xanh lá: #00FF00
• Hiển thị 2 danh sách như sau:
38
BÀI TẬP
Viết thêm mã html, css để hiển thị đoạn văn với định
dạng như sau:
• Đoạn văn có cỡ chữ 12pt
• Ký tự “T” có cỡ chữ 200%
• “THE FIRST” trong html thì viết thường, nhưng
khai báo thuộc tính trong css để đổi sang in hoa
39
BÀI TẬP
• Tạo trang web theo mẫu, lưu tập tin tên:
ChuongTrinhDTWeb1.html, sử dụng CSS để định
dạng:
 Font chữ: tahoma, cỡ chữ 16px
 Dòng đầu cỡ tiêu đề H3, màu đỏ
 Các dòng nội dung dạng danh sách không đánh số thứ tự, màu
xanh.
 Dòng cuối văn bản in nghiêng, màu khác các màu còn lại
40
BÀI TẬP
• Lưu tập tin tên: ChuongTrinhDTWeb2.html
 Dòng đầu cở tiêu đề H3, Đỏ
 Các dòng nội dung dạng DS có đánh số thứ tự, màu
xanh.
 Màu nền tuỳ ý.
41
BÀI TẬP
– Thiết kế dạng danh sách có đánh số thứ tự lồng nhau.
– Đường kẽ ngang không bóng 30% cửa sổ.
– Dòng cuối dạng văn bản chú thích
42
BÀI TẬP
 tựa đề ”MẸ!”: chữ đậm có màu hồng đậm (#FF3399) và
nền màu hồng nhạt (#FECFFD)
 3 đọan thơ: in nghiêng, có 3 màu chữ khác nhau
 Mỗi đọan cách nhau bởi 1 đường kẻ ngang
 Toàn bộ bài thơ có màu nền là màu vàng nhạt
(#FFFFCC)
43
BÀI TẬP
44
BÀI TẬP
 Dạng công thức hóa học và biểu thức phương trình bậc
hai, có chữ màu đỏ (#FF0000)
 Đoạn code vòng lặp For: chữ màu xanh dương đậm
(#0000CC), nền màu xám (#CCCCCC)
45
BÀI TẬP
 Font chữ là Tahoma và có kích thước là 12px
 Bảng biểu: gồm 11 dòng và 4 cột
o Dòng tiêu đề: nền màu đỏ bầm (#CC0033), chữ
trắng (#FFFFFF)
46

03 CSS Co Ban

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

03 CSS Co Ban

Uploaded by

Copyright:

Available Formats

KHOA CÔNG NGHỆ THÔNG TIN

THIẾT KẾ CÁC TRANG WEB

GV: Phan Ngọc Yến 1

• Không sử dụng lại được.

• Là tên 1 style tương ứng với một thành phần được

<h1 class=“TieuDe1”> CĐN TĐ </h1>

• Có hiệu ứng duy nhất trên một element có

• Có hiệu ứng trên tất cả các loại tag có cùng

Thuôc tính Mô tả Giá trị

Hiển thị văn bản

Tăng hoặc giảm khoảng trống normal

Một thuộc tính rút gọn background-color

Thiêt lập liệu một ảnh có

• Hiển thị 2 danh sách như sau:

You might also like