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ûëêè





  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&nbsp;ó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&nbsp;ó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.






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