CSS (Cascading Style Sheets)

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 (887.88 KB, 46 trang )

Chương 5: CSS (Casca ing Style Sheets)

ể hiện phong cách, trợ giúp HTML trong việc hiển thị,
ạng mẫu trợ giúp trình bày trong các ứng dụng văn bản
bàn (template trong MSWWord).
ột mở rộng của Web và là một trong những hy vọng lớn để thực hiện
tưởng tách web thành hai phần: trình bày và nội dung.
chất, CSS là một tập hợp các quy tắc định dạng được định nghĩa cho
n đi kèm với việc một nội dung được định dạng
iều này giải nghĩa cho từ "cascading".
d

5.1 Khái quát
- CSS là ngôn ngữ th
tương tự như các định d
của máy để
- CSS là m
ý
-Về thực
các thẻ c
ủa HTML. CSS luô
theo thẻ (HTML, XML,...) - đ

Hình5.1: Vị trí của CSS trên WEB-Internet
anguage
XLS-FO: Formatting Objects
SS được gắn cùng trang web (HTML) theo các cách sau:

XLS-T: Transformation L

C

72
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

Gọi từ một tập tin ngoài (external):
HEET HREF="style.css" TYPE="text/css">
úng vào trang HTML:
TYPE="text/css">
!--
dent: 10pt}
E="text-indent: 10pt">Indented paragraph</P>
ếp (import):
ss">
import url();
.and.so.on.partial2.css);
ate):
LINK REL=Stylesheet HREF="style.css" TYPE="text/css">
EL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="Loai
">
EL=Stylesheet HREF="style3.css" TYPE="text/css" TITLE="Loai
K REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css"

LE="Man hinh" MEDIA=screen>
HREF="style4.css" TYPE="text/css"
IA=print>
uật CSS (những kỹ thuật thông dụng)
ndent: 10pt} - CSS r le (ruleset)
- CSS selector
de aration
<LINK REL=STYLES
Được nh
<STYLE
<
P {text-in
-->
</STYLE>
Được định nghĩa cùng thẻ (inline):
<P STYL
Được gọi gián ti
<STYLE TYPE="text=c

</STYLE>
Được gọi thay thế (Altern
<
<LINK R
#
<LINK R
##">
Hoặc:

<LIN
TIT
<LINK REL="Alternate Stylesheet"
E="In" MEDTITL

5.2 Kỹ th
Quy tắc dùng trong CSS:
P {text-i u
P
{text-indent: 10pt} - CSS cl

73
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

text-indent - CSS property
S value
g CSS CLASS:
là một dạng selector đặc biệt, là tập hợp nhiều định nghĩa CSS và
n cho bất kỳ một thẻ HTML nào. Khi dùng thì mới có tác dụng lên thẻ
L nào gọi đến nó.
/* class as selector */
footnote/>This element is associated with the CLASS
DDRESS>
And so is this</P>
:
E {color: red}
dụng cho phần văn bản được lồng trong 3 thẻ HTML theo thứ tự
ả hiệu: (pseudo-element)
hỉ có 2 phần tử giả hiệu, dùng cho các thẻ hiển thị

khối, dòng (block, p, ...)
giả hiệu:
lớp giả iệu:
lo : white}
col r: red}
ackground: transparent; color: black}
một văn bản có cấu trúc, được bắt đầu từ thẻ <HTML> rồi đến thẻ
và sau đó là các thẻ như <Hn>, <P>,...
của các thẻ bậc dưới được kế thừa thuộc tính của các
ắc, font chữ, cách lề,...
cũng thực hiện việc kế thừa thuộc tính. Ví dụ như:
t}
10pt - CS
Cách dùn
CLASS
hông gák
HTM
.footnote {font: 70%}
<ADDRESS CLASS=
footnote</A
<P CLASS=footnote>
Cách dùng ngữ cảnh
TD P COD
Chỉ có tác
trên.
tử giPhần
C
first-line
first-letter
CLASS

Chỉ có 1 thẻ A là có các h
A:link {background: black; co r
A:active {background; black:
A:visited {b
o
Tính kế thừa:
HTML là
<BODY>
Như vậy, các thuộc tính
thẻ bậc trên, như màu s
Tươ
ng tự như vậy, CSS
BODY {font-size: 10p
H1 {font-size: 180%}
Có nghĩa là:

74
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

Toàn bộ font chữ được hiển thị trong văn bản với độ lớn là 10pt, riêng đối với
bản trong thẻ H1 sẽ được hiển thị với độ lớn hơn 1.8 lần (hay là
nh đều được kế thừa, ví dụ như thuộc tính background.
t số thuộc tính hay dùng trong CSS (cùng thẻ HTML)
phần văn
18pt).
Không phải mọi thuộc tí

5. 3 Mộ

Thuộc tính Mục đích Giá trị
(nên dùng)
Thừa
kế
Định dạng chữ
Color dùng để định nghĩa màu chữ hiển
thị
#rrggbb có
font-weight chỉ định kiểu chữ hiển thị (đậm,
béo,...)
Bold
lighter
normal
có
font-family chỉ định font chữ .VnTime
.VnArial
có
font-size kích cỡ chữ 12pt
15px
có
font-style kiểu hiển thị Italic
normal
có
text-decoration trang trí chữ None
underline
overline
line-through
có
Dàn chữ
line-height chỉ định độ cao dòng %(font chữ) có

vertical-align chỉnh theo chiều dọc Top
bottom
middle
sub
super
baseline
có

75
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

Thuộc tính Mục đích Giá trị
(nên dùng)
Thừa
kế
Text-indent điều chỉnh dòng đầu tiên của
khối văn bản
px, pt, % có
Tex heo chiều ngang Left
right
justify
center
có
t-align dàn t
Nền
background-color chỉ định màu nền #rrggbb
background-image chỉ định ảnh nền url()
Lề
margin-top,

argin-left,
ottom,
chỉ định việc cách lề px, pt có
m
margin-b
margin-right,
margin
Dàn trang
list-style-type kiểu dành cho thẻ UL, OL None
disc
circle
re
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
có
squa
list-style-image ảnh thay cho bullet url() có
list-style kiểu vắn tắt

Tóm tắt chương

Chương này giúp bạn có đư
rang web hấp d
ợc khả năng phong phú trong việc trang trí, tạo các
ẫn hơn. Bạn có thể sử dụng CSS để tạo thành tập hợp các định
bsite điều đó sẽ tiện lợi hơn nhiều trong việc soạn thảo,

t
dạng riêng cho cả we

76
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

sửa đổi định dạng trang cũng như làm trang web đó có cấu trúc đồng nhất và
huyên nghiệp hơn.
nền của trang Web)
u Background
ht
<he
pe="text/css">
ckground-color:
ound-color:
/h1>
p>

c

Bài tập

I. Background (
1
<
. Đặt mà
ml>

d>

a

<style ty
ody {bab
yellow}
h1 {background-color:
#00ff00}
h2 {background-color:
transparent}
p {backgr
rgb(250,0,255)}
</style>

</head>

<body>

<h1>This is header 1<
<h2>This is header 2</h2>
p>This is a paragraph</<

</body>
/html> <

2. Đặt background là một ảnh có sẵn

77

Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

<html>
<head>
style type="text/css">

d-image:
ges/bgdesert.jpg")

body>

<
body
{
backgroun
url("/ima
}
</style>
</head>

<
</body>

</html>

78
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

3. Đặt ảnh nền cố định (ảnh nền không cuộn theo trang web)
html>

ody
rl("/images/smiley.gif");
:
ackground-attachment:
/style>
<body>
<br
:</b>
etscape 4 does not support he
"
ot scroll
/p>
scroll
e</p>
t scroll
est of the page</p>
p>The image will not scroll
est of the page</p>
p>The image will not scroll
rest of the page</p>
he image will not scroll
>
t scroll
/p>
ll
age</p>

ill not scroll
ith the rest of the page</p>
l>
Ảnh 1 (ảnh nền ở vị trí cố định, trên cùng):
<
<head>
<style type="text/css">
b
{
background-image:
u
background-repeat
no-repeat;
b
fixed
}
<
</head>

Ảnh 2 (ảnh nền vẫn ở vị trí cũ, khi cuộn
web):
><br>
<p>
<b>Note
N t
"background-attachment
property.
</p>

<p>The image will n
with the rest of the page<
<p>The image will not
with the rest of the pag
<p>The image will no
with the r
<
with the r
<
with the
<p>T
with the rest of the page</p
<p>The image will no
with the rest of the page<
<p>The image will not scro
with the rest of the p
<p>The image w
w

</body>
</htm

79
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

4. Định nghĩa tất cả các thuộc tính của background trong một khai báo
type="text/css">
ody

iley.gif")
enter center
/head>
p>This is some text</p>
<p>
is some text</p>
is some text</p>
p>This is some text</p>
>
s is some text</p>
t</p>
>
is some text</p>
t</p>
some text</p>
is some text</p>
t</p>
xt</p>
is some text</p>
t</p>
ext</p>
text</p>
is some text</p>
p>This is some text</p>
/html>

<html>
<head>
<style
b
{
background: #00ff00
url("/images/sm
no-repeat fixed
c
}
</style>
<

<body>

<
This is some text</p>
<p>This
<p>This
<
<p>This is some text</p
<p>Thi
<p>This is some tex
<p>This is some text</p
<p>This
<p>This is some tex
<p>This is some text</p>
<p>This is
<p>This

<p>This is some tex
<p>This is some text</p>
<p>This is some te
<p>This
<p>This is some tex
<p>This is some text</p>
<p>This is some t
<p>This is some
<p>This
<

</body>
<

II. Các định dạng cho chữ v
1. Định nghĩa màu ch
à ký tự
o chữ

80
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
body>

>This is header 1</h1>

/p>

</style>

</head>

<
<h1
<h2>This is header 2</h2>
<p>This is a paragraph<
</body>
</html>
2. Định khoảng cách giữa
<html>
<head>
các ký tự
-spacing: -3px}
-spacing: 0.5cm}

tscape 4 does
tter-spacing"
perty.
/h1>
his is header 4</h4>

: line-through}
coration: underline}
coration: none}
2>
3>
w.w3schools.com">
a>
</b
</h

<html>
<head>

<style type="text/cs
:h1 {text-decoration
h2 {text-decoration
h3 {text-de
{text-dea
</style>

/head> <

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h
<h3>This is header 3</h

<p>
<a
href="http://ww
link</This is a
</p>

ody>
tml>
5. Trình bày đoạn văn bản
ype="text/css">

<html>
head> <

<style t

82
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

p {text-indent: 1cm}
tyle>
ody>
p>
me text in a
aragraph
me text in a

aragraph
a

in a
h
/body>

</s

</head>

<b

<
This is so
p
This is so
p
This is some text in
paragraph
This is some text in a
paragraph
This is some text in a
paragraph
This is some text
paragrap
</p>

<

</html>
6 Định dạng các ký tự trong văn bản
<html>
<he
ase {text-transform:
e}
-transform:
apitalize {text-transform:
"uppercase">
me text in a
>

ad>

<style type="text/css">
p.upperc
uppercas
p.lowercase {text
lowercase}
p.c
capitalize}
</style>
</head>
<body>
<p class=

This is so
paragraph</p>
<p class="lowercase"
This is some text in a
paragraph</p>
<p class="capitalize">
This is some text in a
paragraph</p>

83
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

</body>
</html>

III. Định dạng kiểu chữ
. Thiết lập kiểu chữ
<html>
<head>

<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-
serif}
</style>

</head

h3>This is header 3</h3>
is is a paragraph</p>
raph</p>
/html>

1
>
<body>

<

<p>
Th

<p class="sansserif">
This is a parag

</body>
<

2. Thiết lập cỡ chữ
html>
">

%}
body>
is header 1</h1>

<
<head>

<style type="text/css
h1 {font-size: 150%}
h2 {font-size: 130
p {font-size: 100%}
</style>

</head>
<

<h1>This

84
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

<h2>This is header 2</h2>
<p>

This is a paragraph</p>
</body>

</html>

3. Thiết lập mẫu chữ
tml>
ext/css">
style: italic}
style: normal}
tyle: oblique}
1>
raph</p>

<h
<head>

tyle type="t<s
h1 {font-
h2 {font-
p {font-s
</style>

</head>

<body>

<h1>This is header 1</h
<h2>This is header 2</h2>
p>This is a parag<

</body>
</html>

css">
al}
small-caps}
pe 4 does not
iant"
s="normal">
4. Sử dụng nhiều kiểu chữ trong cùng một đoạn văn bản
<html>
head> <

<style type="text/
al {font-variant: normp.norm
p.small {font-variant:
</style>

</head>
<body>

<p>
<b>Note:</b> Netsca
rsupport the "font-va
property.</p>

clas<p

85
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

This is a paragraph</p>
is is a paragraph</p>
/body>

<p class="small">
Th

<
</html>

5. Thiết lập cỡ cho kiểu chữ đậm

t: normal}
eight: bold}
weight: 900}
ss="normal">
</p>
ss="thick">
</p>
ss="thicker">
his is a paragraph</p>
</html>

<html>
<head>

<style type="text/css">
p.normal {font-weigh
p.thick {font-w
p.thicker {font-
</style>

</head>

<body>

<p cla
This is a paragraph

<p cla
This is a paragraph

<p cla
T

</body>

hiết lập các thuộc tính của kiểu chữ trong một khai báo
head>
yle type="text/css">
-caps 900 12px arial

6. T
<html>
<

<st
p
{
font: italic small
}
</style>

86
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

</head>

<body>

<p>This is a paragraph</p>

</body>
</html>
IV. Đường viền - Border
1. Thiết lập kiểu mẫu của đường viền
html>
head>
<st

{border-style:
.dashed {border-style:
}
yle:
le {border-style:
.groove {border-style:
border-style:
dge}
r-style:
rder-style:
/head>

p class="dashed">
<p class="solid">
A s

<p class="double">

<
<

yle type="text/css">

p.dotted
dotted}
p
dashed
p.solid {border-st

solid}
p.doub
double}
p
groove}
p.ridge {
ri
p.inset {borde
inset}
p.outset {bo
outset}
</style>

<

<body>
<p class="dotted">
A dotted border</p>

<
A dashed border</p>

olid border</p>

87
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

A double border</p>
s="groove">

/p>
ge">
order</p>
"inset">
er</p>
utset">
>
/html>

<p clas
A groove border<

<p class="rid
A ridge b

<p class=
An inset bord

<p class="o
An outset border</p

</body>
<

2. Thiết lập các
<html>
đường viền khác nhau trên các trang web
text/css">
ble {border-
d double}

p.doublesolid {border-
style: double solid}
p.g
ove double}
border-style:
uble groove}
>
body>
:</b> Netscape 4
oes not support the
er-style" property.
rty
ss="soliddouble">
ome text</p>

<head>

<style type="
p.soliddou
style: soli
roovedouble {border-
style: gro
p.three {
solid do
</style>

</head

<
<p>
<b>Note
d
"bord
Use the "border" prope
to set the borders in
Netscape.</p>

<p cla
S
<br>

88
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

<p class="doublesolid">
p
ovedouble">
t</p>
<br>

<p class="three">
Some text</p>

</body>
</html>

Some text</p>
<br>

<
class="gro
Some tex

. Thiết lập màu cho đường viền
<ht
<head>
pe="text/css">
.one{
style: solid;
00ff}
lid;
lor: #ff0000
0000ff}
order-style: solid;
lor: #ff0000
00ff00 #0000ff}
r{
0
e>
</b
"border-color"
3
ml>

<style ty
p

border-
border-color: #00
p.two{
border-style: so
border-co
#
p.three{
b
border-co
#
p.fou
border-style: solid;
border-color: #ff000
#00ff00 #0000ff
rgb(250,0,255)}
</styl

</head>
<body>

<p
class="one"><b>Note:
> The

89
Giáo trình đào tạo Xây dựng và quản trị Website, Portal
Trung tâm Điện toán Truyền số liệu KV1

CSS (Cascading Style Sheets)

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về