йЮЯЙЮДМШЕ РЮАКХЖШ ЯРХКЕИ (Cascad Style Sheets)

яЕПБЕП ОНДДЕПФХБЮЕРЯЪ
жЕМРПНЛ хМТНПЛЮЖХНММШУ рЕУМНКНЦХИ
(095) 932-9212, 932-9213, 939-0783
E-mail: info@citforum.ru

яЕПБЕП ЯНДЕПФХР ЛНПЕ(!) ЮМЮКХРХВЕЯЙНИ ХМТНПЛЮЖХХ

CIT Forum CD-ROM

1.8. йЮЯЙЮДМШЕ РЮАКХЖШ ЯРХКЕИ (Cascad Style Sheets)

йЮЯЙЮДМШЕ РЮАКХЖШ ЯРХКЕИ АШКХ ОПЕДКНФЕМШ w3c(WWW Consorcium) Б ПЮЛЙЮУ ПЮГПЮАНРЙХ ЯОЕЖХТХЙЮЖХХ HTML 3.0. нДМЮЙН, ПЕЮКХГНБЮМШ Б ПЕЮКЭМН ДЕИЯРБСЧЫХУ МЮБХЦЮРНПЮУ НМХ АШКХ РНКЭЙН Б 1997 ЦНДС. тЮЙРХВЕЯЙХ, Б ЙЮВЕЯРБЕ ОПХЛЕМЪЕЛНИ HTML-ПЮГЛЕРЙХ НМХ ЯРЮКХ ДНЯРСОМШ РНКЭЙН Я БЕПЯХИ Netscape Navigator 4.0 Х Internet Explorer 4.0.

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

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

	<style type="text/css">
	<!-- нОХЯЮМХЕ ЯРХКЕИ -->
	</style>

бННАЫЕ ЦНБНПЪ, Б Netscape ОНДДЕПФХБЮЧР ЕЫЕ НДМС МНРЮЖХЧ НОХЯЮМХЕ РЮАКХЖ ЯРХКЕИ - МНРЮЖХЪ JavaScript:

	<style type="text/javascript">
	<!-- нОХЯЮМХЕ ЯРХКЕИ -->
	</style>

оПХ НОХЯЮМХХ РЮАКХЖ ЯРХКЕИ ЛШ АСДЕЛ НОХПЮРЭЯЪ МЮ ДНЙСЛЕМРЮЖХЧ Netscape, Р.Й. - ЩРН МЮХАНКЕЕ ОНОСКЪПМШИ АПЮСГЕП Internet. Internet Explorer ОНДДЕПФХБЮЕР РНКЭЙН ЯОЕЖХТХЙЮЖХЧ w3c.

мЮВМЕЛ Я ОПНЯРНЦН ОПХЛЕПЮ. мСФМН НОХЯЮРЭ ЯРХКХ НРНАПЮФЕМХЪ РЕЙЯРЮ Б ОЮПЮЦПЮТЕ Х ГЮЦКЮБХХ ДНЙСЛЕМРЮ:

оПХЛЕП 1.28

	<html>
	<head>
	style type="text/css">
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	</style>
	</head>
	<body>
	<h1>Test Style Sheets in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

рН ФЕ ЯЮЛНЕ МН Б JavaScript-МНРЮЖХХ АСДЕР БШЦКЪДЕРЭ ЯКЕДСЧЫХЛ НАПЮГНЛ:

оПХЛЕП 1.29

	<html>
	<head>
	<style type="text/javascript">	tags.p.color="blue";
	tags.p.fontFamily="times";
	tags.p.fontSize="10pt";
	tags.h1.color="black";
	tags.h1.fontSize="12pt";
	tags.h1.fontStyle="Arial";
	tags.h1.textAlign-"center";
	</style>
	</head>
	<body>
	<h1>Test Style Sheets in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

яoГДЮММШИ РЮЙХЛ НАПЮГНЛ ДНЙСЛЕМР АСДЕР НРНАПЮФЮРЭЯЪ ЯКЕДСЧЫХЛ НАПЮГНЛ:

пХЯ. 1.28. оПХЛЕП НРНАПЮФЕМХЪ ДНЙСЛЕМРЮ Я ЙЮЯЙЮДМШЛХ НОХЯЮРЕКЪЛХ ЯРХКЕИ

пЮГАЕПЕЛ РЕОЕПЭ НОХЯЮРЕКХ ЯРХКЕИ АНКЕЕ ОНДПНАМН. нОПЕДЕКХЛ НАКЮЯРЭ ХУ ОПХЛЕМЕМХЪ Х ЯОНЯНАШ БЯРПЮХБЮМХЪ Б ДНЙСЛЕМР.

мНБШЕ HTML-ЙНМРЕИМЕПШ

я ОНЪБКЕМХЕЛ РЮАКХЖ ЯРХКЕИ Б ЪГШЙЕ ОНЪБХКНЯЭ РПХ МНБШУ ЙНМРЕИМЕПЮ: STYLE, LINK, SPAN. бННАЫЕ ЦНБНПЪ LINK - ЩРН МЕ МНБШИ РЮЦ, Ю МНБНЕ ОПХЛЕМЕМХЕ ЯРЮПНЦН РЮЦЮ.

йНМРЕИМЕП STYLE(<style type="...">......</style>) ЯКСФХР ДКЪ НОПЕДЕКЕМХЪ РЮАКХЖШ НОХЯЮМХЪ ЯРХКЕИ. уНРЪ Б ЯОЕЖХТХЙЮЖХХ CSS ОПЪЛН МЕ ЦНБНПХРЯЪ, Б ЙЮЙНЛ ЙНМРЕИМЕПЕ ДНЙСЛЕМРЮ ЯКЕДСЕР ОПХЛЕМЪРЭ STYLE, РЕЛ МЕ ЛЕМЕЕ, Б ОПХЛЕПЮУ ВЮЫЕ БЯЕЦН ОПХБНДХРЯЪ ЩРНР ЙНМРЕИМЕП БМСРПХ ЙНМРЕИМЕПЮ HEAD.

йНМРЕИМЕП LINK Б ЙНМРЕЙЯРЕ НОХЯЮРЕКЕИ ЯРХКЕИ ОПХЛЕМЪЕРЯЪ ДКЪ НОПЕДЕКЕМХЪ БМЕЬМЕЦН ТЮИКЮ Я НОХЯЮМХЪЛХ ЯРХКЕИ ДКЪ ДЮММНЦН ДНЙСЛЕМРЮ. мЮОПХЛЕП, БМЕЬМХИ ТЮИК ЛНФЕР ЯНДЕПФЮРЭ ЯКЕДСЧЫЕЕ НОХЯЮМХЕ ЯРХКЕИ:

	/* contents of the external style sheets file  css.htm*/
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	/* the end of style sheets definition */

дКЪ ОПХЛЕМЕМХЪ ЩРНЦН НОХЯЮРЕКЪ ЯРХКЕИ Б ГЮЦНКНБНЙ ДНЙСЛЕМРЮ МЕНАУНДХЛН БЙКЧВХРЭ ЯКЕДСЧЫХИ РЮЦ:

оПХЛЕП 1.30

	<html>
	<head>
	<link REL=STYLESHEET TYPE="text/css" HREF=http://localhost/css.htm>
	</head>
	<body>
	The body of the document should be here.
	</body>
	</html>

хГ ДЮММНЦН ОПХЛЕПЮ БХДМН, ВРН ОХЯЮМХЕ ЯРХКЕИ Б ТЮКЕ css.htm ОНКМНЯРЭЧ ЯНБОЮДЮЕР Я НОХЯЮМХЕЛ Б ЙНМРЕИМЕПЕ STYLE. б РЕЙЯРЕ ТЮИКЮ НОХЯЮМХЪ ЯРХКЕИ МЕ МСФМН СЙЮГШБЮРЭ РЮЦХ ЙНМРЕИМЕПЮ STYLE.

йНМРЕИМЕП SPAN ОПХЛЕМЪЕРЯЪ ДКЪ ОЕПЕНОПЕДЕКЕМХЪ ЯРХКЪ НРНАПЮФЕМХЪ РЕЙСЫЕЦН ТПЮЦЛЕМРЮ РЕЙЯРЮ Х Б МЕЙНРНПНЛ ЯЛШЯКЕ ЮМЮКНЦХВЕМ ЙНМРЕИМЕПС FONT. вЮЯРН SPAN ОПХЛЕМЪЧР ДКЪ ДНЯРХФЕМХЪ РХОНЦПЮТЯЙХУ ЩТТЕЙРНБ, РЮЙХУ МЮОПХЛЕП, ЙЮЙ БШДЕКЕМХЕ ГЮЦКЮБМНИ АСЙБШ ЮАГЮЖЮ:

оПХЛЕП 1.31

	<HTML>
	<!--
	Author:	Paul Khramtsov
	Date:	September 19, 1997
	URL:	http://polyn.kiae.su/Internet/intro.html
	-->
	<HEAD>
	<style TYPE="text/css">
	FS.all { color:red; font-size: 24pt; font-family: times;}
	H1 {color:navy; text-transform: uppercase;font-size: 18pt; 
	font-weight: bold; font-family: times;}
	H2 {color:navy; font-size: 14pt; font-weight: bold; font-style: italic; 
	font-family: times;}
	H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
	P  {color:navy; font-size: 12pt; font-family: times; text-align: justify}
	P.HELP {color:darkgreen; font-size: 10pt; font-family: times; 
	text-align: justify;}
	P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;}
	</style>
	</HEAD>
	<BODY bgcolor=lightyellow>
	<center>
	<h3>жЕМРП ХМТНПЛЮЖХНММШУ РЕУМНКНЦХИ</h3>
	<h1>хМТНПЛЮЖХНММШЕ пЕЯСПЯШ Internet</h1>
	<h3>(сВЕАМНЕ ОНЯНАХЕ ДКЪ ЙНЛОЭЧРЕПМШУ МЕОПНТЕЯЯХНМЮКНБ)</h3>
	<h3>уПЮЛЖНБ о.а.</h2>
	<h3>лНЯЙБЮ, 1997</h2>
	<hr>
	</center>
	<p><span class=FS>C</span>НАЫЕЯРБС ЦКНАЮКЭМШУ ЙНЛОЭЧРЕПМШУ ЯЕРЕИ 
	Internet Б 1995 ЦНДС ХЯОНКМХКНЯЭ 25 КЕР. мЮ МЮЯРНЪЫХИ ЛНЛЕМР - ЩРН ЯЮЛШИ
	АНКЭЬНЕ ХМТНПЛЮЖХНММШИ ПЕЯСПЯ ЛХПЮ. нДМНБПЕ-ЛЕММН Internet - ЩРН ЯЮЛЮЪ 
	ОНОСКЪПМЮЪ Х ЛЮЯЯНБЮЪ ЙНЛОЭЧРЕПМЮЪ ЯЕРЭ ОКЮМЕРШ. оН НЖЕМЙЮЛ ЛЕФДСМЮПНДМНЦН 
	ЖЕМРПЮ ЙННПДХМЮЖХХ ЯЕРЕБНИ ДЕЪРЕКЭМНЯРХ Б ПЮЛЙЮУ Internet(Internic-Internet 
	Information Center) МЮ 1997 ЦНД Б ЯЕРХ МЮЯВХРШБЮКНЯЭ МЕЯЙНКЭЙН ДЕЯЪРЙНБ 
	ЛХККХНМНБ ОНЯРНЪММН ГЮПЕЦХЯРПХПНБЮММШУ ЙНЛОЭЧРЕПНБ-ЯЕПБЕПНБ, ЙНРНПШЕ 
	НРЙКХЙЮЧРЯЪ МЮ ГЮОПНЯШ ОНКЭГНБЮРЕКЕИ 365 ДМЕИ Б ЦНДС Х 24 ВЮЯЮ Б ЯСРЙХ. щРНР 
	НЦПНЛМШИ ХМТНПЛЮЖХНММШИ ПЕЯСПЯ ОНКМНЯРЭЧ ДЕЖЕМРПЮКХГНБЮМ Х МЕ ОНДВХМЪЕРЯЪ МХ 
	НДМНЛС ОПЮБХРЕКЭЯРБС ХКХ ЙПСОМНИ ТХМЮМЯНБНИ ЙНЛОЮМХХ ЛХПЮ.
	</BODY>
	</HTML>

б ДЮММНЛ ОПХЛЕПЕ, ЙНМРЕИМЕП SPAN ОПХЛЕМЕМ ЯПЮГС ОНЯКЕ РЮЦЮ МЮВЮКЮ ОЮПЮЦПЮТЮ <p>, ВРН ОНГБНКЪЕР БШДЕКХРЭ ОЕПБСЧ АСЙБС Б НРНАПЮФЮЕЛНЛ ЮАГЮЖЕ:

пХЯ. 1.29. щТТЕЙР НР ОПХЛЕМЕМХЪ ЙНМРЕИМЕПЮ SPAN

йПНЛЕ МНБШУ ЙНМРЕИМЕПНБ РЮАКХЖШ НОХЯЮМХЪ ЯРХКЕИ ОПХБМЕЯКХ ЕЫЕ Х МНБШЕ ЮРПХАСРШ Б ХГБЕЯРМШЕ РЮЦХ.

мНБШЕ ЯБНИЯРБЮ ЙНМРЕИМЕПНБ HTML

оЕПЕВЕМЭ МНБШУ ЮРПХАСРНБ С РЮЦНБ HTML ЯКЕДСЕР МЮВЮРЭ Я ЮРПХАСРЮ STYLE. щРНР ЮРПХАСР ХЯОНКЭГСЕРЯЪ ДКЪ НОПЕДЕКЕМХЪ ЯРХКЪ НРНАПЮФЮЕЛНЦН ЙНМРЕИМЕПЮ МЕОНЯПЕДЯРБЕММН БМСРПХ РЮЦЮ МЮВЮКЮ ЙНМРЕИМЕПЮ:

	<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text
	<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text

лНФМН РЮЙФЕ НОПЕДЕКХРЭ ЙКЮЯЯ ЯРХКЕИ Х ХЯОНКЭГНБЮРЭ ЕЦН ОПХ ОНЛНЫХ ЮРПХАСРЮ CLASS:

	<style type="text/css">
	h3.class1 {font-size:12pt;color=blue}
	</style>
	.....
	<h3 class="class1">This is a blue text

б ДЮММНЛ ЯКСВЮЕ ЛШ НОПЕДЕКХКХ ЙКЮЯЯ ГЮЦНКНБЙНБ РПЕРЭЕЦН СПНБМЪ, МН ЛНФМН НОПЕДЕКХРЭ ЙКЮЯЯ, ЙНРНПШИ ЛНФМН АСДЕР ОПХЛЕМЪРЭ Й КЧАШЛ ЙНМРЕИМЕПЮЛ, Ю МЕ РНКЭЙН Й ГЮЦНКНБЙЮЛ:

	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	</style>

KПНЛЕ НОПЕДЕКЕМХЪ ЙКЮЯЯНБ ЯСЫЕЯРБСЕР ЕЫЕ БНГЛНФМНЯРЭ ЯНГДЮМХЪ ОНХЛЕМНБЮММШУ ЯРХКЕИ. оНХЛЕМНБЮММШИ ЯРХКЭ ЯНГДЮЕРЯЪ ЙЮЙ СРНВМЕМХЕ ЙЮЙНЦН-КХАН ЙКЮЯЯЮ:

	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	#C1 { font-size: 20;}
	</style>
	....
	<h3 class="class1">This is a blue text
	<h3 class="class1" id="C1">This is a blue text

рЮЙХЛ НАПЮГНЛ, ЮРПХАСРШ ЙНМРЕИМЕПНБ ОНГБНКЪЧР ЯБЪГЮРЭ НОХЯЮРЕКХ ЯРХКЕИ Я ЯНДЕПФЮМХЕЛ ЙНМРЕИМЕПНБ Х СОПЮБКЪРЭ ТНПЛНИ НРНАПЮФЮЕЛНИ ХМТНПЛЮЖХХ.

яБНИЯРБЮ ЙНМРЕИМЕПНБ, СОПЮБКЪЕЛШЕ НОХЯЮРЕКЪЛХ ЯРХКЕИ

оЕПБСЧ ЦПСООС ЯБНИЯРБ ЯНЯРЮБКЪЧР ЯБНИЯРБЮ ЬПХТРНБ:

font-size, font-family, font-weight, font-style.

бРНПСЧ ЦПСООС ЯБНИЯРБ ЯНЯРЮБКЪЧР ЯБНИЯРБЮ РЕЙЯРЮ:

line-height, text-decoration, text-transform, text-align, text-indent.

рПЕРЭЧ ЦПСООС ЯБНИЯРБ ЯНЯРЮБКЪЧР ЯБНИЯРБЮ АКНЙНБ РЕЙЯРЮ:

margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

вЕРБЕПРСЧ ЦПСООС ЯНЯРЮБКЪЧР НОХЯЮРЕКХ ЖБЕРЮ ТНМЮ Х ЖБЕРЮ РЕЙЯРЮ:

color, background-image, background-color.

йПНЛЕ РНЦН, ЯСЫЕЯРБСЧР ЯБНИЯРБЮ НОПЕДЕКЪЧЫХЕ РХО ОСКЭЙХ С ЩКЕЛЕМРНБ ЯОХЯЙЮ Х ПЪД ДПСЦХУ ЯБНИЯРБ ЩКЕЛЕМРНБ HTML-ПЮГЛЕРЙХ.

мЮГЮД | яНДЕПФЮМХЕ | бОЕПЕД