cssCoBan PDF

1
CSS
Trang tr ni tht
Xy dng
Trang im
Con ngi
Web CSS
2
CSS
CSS l mu nh dng phn tng

CSS l mt chun nh dng cc ti liu HTML,
XHTML v XML.
CSS m rng ngn ng HTML truyn thng vi hn
70 thuc tnh v kiu dng c th p dng cho cc th
HTML.
Gip cc nh thit k web c thm la chn v mu
sc, khong cch, v tr, bin, l
3
CSS
CSS ph b ro cn HTML bng cch cho php c

nhiu c t thuc tnh chun phc v cho vic dn
trang v nh dng.
Thuc tnh CSS c b sung vo HTML v khng ph
v cu trc ca HTML sn c.
CSS lm tng s nht qun v nh dng v hiu nng
ti trang web.
Tp tin CSS ch c ti ln u tin khi truy cp trang
web
4
CSS
Ba cch p dng CSS trong ti liu

Inline style
S dng thuc tnh style ca th nh dng
Internal style sheet
nh ngha style bn trong <head> ca ti liu
External style sheet
Lin kt n mt tp tin *.css cha ton b style s dng
trong ti liu
5
p dng CSS vo trang HTML
Inline style: l cch dng style ngay trong cu lnh, b

sung thm thuc tnh style vo sau mt phn t HTML
<th style=thuc tnh:gi tr; thuc tnh:gi tr;.>
Ni dung
</th >
<b style="color:navy;">Mu xanh nc bin.</b>
6
Mt inline style p dng cho bt c th no v ch c

tc dng trn chnh th !
Dng inline style lm cho ti liu r rng hn, nhng
cng c th dn n vic vit m qu nhiu v thiu s
nht qun trn ton site!
Lm cho m ngun b d tha, kh bo tr!
7
Internal style sheet:

p dng thng nht cho ton trang web
nh ngha ring mt khi, phn bit bi th <style > v
t trong phn head ca ti liu

Khi ny l mt tp cc style rule (quy tc v kiu dng),
trong mi quy tc nh ngha style cho mt phn t

hay nhm phn t HTML.
8
<head>
<style type="text/css">
b { text-transform:lowercase; font-size:18px }
p { border: silver thick solid; background-color:pink }
</style>
</head>
<body>
<p> on vn bn c vin mu bc - <b>CH THng M </b></p>
</body>
9
External style sheet

p dng cho ton site
To mt tp tin c phn m rng l *.css bn ngoi
HTML, s dng th <link> trong phn <head> lin kt

tp tin ny trong HTML.
Cc style rule cha ring bit trong file *.css v hot ng
tng t nh internal style sheet.
10
External Ch cn thay i ni dung

CSS File file CSS, ton b cc trang
web s c cp nht
Website
11
C php CSS
Gm 3 thnh phn
B chn (Selector)
Thuc tnh (Property)
Gi tr (Value)
C php Du chm phy dng

phn cch thuc
tnh
12
C php CSS
Selector thng l tn th HTML

Mi thuc tnh cn c gi tr
Mt thuc tnh v gi tr phn cch du ":"
Hai cp thuc tnh gi tr phn cch nhau bi du ";"
Ton b cc cp thuc tnh gi tr ca th HTML c
t trong cp du ngoc nhn.
13
C php CSS
VD
Selector p
{
text-align: center;
Cc thuc tnh color:black; Cc gi tr
font-family: "sans serif"
}
t trong ngoc kp khi gi

tr l chui cc t lin tip
14
Gom nhm cc b chn
CSS cung cp c php cho php gom nhm nhiu b

chn cng lc
Gip thit lp cc gi tr cho cc thuc tnh chung
ging nhau ca nhiu b chn khc nhau cng lc
Gip gim kch thc tp tin CSS, gim thi gian ti
web
Cc b chn phn cch nhau bng ","

H1, h2, h3, h4, h5, h6
{
color: green Thit lp thuc tnh color l green
} cho cc b chn
15
Selector
Cc selector trong HTML

1. HTML selector
2. Class selector
3. Identity selector
4. Descendant selector
5. Child selector
6. Attribute selector
7. Pseudo class selector
16
HTML Selector
B chn n gin nht, dng cc th HTML

VD: nh dng tt c cc siu lin kt trong ton b
trang web khng c ng gch chn
a
{
/*B gch chn cho cc hyperlink*/
text-decoration: none;
}
Comment trong CSS
17
Class Selector
Vic to cc lp, cho php nh ngha nhiu kiu th

hin khc nhau cho cng mt th HTML v p dng cc
lp ny vo cc v tr cn thit trn trang web.
C 2 cch nh ngha b chn lp
nh ngha b chn lp cho th c th
nh ngha b chn lp khng xc nh th c th

p dng mt lp cho nhiu th khc nhau.
18
Class Selector
B chn lp cho th c th
VD: trn trang web c 3 loi vn bn
on canh l tri
on canh l gia
on canh l phi
Khi c th nh ngha 3 lp ring bit cho th p
p.trai {text-align: left}

p.right {text-align: right}
p.giua {text-align: center}
19
Class Selector
p dng vo trang HTML

<p class="trai"> on vn bn canh l tri </p>
<p class="giua"> on vn bn canh l gia</p>
<p class="phai"> on vn bn canh l phi</p>
p dng khng hp l
<p class="trai" class="giua"> on vn bn canh l tri </p>

<td class="trai"> p dng sai th </td>
20
Class Selector
B chn lp khng xc nh th
Cho php to lp c th gn vo nhiu th (cc th phi
chp nhn thuc tnh ny) bng cch b tn th u
v gi li du "."
VD nh ngha lp canh gia
.giua {text-align: "center"}
<p class="giua"> on ny canh l gia </p>

<td class="giua"> ni dung ct canh gia </td>
21
Class Selector
S dng nhiu lp
Mt th c th gn nhiu lp bng cch ch ra cc lp,
phn cch nhau bng khong trng
VD:
.warning {color: red}

.highlight {background-color: yellow}
<h3 class ="warning highlight"> Danger </h3>

<p class = "highlight"> An important point </p>
22
ID Selector
nh danh ID cho php chia th thnh nhiu loi khc

nhau
Mt b chn lp c th p dng nhiu ln cc v tr
khc nhau
nh danh ch c th p dng duy nht cho 1 th v tn
ca nh danh phi l duy nht trn trang web
C php ID selector
[Tn th]#<id ca th> { property: value ;

} 23
ID Selector
VD: on m sau c th p dng cho th <p> c id l

para1
p#para1
{
text-align: center;
color: red
}
<p id="para1"> on vn bn </p>
24
ID Selector
VD: on m sau y c th hiu lc cho th u tin c

id l "xyz".
#xyz {color: red}
Khi s dng
<p id = "xyz"> on vn bn c hiu lc </p>

<b id = "xyz"> on vn bn khng c hiu lc </b>
25
Descendant Selector
Dng chn mt thnh phn/th nm bn trong

thnh phn/th khc
VD: ch p dng style cho th p nm trong th <div>
26
Child Selector
Dng chn thnh phn/ th con ca mt thnh

phn/th khc
C php: th > th > th
V d 1: chn cc th p l con th div
div > p { color: red }
V d 2: chn cc th b l con th p v th p l con div
div > p > b { color:red }
27
Attribute Selector
Cho php chn cc phn t/th da vo thuc tnh ca

cc phn t th
28
Attribute Selector
VD 1: chn th p c cha thuc tnh title
VD2: chn th c nh ngha thuc tnh title l xyz
29
Attribute Selector
VD3: chn th h3 nu trong danh sch cc gi tr thuc

tnh class c cha gi tr class2
VD4: chn th a c gi tr thuc tnh href kt thc l

".html
VD5: chn th p c thuc tnh foo c dng bar-?
30
Pseudo Class Selector
Cho php nh dng cc phn t khng nm trong

document tree.
nh dng trng thi lin kt, nh dng cho k t u
tin trong vn bn
Khi nim lp gi, hay phn t gi cho php nh dng
cc phn t th da trn thng tin cha bn ngoi
document tree.
31
Pseudo Class Selector
Pseudo class: dng thm vo cc hiu ng c bit

cho cc b chn.
Cho php b chn chn cc phn t m khng quan
tm n tn, thuc tnh hay ni dung
C php
32
Pseudo Class Selector first-child
:first-child: lp o cho php chn phn t u tin ca

mt phn t khc
VD: chn phn t p u tin nm trong phn t div, quy
nh khon tht u dng v in m cho phn t p ny
33
Pseudo Class Selector first-child
34
Pseudo Class Selector Anchor
Anchor pseudo class: lp o nh ngha style cho cc

trng thi link
C 4 trng thi link
link: link cha c m (unvisited link)
visited: link c m (visited link)
hover: link ang r chut bn trn (mouse over link)
active: link c chn (selected link)
35
36
Kt hp css class v pseudo class
37
Pseudo Class Selector focus
:focus pseudo class: lp o nh ngha style ca phn t

khi phn t ang focus
Link s chuyn sang mu

xanh l cy khi focus
38
Pseudo Class Selector lang
:lang pseudo class: cho php nh ngha style ngn ng

khc nhau trong ti liu
39
Pseudo Element
B sung mt s hiu ng c bit cho b chn. Cho

php chn v nh dng cho cc phn vn bn c bit
trong ti liu
C php
C php ca pseudo-element
Kt hp CSS class vi pseudo element
40
Pseudo Element first-letter
:first-letter pseudo element: phn t m t cho k t

u tin ca paragraph.
41
Pseudo Element first-letter
Cc thuc tnh ca first-letter
42
Pseudo Element first-line
Quy nh nh style cho dng u tin
43
Pseudo Element first-line
Cc thuc tnh ca first-line
44
Pseudo Element before
Chn ni dung pha trc ni dung ca mt thnh phn
45
Pseudo Element after
Chn ni dung pha sau ni dung ca mt thnh phn
46
n v o lng CSS
47
n v o lng CSS
n v mu sc
48
K tha thuc tnh
Ti liu HTML c biu din theo cu trc cy

(document tree)
Cc phn t con s k tha mt s thuc tnh t phn
t cha. Hay c th ni phn t cha truyn mt s thuc
tnh xung phn t con.
Mt s thuc tnh k tha nh
Mu sc
Font
Canh l
49
K tha thuc tnh
50
K tha thuc tnh
Cc style c th k tha t phn t cha

Khng k tha border & padding
51
K tha thuc tnh
Ghi (over-ride) thuc tnh ca phn t cha (over-

rule)
52
Cc nhm thuc tnh trong CSS
Thuc tnh nh dng font ch, vn bn (font, text)

Thuc tnh nh dng nn (background)
M hnh hp (box model)
Cc thuc tnh nh margin, padding, border
Thuc tnh nh dng cch hin th (display)
Thuc tnh xc nh v tr (position)
53
Font ch
Cc loi font ch
Font ch c chn v font ch khng chn
Font ch t l hay font ch u
54
Font ch dng vit tay
Font ch trang tr
55
Thng tin nh dng font ch
56
57
58
59
Thng tin nh dng vn bn
60
61
62
Thng tin nh dng nn
63
Thng tin nh dng nn
64
Thng tin nh dng nn
65
Thng tin nh dng nn
66
Thng tin nh dng nn
Demo
Nn c nh
gia khng
repeat
67
Ti liu (X)HTML, XML gm cc phn t cha trong

phn t khc theo document tree
Mi phn t c xem nh box, cha cc thnh phn
ni dung, border, margin, padding
Ti liu HTML chnh l tp cc box lng nhau, mi box
c th cha cc box con khc v c box ln ngoi cng.
68
69
70
Cc thng tin nh dng l
71
Cc thng tin nh dng l
72
Thng tin nh dng vng m
73
Thng tin nh dng l + vng m
Khi khai bo rt gn gi tr margin, padding th cc gi

tr tnh theo chiu kim ng h tnh t top
74
Thng tin nh dng bin
75
Thng tin nh dng bin
76
Thng tin nh dng bin
77
Thng tin nh dng bin
78
Thng tin nh dng bin
79
Thng tin nh dng bin
80
Thng tin nh dng bin
Demo
81
Thng tin nh dng bin
Kt qu
82
nh dng cch hin th
Gi tr thuc tnh Display
83
nh dng cch hin th
84
nh dng cch hin th
85
nh dng cch hin th
S dng block-level
86
nh dng cch hin th
S dng inline
87
nh dng cch hin th
S dng none n thnh phn
88
nh dng cch hin th
S dng inline-block
89
nh dng cch hin th
S dng list-item
90
Thng tin xc nh v tr
91
Thng tin xc nh v tr
Gi tr thuc tnh postion
92
Thng tin xc nh v tr
Thit lp v tr thnh phn theo v tr tng i
93
Thng tin xc nh v tr
Thit lp v tr thnh phn theo v tr tuyt i
94
Thng tin xc nh v tr
Gi tr thuc tnh clip
95
Thng tin xc nh v tr
Gi tr thuc tnh overflow
96
Thng tin xc nh v tr
97
Thng tin xc nh v tr
S dng overflow bt thanh cun khi ni dung vt

qu kch thc thnh phn
98
Thng tin xc nh v tr
Gi tr thuc tnh vertical-align
99
Thng tin xc nh v tr
Gi tr thuc tnh vertical-align
100
Thng tin xc nh v tr
S dng vertical-align
101
Thng tin xc nh v tr
Gi tr thuc tnh z-order
102
Canh gia vi CSS
Canh theo chiu ngang

Vn bn dng text-align
Thnh phn khng phi vn bn dng margin
Margin-left: auto v margin-right:auto
Thnh phn s c canh gia cc cnh trong khi cha
103
Canh gia vi CSS
Canh gia mt layout
.layout_container
{
margin: 0 auto;
width : 960px;
background-color: cyan
}
104
Canh gia vi CSS
Canh gia mt image
img.center
{
margin: 0 auto;
display: block;
}
105
Canh gia vi CSS
Canh gia theo chiu dc

s dng phng php ta absolute
dng k thut ny phi bit chnh xc kch thc ca
thnh phn cn canh chnh.
W
position: absolute
top: 50% /* top l v tr gia ca chiu cao*/
margin: -h/2 0 0 0
Height: h;
H
106
Canh gia vi CSS
top-margin: -h/2
top:50% h
107
Canh gia vi CSS
Canh gia theo ngang, dc.
W
position: absolute
top: 50% /* top l v tr gia ca chiu cao*/
left: 50% /*left l v tr gia ca b ngang*/
margin: -h/2 0 0 w/2
H
108
Canh gia vi CSS
Canh gia ngang dc
top-margin: -h/2
top:50% h
left-margin: -w/2
109
S dng Float trong CSS
Float l thuc tnh nn tng xy dng trang web

thun CSS.
Dng thuc tnh ny canh chnh ging hng image v
xy dng layout phn chia thnh nhiu ct
Float: quy nh xem mt hp c rng xc nh s tri
ni (float) hay di chuyn v bn tri, phi so vi ni
dung bao quanh n!
110
Thuc tnh ca float c 3 gi tr:

Left: c nh phn t v bn tri
Right: c nh phn t v bn phi
None: bnh thng
Thnh phn A di chuyn

sang tri (float:left)
Ni dung B bn di trn ln lp khong trng
111
Thnh phn i sau thnh phn c thuc tnh float s

trn ln, trnh iu ny c th dng thuc tnh clear.
Thuc tnh clear gm cc gi tr
Left: thnh phn s di chuyn xung di (bin di)
thnh phn no c gi tr float:left

Right: thnh phn s di chuyn xung di (bin di)
thnh phn no c gi tr float: right

Both: thnh phn s di chuyn xung di tt c hp
float.
112
To menu ngang bng float
Menu ngang thng l thnh phn navigation ph bin

trong trang web.
Vic to menu ny kh n gin: s dng float, kt hp
vi th ul.
Minh ha to menu nh sau
Trng thi hover
Trng thi bnh thng

113
Bc 1: to mt danh sch ul vi cc li l hyperlink nh

sau
<body>
<ul>
<li><a href="#">HTML</a></li> Kt qu
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XHTML</a></li>
</ul>
</body>
114
Bc 2: thit lp CSS cho ul
ul
{
float:left; Gn vo bn tri
width:100%;
padding:0;
margin:0;
list-style-type:none; Khng hin th symbol
}
Kt qu
115
Bc 3: thit lp trng thi hover cho hyperlink v th li
a
{
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white
}
a:hover {background-color:red;
Kt qu
}
li
{
display:inline;
}
116
To layout float: left; width:960px;
Header
Left Nav Main Content
float: left;
width:740px;
float: left
width: 200px
margin-right: 20px;
117
To layout bng CSS
Vic thit k mt website chuyn nghip c th chia thnh

nhiu cng on v do nhiu nhm m nhn
Yu t to nn thnh cng ca website l giao din trang
web, y l b mt, l ni ph din tt c thnh phn trong
trang web.
D l website thng mi in t, website trng by sn
phm, hay website cng ng, tnh thm m u c xem
trng
Con ngi ch mt 0.2 giy bit c trang web c n
tng hay thu ht khng.
118
Layout CSS step 1: b cc, phc ha
Bc 1: dng b cc, phc ha tng ban u theo cc

nhm hnh khi, xc nh tng mu ch o
Xc nh b cc cc thnh phn ca site, mu sc s dng,
nh minh ha hay cc ha tit trang tr.

Vic xy dng website dn i vo chun nht nh: s
dng div thay th table. Div v CSS khc phc c

hn ch ca table trong vic xy dng website.
119
Trang web demo cn thit k

Ngun tham kho
http://www.subcide.com/articles/creating-a-css-layout-from-scratch/
120
B cc ca trang web theo cc phn
121
Cc thnh phn chnh website

Main navigation (menu): ty b cc c th t dng nm ngang hay
dc. V d trong thit k minh ha chn nm ngang kch thc:
width:760px height:50px
Header: ni t thnh phn quang trng nh: banner, logo, tn cng
tytrong thit k chn nm ngang width: 760px height:150px.
Content: ni cha ni dung chnh. Kch thc width: 480px, height
ty theo ni dung.
Right column: ty b cc c th 2 hay 3 ct. Phn ny cha thng tin
mang tnh ni bt, hin th dng tin ngn. Width: 280, height ty .
Footer: ni cha thng tin copyright, cc iu khon s dng hay
menu nh gn. Kch thc Width: 760px, Height 66px.
122
B cc nh trn hnh thnh nn khung c bn ca

website.
Qu trnh ny c th lm li nhiu ln c c b cc
v t l gia cc phn sao cho hp l nht, ph hp vi
website. menu navigation
header
right column
content
footer
123
Layout CSS step 2: cu trc website
Xy dng cu trc website: c th nhiu phn, trong

trng hp minh ha to ra cu trc sau
Mt th mc con l css cha file css
Mt th mc con l images cha nh
Ngoi cng l file html: hin ti file HTML ny cha c
ni dung trong th body.
124
Layout CSS step 3: chn th Div
a cc thnh phn menu, header, content, footer vo

file index.html theo dng th div.
CSS
b phn canh
l, padding
cho ti liu
125
Layout CSS step 3: chn th Div
a cc div cha ni dung vo html, b dng ch Hello world (khi

test bn trn)
Kt qu khi xem trn trnh duyt
Do cc div cha c thuc tnh css nn b tr cha chnh xc v tr

mong mun
126
Layout CSS step 4: gn thuc tnh
Phn ny gn thuc tnh css cho cc div
c mu nn ca cc th div
127
B sung thuc tnh float cho div siderbar-a l right, cho

php th ny gn vi bin phi
Th a ni dung vo th content xem cch hin th
128
Kt qu nh sau
Phn ch trn sang phn siderbar-a!!!
129
Layout CSS step 5: fix li trn text
Phn trc khi a ni dung vo th c hin tng trn

text qua ct bn phi
Nguyn nhn cha quy nh kch thc ngang ca div
content.
b sung li canh l phi ca div content l 280px
a thm ni dung vo siderbar test
130
Kt qu khi xem trn trnh duyt nh sau

Ni dung ca siderbar trn sang footer???
131
Phn content gii quyt xong, nhng do ni dung ca

siderbar di hn content, v phn footer tip sao content
nn n b chng ln.
S dng thuc tnh clear:both
132
Kt qu khi xem trn trnh duyt
133
Layout CSS step 6: to menu, footer
Phn ny a vo layout mt s phn chnh, tiu biu

trong website
Navigation link
Heading
Content
Footer information
To mt lp hidden trong css, nn t v tr u file

css, sau th body
134
Layout CSS step 6: to menu, footer
To ni dung cho th header
a ni dung vo phn navigation:
B sung footer vi menu ngang, v mt s thng tin khc
135
Layout CSS step 6: to ni dung
Thay phn ni dung c trong content bng ni dung

mi
Thit lp canh l cho th h2 v p trong th div c id

content
136
Thit lp cc style cho text
137
B sung padding cho th p v h2 trong content l 15px

tch bit cc phn.
To class padding cho id siderbar-a v id content c

padding l 25px
138
Layout CSS step 7: b sung hnh nh
Thay hai tiu h2 trong ni dung bng nh
t hai nh about.gif, contact.gif trong th mc

headings con th mc images.
139
Layout CSS step 8: b sung header
To mt nh nn v mt logo thay th phn header

c
/images/general/logo_enlighten.gif
images/headers/about.jpg
140
B sung nh nn cho header trong css
Thay th text logo bng hnh logo trong html
141
Sa li v tr nh logo hin th ng ch cn t
Logo t ng v tr
142
Layout CSS step 9: b sung navigation
Phn navigation dng nh thay th text trong hyperlink.

Mi hyperlink s c mt nh tng ng, mi nh s c 3
phn, hin th theo trng thi: bnh thng, hover v
select.
50px Trng thi bnh thng
Trng thi hover
Trng thi select
4 hnh tng ng vi 4 link

143
B sung #main-nav vi thuc tnh sau
#main-nav
{
height: 50px;
margin-left: 11px; Canh cho fix vi hnh
} nn ca header
#main-nav dl
{
margin: 0;
padding: 0;
}
#main-nav dt
{
float: left; Cho cc dt nm ngang
}
144
B sung CSS rule cho th a trong dt
#main-nav dt a {
display: block;
height: 50px; 50px
background-repeat: no-repeat;
}
145
B sung CSS rule cho th a trong dt

#main-nav dt#about a {
width: 71px; Chiu ngang nh
background-image: url(about.gif);
}
#main-nav dt#services a {
width: 84px;
background-image: url(services.gif); nh nn
}
#main-nav dt#portfolio a {
width: 95px;
background-image: url(portfolio.gif);
}
#main-nav dt#contact a {
width: 106px;
background-image: url(contact.gif);
}
146
Layout CSS step 10: b sung footer
B sung CSS rule cho thnh phn trong footer

#footer a
{
color: #c9c9c9;
}
#footer a:hover
{
color: #db6d16;
}
#footer #altnav
{
float:right; Gn vi bin phi
width: 350px;
text-align:right;
}
147
Layout CSS step 10: b sung footer
B sung CSS rule cho phn footer
#footer
{
clear:both; Trnh trn ln trn
font-family: tahoma;
font-size:10px;
color: #c9c9c9;
Hin th bin trn nh
border-top: 1px solid #efefef;
ng gch ngang
padding:13px 25px;
line-height:18px;
}
148
To CSS Tab
To code markup nh sau CSS Tab
<div id="menu">
<ul>
<li><a href="#">HTML </li>
<li><a href="#">XHTML </li>
<li><a href="#">CSS </li>
<li><a href="#">Javascript </li>
</ul>
</div>
149
To CSS Tab
Khai bo cc thuc tnh CSS

#menu ul {
float:left;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 800px;
background: #DED5D6;
}
#menu ul li {
float:left;
}
#menu ul li a {
float:left;
}
150
To CSS Tab
To ra tab c dng sau
Chun b hai nh:
Start.gif End.gif
151
To CSS Tab
Thit lp nh nn cho li l nh start.gif
#menu ul li
{
float:left;
background: url('start.gif') no-repeat;
}
152
To CSS Tab
Thit lp nh nn cho th a
#menu ul li a
{
float:left;
text-decoration: none;
background:url('end.gif') no-repeat;
background-position: 100% 0%;
}
153
To CSS Tab
Chnh link spacing

Do cc tab ng lin nhau, thit lp padding tng
khong cch gia cc link

#menu ul li a
{
float:left;
padding:0 10px;
}
154
To CSS Tab
Tng khong cch gia tab v chiu cao

#menu ul li
{
float:left;
background: url('start.gif') no-repeat;
margin-right: 10px;
}
#menu ul li a
{
float:left;
padding:0 10px;
line-height:30px;
}
155
To CSS Tab
B sung font, trng thi hover

#menu ul li a
{
float:left;
padding:0 10px; Trng thi hover
line-height:30px;
font-weight:bold;
color:#FFFFFF
}
#menu ul li a:hover
{
color:#FFFF00;
}
156
To CSS Breadcrumbs
To HTML c code sau CSS breadcrumb
<ul id="crumbs">
<li><a href="#">Trang ch</a></li>
<li><a href="#">Thit k Web</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Th to bng</a></li>
<li>Hng dn to bng</li>
</ul>
157
To CSS Breadcrumbs
ul, li
{
list-style-type:none;
padding:0; margin:0;
}
#crumbs
{
border:1px solid #dedede;
height:2.3em;
}
#crumbs li {
float:left;
line-height:2.3em;
padding-left:.75em;
color:#777;
}
158
To CSS Breadcrumbs
S dng nh sau phn cch cc crumb
#crumbs li a
{
display:block;
padding:0 15px 0 0;
background:url(crumbs.gif) no-repeat right center;
}
159
To CSS Breadcrumbs
B sung trng thi hover, focus
#crumbs li a:hover, #crumbs li a:focus

{
color:#dd2c0d;
}
Trang web ang xem
Trng thi hover hoc

focus
160
To CSS dropdown menu
To code HTML nh sau

<div id="div1">
<ul>
<li><a href="#">Trang ch</a></li>
<li><a href="#">Thng tin cng ngh</a>
<ul class="a1">
<li><a href="#"> Tin trong nc</a></li>
<li><a href="#"> Tin quc t</a></li>
</ul>
</li>
<li><a href="#">Ngn ng lp trnh web</a>
<ul class="a1">
<li><a href="#"> HTML basic</a></li>
<li><a href="#"> Javascript CSS</a></li>
<li><a href="#"> ASP language</a></li>
<li><a href="#"> PHP language</a></li>
</ul>
</li>
</ul>
</div>
161
Thit lp CSS
#div1
{
border:1px;
background-color:#00CCFF;
height:50px;
}
#div1 ul
{
list-style:none;
}
#div1 ul li
{
position:relative;
float:left;
}
162
#div1 li a
{
color:#666666;
padding: .3cm 6px;
font-size: 20px;
display:block;
}
#div1 li ul{
position:absolute;
display:none;
}
163
Thit lp trng thi hover v hin th submenu
#div1 li:hover ul Khi hover

{
display:block;
}
#div1 ul li a:hover
{ Submenu xung
color:#000000;
}
#div1 ul li a:active
{
font-weight:bold;
}
164
Khi hover
Thit lp style cho submenu
.a1 a:link
{
border:1px solid;
width:6cm; Submenu xung
}
.a1 a:hover
{
color:black;
background-color:#FFFF66;
}
.a1 li
{
font-family:Georgia, "Times New Roman", Times, serif;
}
165
Bi tp
To menu dc nh minh ha sau
#cecece
orange
Trng thi hover
border-top: 1px dotted #cecece
#666
border-right: 7px
166
Bi tp
Thit k cc layout sau
167
Bi tp
168
Bi tp
169
ti cui kha
Cu trc website
Homepage
Ti thiu 3 trang
cp 1
Cp 1 1.1 1.2 1.3
Cp 2
1.1.1 1.1.2 1.1.3
Mi trang cp 1 c ti thiu 3 trang cp 2
170

cssCoBan PDF

Uploaded by

Document Information

Original Title

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

cssCoBan PDF

Uploaded by

Copyright:

Available Formats

1

CSS l mu nh dng phn tng

CSS ph b ro cn HTML bng cch cho php c

Ba cch p dng CSS trong ti liu

Inline style: l cch dng style ngay trong cu lnh, b

<th style=thuc tnh:gi tr; thuc tnh:gi tr;.>

<b style="color:navy;">Mu xanh nc bin.</b>

Mt inline style p dng cho bt c th no v ch c

Internal style sheet:

nh ngha ring mt khi, phn bit bi th <style > v

t trong phn head ca ti liu

trong mi quy tc nh ngha style cho mt phn t

External style sheet

To mt tp tin c phn m rng l *.css bn ngoi

HTML, s dng th <link> trong phn <head> lin kt

Cc style rule cha ring bit trong file *.css v hot ng

tng t nh internal style sheet.

External Ch cn thay i ni dung

Thuc tnh (Property)

C php Du chm phy dng

Selector thng l tn th HTML

t trong ngoc kp khi gi

CSS cung cp c php cho php gom nhm nhiu b

Cc b chn phn cch nhau bng ","

Cc selector trong HTML

B chn n gin nht, dng cc th HTML

Comment trong CSS

Vic to cc lp, cho php nh ngha nhiu kiu th

nh ngha b chn lp khng xc nh th c th

Khi c th nh ngha 3 lp ring bit cho th p

p.trai {text-align: left}

p dng vo trang HTML

<p class="trai" class="giua"> on vn bn canh l tri </p>

.giua {text-align: "center"}

<p class="giua"> on ny canh l gia </p>

.warning {color: red}

<h3 class ="warning highlight"> Danger </h3>

nh danh ID cho php chia th thnh nhiu loi khc

[Tn th]#<id ca th> { property: value ;

VD: on m sau c th p dng cho th <p> c id l

<p id="para1"> on vn bn </p>

VD: on m sau y c th hiu lc cho th u tin c

<p id = "xyz"> on vn bn c hiu lc </p>

Dng chn mt thnh phn/th nm bn trong

Dng chn thnh phn/ th con ca mt thnh

Cho php chn cc phn t/th da vo thuc tnh ca

VD 1: chn th p c cha thuc tnh title

VD2: chn th c nh ngha thuc tnh title l xyz

VD3: chn th h3 nu trong danh sch cc gi tr thuc

VD4: chn th a c gi tr thuc tnh href kt thc l

VD5: chn th p c thuc tnh foo c dng bar-?

Cho php nh dng cc phn t khng nm trong

Pseudo class: dng thm vo cc hiu ng c bit

:first-child: lp o cho php chn phn t u tin ca

Anchor pseudo class: lp o nh ngha style cho cc

visited: link c m (visited link)

hover: link ang r chut bn trn (mouse over link)

active: link c chn (selected link)

Kt hp css class v pseudo class

:focus pseudo class: lp o nh ngha style ca phn t

Link s chuyn sang mu

:lang pseudo class: cho php nh ngha style ngn ng

B sung mt s hiu ng c bit cho b chn. Cho