Ópoê 2:
Kaê paáoòaeò CSS?

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.

Áaçoâûé cèíòaêcèc CSS

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.

Ïpèìeíeíèe CSS ê HTML- äoêyìeíòy

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.

Haçaä

Bâepx