йЮЯЙЮДМШЕ РЮАКХЖШ ЯРХКЕИ, ХКХ CSS ДКЪ МЮВХМЮЧЫХУ (ОПЮЙРХЙСЛ "ОПЮБХКЭМНЦН" HTML) вЮЯРЭ 1.

пСЯЯЙЮЪ ВЮЯРЭ хМРЕПМЕРЮ ПЮЯРЕР ДЕМЭ НРН ДМЪ. гЮ ОНЯКЕДМХЕ ЦНД-ДБЮ ЯСЛЛЮПМШИ НАЗЕЛ ПСЯЯЙНЪГШВМШУ ЯРПЮМХЖ СБЕКХВХКЯЪ АНКЕЕ ВЕЛ Б ДБЮ ПЮГЮ. яЕЦНДМЪ Б пНЯЯХХ СФЕ МХЙНЦН МЕ СДХБХЬЭ ЯКНБНЯНВЕРЮМХЕЛ ╚ДНЛЮЬМЪЪ ЯРПЮМХВЙЮ╩ ХКХ ЮМЦКХИЯЙХЛ ЯКНБНЛ ╚homepage╩. еЯКХ ПЮМЭЬЕ ЯНГДЮМХЕ web-ЯРПЮМХЖ АШКН СДЕКНЛ ХГАПЮММШУ Х МЮ ОПНЯРНПЮУ пСМЕРЮ ЖЮПХКХ КХЬЭ ОПХГМЮММШЕ ╚ЙХРШ╩ web-ДХГЮИМЮ, РН РЕОЕПЭ ДЮФЕ ЛНИ ДЕЯЪРХКЕРМХИ ЯШМХЬЙЮ Б ЯБНАНДМНЕ НР СВЕАШ БПЕЛЪ ЛЮЯРЕПХР ОНРХУНМЕВЙС ЯНАЯРБЕММСЧ ЯРПЮМХЖС, ЯНАХПЮЪЯЭ ПЮГЛЕЯРХРЭ ЕЕ МЮ ЙЮЙНЛ-МХАСДЭ АЕЯОКЮРМНЛ ЯЕПБЕПЕ (БПНДЕ narod.ru ХКХ boom.ru), ЙНРНПШУ ГЮ ОНЯКЕДМХИ ЦНД РНФЕ ПЮГБЕКНЯЭ Б пСМЕРЕ ЛМНФЕЯРБН. Web-ЙНМЯРПСХПНБЮМХЕЛ ЯЕЦНДМЪ МЕ ГЮМХЛЮЕРЯЪ, МЮБЕПМНЕ, РНКЭЙН МЕ ОНДЙКЧВЕММШИ Й яЕРХ ХКХ КЕМХБШИ. лМНФЕЯРБН КЧДЕИ, ОНАКСФДЮБ ОН ОПНЯРНПЮЛ хМРЕПМЕРЮ, ПЮМН ХКХ ОНГДМН ГЮДСЛШБЮЧРЯЪ Н ЯНГДЮМХХ ЯНАЯРБЕММНИ ЯРПЮМХВЙХ. дКЪ МХУ-РН Х МЮОХЯЮМЮ ЩРЮ ЯРЮРЭЪ.

пЕВЭ ГДЕЯЭ ОНИДЕР Н ╚ОПЮБХКЭМНЛ╩ HTML ДКЪ МНБХВЙНБ, Ю ХЛЕММН √ Н МЕЙНРНПШУ ДНОНКМХРЕКЭМШУ БНГЛНФМНЯРЪУ, НТХЖХЮКЭМН СРБЕПФДЕММШУ ХМРЕПМЕР-ЙНМЯНПЖХСЛНЛ (http://www.w3.org/). б ВЮЯРМНЯРХ, Н МЕЙНРНПШУ БНГЛНФМНЯРЪУ, ОПЕДНЯРЮБКЪЕЛШУ ДХМЮЛХВЕЯЙХЛ HTML (DHTML). ю ЕЫЕ РНВМЕЕ √ Н РНЛ, ЙЮЙ Я ОНЛНЫЭЧ CSS (cascade style sheets, ХКХ ЙЮЯЙЮДМШУ РЮАКХЖ ЯРХКЕИ) ЯДЕКЮРЭ ЯРПЮМХВЙС, ЙНРНПЮЪ АСДЕР БШЦКЪДЕРЭ КСВЬЕ, ВЕЛ ЯРПЮМХЖШ, ЯНГДЮММШЕ ОНЯПЕДЯРБНЛ ╚ЙКЮЯЯХВЕЯЙНЦН╩ HTML, ОПХ ЩРНЛ ГЮМХЛЮРЭ ЛЕМЭЬЕ ЛЕЯРЮ Х, ЯННРБЕРЯРБЕММН, АШЯРПЕЕ ЦПСГХРЭЯЪ.

лЮКН ЙРН ХГ КЧДЕИ, БОЕПБШЕ ПЕЬХБЬХУЯЪ МЮ ЯНГДЮМХЕ ЯНАЯРБЕММНЦН web-ОПЕДЯРЮБХРЕКЭЯРБЮ, БННПСФЮЕРЯЪ notepad'НЛ ХКХ ДПСЦХЛ РЕЙЯРНБШЛ ПЕДЮЙРНПНЛ БПНДЕ HomeSite. нАШВМН МНБХВНЙ ДСЛЮЕР ЯКЕДСЧЫХЛ НАПЮГНЛ: ╚бЯЕ ЯБНХ ОПХБШВМШЕ ДНЙСЛЕМРШ Ъ ЯНГДЮЧ ОНЯПЕДЯРБНЛ ОПНЦПЮЛЛ WISIWYG (╚ВРН БХФС, РН Х ОНКСВЮЧ╩) √ РЕЙЯРШ Ъ ЯНГДЮЧ Б MS Word, ОПЕГЕМРЮЖХХ √ Б MS PowerPoint, РЮЙ БНГЭЛС-ЙЮ Ъ Х ДКЪ ЯНГДЮМХЪ web-ЯРПЮМХВЙХ ОНДНАМСЧ ОПНЦПЮЛЛС √ MS FrontPage...╩ оПХМЪБ РЮЙНЕ ПЕЬЕМХЕ, МНБНЪБКЕММШИ web-БЮЪРЕКЭ ДБЮФДШ НАЙПЮДШБЮЕР ЯЕАЪ.

оЕПБШИ ПЮГ √ Б ЯЛШЯКЕ ПЮЖХНМЮКЭМНЦН ХЯОНКЭГНБЮМХЪ web-ОПНЯРПЮМЯРБЮ. дЕКН Б РНЛ, ВРН БЯЕ БХГСЮКЭМШЕ ПЕДЮЙРНПШ web-ЯРПЮМХЖ, Й ЙНРНПШЛ НРМНЯХРЯЪ Х СОНЛЪМСРШИ MS FrontPage, БЯРЮБКЪЧР Б ЯНГДЮБЮЕЛШЕ ЯРПЮМХЖШ ╚НРЯЕАЪРХМС╩ √ ЛМНФЕЯРБН КХЬМХУ МЕМСФМШУ РЕЦНБ. хЯЙКЧВЕМХЕЛ, ОНФЮКСИ, ЪБКЪЕРЯЪ Macromedia Dreamweaver (ГЮ ВРН НМ ЯМХЯЙЮК ЯЕАЕ ГЮЯКСФЕММСЧ ОНОСКЪПМНЯРЭ ЙЮЙ ЯПЕДХ МНБХВЙНБ, РЮЙ Х ЯПЕДХ ОПНТЕЯЯХНМЮКНБ). мН ДЮФЕ НМ Б ЩРНЛ ОКЮМЕ МЕ ХДЕЮКЕМ √ КЧАХР ГЮЯНПЪРЭ ХЯУНДМШИ РЕЙЯР ЙЮБШВЙЮЛХ (Б АНКЭЬХМЯРБЕ ЯКСВЮЕБ ЯНБЕПЬЕММН МЕМСФМШЛХ), Ю РЮЙФЕ БЯРЮБКЪРЭ ЯХЛБНКШ МЕПЮГПШБМНЦН ОПНАЕКЮ Б ЯЮЛШУ МЕОНДУНДЪЫХУ ДКЪ ЩРНЦН ЛЕЯРЮУ. яОПЮБЕДКХБНЯРХ ПЮДХ ЯРНХР НРЛЕРХРЭ, ВРН БЯЕ БХГСЮКЭМШЕ ПЕДЮЙРНПШ ОПЕДНЯРЮБКЪЧР ОНКЭГНБЮРЕКЧ БНГЛНФМНЯРЭ ПЮАНРЮРЭ Я ХЯУНДМШЛ ЙНДНЛ ЯНГДЮБЮЕЛНИ ЯРПЮМХЖШ, МН ЯРНКЭ КЧАХЛШИ ЛМНЦХЛХ FrontPage БМНБЭ ОЕПЕДЕКЮЕР БЯЕ ОН-ЯБНЕЛС, ЯРНХР БЮЛ РНКЭЙН ОЕПЕЙКЧВХРЭЯЪ ЯМНБЮ Б БХГСЮКЭМШИ ПЕФХЛ.

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

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

кНЦХВЕЯЙНЕ Х ТХГХВЕЯЙНЕ ТНПЛЮРХПНБЮМХЕ

йКЮЯЯХВЕЯЙХИ HTML БЕПЯХХ 3.2, МЮХАНКЕЕ ПЮЯОПНЯРПЮМЕММШИ МЮ ДЮММШИ ЛНЛЕМР Б яЕРХ, ОПЕДНЯРЮБКЪЕР МЮЛ ЯПЕДЯРБЮ ТХГХВЕЯЙНЦН ТНПЛЮРХПНБЮМХЪ ДНЙСЛЕМРНБ, ДКЪ ВЕЦН ХЛЕЧРЯЪ ЯОЕЖХЮКЭМШЕ РЕЦХ (МЮОПХЛЕП, РЕЦХ <font>, <b>, <i>) Х ЛМНФЕЯРБН ПЮГКХВМШУ ЮРПХАСРНБ (size, color, height, width Х Р. О.). нЯНАЕММНЯРХ web-ТНПЛЮРХПНБЮМХЪ ОПХМСФДЮЧР МЮЯ ЯМНБЮ Х ЯМНБЮ ОПНОХЯШБЮРЭ ЩРХ РЕЦХ Х ЮРПХАСРШ ДКЪ ЙЮФДНЦН МНБНЦН ЮАГЮЖЮ, ВРН, ЙНМЕВМН, ЯХКЭМН СБЕКХВХБЮЕР ПЮГЛЕП ЙНДЮ ЯРПЮМХЖ. йПНЛЕ РНЦН, ОПХ РЮЙНЛ ЯОНЯНАЕ ТНПЛЮРХПНБЮМХЪ Б ЯКСВЮЕ ЮМЮКХГЮ ЯРПСЙРСПШ ДНЙСЛЕМРЮ НЯРЮЕРЯЪ МЕОНМЪРМШЛ, ОНВЕЛС ДЮММНЕ ЯКНБН БШДЕКЕМН ФХПМШЛ МЮВЕПРЮМХЕЛ √ ОПНЯРН ДКЪ ЙПЮЯНРШ ХКХ ФЕ ВРНАШ НАПЮРХРЭ МЮ ЯЕАЪ НЯНАНЕ БМХЛЮМХЕ ЙНМЕВМНЦН ОНКЭГНБЮРЕКЪ? еЯКХ ФХБНИ ВЕКНБЕЙ ЕЫЕ Б ЯНЯРНЪМХХ УСДН-АЕДМН ПЮГНАПЮРЭЯЪ Б КНЦХВЕЯЙХУ ОНЯРПНЕМХЪУ ЯРПЮМХЖ МЮ ЙКЮЯЯХВЕЯЙНЛ HTML, РН Н ОНХЯЙНБШУ ЛЮЬХМЮУ ХКХ, Й ОПХЛЕПС, ЦНКНЯНБШУ АПНСГЕПЮУ ЩРНЦН МЕ ЯЙЮФЕЬЭ. хЛ БШМЭ ДЮ ОНКНФЭ ВХЯРСЧ КНЦХЙС Б ЯРПСЙРСПЕ ЯРПЮМХЖШ. хЛЕММН ХГ-ГЮ РЮЙНИ ╚МЕОНДБКЮЯРМНЯРХ╩ КНЦХВЕЯЙНЛС ЮМЮКХГС ДЮММШИ ЯОНЯНА ТНПЛЮРХПНБЮМХЪ АШК МЮГБЮМ ТХГХВЕЯЙХЛ ТНПЛЮРХПНБЮМХЕЛ. б ОПНРХБНБЕЯ ЕЛС ОПХ ЯНГДЮМХХ МНБНИ ЯОЕЖХТХЙЮЖХХ HTML 4.0 БН ЦКЮБС СЦКЮ АШКН ОНЯРЮБКЕМН КНЦХВЕЯЙНЕ ТНПЛЮРХПНБЮМХЕ, РН ЕЯРЭ РЮЙНЕ ТНПЛЮРХПНБЮМХЕ, ОПХ ЙНРНПНЛ ЯРПСЙРСПЮ Х НТНПЛКЕМХЕ ДНЙСЛЕМРЮ АШКХ АШ ВЕРЙН ПЮГДЕКЕМШ. щРНР ЯОНЯНА ТНПЛЮРХПНБЮМХЪ ПЕЙНЛЕМДНБЮМ Й ОПХЛЕМЕМХЧ ХМРЕПМЕР-ЙНМЯНПЖХСЛНЛ, РЮЙ ЙЮЙ ОПЕДНЯРЮБКЪЕР ПЮЯЬХПЕММШЕ БНГЛНФМНЯРХ ОНХЯЙЮ ХМТНПЛЮЖХХ Б яЕРХ, ОНГБНКЪЕР АНКЕЕ РНВМН ЯРПСЙРСПХПНБЮРЭ Х ЮМЮКХГХПНБЮРЭ ХМТНПЛЮЖХЧ ОНЯПЕДЯРБНЛ ОНХЯЙНБШУ ЛЮЬХМ, Ю РЮЙФЕ ЯСЫЕЯРБЕММН СЛЕМЭЬЮЕР ПЮГЛЕП ЯРПЮМХЖ Х БПЕЛЪ ХУ ОНКМНИ ГЮЦПСГЙХ. пЕЮКХГСЕРЯЪ ПЮГДЕКЕМХЕ ЯРПСЙРСПШ Х НТНПЛКЕМХЪ ДНЙСЛЕМРЮ ЙЮЙ ПЮГ Я ОНЛНЫЭЧ CSS.

яРНХР НРЛЕРХРЭ РНР ТЮЙР, ВРН ГЮВЮРЙХ КНЦХВЕЯЙНЦН ТНПЛЮРХПНБЮМХЪ ОПХЯСРЯРБНБЮКХ Х Б ЙКЮЯЯХВЕЯЙНЛ HTML √ РЕЦХ <h1>, <h2>, <blockquote>, АЕГСЯКНБМН, ЯОНЯНАЯРБНБЮКХ ПЮГДЕКЕМХЧ ДНЙСЛЕМРНБ МЮ МЕЙНРНПШЕ КНЦХВЕЯЙХЕ АКНЙХ. мН ЛМНЦХЕ ЮБРНПШ ЯРПЮМХЖ ХЯОНКЭГНБЮКХ, ДЮ Х ОН ЯЕИ ДЕМЭ ОПНДНКФЮЧР ХЯОНКЭГНБЮРЭ ЩРХ РЕЦХ МЕ ОН МЮГМЮВЕМХЧ: Б ЯБЪГХ ЯН ЯЙСДНЯРЭЧ ЯПЕДЯРБ ДКЪ НТНПЛКЕМХЪ ЯРПЮМХЖШ РЕЦХ ГЮЦНКНБЙНБ, МЮОПХЛЕП, ХЯОНКЭГНБЮКХЯЭ ДКЪ БШДЕКЕМХЪ РЮЙХУ ЩКЕЛЕМРНБ МЮ ЯРПЮМХЖЕ, ЙНРНПШЕ МЮ ЯЮЛНЛ ДЕКЕ ГЮЦНКНБЙЮЛХ МЕ ЪБКЪКХЯЭ. CSS ФЕ ОПЕДНЯРЮБКЪЧР ДНЯРЮРНВМНЕ ЙНКХВЕЯРБН ЯПЕДЯРБ НТНПЛКЕМХЪ, ВРН ОНГБНКЪЕР АНКЕЕ РНВМН ЯКЕДНБЮРЭ ОПЮБХКЮЛ КНЦХВЕЯЙНЦН ТНПЛЮРХПНБЮМХЪ Х ДЕИЯРБХРЕКЭМН НРДЕКЪРЭ ЯРПСЙРСПС ЯРПЮМХЖШ НР ЕЕ БХГСЮКЭМНЦН ОПЕДЯРЮБКЕМХЪ.

мЮГМЮВЕМХЕ ЯРХКЕИ НРДЕКЭМШЛ ЩКЕЛЕМРЮЛ ЯРПЮМХЖШ

CSS ОНГБНКЪЧР МЮГМЮВХРЭ ЯНАЯРБЕММШИ ЯРХКЭ БХГСЮКЭМНЦН ОПЕДЯРЮБКЕМХЪ КЧАНЛС РЕЦС HTML, Б РНЛ ВХЯКЕ РЕЦС <body>. еЯКХ ЯРХКЭ ГЮДЮМ ДКЪ РЕЦЮ <body>, НМ МЮЯКЕДСЕРЯЪ БЯЕЛХ ЩКЕЛЕМРЮЛХ (ЮАГЮЖЮЛХ, ГЮЦНКНБЙЮЛХ Х Р. Д.), ОНЛЕЫЕММШЛХ БМСРПХ ЩРНЦН РЕЦЮ-ЙНМРЕИМЕПЮ, Б ЯКСВЮЕ НРЯСРЯРБХЪ ЯНАЯРБЕММШУ ЯРХКЕИ ДКЪ ЩРХУ ЩКЕЛЕМРНБ. рЮЙХЛ НАПЮГНЛ, МЮЛ СФЕ МЕ МСФМН ОПНОХЯШБЮРЭ РЕЦХ <font> Х ЮРПХАСРШ color, size Х Р. О. ДКЪ ЙЮФДНЦН ЮАГЮЖЮ МЮ ЯРПЮМХЖЕ √ ДНЯРЮРНВМН ГЮДЮРЭ МЕЙХИ ЯРХКЭ ДКЪ РЕЦЮ <body>, Х БЯЕ ЮАГЮЖШ МЮ ЯРПЮМХЖЕ АСДСР НРНАПЮФЕМШ Б ЯННРБЕРЯРБХХ Я ЩРХЛ ЯРХКЕЛ. йЮЙ ФЕ ЩРН ЯДЕКЮРЭ?

дНОСЯРХЛ, ЛШ УНРХЛ, ВРНАШ БЯЕ ЮАГЮЖШ НРНАПЮФЮКХЯЭ ЬПХТРНЛ Times New Roman ПЮГЛЕПНЛ 12 ОСМЙРНБ РЕЛМН-ГЕКЕМНЦН ЖБЕРЮ. дКЪ ЩРНЦН ЯКЕДСЕР ОПНОХЯЮРЭ ЮРПХАСР style РЕЦЮ <body>, ОПХЯБНХБ ЕЛС ЯННРБЕРЯРБСЧЫЕЕ ГМЮВЕМХЕ. яХМРЮЙЯХЯ РЮЙНИ:

<body style="font-family: 'Times New Roman', serif; font-size:
12pt; color: darkgreen;">

рЮЙХЛ НАПЮГНЛ, БЯЕ ЮАГЮЖШ МЮ ЯРПЮМХЖЕ НРНАПЮФЕМШ РЮЙ, ЙЮЙ ЛШ ГЮУНРЕКХ, ОПХВЕЛ ЙНД МЕ ГЮЯНПЕМ РЕЦЮЛХ <font> Х ХУ ЮРПХАСРЮЛХ. оПЕДЯРЮБКЪЕРЕ, ЙЮЙЮЪ ЩЙНМНЛХЪ ПЮГЛЕПЮ ТЮИКЮ, ЕЯКХ БЮЬЮ ЯРПЮМХЖЮ ЯНЯРНХР ХГ АНКЭЬНЦН ЙНКХВЕЯРБЮ РЕЙЯРЮ!

нАПЮРХРЕ БМХЛЮМХЕ √ ЙНЦДЮ ЛШ ГЮДЮБЮКХ МЮВЕПРЮМХЕ ЬПХТРЮ, ОНЯКЕ МЮГБЮМХЪ Times New Roman ЛШ СЙЮГЮКХ МЮВЕПРЮМХЕ serif, ВРН НАНГМЮВЮЕР КЧАНИ ЬПХТР Я ГЮЯЕВЙЮЛХ. еЯКХ МЮ ЛЮЬХМЕ ЙНМЕВМНЦН ОНКЭГНБЮРЕКЪ МЕ СЯРЮМНБКЕМ ЬПХТР Times New Roman, АПНСГЕП ОНДЯРЮБХР БЛЕЯРН МЕЦН КЧАНИ ХГ ХЛЕЧЫХУЯЪ ЬПХТРНБ Я ГЮЯЕВЙЮЛХ, Х НРНАПЮФЕМХЕ ЯРПЮМХЖШ АСДЕР ЛЮЙЯХЛЮКЭМН ОПХАКХФЕМН Й РНЛС, ВРН БШ ГЮДСЛЮКХ. оПХВЕЛ ОПХБЕДЕММШИ ОПХЛЕП АСДЕР ОНМЪРЕМ Х ДКЪ IE (4.0 Х БШЬЕ), Х ДКЪ NN (4.0 Х БШЬЕ). уНРЪ МЮДН ЯПЮГС НЦНБНПХРЭЯЪ, ВРН Netscape Navigator ОНДДЕПФХБЮЕР ДЮКЕЙН МЕ БЯЕ БНГЛНФМНЯРХ, ОПЕДНЯРЮБКЪЕЛШЕ CSS Х DHTML, Х ЩРН, АЕГСЯКНБМН, МЕ СБЕКХВХБЮЕР ВХЯКЮ ЕЦН ОНЙКНММХЙНБ.

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

мЮГМЮВЕМХЕ ЯРХКЕИ МЕЯЙНКЭЙХЛ ЩКЕЛЕМРЮЛ НДМНИ ЯРПЮМХЖШ √ ЯНГДЮМХЕ БМЕДПЕММНИ РЮАКХЖШ ЯРХКЕИ

оНЙЮ ПЕВЭ С МЮЯ ЬКЮ Н ГЮДЮМХХ РНКЭЙН НДМНЦН ЯРХКЪ ДКЪ НДМНЦН ЩКЕЛЕМРЮ. ю РЕОЕПЭ ЛШ МЮСВХЛЯЪ ЯНГДЮБЮРЭ ХЛЕММН РЮАКХЖШ ЯРХКЕИ.

дНОСЯРХЛ, ЛШ УНРХЛ, ВРНАШ БЯЕ ЮАГЮЖШ МЮ ЯРПЮМХЖЕ БШЦКЪДЕКХ, ЙЮЙ Б ОПЕДШДСЫЕЛ ОПХЛЕПЕ, БЯЕ ГЮЦНКНБЙХ ОЕПБНЦН СПНБМЪ НРНАПЮФЮКХЯЭ ЬПХТРНЛ Arial ГЕКЕМНЦН ЖБЕРЮ ОНКСФХПМНЦН МЮВЕПРЮМХЪ ПЮГЛЕПНЛ 16 ОСМЙРНБ, Ю БЯЕ ГЮЦНКНБЙХ БРНПНЦН СПНБМЪ √ ЬПХТРНЛ Helvetica ПЮГЛЕПНЛ 14 ОСМЙРНБ ОНКСФХПМНЦН ЙСПЯХБМНЦН МЮВЕПРЮМХЪ ФЕКРН-ГЕКЕМНЦН ЖБЕРЮ. дКЪ ЩРНЦН МЮЛ ОНМЮДНАХРЯЪ ЯНГДЮРЭ Б ╚ЦНКНБЕ╩ ЯРПЮМХЖШ (Б КЧАНЛ ЛЕЯРЕ ЛЕФДС РЕЦЮЛХ <head> Х </head>) БМЕДПЕММСЧ РЮАКХЖС ЯРХКЕИ, Б ЙНРНПНИ ЛШ ОПНОХЬЕЛ МЕЯЙНКЭЙН ОПЮБХК ЯПЮГС. дКЪ ЩРНЦН ЯНГДЮЕЛ РЕЦ-ЙНМРЕИМЕП РЮАКХЖШ ЯРХКЕИ, МЮВХМЮЧЫХИЯЪ НРЙПШБЮЧЫХЛ РЕЦНЛ <style> Х ГЮЙЮМВХБЮЧЫХИЯЪ ГЮЙПШБЮЧЫХЛ РЕЦНЛ </style>. бМСРПХ ЩРНЦН РЕЦЮ-ЙНМРЕИМЕПЮ ЛШ БНКЭМШ ГЮДЮРЭ КЧАНЕ ЙНКХВЕЯРБН ОПЮБХК CSS, ЯНЯРНЪЫХУ ХГ ЯЕКЕЙРНПЮ (МЮГБЮМХЪ РЕЦЮ HTML, Й ЙНРНПНЛС АСДЕР ОПХЛЕМЪРЭЯЪ ОПЮБХКН) Х ЕЦН НОПЕДЕКЕМХЪ (МЕОНЯПЕДЯРБЕММН МЮАНПЮ ЯПЕДЯРБ ТНПЛЮРХПНБЮМХЪ), ГЮЙКЧВЕММНЦН Б ТХЦСПМШЕ ЯЙНАЙХ. яХМРЮЙЯХЯ ДКЪ ОПХБЕДЕММНЦН БШЬЕ ОПХЛЕПЮ РЮЙНИ:

<head>
...
<style>
body { 
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
</style>
...
</head>

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

мЮГМЮВЕМХЕ ЯРХКЕИ НДМНБПЕЛЕММН ДКЪ МЕЯЙНКЭЙХУ ЯРПЮМХЖ ЯЮИРЮ

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

бНР ОПХЛЕП ЯНДЕПФХЛНЦН РЮЙНЦН ТЮИКЮ (МЮОПХЛЕП, my.css):

body { 
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}

нАПЮРХРЕ БМХЛЮМХЕ: РЕЦХ <style> Х </style> БМСРПХ ТЮИКЮ РЮАКХЖШ ЯРХКЕИ МЕ ХЯОНКЭГСЧРЯЪ √ ПЮЯЬХПЕМХЕ .css ЪБМН СЙЮГШБЮЕР АПНСГЕПС МЮ РН, ВРН ТЮИК ЪБКЪЕРЯЪ РЮАКХЖЕИ ЯРХКЕИ. нДХМ РЮЙНИ ТЮИК ЛНФЕР АШРЭ ЯБЪГЮМ ЯПЮГС Я МЕЯЙНКЭЙХЛХ ЯРПЮМХЖЮЛХ (ХКХ ХЛОНПРХПНБЮМ ЯПЮГС Б МЕЯЙНКЭЙН ЯРПЮМХЖ). б html-ТЮИКЕ ДКЪ ЯБЪГШБЮМХЪ МСФМН ОПНОХЯЮРЭ Б КЧАНЛ ЛЕЯРЕ ЛЕФДС РЕЦЮЛХ <head> Х </head> ЯКЕДСЧЫСЧ ЯРПНЙС:

<head>
...
<link rel="stylesheet" type="text/css" href="my.css">
...
</head>

б ЩРНИ ЯРПНЙЕ СЙЮГШБЮЕРЯЪ, ВРН ЯБЪГШБЮЕЛШИ ТЮИК ЪБКЪЕРЯЪ РЮАКХЖЕИ ЯРХКЕИ (rel="stylesheet"), ТНПЛЮР ЩРНЦН ТЮИКЮ √ .css1 (type="text/css") Х МЮУНДХРЯЪ НМ Б РНИ ФЕ ДХПЕЙРНПХХ, ВРН Х ТЮИК html, КХАН ХЛЕЕР ДПСЦНИ URL-ЮДПЕЯ (href="my.css"). нВЕБХДМН, ВРН ЩРС ЯРПНЙС ЛШ ЛНФЕЛ ОПНОХЯЮРЭ Б КЧАНЛ (КХАН БН БЯЕУ) ХГ МЮЬХУ html-ТЮИКНБ. рЮЙХЛ НАПЮГНЛ, ЕДХМНЕ ЯРХКЕБНЕ НТНПЛКЕМХЕ АСДЕР ОПНОХЯЮМН ДКЪ МЕЯЙНКЭЙХУ ЯРПЮМХЖ ЯПЮГС.

нАПЮРХРЕ БМХЛЮМХЕ МЮ РН, ВРН inline-ЯРХКХ (ЯРХКХ, ОПНОХЯЮММШЕ ДКЪ НРДЕКЭМШУ ЩКЕЛЕМРНБ ЯРПЮМХЖШ Я ОНЛНЫЭЧ ЮРПХАСРЮ style) Х БМЕДПЕММШЕ ЯРХКХ (ЯРХКХ, ОПНОХЯЮММШЕ Б ╚ЦНКНБЕ╩ ЯРПЮМХЖШ БМСРПХ РЕЦЮ-ЙНМРЕИМЕПЮ <style>) ХЛЕЧР ОПЕХЛСЫЕЯРБН ОЕПЕД ЯБЪГЮММШЛХ ЯРХКЪЛХ ОПХ ЮМЮКХГЕ ЯРПЮМХЖШ АПНСГЕПНЛ. яКЕДНБЮРЕКЭМН, ОПХ ХЯОНКЭГНБЮМХХ ЯБЪГЮММШУ ЯРХКЕИ ЛШ БЯЕЦДЮ ХЛЕЕЛ БНГЛНФМНЯРЭ ОЕПЕМЮГМЮВХРЭ ЯРХКЭ ХЛЕММН ДКЪ ДЮММНЦН ЙНМЙПЕРМНЦН ЩКЕЛЕМРЮ ЯРПЮМХЖШ.

дКЪ ХЛОНПРХПНБЮМХЪ ТЮИКЮ РЮАКХЖШ ЯРХКЕИ (Б РНЛ ВХЯКЕ Я ДПСЦНЦН ЯЕПБЕПЮ) ЛШ ДНКФМШ ОПНОХЯЮРЭ Б КЧАНЛ ЛЕЯРЕ ЛЕФДС РЕЦЮЛХ <head> Х </head> БМСРПХ РЕЦЮ-ЙНМРЕИМЕПЮ <style> ЯКЕДСЧЫСЧ ЯРПНЙС:

<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>

оНЛХЛН ЮДПЕЯЮ ХЛОНПРХПСЕЛНИ РЮАКХЖШ ЯРХКЕИ БШ ЛНФЕРЕ ОПНОХЯЮРЭ Б РЕЦ-ЙНМРЕИМЕП <style> КЧАШЕ ОПЮБХКЮ CSS, ЙНРНПШЕ АСДСР ДНОНКМЪРЭ ХКХ ЙНППЕЙРХПНБЮРЭ ОПЮБХКЮ, ГЮДЮММШЕ Б ХЛОНПРХПСЕЛНИ РЮАКХЖЕ. щРХ ОПЮБХКЮ, ЙЮЙ БШ ОНЛМХРЕ, АСДСР МЮГШБЮРЭЯЪ БМЕДПЕММШЛХ. бМЕДПЕММШЕ ОПЮБХКЮ ОПХНПХРЕРМЕЕ ХЛОНПРХПНБЮММШУ ОПХ ЮМЮКХГЕ ЯРПЮМХЖШ АПНСГЕПНЛ, ХЛЕММН ОНЩРНЛС НМХ ЛНЦСР ЙНППЕЙРХПНБЮРЭ ЯРХКХ, ХЛОНПРХПНБЮММШЕ ХГБМЕ. б ЖЕКНЛ, АПНСГЕП ПЮЯЯРЮБКЪЕР ОПХНПХРЕРШ РЮАКХЖ ЯРХКЕИ ЯКЕДСЧЫХЛ НАПЮГНЛ:

1) inline-ЯРХКХ (БЯРПНЕММШЕ Я ОНЛНЫЭЧ ЮРПХАСРЮ style МЕОНЯПЕДЯРБЕММН Б РЕЦХ ДНЙСЛЕМРЮ) √ МЮХБШЯЬХИ ОПХНПХРЕР, АСДСР ОПХЛЕМЕМШ АПНСГЕПНЛ Б КЧАНЛ ЯКСВЮЕ, ДЮФЕ ЕЯКХ БНГМХЙЮЕР ЙНМТКХЙР Я БМЕДПЕММШЛХ ХКХ БМЕЬМХЛХ ЯРХКЪЛХ;

2) БМЕДПЕММШЕ ЯРХКХ (ОЕПЕВХЯКЕММШЕ Б РЕЦЕ-ЙНМРЕИМЕПЕ <style> Б ╚ЦНКНБЕ╩ ДНЙСЛЕМРЮ) √ ВСРЭ ЛЕМЭЬХИ ОПХНПХРЕР, АСДСР ОПХЛЕМЪРЭЯЪ БН БЯЕУ ЯКСВЮЪУ, ЙПНЛЕ ЯКСВЮЕБ БНГМХЙМНБЕМХЪ ЙНМТКХЙРЮ Я inline-ЯРХКЪЛХ (ОПХ БНГМХЙМНБЕМХХ РЮЙНЦН ЙНМТКХЙРЮ АСДСР ОПХЛЕМЕМШ inline-ЯРХКХ);

3) ХЛОНПРХПНБЮММШЕ ЯРХКХ (ЯРХКХ БМЕЬМЕЦН ТЮИКЮ .css, ЯБЪГЮММШЕ Я ДНЙСЛЕМРНЛ Я ОНЛНЫЭЧ ЯБНИЯРБЮ @import Б РЕЦЕ-ЙНМРЕИМЕПЕ <style>) √ ЕЫЕ ЛЕМЭЬХИ ОПХНПХРЕР, АСДСР ОПХЛЕМЪРЭЯЪ Б РЕУ ЯКСВЮЪУ, ЙНЦДЮ НРЯСРЯРБСЧР ЮМЮКНЦХВМШЕ ОПЮБХКЮ CSS ЯПЕДХ БЯРПНЕММШУ Х БМЕДПЕММШУ ЯРХКЕИ;

4) ЯБЪГЮММШЕ ЯРХКХ (ЯРХКХ, ОПХЯНЕДХМЕММШЕ Й html-ТЮИКС ОНЯПЕДЯРБНЛ РЕЦЮ <link>) √ МЮХЛЕМЭЬХИ ОПХНПХРЕР, АСДСР ОПХЛЕМЕМШ РНКЭЙН ОНЯКЕ РНЦН, ЙЮЙ АПНСГЕП САЕДХРЯЪ Б НРЯСРЯРБХХ ЮМЮКНЦХВМШУ ОПЮБХК БН БЯЕУ НЯРЮКЭМШУ РХОЮУ ЯРХКЕИ.

рЮЙХЛ НАПЮГНЛ, ГМЮЪ, Б ЙЮЙНИ ОНЯКЕДНБЮРЕКЭМНЯРХ АПНСГЕП ЮМЮКХГХПСЕР РЮАКХЖШ ЯРХКЕИ, ЛШ ЛНФЕЛ ГЮДЮРЭ НДМС НАЫСЧ ЯБЪГЮММСЧ РЮАКХЖС ДКЪ БЯЕУ ЯРПЮМХЖ ЯЮИРЮ Х ОПХ ЩРНЛ ЦХАЙН СОПЮБКЪРЭ ЯРХКЪЛХ НРДЕКЭМШУ ЯРПЮМХЖ Х НРДЕКЭМШУ ЩКЕЛЕМРНБ МЮ ЯРПЮМХЖЕ. хЛЕММН Я ЩРНИ НЯНАЕММНЯРЭЧ Х ЯБЪГЮМН ЯКНБН ╚ЙЮЯЙЮДМШЕ╩ Б МЮГБЮМХХ CSS (cascading style sheets) √ МЕЯЙНКЭЙН РЮАКХЖ ЯРХКЕИ, ОПХЯНЕДХМЕММШУ Й html-ТЮИКС, ОПНЙЮРШБЮЧРЯЪ ВЕПЕГ ЮМЮКХГЮРНП (АПНСГЕП) МЕЙХЛ ╚ЙЮЯЙЮДНЛ╩ Б ОНПЪДЙЕ ХУ ОПХНПХРЕРМНЯРХ.

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

яЕКЕЙРНПШ CSS

яЕКЕЙРНП class

дНОСЯРХЛ, ЛШ УНРХЛ ЯНГДЮРЭ ЯРПЮМХЖС, МЮ ЙНРНПНИ АСДЕР ДБЮ БХДЮ ЮАГЮЖЕБ <p>, ОПХВЕЛ НАЮ БХДЮ АСДСР ОНЯРНЪММН ВЕПЕДНБЮРЭЯЪ Х ВЮЯРН ОНБРНПЪРЭЯЪ. рХОХВМШИ ОПХЛЕП РЮЙНИ ЯРПЮМХЖШ √ ХМРЕПБЭЧ, Б ЙНРНПНЛ ВЕПЕДСЧРЯЪ БНОПНЯШ ФСПМЮКХЯРЮ Х НРБЕРШ ХМРЕПБЭЧХПСЕЛНЦН. еЯРЕЯРБЕММН, ОПХ ЯНГДЮМХХ РЮЙНИ ЯРПЮМХЖШ ЛШ ГЮУНРХЛ БХГСЮКЭМН НРДЕКХРЭ БНОПНЯШ Х НРБЕРШ ДПСЦ НР ДПСЦЮ. еЯКХ АШ МЮЛ ОПХЬКНЯЭ ЩРН ДЕКЮРЭ РЕЛХ ЯПЕДЯРБЮЛХ CSS, ЙНРНПШЕ ЛШ ПЮЯЯЛНРПЕКХ БШЬЕ, РН ОПХЬКНЯЭ АШ ЯНГДЮБЮРЭ ДБЕ ПЮГКХВМШЕ РЮАКХЖШ ЯРХКЕИ. й ЯВЮЯРЭЧ, Б ЩРНЛ МЕР МЕНАУНДХЛНЯРХ. лШ ЛНФЕЛ ЯНГДЮРЭ Б НДМНИ РЮАКХЖЕ ЯРХКЕИ ДБЮ ПЮГКХВМШУ ЙКЮЯЯЮ ЮАГЮЖЕБ Я ОНЛНЫЭЧ ЯЕКЕЙРНПЮ ЙКЮЯЯЮ. щРН АСДЕР БШЦКЪДЕРЭ РЮЙ:

<html>
<head>
...
<style>
...
p.ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px
}
p.answer {
font-family: 'Times New Roman', serif;
font-size: 12 pt; color: black;
}
...
</style>
...
</head>
<body>
...
<p class="ask">бНОПНЯ ФСПМЮКХЯРЮ</p>
<p class="answer">нРБЕР ХМРЕПБЭЧХПСЕЛНЦН</p>
...
</body>
</html>

б ОПХБЕДЕММНЛ ОПХЛЕПЕ БНОПНЯШ ФСПМЮКХЯРЮ АСДСР НРНАПЮФЮРЭЯЪ ЬПХТРНЛ Arial ЯЕПНЦН ЖБЕРЮ, ОНКСФХПМШЛ, ЙСПЯХБМНЦН МЮВЕПРЮМХЪ, ПЮГЛЕПНЛ 10 ОСМЙРНБ Я НРЯРСОНЛ 15 ОХЙЯЕКНБ НР КЕБНЦН ЙПЮЪ ЯРПЮМХЖШ. нРБЕРШ ФЕ АСДСР НРНАПЮФЕМШ ЬПХТРНЛ Times New Roman ПЮГЛЕПНЛ 12 ОСМЙРНБ ВЕПМНЦН ЖБЕРЮ. бЮФМН МЕ ГЮАШБЮРЭ ОПНОХЯШБЮРЭ ОЮПЮЛЕРП class ПЮГКХВМШЛ ЙКЮЯЯЮЛ ЮАГЮЖЕБ МЕОНЯПЕДЯРБЕММН Б ЙНДЕ html. бШ ЛНФЕРЕ ЯНГДЮБЮРЭ КЧАНЕ ЙНКХВЕЯРБН ЙКЮЯЯНБ ДКЪ КЧАШУ ЩКЕЛЕМРНБ ЯРПЮМХЖШ.

яЕКЕЙРНП id

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

<html>
<head>
...
<style>
...
input#green {color: green;}
input#red {color: red;}
...
</style>
...
</head>
<body>
...
<form ...>
<p>рЕЙЯР, ББНДХЛШИ Б ЩРН ОНКЕ, АСДЕР НРНАПЮФЕМ ГЕКЕМШЛ ЖБЕРНЛ:
<input type="text" id="green" name="info1" size="20"></p>
<p>рЕЙЯР, ББНДХЛШИ Б ЩРН ОНКЕ, АСДЕР НРНАПЮФЕМ ЙПЮЯМШЛ ЖБЕРНЛ:
<input type="text" id="red" name="info2" size="20"></p>
</form>
...
</body>
</html>

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

йНМРЕЙЯРМШЕ ЯЕКЕЙРНПШ

дНОСЯРХЛ, ЛШ ЯНГДЮКХ РЮАКХЖС ЯРХКЕИ, ЯНЦКЮЯМН ЙНРНПНИ БЯЕ ГЮЦНКНБЙХ ОЕПБНЦН СПНБМЪ МЮ ЯРПЮМХЖЕ НРНАПЮФЮЧРЯЪ ЙПЮЯМШЛ ЖБЕРНЛ МЮ ЯЕПНЛ ТНМЕ, БЯЕ ЮАГЮЖШ √ ГЕКЕМШЛ ЖБЕРНЛ МЮ ФЕКРНЛ ТНМЕ, Ю БЯЕ БШДЕКЕММШЕ ОНЯПЕДЯРБНЛ РЕЦЮ <em>1 ЯКНБЮ БМСРПХ ЮАГЮЖЕБ √ ВЕПМШЛ ЖБЕРНЛ МЮ ЯЕПЕАПХЯРНЛ ТНМЕ. йНД РЮАКХЖШ ЯРХКЕИ, ЙЮЙ БШ СФЕ ДНЦЮДЮКХЯЭ, ОПХ ЩРНЛ БШЦКЪДХР РЮЙ:

h1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}

оПЕДОНКНФХЛ, ЛШ УНРХЛ РЮЙФЕ БШДЕКХРЭ ЙЮЙХЕ-РН ЯКНБЮ Б ГЮЦНКНБЙЕ ОНЯПЕДЯРБНЛ РНЦН ФЕ РЕЦЮ <em>, МН МЮЯ МЕ СЯРПЮХБЮЕР ОНЪБКЕМХЕ ВЕПМНЦН ЖБЕРЮ РЕЙЯРЮ МЮ ЯЕПЕАПХЯРНЛ ТНМЕ Б ГЮЦНКНБЙЕ. лШ УНРХЛ БШДЕКХРЭ ЯКНБЮ Б ГЮЦНКНБЙЕ АНПДНБШЛ ЖБЕРНЛ МЮ ЯЕПНЛ ТНМЕ. дКЪ ЩРНЦН ЯСЫЕЯРБСЧР ЙНМРЕЙЯРМШЕ ЯЕКЕЙРНПШ. гЮОХЯЭ ОПЮБХКЮ, ЙНРНПНЕ ЛШ ДКЪ ЩРНЦН ДНАЮБХЛ Б РЮАКХЖС ЯРХКЕИ, АСДЕР БШЦКЪДЕРЭ РЮЙ:

h1 em {
color: #CC0000;
background-color: gray;
}

ю БНР ОПХЛЕП ЙНДЮ ЯРПЮМХЖШ Я ХЯОНКЭГНБЮМХЕЛ ЩРНЦН ЙНМРЕЙЯРМНЦН ЯЕКЕЙРНПЮ:

<html>
<head>
...
<style>
...
h1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}
h1 em {
color: #CC0000;
background-color: gray;
}
...
</style>
...
</head>
<body>
...
<h1>щРН √ ГЮЦНКНБНЙ ОЕПБНЦН СПНБМЪ Я <em>БШДЕКЕММШЛ</em>
ЯКНБНЛ</h1>
<p>ю ЩРН √ НАШВМШИ ЮАГЮЖ Я <em>БШДЕКЕММШЛХ ЯКНБЮЛХ</em>
</p>
...
</body>
</html>

мЮ ЯЕЦНДМЪ ЩРН БЯЕ. б ЯКЕДСЧЫХИ ПЮГ 
              ЛШ ОНЦНБНПХЛ Н ОПЮБХКЮУ ТНПЛЮРХПНБЮМХЪ АКНЙНБШУ ЩКЕЛЕМРНБ ЯРПЮМХЖШ, 
              Н ОНГХЖХНМХПНБЮМХХ ЩКЕЛЕМРНБ Х Н ДПСЦХУ ХМРЕПЕЯМШУ Х ОНКЕГМШУ БНГЛНФМНЯРЪУ, 
              ПЕЮКХГСЕЛШУ Я ХЯОНКЭГНБЮМХЕЛ CSS.

#10 (49) НЙРЪАПЭ 2000
http://www.iworld.ru/magazine/index.phtml?fnct=magazine&m=94701976
фСПМЮК "лХП Internet" http://www.iworld.ru/