CssCoBan Minhnhut - Info

1
CSS
Trang tr ni tht
Xy dng
Con ngi
Trang im
Web
CSS
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
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>

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!

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.
<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>

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
CSS File
Ch cn thay i ni dung
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;
color:black;
font-family: "sans serif"
Cc thuc tnh
Cc gi tr
}
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
H1, h2, h3, h4, h5, h6
{
color: green
}
Cc b chn phn cch nhau bng ","

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;
106
Canh gia vi CSS
top-margin: -h/2
top:50%
107
Canh gia vi CSS

Canh gia theo ngang, dc.
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
108
Canh gia vi CSS

Canh gia ngang dc
top-margin: -h/2
top:50%
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>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XHTML</a></li>
</ul>
</body>
Kt qu
114

Bc 2: thit lp CSS cho ul
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
Gn vo bn tri
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;
}
li
{
display:inline;
}
Kt qu
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
content
right column
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;
}
#main-nav dl
{
margin: 0;
padding: 0;
}
#main-nav dt
{
float: left;
}
Canh cho fix vi hnh

nn ca header
Cho cc dt nm ngang
144

B sung CSS rule cho th a trong dt
#main-nav dt a {
display: block;
height: 50px;
background-repeat: no-repeat;
}
50px
145

B sung CSS rule cho th a trong dt
#main-nav dt#about a {
width: 71px;
background-image: url(about.gif);
}
#main-nav dt#services a {
width: 84px;
background-image: url(services.gif);
}
#main-nav dt#portfolio a {
width: 95px;
background-image: url(portfolio.gif);
}
#main-nav dt#contact a {
width: 106px;
background-image: url(contact.gif);
}
Chiu ngang nh
nh nn
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;
width: 350px;
text-align:right;
}
Gn vi bin phi
147
Layout CSS step 10: b sung footer

B sung CSS rule cho phn footer
#footer
{
clear:both;
font-family: tahoma;
font-size:10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding:13px 25px;
line-height:18px;
Trnh trn ln trn
Hin th bin trn nh

ng gch ngang
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;
line-height:30px;
font-weight:bold;
color:#FFFFFF
}
#menu ul li a:hover
{
color:#FFFF00;
}
Trng thi hover
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
Khi hover
#div1 li:hover ul
{
display:block;
}
#div1 ul li a:hover
{
color:#000000;
}
#div1 ul li a:active
{
font-weight:bold;
}
Submenu xung
164

Thit lp style cho submenu
Khi hover
.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 Minhnhut - Info

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 Minhnhut - Info

Uploaded by

Copyright:

Available Formats

1

70 thuc tnh v kiu dng c th p dng cho cc th

sc, khong cch, v tr, bin, l

nhiu c t thuc tnh chun phc v cho vic dn

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

p dng CSS vo trang HTML

sung thm thuc tnh style vo sau mt phn t HTML

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

p dng CSS vo trang HTML

tc dng trn chnh th !

cng c th dn n vic vit m qu nhiu v thiu s

nht qun trn ton site!

p dng CSS vo trang HTML

t trong phn head ca ti liu

trong mi quy tc nh ngha style cho mt phn t

p dng CSS vo trang HTML

p dng CSS vo trang HTML

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

tp tin ny trong HTML.

tng t nh internal style sheet.

p dng CSS vo trang HTML

Du chm phy dng

t trong cp du ngoc nhn.

Gom nhm cc b chn

ging nhau ca nhiu b chn khc nhau cng lc

Cc b chn phn cch nhau bng ","

trang web khng c ng gch chn

hin khc nhau cho cng mt th HTML v p dng cc

p dng mt lp cho nhiu th khc nhau.

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

p.trai {text-align: left}

chp nhn thuc tnh ny) bng cch b tn th u

phn cch nhau bng khong trng

ca nh danh phi l duy nht trn trang web

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

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

thnh phn/th khc

div > p { color: red }

div > p > b { color:red }

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

tnh class c cha gi tr class2

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

Pseudo Class Selector

Khi nim lp gi, hay phn t gi cho php nh dng

cc phn t th da trn thng tin cha bn ngoi

Pseudo Class Selector

tm n tn, thuc tnh hay ni dung

Pseudo Class Selector first-child

nh khon tht u dng v in m cho phn t p ny

Pseudo Class Selector first-child

Pseudo Class Selector Anchor

trng thi link

Pseudo Class Selector Anchor

Pseudo Class Selector Anchor

Pseudo Class Selector focus

khi phn t ang focus

Link s chuyn sang mu

Pseudo Class Selector lang

khc nhau trong ti liu