CSS.MANUAL.RU



Bâeäeíèe
Cèíòaêcèc CSS
Bêëþ÷eíèe còèëeé â äoêóìeíò
Çía÷eíèÿ câoécòâ
Câoécòâa øpèôòa
Câoécòâa òeêcòa
Câoécòâa öâeòa è ôoía
Câoécòâa oápaìëeíèÿ
Câoécòâa ïoçèöèoíèpoâaíèÿ
Bèçóaëüíûe câoécòâa
Câoécòâa cïècêoâ
Teã SPAN
Còaòüè
Èäeoëoãèÿ CSS
Êaê ècïoëüçoâaòü CSS
Aëôaâèòíûé óêaçaòeëü
Ccûëêè





  Ocíoâû cèíòaêcèca

B oáùeì âèäe ïpaâèëo, çaäaþùee còèëü âûãëÿäèò âoò òaê:

selector {property1: value1; property2: value2; property3: value3; property4: value4}

Haïpèìep, ìû ìoæeì çaäaòü öâeò coäepæèìoìó òeãa <b> òaêèì cïocoáoì:

b {color: red}

Çäecü b ýòo ceëeêòop, color – ýòo câoécòâo, red, êaê âû óæe íaâepíoe äoãaäaëècü, çía÷eíèe.


  Ãpóïïèpoâêa ceëeêòopoâ

h1 {font-face: Arial}
h3 {font-face: Arial}
h3 {font-face: Arial}

Äeëaeò òo æe caìoe, ÷òo è:

h1, h3, h3 {font-face: Arial}

ßcío, ÷òo âòopoé âapèaíò ïpeäïo÷òèòeëüíee, òaê êaê eão óäoáíee èçìeíèòü, oí çaíèìaeò ìeíüøe ìecòa, a cëeäoâaòeëüío áûcòpee ïepeäacòcÿ ïo ceòè è ò.ä.


  Êoíòeêcòíûe ceëeêòopû

Còaíäapò CSS paçpeøaeò ïpèìeíÿòü íeêoòopoe còèëeâoe ïpaâèëo, òoëüêo òeì òeãaì, êoòopûe íaõoäÿòcÿ âíóòpè äpóãèõ. Ïoÿcíþ ía ïpèìepe:

ol li {list-style: upper-roman}
ol ol li {list-style: upper-alpha}
ol ol ol li {list-style: decimail}
ol ol ol ol li {list-style: lower-alpha}

Coãëacío ýòèì còèëeâûì ïpaâèëaì, ápoóçep, âcòpeòèâ òeã <li>, âëoæeííûé â oäèí òeã <ol>, äoëæeí ïpèìeíèòü çía÷eíèe upper-roman äëÿ câoécòâa list-style ê ýòoìó òeãó. Bcòpeòèâ òeã <li>, âëoæeííûé â äâa òeãa <ol>, oí äoëæeí ècïoëüçoâaòü çía÷eíèe upper-alpha äëÿ câoécòâa list-style ê ýòoìó òeãó è ò.ä.

Taêæe ìoæío ãpóïïèpoâaòü êoíòeêcòíûe ceëeêòopû

B I, LI OL{cloror: blue}

Ýòo ïpaâèëo oçía÷aeò, ÷òo òeêcò, âûäeëeííûé òeãoì <B>, íaõoäÿùèìcÿ â <I>, è òeêcò, íaõoäÿùèécÿ â òeãe <LI>, âëoæeííoì â oäèí òeã <OL>, áóäeò âûäeëeí ãoëóáûì öâeòoì.


  Äo÷epíèe, cecòpèícêèe è óíèâepcaëüíûe ceëeêòopû

Paccìoòpèì cëeäóþùèe ïpèìepû:

* {font-weight: bold}
h1 > h3 {font-weight: bold}
h1 + h3 {font-weight: bold}

B ïepâoì ïpèìepe çâeçäo÷êa,óíèâepcaëüíûé ceëeêòop, oçía÷aeò, ÷òo còèëeâoé ïpaâèëo äoëæío áûòü ïpèìeíeío êo âceì ýëeìeíòaì äoêóìeíòa, òaê ÷òo âecü òeêcò â íeì áóäeò âûäeëeí æèpíûì øpèôòoì

Bo âòopoì ïpèìepe còèëeâoe ïpaâèëo áóäeò ïpèìeíÿòücÿ êo âceì òeãaì <h3>, ÿâëÿþùèìcÿ äo÷epíèìè ïo oòíoøeíèþ ê òeãó <h1>, è êo âceì <h3> òeãaì, ÿâëÿþùèìcÿ poäèòeëücêèìè ïo oòíoøeíèþ ê <h1>.

Tpeòèé ïpèìep èëëþcòpèpóeò òèï cìeæíoão ceëeêòopa, äaííoe còèëeâoe ïpaâèëo áóäeò ïpèìeíeío ê òeãó, cëeäóþùeìó íeïocpeäcòâeíío ça äpóãèì. B ýòoì cëó÷ae âcÿêèé paç, êoãäa ça çaãoëoâêoì ïepâoão ópoâíÿ cëeäóeò çaãoëoâoê âòopoão ópoâíÿ, çaãoëoâoê âòopoão ópoâíÿ còaíeò æèpíûì.


  Ïceâäoýëeìeíòû

Ïceâäoýëeìeíòû ïoêa íe ïoääepæèâaþòcÿ íè oäíèì èç ïoïóëÿpíûõ ápaóçepoâ, òaê ÷òo âû cìeëo ìoæeòe ïpoïócòèòü ýòoò paçäeë.

Cèíòaêcèc ïceâäoýëeìíòoâ òaêoâ:

selector:pseudoelement {property1:value1;...}

Ïceâäoýëeìeíòû first-line è first-letter oïpeäeëÿþò còèëü ïepâoé còpoêè è ïepâoé áóêâû. Haïpèìep òaê âû ìoæeòe coçäaòü áóêâèöó

p:first-letter {font-weight: bold; color: red}

Ïceâäoýëeìeíòû before è after ïoçâoëÿþò óêaçûâaòü â äoêóìeíòe ìecòa, êóäa âcòaâëÿòü aâòoìaòè÷ecêè ãeíepèpóeìoe coäepæèìoe. Haïpèìep oïpeäeëèâ còèëü óïopÿäo÷eííoão cïècêa cëeäóþùeì oápaçoì:

ol:before{content:'Ccûëêè'}

âû óâèäèòe ïepeä êaæäûì cïècêoì cëoâo ccûëêè.


  Peãóëÿpíûe êëaccû

Èíoãäa íóæío ècïoëüçoâaòü oäèí còèëü aáçaöeâ äëÿ ïpèìepoâ ècõoäíûõ êoäoâ ïpoãpaìì, a äpóãoé äëÿ oïècaíèÿ aëãopèòìoâ. Ecëè íè oäèí èç aáçaöeâ íe áóäeò èìeòü ÿâíoão êoíòeêcòa, ïo êoòopoìó eão ìoæío áóäeò oòëè÷èòü oò äpóãoão, òo ìoæío oïpeäeëèòü còèëü äëÿ êaæäoão â oòäeëüíocòè:

p.code { font-family: symbol; margin-left: 30px; }
p.alg { margin-left:2px; }

B ceëeêòope, ïocëe èìeíè òeãa ÷epeç òo÷êó ïpèïècaío èìÿ êëacca. Ïepâoe ïpaâèëo coçäaëo êëacc còèëeé aáçaöeâ code, òeêcò êoòopûõ äoëæeí âûâoäèòücÿ øpèôòoì symbol c c oòcòóïoì 30 ïèêceëeé oò êpaÿ, a âòopoe alg, òeêcò êoòopûõ áóäeò oòoäâèíóò oò ëeâoão êpaÿ ía 2 ïèêceëÿ. ×òoáû ïpèìeíèòü ê coäepæèìoìó òeãa oïpeäeëeííûé êëacc íaäo âcòaâèò â òeã aòpèáóò class è ïpècâoèòü eìó èìÿ còèëeâoão êëacca.

<p class="alg"><br>
Aëãopèòì copòèpoâêè ïóçûpüêoì. Ïo
ècõoäíoìó êoäó äoãaäaéòecü caìè, êaê oí&nbsp;paáoòaeò è&nbsp;óáeäèòecü â&nbsp;eão âepíocòè
</p>
<pre>
<p class="code">
for i := 1 to n do begin
for k := i downto 2 do begin
if Obj[k-1] > Obj[k] then begin
tmp := Obj[k-1];
Obj[k-1] := Obj[k];
Obj[k] := tmp;
end;
end;
end;
</p>
</pre>


  Poäoâûe êëaccû

B paìêaõ còaíäapòa CSS ìoæío coçäaâaòü êëacc, íe accoöèèpóÿ èõ c êaêèì-íèáóäü òeãoì. Haïpèìep, çaäaâ còèëeâoe ïpaâèëo cëeäóþùeì oápaçoì:

.bold_and_italic {font-style: italic; font-weight: bold}

è ïpècâoèâ bold_and_italic câoécòâó class íeêoòopoão òeãa, âû óêaæeòe ápoóçepó, ÷òo coäepæèìoe ýòoão òeãa íaäo oòoápaæaòü æèpíûì è íaêëoííûì øpèôòoì.


  Ïceâäoêëaccû

Êpoìe òpaäèöèoííûõ êëaccoâ, còaíäapò CSS oïpeäeëÿeò eùe è ïceâäoêëaccû. Ï ceâäoêëaccû ïoçâoëÿþò óïpaâëÿòü oòoápaæeíèeì ýëeìeíòoâ, íaõoäÿùèõcÿ â êaêoì-íèáóäü cocòoÿíèè. Ïceâäoêëaccû ïpècoeäèíÿþòcÿ ê èìeíè òeãa äâoeòo÷èeì, è èõ èìeía çapaíee oïpeäeëeíû. Ïoêa cóùecòâóeò âceão ceìü ïceâäoêëaccoâ:

  • link, alink, visited – ýòè ïceâäoêëaccû ècïoëüçóþòcÿ òoëüêo c òeãoì <a> è oïpeäeëÿþò còèëü oòoápaæeíèÿ oáû÷íoé, aêòèâíoé è ïoceùeííoé ccûëoê cooòâeòcòâeíío. Ïpèìep:

    a:link{color: blue}
    a:active{color: green; font-weight: bold}
    a:visited{color: red}

  • hover, focus – ýòo, òaê íaçûâaeìûe, èíòepaêòèâíûe êëaccû. Êëacc hover oïpeäeëÿeò, êaê oòoápaæaòü oáúeêò, êoãäa ía íeão ïoïaë êópcop ìûøü, a êëacc focus, oïpeäeëÿeò, êaê ápoóçepó ïoêaçaòü coäepæèìoe òeãa, còaâøeão oáúeêòoì âíèìaíèÿ. C ïoìoùüþ ýòèõ êëaccoâ ìoæío óêpacèòü ccûëêè ía còpaíèöe:

    a:hover{color: yellow}

  • Êëacc focus íe ïoääepæèâaeòcÿ coâpeìeííûìè ápoóçepaìè, a êëacc active paáoòaeò òoëüêo c òeãoì <a>
  • first-child – ýòoò êëacc ïoêaçûâaeò, êaê oòoápaæaòü coäepæèìoe òeãa, ÿâëÿþùeãocÿ ïepâûì ïoòoìêoì paçäeëa. Ýòoò êëacc íe  ïoääepæèâaeòcÿ íè oäíèì èç ïoïóëÿpíûõ ápaóçepoâ, ïoýòoìó íe áóäeì ía íeì ocòaíaâëèâaòücÿ
  • lang – ýòoò ïceâäoêëacc óêaçûâaeò, êaê oòoápaæaòü coäepæèìoe ía íeêoòopoì ÿçûêe. Haïpèìep âû ìoæeòe ócòaíoâèòü cëeäóþùee còèëeâoe ïpaâèëo:

    p:lang(en){font-family: roman}

    Toãäa aáçaöû c "aíãëèécêèì" coäepæèìûì áóäeò oòoápaæaòücÿ øpèôòoì, ceìeécòâa Roman.

    <div lang="en">
    <h1></h1>Some title</h1>
    <p>Some text</p>
    </div>

    Hè oäèí èç ïoïóëÿpíûõ ápoóçepoâ íe ïoääepæèâaeò ýòoò êëacc

  ID-êëaccû

Ïo÷òè âce òeãè äoïócêaþò aòpèáóò id, c ïoìoùüþ CSS ìoæío coïocòaâèòü òeãó c äaííûì çía÷eíèeì id íeêoòopoe còèëeâoe ïpaâèëo. Èìÿ ID-êëacca oòäeëÿeòcÿ oò èìeíè òeãa çíaêoì # (peøeòêa).

#yellow {color: yellow}
h1#blue {color: blue}

Teïepü ìoæío coçäaòü cèíèé çaãoëoâoê, íaïècaâ <h1 id="blue"> èëè, ïpècâoèâ aòpèáóòó id ëþáoão òeãa çía÷eíèe yellow, oêpacèòü eão coäepæèìoe â æeëòûé öâeò. Óïoòpeáëeíèe còèëeé, coçäaííûõ òaêèì cïocoáoì oáëaäaeò cóùecòâeííûì íeäocòaòêoì – çía÷eíèe id óíèêaëüío è äoêóìeíòe.


  Còèëè äëÿ paçíûõ ócòpoécòâ âûâoäa

W3C ïpeäïoëaãaeò, ÷òo â íeäaëeêoì áóäóùeì HTML äoêóìeíòû áóäóò oòoápaæaòücÿ íe òoëüêo ía ìoíèòopaõ êoìïüþòepoâ, ío è ía òaêèõ ýêçoòè÷ecêèõ ócòpoécòâaõ, êaê ïpèíòepû, ïe÷aòaþùèe ïo Ápaéëþ(äëÿ cëeïûõ). Äëÿ ýòoão áûëa ïpèäóìaía cïeöèaëüíaÿ äèpeêòèâa @media.

Cèíòaêcèc:

@media cïècoê ócòpoécòâ
{
...
còèëeâûe ïpaâèëa
...
}

  Ïpèìep:
@media tv, projection
{
body{background: blue
}
}

B äaííûé ìoìeíò â còaíäapò CSS âõoäÿò cëeäóþùèe ócòpoécòâa: aural ( cèíòeaòopû pe÷è), braille (òaêòèëüíûé), embossed (ïpèíòepû, ïe÷aòaþùèe ïo Ápaéëþ), handheld (êapìaííûe), print (oáû÷íûe ïpèíòepû), projection (ïpoeêöèoííûe aïïapaòû), tty (òeëeòaéï), tv (òeëeâèçopû) è all (oáúeäèíÿeò âce òèïû).

Ceé÷ac íè oäèí èç ïoïóëÿpíûõ ápoóçepoâ íe ïoääepæèâaeò äèpeêòèâó @media.


  Êoììeíòapèè ê còèëÿì

Êaê è â äpóãèõ ÿçûêaõ ïpoãpaììèpoâaíèÿ, â CSS êoììeíòapèè òoëüêo ïpèâeòcòâóþòcÿ. Ho íe âçäóìaéòe ââoäèòü èõ êaê â HTML, CSS – íe HTML. Bû äoëæíû oôopìëÿòü êoììeíòapèè â câoèõ còèëÿõ ía÷èíaÿ èõ c cèìâoëoâ /* è çaêaí÷èâaÿ cèìâoëaìè */. He cêóïèòecü ía ècïoëüçoâaíèe êoììeíòapèeâ, oíè oáëeã÷aò ïoíèìaíèe còèëeé äëÿ âac è ëþäeé, êoòopûe, ìoæeò áûòü, áóäóò ìoäèôèöèpoâaòü âaøè còèëè â äaëüíeéøeì.






Bëaäèìèp Êëèìoíòoâè÷, Copyright (C) 2003
Ïpè ïoääepæêe ïpoeêòa MANUAL.RU