BÀI GIẢNG THIẾT KẾ WEB CỦA TRƯỜNG ITC pptx

BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang60
Chương1:
TỔNGQUANVỀCSS
 Giớithiệu

MộtsốquyướcvềcáchviếtCSS

I.GIỚITHIỆU
1.CSSlàgì?
Tronglĩnhvựcxâydựng,chúngtacótrangtrínộithất,tronglĩnhvựcthẩmmỹ-làmđẹp,
chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS
(Cascading Style Sheets)làmộtngônngữ quyđịnhcáchtrìnhbàychocáctàiliệu viết bằng
HTML,XHTML,XML,SVG,hayUML,…
2.TạisaoCSS?
Ngôn ngữ HTML cũng có số thuộc tính định dạng cơ bản cho text, picture, table, …
nhưngnókhôngthậtsựphongphúvàchínhxácnhưnhautrênmọihệthống.CSScungcấp
chobạnhàngtrămthuộctínhtrìnhbàydànhchocácđốitượngvớisựsángtạotrongkếthợp
cácthuộctínhgiúpmanglạihiệuquảcao.Ngoàira,CSSđãđượchỗtrợbởitấtcảcáctrình
duyệt,nênbạnhoàntoàncóthểtựtintrangwebcủamìnhcóthểhiểnthị“nhưnhau”trênmọihệ
điềuhành.
SửdụngcácmãđịnhdạngtrựctiếptrongHTMLtốnhaonhiềuthờigianthiếtkếcũng
nhưdunglượnglưutrữ.TrongkhiđóCSSđưaraphươngthứcápdụngmộtkhuônmẫuchuẩn
từmộtfileCSSởngoài.Cóhiệuquảđồngbộkhibạntạomộtwebsitecóhàngtrămtranghaycả
khibạnmuốnthayđổimộtthuộctínhtrìnhbàynàođó.
CSSđượccậpnhậtliêntụcmanglạicáctrìnhbàyphứctạpvàtinhvihơn.
3.HọcCSScầnnhữnggì?
-CólàmộtkiếnthứcvềHTML.
-MộttrìnhsoạnthảovănbảnđểbạncóthểviếtmãCSS.Nênsửdụngmộttrìnhsoạn

thảođơngiảnnhưNotepadtrongWindowshayPicotrongLinux,SimpleTexttrongMac.Haytừ
cácchươngtrìnhnhưkhidùngDreamWeaver,FrontPage,Golive,…
-Mộttrìnhduyệtweb.
II.MỘTSỐQUYƯỚCVỀCÁCHVIẾTCSS
1.CúphápCSS:
ĐểtìmhiểucúphápCSSchúngtahãythửxemmộtvídụsau.
Vídụ:Đểđịnhmàunềnchomộttrangweblàxanhnhạt(lightcyan):
+TrongHTML: <bodybgcolor=”#00BFF3”>
+TrongCSS: body{background-color:#00BFF3;}
QuavídụtrêntathấyđượcmốitươngđồnggiữacácthuộctínhtrongHTMLvàCSS.
CúphápCSScơbản: Selector{property:value;}
Trongđó:
+Selector:Cácđốitượngmàchúngtasẽápdụngcácthuộctínhtrìnhbày.
+Property:Chínhlàcácthuộctínhquyđịnhcáchtrìnhbày.Như:background-color,font-
family,color,padding,margin,…
MỗithuộctínhCSSphảiđượcgánmộtgiátrị.Nếucónhiềuhơnmộtthuộctínhchomột
selectorthìchúngtaphảidùngmộtdấu;(chấmphẩy)đểphâncáchcácthuộctính.Tấtcảcác
thuộctínhtrongmộtselectorsẽđượcđặttrongmộtcặpngoặcnhọnsauselector.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang61
Vídụ:body{background:#FFF;color:#FF0000;font-size:14pt}
Đểdễđọchơn,bạnnênviếtmỗithuộctínhCSSởmộtdòng.Tuynhiên,nósẽlàmtăng
dunglượnglưutrữCSScủabạn.
Đốivớimộttrangwebcónhiềuthànhphầncócùngmộtsốthuộctính,chúngtacóthể
thựchiệngomgọnlạinhưsau:
h1{color:#0000FF;text-transform:uppercase}

h2{color:#0000FF;text-transform:uppercase;}
h3{color:#0000FF;text-transform:uppercase;}
 h1,h2,h3{color:#0000FF;text-transform:uppercase;}
+ Value: Giátrịcủathuộctính.Nhưvídụtrênvaluechínhlà#FFFdùngđể địnhmàu
trắngchonềntrang.
Đốivớimộtgiátrịcókhoảngtrắng,bạnnênđặttấtcảtrongmộtdấungoặckép.
Vídụ:font-family:”TimesNewRoman”
Đốivớigiátrịlàđơnvịđo,khôngnênđặtmộtkhoảngcáchgiữasốđovớiđơnvịcủanó.
Vídụ:width:100px.NósẽlàmCSSbịvôhiệutrênMozilla/FirefoxhayNetscape.
ChúthíchtrongCSS:
Cũngnhưnhiềungônngữwebkhác.TrongCSS,chúngtacũngcóthểviếtchúthíchcho
cácđoạncodenhưsau/*Nộidungchúthích*/
Vídụ:/*Màuchữchotrangweblàmàuđỏ*/ body{color:red}
2.ĐơnvịCSS:
BảngliệtkêcácđơnvịchiềudàivàmàusắcdùngtrongCSS.
Đơnvịchiềudài
Đơnvị Môtả
% Phầntrăm
in Inch(1inch=2.54cm)
cm Centimeter
mm Millimeter
pc Pica(1pc=12pt)
px Pixels(điểmảnhtrênmànhìnhmáytính)
pt Point(1pt=1/72inch)
em 1emtươngđươngkíchthướcfonthiệnhành,nếufonthiệnhànhcókíchcỡ14pxthì
1em=14px.Đâylàmộtđơnvịrấthữuíchtrongviệchiểnthịtrangweb.
Đơnvịmàusắc
Đơnvị Môtả
Color-name Tênmàu.Vídụ:black,white,red,green,blue,cyan,magenta,…
RGB(r,g,b) MàuRGBvới3giátrịR,G,Bcótrịtừ0–255kếthợpvớinhautạoravô

sốmàu.
RGB(%r,%g,%b) MàuRGBvới3giátrịR,G,Bcótrịtừ0–100%kếthợp.
HexadecimalRGB

MãmàuRGBdạnghệthậplục.Vídụ:#FFFF:trắng,#000:đen,
3.VịtríđặtCSS:
ChúngtacóbacáchkhácnhauđểnhúngCSSvàotrongmộttàiliệuHTML
+ Cách 1: Nội tuyến (kiểu thuộc tính) Đây là một phương pháp nguyên thủy nhất để
nhúngCSSvàomộttàiliệuHTMLbằngcáchnhúngvàotừngthẻHTMLmuốnápdụng.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang62
Lưuý:NếubạnmuốnápdụngnhiềuthuộctínhchonhiềuthẻHTMLkhácnhauthìkhông
nêndùngcáchnày.
Vídụđịnhnềnmàuđenchotrangvàmàuchữtrằngchođoạnvănbảnnhưsau:
<html>
<head><title>Víd
ụ</title></head>
<bodystyle="background-color=#000;">
<pstyle="color:white">^_^WelcomeToMyWebsite^_^</p>
</body>
</html>
+ Cách 2:Bêntrong(thẻstyle)bằngcáchrúttấtcảcácthuộctínhCSSvàotrongthẻ
style(đểtiệnchocôngtácbảotrì,sửachữavềsau).
Vídụđịnhnềnmàutrắngchotrangvàmàuchữxanhláchođoạnvănbảnnhưsau:
<html>
<head><title>Víd

ụ</title>
<styletype="text/css">
body{background-color:#000}
p{color:white}
</style>
</head>
<body>
<p>^_^WelcomeToMyWebsite^_^</p>
</body>
</html>
Lưuý:Thẻstylenênđặttrongthẻhead.
+Cách3:Bênngoài(liênkếtvớimộtfileCSSbênngoài)ThayvìđặttấtcảcácmãCSS
trongthẻstylechúngtasẽđưachúngvàotrongmộtfileCSS(cóphầnmởrộng.css).
Đâylàcáchlàmđượckhuyếncáo,đặcbiệthữuíchchoviệcđồngbộhaybảotrìmột
websitelớnsửdụngcùngmộtkiểumẫu.
Cúphápđểchènfilecssvàotranglà:
<linkrel="stylesheet"type="text/css"href="filename.css"/>
Hoặc
<styletype="text/css">@importurl("filename.css")</style>

+Đầutiênchúngtasẽtạoramộtfilehtml
<html>
<head><title>Víd
ụ</title>
</head>
<body>
<p>^_^WelcomeToMyWebsite^_^</p>
</body>
</html>
This is trial version

www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang63
+Sauđóhãytạomộtfilestyle.csslưucùngthưmụcvớifilehtmtrênvớinộidung:
body{background-color:#000}
p{color:White}
4.Sựưutiên:
TrướckhithựcthiCSSchomộttrangweb.TrìnhduyệtsẽđọctoànbộCSSmàtrangweb
cóthểđượcápdụng,baogồm:CSSmặcđịnhcủatrìnhduyệt,fileCSSbênngoàiliênkếtvào
trangweb,CSSnhúngtrongthẻ<style>vàcácCSSnộituyến.
Sauđó,trìnhduyệtsẽtổnghợptoànbộCSSnàyvàomộtCSSảo,vànếucócácthuộc
tínhCSSgiốngnhauthìthuộctínhCSSnàonằmsausẽđượcưutiênsửdụng.
Theonguyêntắcđótrìnhduyệtsẽưutiêntheotrìnhtự:CácCSSnộituyếnCSSbên
trongCSSbênngoàiCSSmặcđịnhcủatrìnhduyệt.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang64
Chương2
CÁCTHUỘCTÍNHĐỊNHDẠNG
 Địnhdạngnềntrang
 Địnhdạngkýtự,Địnhdạngliênkết
 Nhómcácphântử
 Môhìnhhộp–BoxModel
 Canhlề&khoảngcách–Margin&Padding


Khungviền–Border,Chiềurộngvàchiềucao

I.ĐỊNHDẠNGNỀNTRANG
1.Màunền(thuộctínhbackground-color)
Giá trị mã màu của background-color cũng giống như color. Ví dụ sử dụng thuộc tính
background-colorđểđịnhmàunềntrang,cácthànhphầnh1,h2lầnlượtlàxanhlơ,đỏvàcam.
body{background-color:cyan}
h1{background-color:red}
h2{background-color:orange}
2.Ảnhnền(thuộctínhbackground-image)
Để chèn ảnh nền cho một thành phần trên trang web chúng ta sử dụng thuộc tính
background-image.Vívụfilebackground.css
body{
background-image:url(logo.jpg)
}
h1{background-color:red}
h2{background-color:orange}
p{background-color:FDC689}
vàfilehtml
<html>
<head><title>Víd
ụ</title>
<linkrel="stylesheet"type="text/css"href="background.css"/>
</head>
<body>
<p>^_^WelcomeToMyWebsite^_^</p>
<h1>Chúccácb
ạnvuivẽ</h1>
<h2>H
ạnhphúcvàthànhđạttrongcuộcsống</h2>

</body>
</html>

This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang65
3.Lặplạiảnhnền(thuộctínhbackground-repeat):
Nếusửdụngmộtảnhcókíchthướcquánhỏđểlàmnềnchomộtđốitượngthìtheomặc
định trình duyệtsẽ lặp lại ảnh nền để phủ kínkhông gian còn thừa.Thuộc tính background-
repeatgiúpđiềukhiểntrìnhtrạnglặplạicủaảnhnền.Thuộctínhnàycó4giátrị:
+repeat-x:Chỉlặplạiảnhtheophươngngang.
+repeat-y:Chỉlặplạiảnhtheophươngdọc.
+repeat:Lặplạiảnhtheocả2phương,đâylàgiátrịmặcđịnh.
+no-repeat:Khônglặplạiảnh.
4.Khóaảnhnền(thuộctínhbackground-attachment)
Background-attachmentlàmộtthuộctínhchophépbạnxácđịnhtínhcốđịnhcủaảnhnền
sovớivớinộidungtrangweb.Thuộctínhnàycó2giátrị:
+scroll:Ảnhnềnsẽcuộncùngnộidungtrangweb,đâylàgiátrịmặcđịnh.
+fixed:Cốđịnhảnhnềnsovớinộidungtrangweb,ảnhnềnsẽđứngyênkhibạnđang
cuộntrangweb(mờbấtđộng).
5.Địnhvịảnhnền(thuộctínhbackground-position)
Theomặcđịnhảnhnềnkhiđượcchènsẽnằmởgóctrên,bêntráimànhình.Vớithuộc
tínhbackground-positionbạnsẽcóthểđặtảnhnềnởbấtcứvịtrínào.
Vídụ:
Giátrị Ýnghĩa
Background-position:5cm2cm Ảnhđượcđịnhvị5cmtừtráiquavà2cmtừtrênxuống.


Background-position:20%30% Ảnhđượcđịnhvị20%từtráiquavà30%từtrênxuống.

Background-position:bottomleft Ảnhđượcđịnhvịởgóctráiphíadưới
Thuộctínhbackgroundrútgọn
KhisửdụngquánhiềuthuộctínhCSSsẽgâykhókhănchongườiđọc,côngtácchỉnh
sửacũngnhưtốnnhiềudunglượngnênCSSđưaramộtcấutrúcrútgọnchocácthuộctính
cùngnhóm.
Vídụ:ChúngtacóthểnhómlạiđoạnCSSsau
background-color:transparent;
background-image:url(logo.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:rightbottom;
thànhmộtdòngngắngọn:
background:transparenturl(logo.jpg)no-repeatfixedrightbottom;
Từvídụtrênchúngtacóthểkháiquátcấutrúcrútgọnchonhómbackground:
background:<background-color>|<background-image>|<background-repeat>|
<background-attachment>|<background-position>
II.ĐỊNHDẠNGKÝTỰ
1.ĐịnhdạngFont
a.Thuộctínhfont-family:
Thuộctínhfont-familycócôngdụngđịnhnghĩamộtdanhsáchưutiêncácfontsẽđược
dùngđểhiểnthịmộtthànhphầntrangweb.
Cóhailoạitênfontđượcdùngtrongfont-family:family-namesvàgenericfamilies.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang66

+Family-names:Têncụthểcủamộtfont.Vídụ:Arial,Verdana,Tohama,…
+Genericfamilies:Têncủamộthọgồmnhiềufont.Vídụ:sans-serif,serif,…
VídụsauchúngtasẽviếtCSSđểquyđịnhfontchữdùngchocảtrangweblàTimesNew
Roman, Tohama, sans-serif, vàfont chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ làArial,
Verdanavàcácfonthọserif.
body{font-family:”TimesNewRoman”,Tohama,sans-serif}
h1,h2,h3{font-family:arial,verdana,serif}

Chúý:ĐốivớicácfontcókhoảngtrắngtrongtênnhưTimesNewRomancầnđượcđặt
trongdấungoặckép.
b.Thuộctínhfont-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng
(italic)hayxiên(oblique)lêncácthànhphầntrangweb.Vídụthựchiệnápdụngkiểuinnghiêng
chothànhphầnh1vàkiểuxiênchoh2.
h1{font-style:italic;}
h2{font-style:oblique;}
c.Thuộctínhfont-variant:
Thuộctínhfont-variantđượcdùngđểchọngiữachếđộbìnhthườngvàsmall-capscủa
mộtfontchữ.Mộtfontsmall-capslàmộtfontsửdụngchữinhoacókíchcỡnhỏhơninhoa
chuẩnđểthaythếnhữngchữinthường.Nếunhưfontchữdùngđểhiểnthịkhôngcósẵnfont
small-capsthìtrìnhduyệtsẽhiệnchữinhoađểthaythế.Trongvídụsauchúngtasẽsửdụng
kiểusmall-capschophầnh1
h1{font-variant:small-caps}
d.Thuộctínhfont-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường
(normal)hayinđậm(bold).Thửinđậmphầnp:
p{font-weight:bold}
e.Thuộctínhfont-size:
Kíchthướccủamộtfontđượcđịnhbởithuộctínhfont-size.Thuộctínhnàynhậncácgiá
trịđơnvịđohỗtrợbởiCSSbêncạnhcácgiátrịxx-small,x-small,small,medium,large,x-large,

xx-large,smaller,larger.Tùytheomụcđíchsửdụngcủawebsite bạncóthểlựachon những
đơnvịphùhợp.
Ởvídụtrangwebcókíchcỡfontlà20px,h1là3em=3x20=60px,h2là2em=40px.
body{font-size:20px}
h1{font-size:3em}
h2{font-size:2em}
Thuộctínhfontrútgọn
Tươngtựnhưcácthuộctínhbackground,chúngtacũngcóthểrútgọncácthuộctính
fontlạithànhmộtthuộctínhđơnnhưvídụsau:
h1{font-style:italic;font-variant:small-caps;font-weight:bold;font-size:35px;
font-family:arial,verdana,sans-serif;}
Thành:
h1{font:italicbold35pxarial,verdana,sans-serif;}
Cấutrúcrútgọnchocácthuộctínhnhómfont:
Font:<font-style>|<font-variant>|<font-weight>|<font-size>|<font-family>
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang67
2.Màuchữ(thuộctínhcolor)
Đểđịnhmàuchữchomộtthànhphầnnàođótrêntrangwebchúngtasửdụngthuộctính
color.GiátrịcủathuộctínhnàylàcácgiátrịmàuCSShỗtrợ.VídụsauchúngtasẽviếtCSSđể
địnhmàuchữchungchomộttrangweblàđen,chotiêuđềh1màuxanhdatrời,chotiêuđềh2
màuxanhláchúngtasẽlàmnhư
body{color:#000}
h1{color:#0000FF}
h2{color:#00FF00}
3.Thuộctínhtext-indent:

Thuộctínhtext-indentcungcấpkhảnăngtạorakhoảngthụtđầudòngchodòngđầutiên
trongđoạnvănbản.GiátrịthuộctínhnàylàcácđơnvịđocơbảndùngtrongCSS.Trongvídụ
sauchúngtasẽđịnhdạngthụtđầudòngmộtkhoảng30pxchodòngvănbảnđầutiêntrongmỗi
đoạnvănbảnđốivớicácthànhphần<p>
p{text-indent:30px}
4.Thuộctínhtext-align:
Thuộctínhtext-aligngiúpcanhchỉnhvănbảnchocácthànhphầntrongtrangweb.Thuộc
tínhnàycótấtcả4giátrị:left(canhtrái–mặcđịnh),right(canhphải),center(canhgiữa)và
justify(canhđều).Trongvídụsauchúngtasẽthựchiệncanhphảicácthànhphầnh1,h2và
canhđềuđốivớithànhphần<p>
h1,h2{text-align:right}
p{text-align:justify}
5.Thuộctínhletter-spacing:
Thuộctínhletter-spacingđượcdùngđểđịnhkhoảngcáchgiữacáckýtựtrongmộtđoạn
vănbản.Muốnđịnhkhoảngcáchgiữacáckýtựtrongthànhphầnh1,h2là7pxvàthànhphần
<p>là5pxchúngtasẽviếtCSSsau:
h1,h2{letter-spacing:7px}
p{letter-spacing:5px}
6.Thuộctínhtext-decoration:
Thuộctínhtext-decorationgiúpbạnthêmcáchiệuứnggạchchân(underline),gạchxiên
(line-through),gạchđầu(overline),vàmộthiệuứngđặcbiệtlàvănbảnnhấpnháy(blink).Vídụ
sauchúngtasẽđịnhdạnggạchchânchothànhphầnh1,gạchđầuthànhphầnh2
h1{text-decoration:underline}
h2{text-decoration:overline}
7.Thuộctínhtext-transform:
Text-transformlàthuộctínhquiđịnhchếđộinhoahayinthườngcủavănbảnmàkhông
phụthuộcvàovănbảngốctrênHTML.Thuộctínhnàycótấtcả4giátrị:uppercase(inhoa),
lowercase(inthường),capitalize(inhoaởkýtựđầutiêntrongmỗitừ)vànone(khôngápdụng
hiệuứng–mặcđịnh).Trongvídụdướiđâychúngtasẽđịnhdạngchothànhphầnh1làinhoa,
h2làinhoađầumỗikýtự.

h1{text-transform:uppercase}
h2{text-transform:capitalize}
III.ĐỊNHDẠNGLIÊNKẾT-PSEUDO-CLASSESFORLINKS
Một thành phần rất quan trọng trong mọi website chính là liên kết. Cũng như một đối
tượngvănbảnthôngthường,chúngtahoàntoàncóthểápdụngcácthuộctínhđịnhdạngvăn
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS


Biênsọan:DươngThànhPhết  Trang68
bảnthôngthườngchomộtliênkết.Hơnnữa,CSScòncungcấpmộtđiềukhiểnđặcbiệtđược
gọilàpseudo-classes.
Pseudo-classeschophépbạnxácđịnhcáchiệuứngđịnhdạngchomộtđốitượngliênkết
ở một trạng thái xác định nhưkhi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết
(a:hover),khiliênkếtđượcthăm(a:visited)haykhiliênkếtđangđượckíchhoạt–đanggiữnhấn
chuột(a:active).
Vớiđiềukhiểnpseudo-classescùngvớicácthuộctínhCSSđãhọcchắcchắnsẽmang
lạirấtnhiềuýtưởngvềtrangtríliênkếtchotrangweb.Sauđâychúngtasẽtiếnhànhmộtsốví
dụđểtìmhiểuthêmvềcáckhảnăngtrangtríchomộtliênkếtdựatrênpseudo-classes.
Vídụchúngtasẽápdụng4màusắckhácnhauchotừngtrạngtháiliênkết:cácliênkết
chưathămcómàuxanhlá;cácliênkếtmouseoversẽcómàuđỏtươi;cácliênkếtđãthămsẽ
cómàuđỏvàcácliênkếtđangkíchhoạtcómàutím.
a:link{color:#00FF00}
a:hover{color:#FF00FF}
a:visited{color:#FF0000}
a:active{color:#662D91}
VídụTạocáchiệuứngtươngứngvớitrìnhtrạngliênkết:cácliênchưathămcómàu
xanhlá,kíchcỡfont14px;liênkếtmouseovercómàuđỏtươi,kíchcỡfont1.2em,hiệuứng
nhấpnháy;liênkếtđãthămsẽcómàuxanhdatrời,khôngcóđườnggạchchân;cácliênkết

đangkíchhoạtcómàutímvàfontdạngsmall-caps.
a:link{color:#00FF00;font-size:14px}
a:hover{color:#FF00FF;font-size:1.2em;text-decoration:blink}
a:visited{color:#FF0000;text-decoration:none}
a:active{color:#662D91;font-variant:small-caps}
Vídụcũngtạocholiênkếthiệuứngmàusắcgiốngvídụtrênnhưngsẽcóthêm1sốhiệu
ứng:cácliếnkếtsẽcókhungviềnmàuđen,kíchcỡfont14px;liênkếtmouseovercónềnlight
cyan;cácliênkếtđãthămcónềnlightyellow.
a{border:1pxsolid#000;font-size:14px}
a:link{color:#00FF00;}
a:hover{background-color:#00BFF3;color:#FF00FF;font-size:1.2em;text-ecoration:blink}
a:visited{background-color:#FFF568;color:#FF0000;text-decoration:none}
a:active{color:#662D91;font-variant:small-caps}
Ápdụngcácvídụtrênvàofilehtmlsau
<html>
<head><title>Víd
ụ</title>
<linkrel="stylesheet"type="text/css"href="link.css"/>
</head>
<body>
<ahref=index.htm>^_^WelcomeToMyWebsite^_^</a>
</body>
</html>



This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần3:NgônNgữĐịnhDạngCSS



Biênsọan:DươngThànhPhết  Trang69
IV.NHÓMCÁCPHẦNTỬ-CLASS&ID
ChúngtađãsửdụngcácthuộctínhCSSvềbackground,color,font,…Tuynhiên,bạn
cũngnhậnralàkhiápdụngmộtthuộctínhCSSchomộtthànhphầnnàođóvídụnhưh1,h2,p,
a,img,…thìtoànbộcácthànhphầnnàytrongtrangwebđềunhậnthuộctínhnày.Vậycócách
nàođểnhómlạimộtsốthànhphầnnàođóđểápdụngmộtthuộctínhđặcbiệt.Vídụnhưbạn
muốncácliênkếttrênmenutrangwebsẽđượcinhoa,vàcókíchcỡlớnhơnsovớiliênkết
trongnộidungđâychínhlàvấnđềmàchúngtasẽgiảiquyếtnhưsau:
1.Nhómcácphầntửvớiclass:
VídụchúngtacómộtđoạnmãHTMLsauđây:
<p>DanhSáchCácTỉnh,ThànhPhốCủaViệtNam</p>
<ul>
<li>HàN
ội</li>
<li>TP.H
ồChíMinh</li>
<li>
ĐàNẵng</li>
<li>Th
ừaThiênHuế</li>
<li>KhánhHòa</li>
<li>QuãngNinh</li>
<li>Ti
ềnGiang</li>
</ul>
Yêucầuđặtralàlàmthếnàođểtêncácthànhphốlàmàuđỏvàtêncáctỉnhlàmàuxanh
datrời.Đểgiải quyếtvấnđềnàychúngtasẽdùngmộtthuộctínhHTMLgọi làclassđểtạo
thành2nhómlàthànhphốvàtính.
TasẽviếtlạiđoạnHTMLsauthànhnhưthếnày:

<html>
<head><title>Víd
ụ</title>
<linkrel="stylesheet"type="text/css"href="class.css"/>
</head>
<body>
<p>DanhSáchCácT
ỉnh,ThànhPhốCủaViệtNam</p>
<ul>
<liclass="tp">HàN
ội</li>
<liclass="tp">TP.H
ồChíMinh</li>
<liclass="tp">
ĐàNẵng</li>
<liclass="tinh">Th
ừaThiênHuế</li>
<liclass="tinh">KhánhHòa</li>
<liclass="tinh">QuãngNinh</li>
<liclass="tinh">Ti
ềnGiang</li>
</ul>
</body>
</html>
Vớiviệcdùngclassđểnhómcácđốitượngnhưtrênthìcôngviệccủachúngtasẽ
trởnênđơngiảnhơnnhiều,fileclass.csssẽlà
li.tp{color:FF0000}
li.tinh{color:0000FF}
This is trial version
www.adultpdf.com