нЯМНБШ CSS

нЯМНБМШЛ ОНМЪРХЕЛ CSS ЪБКЪЕРЯЪ ЯРХКЭ √ Р. Е. МЮАНП ОПЮБХК НТНПЛКЕМХЪ Х ТНПЛЮРХПНБЮМХЪ, ЙНРНПШИ ЛНФЕР АШРЭ ОПХЛЕМЕМ Й ПЮГКХВМШЛ ЩКЕЛЕМРЮЛ ЯРПЮМХЖШ. б ЯРЮМДЮПРМНЛ HTML ДКЪ ОПХЯБНЕМХЪ ЙЮЙНЛС-КХАН ЩКЕЛЕМРС НОПЕДЕКЕММШУ ЯБНИЯРБ (РЮЙХУ, ЙЮЙ ЖБЕР, ПЮГЛЕП, ОНКНФЕМХЕ МЮ ЯРПЮМХЖЕ Х Р. О.) ОПХУНДХКНЯЭ ЙЮФДШИ ПЮГ НОХЯШБЮРЭ ЩРХ ЯБНИЯРБЮ, ДЮФЕ ЕЯКХ МЮ НДМНИ ЯРПЮМХВЙЕ ДНКФМШ ПЮЯОНКЮЦЮРЭЯЪ 10 ХКХ 110 РЮЙХУ ЩКЕЛЕМРНБ, МХВСРЭ МЕ НРКХВЮЧЫХУЯЪ НДХМ НР ДПСЦНЦН. бШ ДНКФМШ АШКХ ДЕЯЪРЭ ХКХ ЯРН ДЕЯЪРЭ ПЮГ БЯРЮБХРЭ НДХМ Х РНР ФЕ ЙСЯНЙ HTML-ЙНДЮ Б ЯРПЮМХВЙС, СБЕКХВХБЮЪ ПЮГЛЕП ТЮИКЮ Х БПЕЛЪ ГЮЦПСГЙХ МЮ ЙНЛОЭЧРЕП ОПНЯЛЮРПХБЮЧЫЕЦН ЕЕ ОНКЭГНБЮРЕКЪ.

CSS ДЕИЯРБСЕР ДПСЦХЛ, АНКЕЕ СДНАМШЛ Х ЩЙНМНЛХВМШЛ ЯОНЯНАНЛ. дКЪ ОПХЯБНЕМХЪ ЙЮЙНЛС-КХАН ЩКЕЛЕМРС НОПЕДЕКЕММШУ УЮПЮЙРЕПХЯРХЙ БШ ДНКФМШ НДХМ ПЮГ НОХЯЮРЭ ЩРНР ЩКЕЛЕМР Х НОПЕДЕКХРЭ ЩРН НОХЯЮМХЕ ЙЮЙ ЯРХКЭ, Ю Б ДЮКЭМЕИЬЕЛ ОПНЯРН СЙЮГШБЮРЭ, ВРН ЩКЕЛЕМР, ЙНРНПШИ БШ УНРХРЕ НТНПЛХРЭ ЯННРБЕРЯРБСЧЫХЛ НАПЮГНЛ, ДНКФЕМ ОПХМЪРЭ ЯБНИЯРБЮ ЯРХКЪ, НОХЯЮММНЦН БЮЛХ. сДНАМН, МЕ ОПЮБДЮ КХ?

аНКЕЕ РНЦН, БШ ЛНФЕРЕ ЯНУПЮМХРЭ НОХЯЮМХЕ ЯРХКЪ МЕ Б РЕЙЯРЕ БЮЬЕИ ЯРПЮМХВЙХ, Ю Б НРДЕКЭМНЛ ТЮИКЕ √ ЩРН ОНГБНКХР ХЯОНКЭГНБЮРЭ НОХЯЮМХЕ ЯРХКЪ МЮ КЧАНЛ ЙНКХВЕЯРБЕ Web-ЯРПЮМХЖ. оНРПЪЯЮЧЫЕ СДНАМН! х ЕЫЕ НДМН, ЯБЪГЮММНЕ Я ЩРХЛ, ОПЕХЛСЫЕЯРБН √ БНГЛНФМНЯРЭ ХГЛЕМХРЭ НТНПЛКЕМХЕ КЧАНЦН ЙНКХВЕЯРБЮ ЯРПЮМХЖ, ХЯОПЮБХБ КХЬЭ НОХЯЮМХЕ ЯРХКЪ Б НДМНЛ (НРДЕКЭМНЛ) ТЮИКЕ.

йПНЛЕ РНЦН, CSS ОНГБНКЪЕР ПЮАНРЮРЭ ЯН ЬПХТРНБШЛ НТНПЛКЕМХЕЛ ЯРПЮМХЖ МЮ ЦНПЮГДН АНКЕЕ БШЯНЙНЛ СПНБМЕ, ВЕЛ ЯРЮМДЮПРМШИ HTML, ХГАЕЦЮЪ ХГКХЬМЕЦН СРЪФЕКЕМХЪ ЯРПЮМХЖ ЦПЮТХЙНИ.

дЮБЮИРЕ ПЮЯЯЛНРПХЛ, ЙЮЙ ЛШ ЛНФЕЛ БНОКНРХРЭ ЯРНКЭ ГЮЛЕВЮРЕКЭМШЕ БНГЛНФМНЯРХ Б ФХГМЭ.

оПЮЙРХВЕЯЙНЕ НЯБНЕМХЕ CSS

йЮЙ БЮЛ СФЕ ХГБЕЯРМН, ХМТНПЛЮЖХЪ Н ЯРХКЪУ ЛНФЕР ПЮЯОНКЮЦЮРЭЯЪ КХАН Б НРДЕКЭМНЛ ТЮИКЕ, КХАН МЕОНЯПЕДЯРБЕММН Б ЙНДЕ Web-ЯРПЮМХВЙХ. пЮЯОНКНФЕМХЕ НОХЯЮМХЪ ЯРХКЕИ Б НРДЕКЭМНЛ ТЮИКЕ ХЛЕЕР ЯЛШЯК Б ЯКСВЮЕ, ЕЯКХ БШ ОКЮМХПСЕРЕ ОПХЛЕМЪРЭ ЩРХ ЯРХКХ Й АНКЭЬЕЛС, ВЕЛ НДМЮ, ЙНКХВЕЯРБС ЯРПЮМХЖ. дКЪ ЩРНЦН МСФМН ЯНГДЮРЭ НАШВМШИ РЕЙЯРНБШИ ТЮИК, НОХЯЮРЭ Я ОНЛНЫЭЧ ЪГШЙЮ CSS МЕНАУНДХЛШЕ ЯРХКХ, ПЮГЛЕЯРХРЭ ЩРНР ТЮИК МЮ Web-ЯЕПБЕПЕ, Ю Б ЙНДЕ Web-ЯРПЮМХЖ, ЙНРНПШЕ АСДСР ХЯОНКЭГНБЮРЭ ЯРХКХ ХГ ЩРНЦН ТЮИКЮ, МСФМН АСДЕР ЯДЕКЮРЭ ЯЯШКЙС МЮ МЕЦН. дЕКЮЕРЯЪ ЩРН Я ОНЛНЫЭЧ РЕЦЮ <LINK>, ПЮЯОНКЮЦЮЧЫЕЦНЯЪ БМСРПХ РЕЦЮ <BODY> БЮЬХУ ЯРПЮМХЖ:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

оЕПБШЕ ДБЮ ОЮПЮЛЕРПЮ ЩРНЦН РЕЦЮ ЪБКЪЧРЯЪ ГЮПЕГЕПБХПНБЮММШЛХ ХЛЕМЮЛХ, РПЕАСЧЫХЛХЯЪ ДКЪ РНЦН, ВРНАШ ЯННАЫХРЭ АПНСГЕПС, ВРН МЮ ЩРНИ ЯРПЮМХВЙЕ АСДЕР ХЯОНКЭГНБЮРЭЯЪ CSS. рПЕРХИ ОЮПЮЛЕРП √ HREF= ╚URL╩ √ СЙЮГШБЮЕР МЮ ТЮИК, ЙНРНПШИ ЯНДЕПФХР НОХЯЮМХЪ ЯРХКЕИ. щРНР ОЮПЮЛЕРП ДНКФЕМ ЯНДЕПФЮРЭ КХАН НРМНЯХРЕКЭМШИ ОСРЭ Й ТЮИКС √ Б ЯКСВЮЕ, ЕЯКХ НМ МЮУНДХРЯЪ МЮ РНЛ ФЕ ЯЕПБЕПЕ, ВРН Х ДНЙСЛЕМР, ХГ ЙНРНПНЦН Й МЕЛС НАПЮЫЮЧРЯЪ √ ХКХ ОНКМШИ URL (╚http://...╩) Б ЯКСВЮЕ, ЕЯКХ ТЮИК ЯРХКЕИ МЮУНДХРЯЪ МЮ ДПСЦНЛ ЯЕПБЕПЕ.

бРНПНИ БЮПХЮМР, ОПХ ЙНРНПНЛ НОХЯЮМХЕ ЯРХКЕИ ПЮЯОНКЮЦЮЕРЯЪ Б ЙНДЕ Web­ЯРПЮМХВЙХ, БМСРПХ РЕЦЮ <BODY>, Б РЕЦЕ <STYLE type="text/css">... </STYLE>. б ЩРНЛ ЯКСВЮЕ БШ ЛНФЕРЕ ХЯОНКЭГНБЮРЭ ЩРХ ЯРХКХ ДКЪ ЩКЕЛЕМРНБ, ПЮЯОНКЮЦЮЧЫХУЯЪ Б ОПЕДЕКЮУ ЯРПЮМХВЙХ. оЮПЮЛЕРП type="text/css" ЪБКЪЕРЯЪ НАЪГЮРЕКЭМШЛ Х ЯКСФХР ДКЪ СЙЮГЮМХЪ АПНСГЕПС ХЯОНКЭГНБЮРЭ CSS.

х РПЕРХИ БЮПХЮМР, ЙНЦДЮ НОХЯЮМХЕ ЯРХКЪ ПЮЯОНКЮЦЮЕРЯЪ МЕОНЯПЕДЯРБЕММН БМСРПХ РЕЦЮ ЩКЕЛЕМРЮ, ЙНРНПШИ БШ НОХЯШБЮЕРЕ. щРН ДЕКЮЕРЯЪ Я ОНЛНЫЭЧ ОЮПЮЛЕРПЮ STYLE, ХЯОНКЭГСЕЛНЦН ОПХ ОПХЛЕМЕМХХ CSS Я АНКЭЬХМЯРБНЛ ЯРЮМДЮПРМШУ РЕЦНБ HTML. щРНР ЛЕРНД МЕФЕКЮРЕКЕМ, Х ОНМЪРМН ОНВЕЛС: НМ ОПХБНДХР Й ОНРЕПЕ НДМНЦН ХГ НЯМНБМШУ ОПЕХЛСЫЕЯРБ CSS √ БНГЛНФМНЯРХ НРДЕКЕМХЪ ХМТНПЛЮЖХХ НР НОХЯЮМХЪ НТНПЛКЕМХЪ ХМТНПЛЮЖХХ. бОПНВЕЛ, ЕЯКХ МЕНАУНДХЛН НОХЯЮРЭ КХЬЭ НДХМ ЩКЕЛЕМР, ЩРНР БЮПХЮМР ПЮЯОНКНФЕМХЪ НОХЯЮМХЪ ЯРХКЕИ РЮЙФЕ БОНКМЕ ОПХЛЕМХЛ.

дЮБЮИРЕ ПЮЯЯЛНРПХЛ ЛЕУЮМХГЛ, Я ОНЛНЫЭЧ ЙНРНПНЦН ЯРХКХ ОПХЯБЮХБЮЧРЯЪ ЩКЕЛЕМРЮЛ Web­ЯРПЮМХЖ. яЮЛШИ ОПНЯРНИ ЯКСВЮИ ОПХЯБНЕМХЪ ЙЮЙНЛС-КХАН ЩКЕЛЕМРС НОПЕДЕКЕММНЦН ЯРХКЪ БШЦКЪДХР РЮЙ:

мюгбюмхе_щкелемрю {ЯБНИЯРБН: ГМЮВЕМХЕ;},

цДЕ мюгбюмхе_щкелемрю √ ХЛЪ HTML­РЕЦЮ (H1, P, TD, A Х Р. Д.), Ю ОЮПЮЛЕРПШ Б ТХЦСПМШУ ЯЙНАЙЮУ √ ЯОХЯНЙ ЯБНИЯРБ ЩКЕЛЕМРЮ Х ОПХЯБНЕММШУ ХЛ ГМЮВЕМХИ. аНКЕЕ ОНДПНАМН ЙНЛЮМДШ ЪГШЙЮ CSS ЛШ ПЮЯЯЛНРПХЛ ВСРЭ ОНГФЕ.

оПХЛЕП:

H1 {font-size: 30pt; color: blue;}

б ЩРНЛ ОПХЛЕПЕ БЯЕЛ ГЮЦНКНБЙЮЛ МЮ ЯРПЮМХЖЕ, НТНПЛКЕММШЛ РЕЦНЛ м1, ОПХЯБЮХБЮЕРЯЪ ПЮГЛЕП ЬПХТРЮ 30 ОСМЙРНБ Х ЯХМХИ ЖБЕР.

рЮЙФЕ ЩКЕЛЕМРШ ЯРПЮМХЖ, ЯНГДЮММШЕ Я ХЯОНКЭГНБЮМХЕЛ CSS, ХЯОНКЭГСЧР ЛЕУЮМХГЛ МЮЯКЕДНБЮМХЪ: Р. Е. ЕЯКХ БШ ПЮЯОНКЮЦЮЕРЕ ХГНАПЮФЕМХЕ БМСРПХ РЕЦЮ <P>...</P>, НТНПЛКЕММНЦН Я ОНЛНЫЭЧ CSS, Я НРЯРСОЮЛХ, РЮЙ, ВРНАШ ОЮПЮЦПЮТ ГЮМХЛЮК РНКЭЙН НОПЕДЕКЕММСЧ ВЮЯРЭ ЬХПХМШ ЯРПЮМХЖШ, ХГНАПЮФЕМХЕ РЮЙФЕ СМЮЯКЕДСЕР ГМЮВЕМХЪ НРЯРСОНБ, СЙЮГЮММШЕ ДКЪ ЩРНЦН ОЮПЮЦПЮТЮ.

CSS ПЕЮКХГСЕР БНГЛНФМНЯРЭ ОПХЯБЮХБЮРЭ ЯРХКХ МЕ БЯЕЛ НДХМЮЙНБШЛ ЩКЕЛЕМРЮЛ ЯРПЮМХЖШ, Ю ХГАХПЮРЕКЭМН √ ДКЪ ЩРНЦН ХЯОНКЭГСЕРЯЪ ОЮПЮЛЕРП CLASS = "ХЛЪ ЙКЮЯЯЮ" ХКХ ХДЕМРХТХЙЮРНП ID=╚ХЛЪ ЩКЕЛЕМРЮ╩, ОПХЯБЮХБЮЧЫХЕЯЪ КЧАНЛС ЩКЕЛЕМРС ЯРПЮМХЖШ. пЮЯЯЛНРПХЛ ЩРХ БНГЛНФМНЯРХ ОНДПНАМЕЕ.

оЮПЮЛЕРП CLASS ОПХЛЕМЪЕРЯЪ Б ЯКСВЮЕ, ЕЯКХ МЕНАУНДХЛН ЯНГДЮРЭ НДХМЮЙНБШИ ЯРХКЭ ДКЪ МЕЯЙНКЭЙХУ, МН МЕ БЯЕУ ЩКЕЛЕМРНБ ЯРПЮМХЖШ (НДХМЮЙНБШУ ХКХ ПЮГМШУ).

оПХЛЕП:

  .b-Я {font-weight: bold; text-align: center}
  √ НОХЯЮМХЕ ЯРХКЪ ДКЪ ЙКЮЯЯЮ b-Я

бЯЕ ЩКЕЛЕМРШ ЙКЮЯЯЮ b-Я АСДСР НРНАПЮФЮРЭЯЪ ФХПМШЛ ЬПХТРНЛ Я БШПЮБМХБЮМХЕЛ ОН ЖЕМРПС ЯРПЮМХЖШ (ХКХ ЪВЕИЙХ РЮАКХЖШ).

  <P CLASS="b-Я">рЕЙЯР ОЮПЮЦПЮТЮ</P>
√ ОЮПЮЦПЮТС ОПХЯБНЕМ ЯРХКЭ ЙКЮЯЯЮ b-Я.

  <TD CLASS="b-c">РЕЙЯР</TD>
√ ЪВЕИЙЕ РЮАКХЖШ ОПХЯБНЕМ ЯРХКЭ ЙКЮЯЯЮ b-c.

яНДЕПФЮЫХИЯЪ Б ЪВЕИЙЕ РЕЙЯР АСДЕР НРНАПЮФЮРЭЯЪ ЯНЦКЮЯМН НОХЯЮМХЧ ЙКЮЯЯЮ.

рЮЙХЛ НАПЮГНЛ, БШ ЛНФЕРЕ ОПХЯБНХРЭ НОХЯЮММШИ ЯРХКЭ КЧАШЛ РЕЙЯРНБШЛ ЩКЕЛЕМРЮЛ ЯРПЮМХЖ. нАПЮРХРЕ БМХЛЮМХЕ, ВРН ОПХ МЮОХЯЮМХХ МЮГБЮМХЪ ЙКЮЯЯНБ МЕНАУНДХЛН ЯНАКЧДЮРЭ ПЕЦХЯРП ЯХЛБНКНБ, ЯНЦКЮЯМН РНЛС, ЙЮЙ БШ МЮГБЮКХ ЙКЮЯЯ Б НОХЯЮМХХ ЯРХКЪ!

оПХЯБНЕМХЕ ЯРХКЕИ Я ОНЛНЫЭЧ ХДЕМРХТХЙЮРНПНБ ОПХЛЕМЪЕРЯЪ Б ЯКСВЮЕ, ЕЯКХ ДЮММНЛС ХДЕМРХТХЙЮРНПС ЯННРБЕРЯРБСЕР РНКЭЙН НДХМ ЩКЕЛЕМР МЮ ЯРПЮМХЖЕ. еЯКХ ЩКЕЛЕМРНБ, ЙНРНПШЛ МЕНАУНДХЛН ОПХЯБНХРЭ РЮЙНИ ЯРХКЭ, МЕЯЙНКЭЙН √ ЩРН СФЕ ЙКЮЯЯ.

яБНИЯРБЮ ЩКЕЛЕМРНБ,
СОПЮБКЪЕЛШУ Я ОНЛНЫЭЧ CSS

б МЮЯРНЪЫЕЕ БПЕЛЪ ЪГШЙ CSS МЮЯВХРШБЮЕР ДНБНКЭМН АНКЭЬНЕ ЙНКХВЕЯРБН ЯБНИЯРБ ЩКЕЛЕМРНБ HTML, ЙНРНПШЛХ НМ ЛНФЕР СОПЮБКЪРЭ. мН ХГ-ГЮ РНЦН, ВРН ЩРНР ЯРЮМДЮПР ЕЫЕ НВЕМЭ ЛНКНД, Б ОНКМНЛ НАЗЕЛЕ ЕЦН ОНЙЮ МЕ ОНДДЕПФХБЮЧР МЮХАНКЕЕ ОНОСКЪПМШЕ АПНСГЕПШ (Netscape Navigator Х Microsoft Internet Explorer). оНЯКЕДМХЕ БЕПЯХХ ЩРХУ АПНСГЕПНБ ЛНЦСР ПЮАНРЮРЭ Я ДНБНКЭМН АНКЭЬХЛ ЙНКХВЕЯРБНЛ ЙНЛЮМД CSS, Ю БНР 3-Х БЕПЯХХ ХКХ ЯНБЯЕЛ МЕ ОНДДЕПФХБЮЧР ЕЦН (Netscape Navigator 3), ХКХ ОНДДЕПФХБЮЧР, МН КХЬЭ ВЮЯРХВМН (Microsoft IE 3). аНКЕЕ РНЦН, ОНЯЙНКЭЙС ПЮГПЮАНРВХЙХ ХГ ЩРХУ ЙНЛОЮМХИ МХЙЮЙ МЕ ЛНЦСР ДНЦНБНПХРЭЯЪ ЛЕФДС ЯНАНИ, ОНЯКЕДМХЕ БЕПЯХХ АПНСГЕПНБ ОНДДЕПФХБЮЧР МЕНДХМЮЙНБШИ МЮАНП ЯБНИЯРБ CSS. бЯЕ ЩРН ДЕКЮЕР ЛЮКНОПХЕЛКЕЛШЛ ХЯОНКЭГНБЮМХЕ CSS Б ОНКМНЛ НАЗЕЛЕ, РЮЙ ЙЮЙ, ОПХ ХЯОНКЭГНБЮМХХ CSS ДКЪ ТНПЛЮРХПНБЮМХЪ ЩКЕЛЕМРНБ ЯРПЮМХЖШ Х ОПНЯЛНРПЕ ЕЕ Я ОНЛНЫЭЧ АПНСГЕПЮ БЕПЯХХ МХФЕ 4­И, ЕЯРЭ АНКЭЬЮЪ БЕПНЪРМНЯРЭ СБХДЕРЭ МЕВРН РЮЙНЕ, ВРН БЮЛ МЕ ОНМПЮБХРЯЪ. оНЩРНЛС АСДЕР ПЮГСЛМЕЕ БНГДЕПФЮРЭЯЪ НР ХЯОНКЭГНБЮМХЪ CSS ДКЪ ТНПЛЮРХПНБЮМХЪ НЯМНБМНИ ЯРПСЙРСПШ ЯРПЮМХЖ ДН БЯЕНАЫЕЦН ОЕПЕУНДЮ МЮ ОНЯКЕДМХЕ БЕПЯХХ АПНСГЕПНБ. б РН ФЕ БПЕЛЪ, ОПХЛЕМЪЪ ╚АЕГНОЮЯМШЕ╩, Р. Е. ЯНБЛЕЯРХЛШЕ Я ЛЮЙЯХЛЮКЭМШЛ ЙНКХВЕЯРБНЛ АПНСГЕПНБ ЩКЕЛЕМРШ CSS, БШ ЛНФЕРЕ ЯХКЭМН НАКЕЦВХРЭ ЯЕАЕ ФХГМЭ Х ЯДЕКЮРЭ БЮЬХ Web-ЯРПЮМХВЙХ АНКЕЕ ОПХБКЕЙЮРЕКЭМШЛХ Б ОКЮМЕ ЬПХТРНБНЦН НТНПЛКЕМХЪ, Ю ОНКЭГНБЮРЕКХ, ОСРЕЬЕЯРБСЧЫХЕ ОН Internet Я ОНЛНЫЭЧ СЯРЮПЕБЬХУ АПНСГЕПНБ, ОПНЯРН ЩРНЦН МЕ СБХДЪР, МН РЮЙФЕ НМХ МЕ СБХДЪР Х РЕУ ЙНЬЛЮПНБ, ЙНРНПШЕ ОНЪБКЪЧРЯЪ ОПХ ХЯОНКЭГНБЮМХХ CSS ДКЪ БЕПЯРЙХ ЯРПЮМХЖ.

ябниярбю ьпхтрю

font-family хЯОНКЭГСЕРЯЪ ДКЪ СЙЮГЮМХЪ ЬПХТРЮ ХКХ ЬПХТРНБНЦН ЯЕЛЕИЯРБЮ, ЙНРНПШЛ АСДЕР НРНАПЮФЮРЭЯЪ ЩКЕЛЕМР.
P {font-family: Times New Roman, sans-serif;}
font-weight нОПЕДЕКЪЕР ЯРЕОЕМЭ ФХПМНЯРХ ЬПХТРЮ Я ОНЛНЫЭЧ РПЕУ ОЮПЮЛЕРПНБ: lighter, bold, bolder
B {font-weight: bolder;}
font-size сЯРЮМЮБКХБЮЕР ПЮГЛЕП ЬПХТРЮ. оЮПЮЛЕРП ЛНФЕР СЙЮГШБЮРЭЯЪ ЙЮЙ Б НРМНЯХРЕКЭМНИ (ОПНЖЕМРШ), РЮЙ Х ЮАЯНКЧРМНИ БЕКХВХМЕ (ОСМЙРШ, ОХЙЯЕКШ, ЯЮМРХЛЕРПШ)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

жбер щкелемрю х жбер тнмю

color нОПЕДЕКЪЕР ЖБЕР ЩКЕЛЕМРЮ
H1 {color: yellow;}
background-color сЯРЮМЮБКХБЮЕР ЖБЕР ТНМЮ ДКЪ ЩКЕЛЕМРЮ √ ХЛЕММН ДКЪ ЩКЕЛЕМРЮ, Ю МЕ ДКЪ ЯРПЮМХВЙХ. нАПЮРХРЕ БМХЛЮМХЕ, ВРН АПНСГЕПШ НРНАПЮФЮЧР ЩРН ЯБНИЯРБН ОН-ПЮГМНЛС: Microsoft IE НРБНДХР ОНД ТНМ ЩКЕЛЕМРЮ БЯЧ ДНЯРСОМСЧ ЬХПХМС ЯРПЮМХЖШ, Ю Netscape Navigator √ КХЬЭ ЬХПХМС, ГЮМХЛЮЕЛСЧ ЩРХЛ ЩКЕЛЕМРНЛ. оНЯЛНРПХРЕ ОПХЛЕП (ПХЯ. 3, 4 ), БНР ЕЦН ХЯУНДМШИ ЙНД:

<HTML>
<HEAD>
<TITLE>оПХЛЕП ХЯОНКЭГНБЮМХЪ CSS</TITLE>

<STYLE type=■text/css■>
H1 {font-size: 300%;}
</STYLE>
</HEAD>

<BODY bgcolor=white>
<center><BR>
<H1 style=■background-color: teal; color: white;■>Cascading</H1>
<H1 style=■background-color: navy; color: yellow;■>Style</H1>
<H1 style=■background-color: gold; color: brown;■>Sheets</H1>
</BODY>
</HTML>

б ЩРНЛ ОПХЛЕПЕ Б ПЮГДЕКЕ <STYLE> БЯЕЛ ЩКЕЛЕМРЮЛ <м1> МЮ ЩРНИ ЯРПЮМХВЙЕ АШК СЯРЮМНБКЕМ ПЮГЛЕП 300 % НР МНПЛШ. гЮРЕЛ ЙЮФДНЛС ХГ ЩКЕЛЕМРНБ <H1> АШКХ ОПХЯБНЕМШ ЯНАЯРБЕММШЕ ГМЮВЕМХЪ ЖБЕРЮ ТНМЮ Х ЖБЕРЮ ЯХЛБНКНБ.

ябниярбю рейярю

text-decoration сЯРЮМЮБКХБЮЕР ЩТТЕЙРШ НТНПЛКЕМХЪ ЬПХТРЮ, РЮЙХЕ, ЙЮЙ ОНДВЕПЙХБЮМХЕ ХКХ ГЮВЕПЙМСРШИ РЕЙЯР

H4 {text-decoration: underline;}
A {text-decoration: none;}
.wrong {text-decoration: line-through;}
text-align нОПЕДЕКЪЕР БШПЮБМХБЮМХЕ ЩКЕЛЕМРЮ.
P {text-align: justify}
H1 {text-align: center}
text-indent сЯРЮМЮБКХБЮЕР НРЯРСО ОЕПБНИ ЯРПНЙХ РЕЙЯРЮ. вЮЫЕ БЯЕЦН ХЯОНКЭГСЕРЯЪ ДКЪ ЯНГДЮМХЪ ОЮПЮЦПЮТНБ Я РЮАСКХПНБЮММНИ ОЕПБНИ ЯРПНЙНИ.
P {text-indent: 50pt;}
line-height сОПЮБКЪЕР ХМРЕПБЮКЮЛХ ЛЕФДС ЯРПНЙЮЛХ РЕЙЯРЮ.
P {line-height: 50 %}

ябниярбю цпюмхж

margin-left сЯРЮМЮБКХБЮЧР ГМЮВЕМХЪ НРЯРСОНБ БНЙПСЦ ЩКЕЛЕМРЮ.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
margin-right
margin-right
margin-top		 сЯРЮМЮБКХБЮЧР ГМЮВЕМХЪ НРЯРСОНБ БНЙПСЦ ЩКЕЛЕМРЮ.
IMG { margin-right: 20pt}
P { margin-left: 2cm}

едхмхжш хглепемхъ

px оХЙЯЕКШ
cm яЮМРХЛЕРПШ
mm лХККХЛЕРПШ
pt оСМЙРШ (РХОНЦПЮТ.)
% оПНЖЕМРШ

хРЮЙ, ОЕПЕИДЕЛ Й ХГСВЕМХЧ АЕГНОЮЯМШУ ЩКЕЛЕМРНБ CSS. нОХЯЮМХЕ ЯБНИЯРБ ЩКЕЛЕМРНБ Б CSS ЯНЯРНХР ХГ МЮГБЮМХЪ ЯБНИЯРБЮ Я ОНЯКЕДСЧЫХЛ ОПХЯБНЕМХЕЛ ЕЛС НОПЕДЕКЕММНЦН ГМЮВЕМХЪ. мЮГБЮМХЕ ЯБНИЯРБЮ Х ЕЦН ГМЮВЕМХЕ ПЮГДЕКЕМШ ДБНЕРНВХЕЛ.

сЙЮГШБЮЪ ЮАЯНКЧРМШЕ, Ю МЕ НРМНЯХРЕКЭМШЕ ПЮГЛЕПШ ЬПХТРНБ, БШ КХЬЮЕРЕ КЧДЕИ, ОПНЯЛЮРПХБЮЧЫХУ БЮЬХ ЯРПЮМХВЙХ, БНГЛНФМНЯРХ СБЕКХВХБЮРЭ ХКХ СЛЕМЭЬЮРЭ ПЮГЛЕП ЬПХТРНБ Я ОНЛНЫЭЧ ЯОЕЖХЮКЭМНИ ЙМНОНВЙХ Б АПНСГЕПЕ Б ЯННРБЕРЯРБХХ Я ПЮГПЕЬЕМХЕЛ ХУ ДХЯОКЕЪ Х ГПЕМХЕЛ. ьПХТРШ АСДСР НРНАПЮФЮРЭЯЪ РНКЭЙН РЮЙНЦН ПЮГЛЕПЮ, ЙНРНПШИ БШ СЙЮГЮКХ ОПХ МЮОХЯЮМХХ ЯРПЮМХВЙХ.

оНЩРНЛС, ЕЯКХ ХЯОНКЭГНБЮМХЕ ЮАЯНКЧРМШУ ПЮГЛЕПНБ ЬПХТРНБ МЕ НАСЯКНБКЕМН УСДНФЕЯРБЕММШЛ ГЮЛШЯКНЛ ХКХ ЙНБЮПМШЛ СЛШЯКНЛ, ПЕЙНЛЕМДСЧ БЮЛ ХЯОНКЭГНБЮРЭ ДКЪ ЩРХУ ЖЕКЕИ СЙЮГЮМХЕ ПЮГЛЕПНБ Б ОПНЖЕМРЮУ. б ЩРНЛ ЯКСВЮЕ ПЮГЛЕП ЬПХТРЮ АСДЕР ЛЕМЭЬЕ (АНКЭЬЕ) МЮ СЙЮГЮММНЕ БЮЛХ ЙНКХВЕЯРБН ОПНЖЕМРНБ, ВЕЛ ОПХ НТНПЛКЕМХХ ЕЦН Я ОНЛНЫЭЧ ЯРЮМДЮПРМНЦН HTML-РЕЦЮ.

еЯРЭ ЕЫЕ НДМЮ МЕАНКЭЬЮЪ, МН НВЕМЭ ОНКЕГМЮЪ УХРПНЯРЭ √ ЩРН ЯОНЯНА ЯЙПШРЭ НР СЯРЮПЕБЬХУ АПНСГЕПНБ НОХЯЮМХЪ ЯРХКЕИ, ПЮЯОНКЮЦЮЧЫХУЯЪ Б РЕЦЕ <STYLE>, БМСРПХ ПЮГДЕКЮ<HEAD>. оНЯЙНКЭЙС АПНСГЕП АШК МЮОХЯЮМ МЕЯЙНКЭЙН КЕР МЮГЮД, ЙНЦДЮ МХЙЮЙНЦН CSS ЕЫЕ Х Б ОКЮМЮУ МЕ АШКН, НМ ОПНЯРН МЕ ОНИЛЕР, ВРН ЩРН РЮЙНЕ МЮОХЯЮМН БМСРПХ <STYLE>┘</STYLE>, Х БШДЮЯР БЯЕ НОХЯЮМХЪ ЯРХКЕИ МЮ ЯРПЮМХВЙС, ЙЮЙ НАШВМШИ РЕЙЯР. дКЪ РНЦН ВРНАШ ОПЕДНРБПЮРХРЭ ЩРН, МЕНАУНДХЛН ГЮЙКЧВХРЭ НОХЯЮМХЪ ЯРХКЕИ Б РЕЦ ЙНЛЛЕМРЮПХЕБ. дЕКЮЕРЯЪ ЩРН НВЕМЭ ОПНЯРН.

<HEAD>
<STYLE type="text/css">
<!--
НОХЯЮМХЪ ЯРХКЕИ
-- >
</STYLE>
</HEAD>

ЦДЕ
<!--  √ РЕЦ, НРЙПШБЮЧЫХИ ЙНЛЛЕМРЮПХИ, Ю 
╜╜> √ ГЮЙПШБЮЧЫХИ.

сЯРЮПЕБЬХЕ АПНСГЕПШ ОНЯВХРЮЧР БЯЕ ГЮЙКЧВЕММНЕ ЛЕФДС РЕЦЮЛХ ЙНЛЛЕМРЮПХЕБ ХМТНПЛЮЖХЕИ МЕНРНАПЮФЕММНИ, Ю МНБШЕ Х ЯННАПЮГХРЕКЭМШЕ АПНСГЕПШ НОПЕДЕКЪР, ВРН ЩРН ≈ НОХЯЮМХЕ ЯРХКЕИ, Х ГЮДЕИЯРБСЧР ХУ.

еЫЕ НДХМ ХГ ХМРЕПЕЯМШУ БЮПХЮМРНБ ОПХЛЕМЕМХЪ CSS ЯЙПШБЮЕРЯЪ ГЮ, ЙЮГЮКНЯЭ АШ, ОПНЯРНИ БНГЛНФМНЯРЭЧ: БШ ЛНФЕРЕ СЙЮГШБЮРЭ ГМЮВЕМХЪ НРЯРСОНБ БНЙПСЦ НАЗЕЙРНБ, ЙЮЙ НРПХЖЮРЕКЭМШЕ БЕКХВХМШ! щРН ОНГБНКЪЕР МЮЙКЮДШБЮРЭ НДХМ ЯКНИ РЕЙЯРЮ МЮ ДПСЦНИ Х ОНКСВЮРЭ БЕЯЭЛЮ ХМРЕПЕЯМШЕ Х ОПХБКЕЙЮРЕКЭМШЕ ПЕГСКЭРЮРШ.

дНАХРЭЯЪ РЮЙНЦН ЩТТЕЙРЮ МЕ НВЕМЭ ЯКНФМН, ДЮБЮИРЕ ОНОПНАСЕЛ ЯНГДЮРЭ ЯРПЮМХВЙС Я ГЮЦНКНБЙНЛ, ЙНРНПШИ АСДЕР БШЦКЪДЕРЭ РПЕУЛЕПМШЛ, МН МЕ АСДЕР ХЯОНКЭГНБЮРЭ ЦПЮТХЙС.

яНГДЮДХЛ МНБШИ html-ТЮИК Х ЯНЯРЮБХЛ НОХЯЮМХЕ ЯРХКЕИ ДКЪ РПЕУ НАЗЕЙРНБ:

<HEAD>
<STYLE type="text/css">
BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}
.z1 { color: silver; margin-top: 100px; margin-left: 70px;}
.z2 {color: navy; margin-top: -118px; margin-left: 68px;} 
</STYLE>
</HEAD>

б ЩРНЛ НОХЯЮМХХ ЛШ ОПХЯБНХКХ <BODY> (БОПНВЕЛ, ЩРН ЛНЦ АШРЭ ОПЮЙРХВЕЯЙХ КЧАНИ ДПСЦНИ РЕЦ) ПЮГЛЕП, ЬПХТР Х МЮВЕПРЮМХЕ √ Б РЮЙНЛ ЯРХКЕ АСДСР НРНАПЮФЮРЭЯЪ БЯЕ ЩКЕЛЕМРШ ЯРПЮМХЖШ. щРН АШКН ЯДЕКЮМН КХЬЭ ПЮДХ ЯРПЕЛКЕМХЪ СЛЕМЭЬХРЭ ПЮГЛЕП ТЮИКЮ ЯРПЮМХВЙХ, БЛЕЯРН ЩРНЦН ЛНФМН АШКН НОХЯЮРЭ ЩРХ ОЮПЮЛЕРПШ ДБЮФДШ: ДКЪ ЙЮФДНЦН ХГ ЙКЮЯЯНБ z. дЮКЕЕ ЛШ НОХЯШБЮЕЛ ДБЮ ЯРХКЪ, ЙНРНПШЕ НРКХВЮЧРЯЪ ЖБЕРНЛ Х ПЮГЛЕПНЛ НРЯРСОНБ БНЙПСЦ МХУ: МХФМХИ ЯКНИ НОХЯШБЮЕРЯЪ ЯРХКЕЛ z1, Ю БЕПУМХИ √ z2. хЯОНКЭГСЪ НРПХЖЮРЕКЭМШЕ ГМЮВЕМХЪ НРЯРСОНБ Х ОНДАХПЮЪ МСФМНЕ ГМЮВЕМХЕ, ЛШ ДНАХБЮЕЛЯЪ РНЦН, ВРН БЕПУМХИ ЯКНИ ЙЮЙ АШ МЮОНКГЮЕР МЮ ОПЕДШДСЫХИ...

<BODY bgcolor=white>

<DIV class="z1">EC-NET</DIV>
<DIV class="z2">EC-NET</DIV>

</BODY>

нРЙПНЕЛ МЮЬ КЧАХЛШИ Web-ПЕДЮЙРНП Notepad Х ЯНГДЮДХЛ ТЮИК Я АСДСЫХЛ МЮГБЮМХЕЛ styles.css (МЮГБЮМХЕ ТЮИКЮ ЛНФЕР АШРЭ КЧАШЛ). нОХЬЕЛ Б ЩРНЛ ТЮИКЕ ЯРХКЭ ОЮПЮЦПЮТЮ <P>, ЙНРНПШИ АСДЕР ХЯОНКЭГНБЮРЭЯЪ МЮ БЯЕУ ЯРПЮМХВЙЮУ МЮЬЕЦН ЯЮИРЮ:

P {
font-family: Times New Roman, serif; 
color: #000000; 
margin-left: 15%; 
margin-right: 15%; 
margin-top: 1pt; 
margin-bottom: 1pt;
text-indent: 1cm; 
text-align: justify;
}

бМСРПХ НОХЯЮМХЪ ЯРХКЪ ДКЪ СДНАЯРБЮ ТНПЛЮРХПНБЮМХЪ БШ ЛНФЕРЕ ХЯОНКЭГНБЮРЭ КЧАНЕ ЙНКХВЕЯРБН ОПНАЕКНБ Х ОЕПЕМНЯНБ ЯРПНЙ √ ОПХ ВРЕМХХ ЯРХКЪ АПНСГЕП ОПНЯРН НРАПНЯХР БЯЕ КХЬМХЕ ОПНАЕКШ.

б ЩРНЛ ЯРХКЕ ЛШ ГЮДЮКХ, ВРН ОЮПЮЦПЮТШ <P> МЮ БЯЕУ ЯРПЮМХВЙЮУ, ЙНРНПШЕ ХЯОНКЭГСЧР ЩРН НОХЯЮМХЕ, АСДСР НРНАПЮФЮРЭЯЪ ЬПХТРНЛ Times New Roman ХКХ Б ЯКСВЮЕ, ЕЯКХ ЩРНР ЬПХТР МЮ ЛЮЬХМЕ МЕ СЯРЮМНБКЕМ, ДПСЦХЛ ЬПХТРНЛ, МН ХГ ЩРНЦН ЯЕЛЕИЯРБЮ (serif). жБЕР ЬПХТРЮ ЛШ СЯРЮМНБХКХ ВЕПМШИ, БШПЮБМХБЮМХЕ √ ОНКМНЕ (ОН НАЕХЛ ЯРНПНМЮЛ).

рЮЙФЕ ЛШ СЯРЮМНБХКХ ДКЪ ОЮПЮЦПЮТЮ ПЪД ГМЮВЕМХИ НРЯРСОНБ. щРН АШКН ЯДЕКЮМН ЯН ЯКЕДСЧЫЕИ ЖЕКЭЧ: ОН СЛНКВЮМХЧ ОЮПЮЦПЮТ Б HTML НРНАПЮФЮЕРЯЪ ПЮБМШЛ ОПЮЙРХВЕЯЙХ 95 % ЯРПЮМХЖШ Х Я ХМРЕПБЮКЮЛХ ЛЕФДС ОЮПЮЦПЮТЮЛХ, ПЮБМШЛХ 180 % ЛЕФЯРПНВМНЦН ХМРЕПБЮКЮ. вХРЮРЭ РЮЙХЕ ОЮПЮЦПЮТШ МЕ НВЕМЭ СДНАМН, РЮЙ ЙЮЙ ХМРЕПБЮКШ ЛЕФДС МХЛХ ЯКХЬЙНЛ БЕКХЙХ, Ю ЬХПХМЮ ОЮПЮЦПЮТЮ ЯКХЬЙНЛ АНКЭЬЮЪ. оНЯЛНРПХРЕ МЮ ФСПМЮК, ЙНРНПШИ БШ ЯЕИВЮЯ ДЕПФХРЕ Б ПСЙЮУ: РЕЙЯР ЯБЕПЯРЮМ Б ЙНКНМЙХ ДКЪ РНЦН, ВРНАШ ЕЦН АШКН СДНАМЕЕ ВХРЮРЭ. б ЯРХКЕ ОЮПЮЦПЮТЮ, ЙНРНПШИ ЛШ ЯНГДЮКХ, СЯРЮМНБКЕМШ АНЙНБШЕ НРЯРСОШ Б 15 % ЬХПХМШ НЙМЮ Х БЕПРХЙЮКЭМШЕ НРЯРСОШ Б 1 ОСМЙР √ РЮЙ РЕЙЯР ЯРЮРЭХ АСДЕР ЦНПЮГДН ВХРЮАЕКЭМЕЕ.

дЮБЮИРЕ РЮЙ ФЕ ЯНГДЮДХЛ ЯРХКЭ ДКЪ ГЮЦНКНБЙНБ ЯРЮРЕИ:

H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt; 
color: black;
margin-left: 20%; 
margin-top: 1cm; 
text-align: left;
}

бЯЕ ГЮЦНКНБЙХ МЮЬХУ ЯРПЮМХЖ, НТНПЛКЕММШЕ РЕЦНЛ <H2>, АСДСР НРНАПЮФЮРЭЯЪ ФХПМШЛ ЬПХТРНЛ Verdana ХКХ, ЕЯКХ ЩРНР ЬПХТР МЕ СЯРЮМНБКЕМ, ЬПХТРНЛ Arial. пЮГЛЕП ГЮЦНКНБЙЮ ЛШ СЯРЮМНБХЛ ПЮБМШЛ 14 ОСМЙРЮЛ, ЖБЕР ВЕПМШИ, НРЯРСО ЯКЕБЮ ПЮБЕМ 20 % ЬХПХМШ ЯРПЮМХЖШ, Ю НРЯРСО ЯБЕПУС √ 1 ЯЛ. гЮЦНКНБНЙ АСДЕР БШПЮБМХБЮРЭЯЪ НРМНЯХРЕКЭМН КЕБНЦН ЙПЮЪ ЯРПЮМХЖШ.

аКЮЦНДЮПЪ РНЛС, ВРН АНЙНБШЕ НРЯРСОШ ГЮЦНКНБЙЮ Х ОЮПЮЦПЮТЮ СЯРЮМНБКЕМШ МЮЛХ Б ОПНЖЕМРЮУ НР ЬХПХМШ НЙМЮ АПНСГЕПЮ, ОПХ ОПНЯЛНРПЕ МЮЬХУ ЯРПЮМХВЕЙ МЮ ЙНЛОЭЧРЕПЮУ Я ПЮГМШЛ ПЮГПЕЬЕМХЕЛ ДХЯОКЕЪ ОПНОНПЖХХ Х ПЮЯОНКНФЕМХЕ ГЮЦНКНБЙЮ, НЯМНБМНЦН РЕЙЯРЮ Х НРЯРСОНБ АСДСР ЯНУПЮМЕМШ.

дКЪ РНЦН ВРНАШ ╚ОПХБЪГЮРЭ╩ ЯНГДЮММШЕ МЮЛХ ЯРХКХ Й МЮЬХЛ ЯРПЮМХВЙЮЛ, БН БЯЕ html-ТЮИКШ Б ПЮГДЕКЕ <HEAD> ЛШ ДНКФМШ ОНЛЕЯРХРЭ ЯРПНЙС ЯН ЯЯШКЙНИ МЮ ТЮИК ЯРХКЕИ Х Я СЙЮГЮМХЕЛ НА ХЯОНКЭГНБЮМХХ CSS:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

оНЯЙНКЭЙС ТЮИК ЯН ЯРХКЪЛХ АСДЕР МЮУНДХРЭЯЪ Б РНЛ ФЕ ЙЮРЮКНЦЕ ЯЕПБЕПЮ, ВРН Х НЯРЮКЭМШЕ ЯРПЮМХВЙХ, ОЮПЮЛЕРП HREF="URL" Б МЮЬЕЛ ЯКСВЮЕ АСДЕР ОПНЯРН ХЛЕМЕЛ МЮЬЕЦН ТЮИКЮ ЯРХКЕИ (styles.css).