Oãëaâëeíèe (â íoâoì oêíe)
Bíèç
B ýòoì ypoêe âû coçäaäèòe
câoþ ïepâyþ òaáëèöy
còèëeé/style sheet. Bû yçíaeòe
oá ocíoâax áaçoâoé ìoäeëè
CSS è o òoì, êaêèe êoäû
íeoáxoäèìo ècïoëüçoâaòü äëÿ
CSS â HTML-äoêyìeíòe.
Míoãèe câoécòâa, ècïoëüçyeìûe â Cascading
Style Sheets (CSS), aíaëoãè÷íû
câoécòâaì HTML. Taêèì
oápaçoì, ecëè âû ècïoëüçyeòe
HTML äëÿ äèçaéía còpaíèö,
âû, íaâepíÿêa yçíaeòe ìíoãèe
êoäû. Ïocìoòpèì ía
êoíêpeòíoì ïpèìepe.
Cêaæeì, íaì íyæeí êpacíûé
öâeò ôoía web-còpaíèöû:
B HTML ýòo ìoæío cäeëaòü
òaê:
<body bgcolor="#FF0000">
C ïoìoùüþ CSS òoão æe
caìoão peçyëüòaòa ìoæío
äoáèòücÿ òaê:
body {background-color:
#FF0000;}
Kaê âèäèòe, ýòè êoäû áoëee èëè ìeíee èäeíòè÷íû â HTML è CSS. Ýòoò ïpèìep òaêæe äeìoícòpèpyeò ôyíäaìeíòaëüíyþ ìoäeëü CSS:
Ho ãäe paçìeùaòü CSS-êoä? Èìeíío ýòèì âoïpocoì ìû è çaéìeìcÿ ceé÷ac.Ecòü òpè cïocoáa ïpèìeíèòü ïpaâèëa CSS ê HTML- äoêyìeíòy. Hèæe ìû paccìoòpè ýòè òpè ìeòoäa. Mû peêoìeíäyeì cocpeäoòo÷èòücÿ ía òpeòüeì - òo ecòü âíeøíeé/external òaáëèöe còèëeé.
Meòoä 1: Èíëaéí/In-line
(aòpèáyò style)
Moæío ïpèìeíÿòü CSS ê HTML c
ïoìoùüþ HTML-aòpèáyòa style.
Kpacíûé öâeò ôoía ìoæío
ycòaíoâèòü òaê:
<html>
<head>
<title>Example</title>
</head>
<body style="background-
color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Meòoä 2: Bíyòpeííèé (òýã
style)
Bòopoé cïocoá âcòaâêè CSS- êoäoâ - HTML-òýã <style>.
Haïpèìep:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color:
#FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Meòoä 3: Bíeøíèé (ccûëêa
ía òaáëèöy còèëeé)
Peêoìeíäyeìûé ìeòoä -
coçäaíèe ccûëêè ía òaê
íaçûâaeìyþ âíeøíþþ
òaáëèöy còèëeé. B äaííoì
y÷eáíèêe ìû áyäeì
ècïoëüçoâaòü èìeíío ýòoò
ìeòoä âo âcex ïpèìepax.
Bíeøíÿÿ òaáëèöa còèëeé ýòo
ïpocòo òeêcòoâûé ôaéë c
pacøèpeíèeì .css . Bû ìoæeòe
ïoìecòèòü òaáëèöy còèëeé ía
âaø web-cepâep èëè ía
æecòêèé äècê, êaê è äpyãèe
ôaéëû.
Haïpèìep, cêaæeì, âaøa
òaáëèöa còèëeé íaçûâaeòcÿ
style.css è íaxoäèòcÿ â ïaïêe
style . Ýòo ìoæío
ïpoèëëþcòpèpoâaòü òaê:
Becü ôoêyc cocòoèò â òoì,
÷òoáû coçäaòü ccûëêy èç
HTML-äoêyìeíòa (default.htm)
ía òaáëèöy còèëeé (style.css).
Ýòo ìoæío cäeëaòü oäíoé
còpo÷êoé HTML-êoäa:
<link rel="stylesheet" type="text/css" href="style/style.css">
Oápaòèòe âíèìaíèe, êaê
yêaçaí ïyòü ê âaøeé òaáëèöe
còèëeé aòpèáyòoì href.
Ýòy còpoêy êoäa íyæío
âcòaâëÿòü â paçäeëe header
HTML, òo ecòü ìeæäy òýãaìè
<head> è </head>.
Haïpèìep, òaê:
<html>
<head>
<title>My document</title>
<link rel="stylesheet"
type="text/css"
href="style/style.css" />
</head>
<body>..
Ýòa ccûëêa yêaçûâaeò
ápayçepy, ÷òo oí äoëæeí
ècïoëüçoâaòü ïpaâèëa
oòoápaæeíèÿ HTML-ôaéëa èç
CSS-ôaéëa.
Caìoe âaæíoe çäecü òo, ÷òo
íecêoëüêo HTML-äoêyìeíòoâ
ìoãyò ccûëaòücÿ ía oäíy
òaáëèöy còèëeé. Èía÷e ãoâopÿ,
oäèí CSS-ôaéë ìoæío
ècïoëüçoâaòü äëÿ yïpaâëeíèÿ
oòoápaæeíèeì ìíoæecòâa
HTML-äoêyìeíòoâ.
Ýòo ïoìoæeò âaì cýêoíoìèòü
yéìy âpeìeíè è cèë. Ecëè âû,
íaïpèìep, xoòèòe èçìeíèòü
öâeò ôoía web-caéòa èç 100
còpaíèö, òaáëèöa còèëeé
èçáaâèò âac oò íeoáxoäèìocòè âpy÷íyþ èçìeíÿòü âce còo HTML-
äoêyìeíòoâ. Ècïoëüçyÿ CSS,
ýòè èçìeíeíèÿ ìoæío cäeëaòü
ça íecêoëüêo ceêyíä, ïpocòo
èçìeíèâ oäèí êoä â
öeíòpaëüíoé òaáëèöe còèëeé.
Äaâaéòe ïocìoòpèì, êaê ýòo
cäeëaòü.
Ïoïûòaéòecü cäeëaòü ýòo
caìè
Oòêpoéòe Notepad (èëè äpyãoé
âaø òeêcòoâûé peäaêòop) è
coçäaéòe äâa ôaéëa - HTML-
ôaéë è CSS-ôaéë - òaêoão
coäepæaíèÿ:
default.htm
<html>
<head>
<title>Moé äoêyìeíò</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<h1>Moÿ ïepâaÿ òaáëèöa còèëeé</h1>
</body>
</html>
style.css
body {background-color:
#FF0000;}
Paçìecòèòe ýòè ôaéëû â
oäíoé ïaïêe. He çaáyäüòe
coxpaíèòü ôaéëû c
ïpaâèëüíûìè pacøèpeíèÿìè
(".css" è ".htm")
Oòêpoéòe default.htm â
âaøeì ápayçepe è âû yâèäèòe,
÷òo còpaíèöa èìeeò êpacíûé
ôoí. Ïoçäpaâëÿeì! Bû coçäaëè
âaøy ïepâyþ òaáëèöy còèëeé!
Ïepexoäèòe â cëeäyþùèé ypoê, ãäe ìû paccìoòpèì íeêoòopûe èç câoécòâ CSS.