Bêëþ÷eíèe còèëeé â äoêóìeíò
|
|
|
|
|
|
Bcòpoeííûe còèëè. Aòpèáóò Style
|
|
Bcòpoeííûé còèëü – caìûé ïpocòoé cïocoá çaäaòü còèëü òeãa. Bêëþ÷èòe â òeã aòpèáóò style
co cïècêoì câoécòâ è èõ çía÷eíèé. Ïpèìep:
|
<h1 style="color: blue; font-style: italic">Title</h1>
|
Ápoóçep, ïoääepæèâaþùèé còèëè, âûâeäeò òeêcò çaãoëoâêa cèíèì è íaêëoííûì øpèôòoì.
Oáëacòü äeécòâèÿ òaêoão òèïa còèëeé pacïpocòpaíÿeòcÿ òoëüêo ía coäepæèìoe òeãa.
Ècïoëüçóéòe âcòpoeííûe còèëè â peäêèõ cëó÷aÿõ, òaê êaê ecëè âû çaõoòèòe cìeíèòü äèçaéí
äoêóìeíòa, òo ýòo ïoòpeáóeò oò âac çía÷èòeëüíûõ ócèëèé, ocoáeíío ecëè äoêóìeíò âeëèê.
|
|
Taáëèöû còèëeé ía ópoâíe äoêóìeíòa
|
|
Còèëè ía ópoâíe äoêóìeíòa oïpeäeëÿþòcÿ òeãoì <Style>. Teã <Style>
(ça oïècaíèeì ýòoão òeãa
çaãëÿíèòe â HTML cïpaâo÷íèê)
ìoæeò íaõoäèòücÿ òoëüêo âíóòpè òeãa <head>. Bce ÷òo íaõoäèòücÿ âíóòpè òeãa
<style> paccìaòpèâaeòcÿ ápoóçepoì êaê còèëeâûe ïpaâèëa. Còèëè, oïpeäeëeííûé â òeãe <Style>, äeécòâóeò ía âce òeãè äoêóìeíòa.
. Ïoìeùaéòe coäepæèìoe òeãa â HTML êoììeíòapèé, òoãäa ápoóçep, ïoääepæèâaþùèé còèëè,
âce paâío pacïoçíaeò coäepæèìoé, çaòo ápoóçep, íe ïoääepæèâaþùèé còèëè íe âûâeäeò còèëeâûe ïpaâèëa
ía ýêpaí, ïoc÷èòaâ èõ êoììeíòapèÿìè.
| Ïpèìep: | |
<html>
<head>
<title>Äoêóìeíò co còèëÿìè, oïpeäeëeííûìè ía ópoâíe äoêóìeíòa.</title>
<style>
{CSS}
{/CSS}
</style>
<body>
<h2>Êpacíûé çaãoëoâoê</h2>
<h1 class="red">Cèíèé çaãoëoâoê</h1>
</body>
|
|
|
B ýòoì ïpèìepe ìû äoápaëècü äo ècïoëüçoâaíèÿ peãóëÿpíûõ êëaccoâ. Bíóòpè òeãa
<style>, áûë oïpeäeëeí poäoâoé êëacc red òeãa <h2>
(ça oïècaíèeì ýòoão òeãa
çaãëÿíèòe â HTML cïpaâo÷íèê).
×òoáû ïpèìeíèòü ýòo còèëeâoé ïpaâèëo ê òeãó íeêoòopoìó òeãó <h2>, íaäo
íaçía÷èòü aòpèáóòó class òeãa <h2> çía÷eíèe, coâïaäaþùee c èìeíeì poäoâoão
êëacca, â äaííoì cëó÷ae ýòo red. Aíaëoãè÷ío ècïoëüçóþòcÿ poäoâûe êëaccû.
Oïpeäeëèòe còèëeâoe ïpaâèëo äëÿ poäoâoão êëacca, ïoòoì íaçía÷üòe aòpèáóòó class íeêoòopoão
òeãa çía÷eíèe, coâïaäaþùee c èìeíeì poäoâoão êëacca. Toãäa ýòoò òeã oòoápaçèòcÿ â cooòâeòcòâèè co còèëeâûì ïpaâèëoì.
| Ïpèìep: | |
<html>
<head>
<title>Äoêóìeíò co còèëÿìè, oïpeäeëeííûìè ía ópoâíe äoêóìeíòa.</title>
<style>
{CSS}
.italic {font-style: italic}
{/CSS}
</style>
<body>
<h1 class="red">Çaãoëoâoê</h1>
<p class="italic">Aáçaö</p>
</body>
|
|
|
B ýòoì ïpèìepe êaê çaãoëoâoê, òaê è aáçaö, âûâeäóòcÿ êópcèâoì.
|
|
Bíeøíèe òaáëèöû còèëeé
|
|
Còaíäapò CSS ïpeäócìaòpèâaeò coçäaíèe oòäeëüíûõ ôaéëoâ co còèëÿìè è ïpècoeäèíeíèe èõ ê äoêóìeíòó. Cóùecòâóeò íecêoëüêo cïocoáoâ cäeëaòü ýòo:
- Teã <link>. Ïócòü âaø còèëü íaõoäèòcÿ â ôaéëe style.css
(pacøèpeíèe .css oáùeïpèíÿòo äëÿ còèëeâûõ ôaéëoâ).
Bïèøèòe â òeã <head> cëeäóþùóþ çaïècü:
|
<link rel="stylesheet" type="text/css" href="http://somehost/style.css">
|
URL òaáëèöû còèëeé ìoæeò áûòü êaê aácoëþòíûì, òaê è oòíocèòeëüíûì.
- Äèpeêòèâa @import. Äèpeêòèâa import ïpèìeíÿeòcÿ âíóòpè òeãa
<style>:
|
<style>
{CSS}
@import url(http://somehost/style.css)
....
{/CSS}
</style>
|
|
|
Êoìaíäa import äoëæía ïoÿâëÿòücÿ äo ëþáûõ còèëeâûõ ïpaâèë.
×óòü ïoçæe ìû âepíeìcÿ ê âíeøíèì òaáëèöaì còèëeé.
|
|
Ïpèopèòeòû còèëeé
|
|
- Paíæèpóeì ïo ècòo÷íèêó
- Còèëü oïpeäeëeííûé áëèæe ê òeãó èìeeò
áoëüøèé ïpèopèòeò, ÷eì còèëü oïpeäeëeííûé
äaëüøe
- Ecëè ìoæío oïpeäeëèòü íecêoëüêo còèëeé,
paíæèpóeì èõ ïo êëaccó
- Câoécòâa, çaäaííûe â êëacce òeãoâ, èìeþò
áoëüøèé ïpèopèòeò íaä câoécòâaìè,
oïpeäeëeííûìè äëÿ òeãa âooáùe
- Ecëè âce eùe ocòaëocü íecêoëüêo còèëeé,
paíæèpóeì èõ ïo cïeöèôè÷íocòè
- Câoécòâa, oïpeäeëeííûe äëÿ áoëee
cïeöèôè÷íoão êoíòeêcòa, èìeþò áoëüøèé
ïpèopèòeò, ÷eì câoécòâa, oïpeäeëeííûe äëÿ
ìeíee cïeöèôè÷íoão êoíòeêcòa.
- Äaëee paíæèpóeì ïo ïopÿäêó âõoæäeíèÿ
- Ïocëeäíee oïècaíèe ïpeoáëaäaeò íaä âceìè
ïpeäûäóùèìè
Taêoé ïpèíöèï oáúeäèíeíèÿ còèëeé
íaçûâaeòcÿ êacêaäíûì, ïoýòoìó è òaáëèöû
íaçûâaþòcÿ êacêaäíûìè.
|
|
Eùe êoe-÷òo o âíeøíèõ òaáëèöaõ còèëeé
|
|
Ha ïepâûé âçãëÿä ìoæeò ïoêaçaòücÿ, ÷òo cïocoáû ïpècoeäèíeíèÿ âíeøíèe òaáëèö còèëeé c ïoìoùüþ äèpeêòèâû @import è òeãa <link>(ça oïècaíèeì ýòoão òeãa
çaãëÿíèòe â HTML cïpaâo÷íèê) ýêâèâaëeíòíû.
Ýòo òaê ecëè â äoêóìeíòe oäèí òeã <link> è oäía äèpeêòèâa @import. Ecëè â äoêóìeíòe
íecêoëüêo äèpeêòèâ @import, òo ápoóçep, coãëacío còaíäapòaì CSS, äoëæeí cëèòü
ìíoæecòâo êaçaííûõ â äèpeêòèâaõ òaáëèö â oäèí íaáop còèëeâûõ ïpaâèë äëÿ äoêóìeíòa. Ecëè æe
ápoóçep âcòpeòèë íecêoëüêo òeãoâ <link>, òo oí äoëæeí ïpeäëoæèòü ïoëüçoâaòeëþ
âûápaòü còèëeâoé ôaéë äëÿ äoêóìeíòa, oäíaêo ía ïpaêòèêe coâpeìeííûe ápoóçepû, âcòpeòèâ
íecêoëüêo òeãoâ <link>, êacêaäío èõ oáúeäèíÿþò.
ß íe coâeòóþ ècïoëüçoâaòü êoìaíäó @import, äëÿ ïpècoeäèíeíèÿ âíeøíèõ òaáëèö còèëeé,
òaê êaê ee ïoääepæèâaeò òoëüêo Intenet Explorer.
|
|
