псяяйхе днйслемрш: CSS

CSS - Cascading Style Sheets

What is Css
- About Css
- Structure&Rules
- Inline Style Sheets
- Global Style Sheets
- Linked Style Sheets

Css Properties
- Font Properties
- Text Properties
- Color and Background Properties
- Classification
- Box Properties

Units
- Length Units
- Percentage Units
- Color Units
- URLs

Chapter I >> What Is Css

[1] About Css

рЮЙ ВРН ЩРН РЮЙНЕ - яss? Cascading Style Sheets ( рЮАКХЖШ йЮЯЙЮДМШУ яРХКЕИ ). Css - ЩРН ЪГШЙ ЯНДЕПФЮЫХИ МЮАНП ЯБНИЯРБ ДКЪ НОПЕДЕКЕМХЪ БМЕЬМЕЦН БХДЮ ДНЙСЛЕМРЮ. я ЕЦН ОНЛНЫЭЧ ДХГЮИМЕП ХЛЕЕР ОНКМШИ ЙНМРПНКЭ МЮД ЯРХКЕЛ Х ПЮЯОНКНФЕМХЕЛ ЙЮФДНЦН ЩКЕЛЕМРЮ БЕА ЯРПЮМХЖШ. щРН ЦНПЮГДН ОПНЫЕ ХЯОНКЭГНБЮМХЪ НАШВМНЦН МЮАНПЮ HTML РЕЦНБ. оПХБЕДС ОПХЛЕП: бЮЛ МСФМН ЯНГДЮРЭ ФХПМШИ ЙПЮЯМШИ ОНДВЕПЙМСРШИ РЕЙЯР.

HTML EXAMPLE: <font color="red"><strong><u>Hello World</u></strong></font>

ю ЕЯКХ ОНДНАМШИ ЯРХКЭ МСФМН ХЯОНКЭГНБЮРЭ МЕЯЙНКЭЙН ПЮГ? уНПНЬН ЕЯКХ ПЮГ 5, Ю ЕЯКХ 10-20? бНР РСР МЮЛ Х ОНЛНФЕР яss. яСЫЕЯРБСЕР РПХ БХДЮ РЮАКХЖ ЯРХКЕИ: бМСРПЕММХЕ РЮАКХЖШ ЯРХКЕИ, цКНАЮКЭМШЕ РЮАКХЖШ ЯРХКЕИ Х яБЪГЮММШЕ РЮАКХЖШ ЯРХКЕИ. бМСРПХМХЕ РЮАКХЖШ ЯРХКЕИ ( Inline Style Sheets ) ЛЮКН ВЕЛ НРКХВЮЧРЯЪ НР HTML РЕЦНБ. цКНАЮКЭМШЕ ( Global Style Sheets ) НОПЕДЕКЪЧР ЯРХКЭ ЩКЕЛЕМРНБ БН БЯЕЛ ДНЙСЛЕМРЕ. яБЪГЮММШЕ ( Linked Style Sheets ) ЛНЦСР АШРЭ ХЯОНКЭГНБЮМШ ДКЪ МЕЯЙНКЭЙХУ ДНЙСЛЕМРНБ Х УПЮМЪРЯЪ БН БМЕЬМЕЛ ТЮИКЕ. оНДПНАМЕЕ НА ЩРНЛ МЮОХЯЮМН МХФЕ.
[ бБЕПУ... ]

Chapter I >> What Is Css

[2] Structure&Rules

яЕКЕЙРНПШ (Selectors):
кЧАНИ ЩКЕЛЕМР HTML ЛНФЕР ХЛЕРЭ CSS ЯЕКЕЙРНП. яЕКЕЙРНП НОПЕДЕКЪЕР ЯРХКЭ ЩКЕЛЕМРЮ, ДКЪ ЙНРНПНЦН НМ ЯНГДЮМ.
EXAMPLE: H1 {color:red;size:20pt;}
бЯЕ ЩКЕЛЕМРШ H1 Б ДНЙСЛЕМРЕ АСДСР ЙПЮЯМНЦН ЖБЕРЮ, ПЮГЛЕПНЛ Б 20 РНВЕЙ (pt , point).
йКЮЯЯНБШЕ ЯЕКЕЙРНПШ (Class Selectors):
CLASS -- ЙКЮЯЯ ЯРХКЕИ Б css. дКЪ ЕЦН НОПЕДЕКЕМХЪ Б css ХЯОНКЭГСЕРЯЪ ГМЮЙ "."+ ХЛЪ.
бЯЕ ЯЕКЕЙРНПШ ЛНЦСР ХЛЕРЭ ПЮГМШЕ ЙКЮЯЯШ. щРН ОНГБНКЪЕР НДХМЮЙНБШЛ ЩКЕЛЕМРЮЛ ХЛЕРЭ ПЮГКХВМШЕ ЯРХКХ.
EXAMPLE: H1.blue {color:blue;size:20pt;}
бЯЕ ЩКЕЛЕМРШ H1 Я ЮРПХАСРНЛ CLASS="blue" ЯРЮМСРЭ ЯХМХЛХ.
йКЮЯЯШ ЛНЦСР АШРЭ РЮЙФЕ НОХЯЮМШ АЕГ ОПХБЪГШБЮМХЪ ХУ Й НОПЕДЕКЕММШЛ ЩКЕЛЕМРЮЛ.
EXAMPLE: .green {color:green;}
б ДЮММНЛ ЯКСВЮЕ БЯЕ ЩКЕЛЕМРШ Я СЙЮГЮММШЛ ЮРПХАСРНЛ CLASS="green" ЯРЮМСР ГЕКЕМШЛХ.
ID ЯЕКЕЙРНПШ (ID Selectors):
ID -- ХМДХБХДСЮКЭМН ХЛЕМНБЮММШИ ЯРХКЭ. C ЕЦН ОНЛНЫЭЧ ЛНФМН ЯНГДЮБЮРЭ ЯРХКХЯРХВЕЯЙХЕ ХЯЙКЧВЕМХЪ cПЕДХ ЩКЕЛЕМРНБ НДМНЦН ЙКЮЯЯЮ. дКЪ НОПЕДЕКЕМХЪ Б css ХЯОНКЭГСЕРЯЪ ГМЮЙ "#"+ ХЛЪ.
хМДХТХЙЮРНПШ ХЯОНКЭГСЧРЯЪ Б НЯМНБМНЛ ДКЪ ОПХДЮМХЪ НДМНЛС ХКХ МЕЯЙНКЭЙХЛ ЩКЕЛЕМРЮЛ НДМНЦН ЙКЮЯЯЮ ХМДХБХДСЮКЭМШУ ЯБНИЯРБ. яЙЮФЕЛ бШ ЯНГДЮКХ ЙКЮЯЯ blue -- ЯХМХИ ЙСПЯХБ. мН БЮЛ ОНМЮДНАХКЯЪ ФХПМШИ, ОНДВЕПЙМСРШИ РЕЙЯР ЯХМХЛ ЙСПЯХБНЛ. йНМЕВМН, ЛНФМН ЯНГДЮРЭ МНБШИ ЙКЮЯЯ, МН ГЮВЕЛ? оПНЫЕ НОХЯЮРЭ ID. мЮОПХЛЕП "boldunderline". х БЯЕ ЩКЕЛЕМРШ ЙКЮЯЯЮ blue Я ГМЮВЕМХЕЛ ID "boldunderline" ЯРЮМСР ФХПМШЛ ОНДВЕПЙМСРШЛ ЯХМХЛ ЙСПЯХБНЛ. оПНХГНИДЕР ЙЮЙ АШ ЯХМРЕГ ЯБНИЯРБ ЙКЮЯЯЮ blue Х ХДХТХЙЮРНПЮ boldunderline.

EXAMPLE:
<html>
<head>
<title> Example </title>
</head>
<style>
.blue {color:blue;font-style:italic}
#boldunderline {text-decoration:underline;font-weight:bold}
</style>
<body>
<p class="blue"> Hello! Welcome To My Homepage!</p>
<p class="blue" id="boldunderline">Will Be Soon</p>
<p id="boldunderline">Under Construction</p>
</body>
</html>

йЮЙ БХДМН ХГ ОПХЛЕПЮ, ID ЛНФЕР АШРЭ ХЯОНКЭГНБЮМ АЕГ СЙЮГЮМХЪ ЙКЮЯЯЮ ( ОНЯКЕДМХИ ОЮПЮЦПЮТ ОПХЛЕПЮ ). рНЦДЮ ОЮПЮЦПЮТ АСДЕР НАКЮДЮРЭ РНКЭЙН ЯБНИЯРБЮЛХ ID ( Б ОПХЛЕПЕ - ФХПМШИ, ОНДВЕПЙМСРШИ РЕЙЯР ).

йНМРЕЙЯРСЮКЭМШЕ ЯЕКЕЙРНПШ (Contextual Selectors):
йНМРЕЙЯРМШЕ ЯЕКЕЙРНПШ - ЩРН ЯНВЕРЮМХЪ МЕЯЙНКЭЙХУ НАШЙМНБЕММШУ ЯЕКЕЙРНПНБ. яРХКЭ ГЮДЮЕРЯЪ РНКЭЙН ЩКЕЛЕРМЮЛ Б ГЮДЮММНИ ОНЯКЕДНБЮРЕКЭМНЯРХ Б ГЮБХЯХЛНЯРХ НР ЙЮЯЙЮДМНЦН ОНПЪДЙЮ.

EXAMPLE: P EM {color:silver;}

б ДЮММНЛ ОПХЛЕПЕ БЯЕ ЩКЕЛЕМРШ EM БМСРПХ ЩКЕЛЕМРНБ P АСДСР ХЛЕРЭ ГЮДЮММШИ ЯРХКЭ.

оПХДЮМХЕ МЕЯЙНКЭЙХЛ ЩКЕЛЕМРЮЛ НДХМЮЙНБШУ ЯБНИЯРБ:
яЙЮФЕЛ бЮЛ МСФМН ОПХДЮРЭ МЕЯЙНКЭЙХЛ ЩКЕЛЕМРЮЛ бЮЬЕИ БЕА ЯРПЮМХЖШ НДХМЮЙНБШУ ЯБНИЯРБ. б ЩРНЛ ЯКСВЮЕ ОПХ НОПЕДЕКЕМХХ ЩКЕЛЕМРНШ ОЕПЕВХЯКЪСРЯЪ ВЕПЕГ ГЮОЪРСЧ.
h1,h2,h3,p,strong {color:green}
бЯЕ ЩКЕЛЕМРШ h1, h2, h3, p Х strong АСДСР ГЕКЕМШЛХ.

оЯЕБДНЙКЮЯЯШ Х ОЯЕБДНЩКЕЛЕМРШ :
оЯЕБДНЙКЮЯЯ ЯНЯРНХР ХГ ЩКЕЛЕМРНБ НДМНЦН РХОЮ, НРБЕВЮЧЬЕЛС НОПЕДЕКЕММНЛС ЙПХРЕПХЧ. оЯЕБДНЙКЮЯЯШ Х ОЯЕБДНЩКЕЛЕМРШ ОПХ НОПЕДЕКЕМХХ НРДЕКЪЧРЯЪ ГМЮЙНЛ ":" .
яОХЯНЙ ОЯЕБДНЙКЮЯЯНБ Х ОЯЕБДНЩКЕЛЕМРНБ :
- Anchor Pseudo Classes -- щРХ ОЯЕБДНЙКЮЯЯШ ЩКЕЛЕМРЮ <a>, НАНГМЮВЮЧЫЕЦН ЯЯШКЙХ. оЯЕБДНЙКЮЯЯШ ЩРНЦН ЩКЕЛЕМРЮ -- link ( КХМЙ ), active ( ЮЙРХБМЮЪ ЯЯШКЙЮ ), visited ( ОНЯЕЫЕММШИ ПЮМЕЕ URL ), hover ( ОПХ ОНДМЕЯЕМХХ ЙСПЯНПЮ, МЕ ПЮАНРЮЕР Б мЕРЯЙЕИОЕ ).
- First Line Pseudo-element -- first-line. щРНР ОЯЕБДНЩКЕЛЕМР ЛНФЕР АШРЭ ХЯОНКЭГНБЮМ Я block-level ЩКЕЛЕМРЮЛХ ( p, h1 Х Р.Д. ). нМ ХГЛЕМЪЕР ЯРХКЭ ОЕПБНИ ЯРПНЙХ ЩРХУ ЩКЕЛЕМРНБ.
- First Letter Pseudo-element -- first-letter. рН ФЕ ЯЮЛНЕ ВРН Х first-line, РНКЭЙН БКХЪЕР МЕ МЮ БЯЧ ЯРПНЙС, Ю РНКЭЙН МЮ ОЕПБШИ ЯХЛБНК.

оПХЛЕП :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}

б ДЮММНЛ ОПХЛЕПЕ БЯЕ ЩКЕЛЕМРШ Anchor (ЯЯШКЙХ) АСДСР ЯХМХЛХ. оПХ МЮФЮРХХ ( Б ЮЙРХБМНЛ ЯНЯРНЪМХХ ) ОНЛЕМЪЧР ЖБЕР МЮ ЙПЮЯМШИ. х ОПХ ОНДБЕДЕМХХ ЙСПЯНПЮ ЛШЬЙХ ХЯВЕГМЕР ОНДВЕПЙХБЮМХЕ. нВЕМЭ ЩТТЕЙРМШИ ОПХЕЛ :-)
[ бБЕПУ... ]

Chapter I >> What Is Css

[3] Inline Style Sheets

йЮЙ СФЕ ЦНБНПХКНЯЭ, ХЯОНКЭГНБЮМХЕ бМСРПЕМХУ ЯРХКЕИ ЛЮКН ВЕЛ НРКХВЮЕРЯЪ НР ХЯОНКЭГНБЮМХЪ НАШВМШУ HTML РЕЦНБ. нМХ ГЮДЮЧР ЯРХКЭ РНКЭЙН НДМНЛС ЩКЕЛЕМРС ДНЙСЛЕМРЮ ОПХ ОНЛНЬХ ЮРПХАСРЮ style Б HTML РЕЦЕ.

HTML EXAMPLE: <font color="blue" size="3" face="Arial">Hello World!</font>
RESULT:Hello World!

INLINE STYLE SHEET EXAMPLE:<font style="color:blue;font-size:12pt;font-family:Arial">Hello World</font>
RESULT:Hello World!

йЮЙ ЛНФМН ГЮЛЕРХРЭ, ЙНД Inline Style Sheet Example ОНКСВХКЯЪ АНКЭЬЕ ВЕЛ HTML Example. оНЩРНЛС ХМНЦДЮ ПЮГСЛМЕЕ ХЯОНКЭГНБЮРЭ НАШВМШЕ HTML РЕЦХ
. [ бБЕПУ... ]

Chapter I >> What Is Css

[4] Global Style Sheets

цКНАЮКЭМШЕ ЯРХКХ ГЮДЮЧР БХД ЩКЕЛЕМРНБ БЯЕЦН ДНЙСЛЕМРЮ. дКЪ ЩРНЦН ХЯОНКЭГСЕРЯЪ РЕЦ <STYLE>. нМ ПЮГЛЕЫЮЕРЯЪ Б ГЮЦНКНБЙЕ ДНЙСЛЕМРЮ. оПХЛЕП:

<html>
<head> <title> Example Of Global Style Sheets </title>
</head>
<style>
h1{color:red;font-style:italic;font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</style>
<body>
<h1> щРНР ГЮЦНКНБНЙ МЮОХЯЮМ ЙПСОМШЛ ЙПЮЯМШЛ ЙСПЯХБНЛ </h1>
бНР <font class="blue"> ЩРН </font> ЯКНБН - ЯХМХЕ, a <font id="bold"> ЩРН</font> -- ФХПМНЕ!!!
</body>
</html>

б ДЮММНЛ ОПХЛЕПЕ БЯЕ ЩКЕЛЕМРШ H1 АСДСР МЮОХЯЮМШ ЙПСОМШЛ ЙПЮЯМШЛ ЙСПЯХБШЛ, БЯЕ ЩКЕЛЕМРШ Я СЙЮГЮММШЛ ЙКЮЯЯНЛ BLUE АСДСР ЯХМХЛХ , Ю Ю БЯЕ ЩКЕЛЕМРШ Я ХМДХТХЙЮРНПНЛ ID="Bold" ЯРЮМСР ФХПМШЛХ.
[ бБЕПУ... ]

Chapter I >> What Is Css
[5] Linked Style Sheets

яБЪГЮММШЕ РЮАКХЖШ ЯРХКЕИ ХЯОНКЭГСЧРЯЪ ДКЪ ОПХДЮМХЪ МЕЯЙНКЭЙХЛ ДНЙСЛЕМРЮЛ НДМНЦН ЯРХКЪ. уПНМЪРЯЪ НМХ Б НРДЕКЭМНЛ ТЮИКЕ. оПХЛЕП (ТЮИК styles.css):

йЮЙ БХДХРЕ, ЩРН НВЕМЭ ОНУНФЕ МЮ Global Styles Sheets. рЮЙ НМН Х ЕЯРЭ. бЯЕ ВРН НРМНЯХКНЯЭ Й цКНАЮКЭМШЛ ЯРХКЪЛ ЯОПЮБЕДКХБН Х ГДЕЯЭ. б ЯЮЛХУ ФЕ ДНЙСЛЕМРЮУ ДЕКЮЕРЯЪ ЯЯШКЙЮ МЮ ЩРНР ТЮИК ОПХ ОНЛНЫХ РЕЦЮ <link>. бШЦКЪДХР ЩРН РЮЙ: <link REL="STYLESHEET" TYPE="text/css" HREF="ОСРЭ ДН ТЮИКЮ">

EXAMPLE:

File [ styles.css ]
<style>
body {background:black;color:red;font-size:9pt}
h1 {color:white}
a:link,a:visited,a:active {color:green}
a:hover {font-weight:bild}
</style>

File [ Index.html ]
<html>
<head>
<title> Example &glt;/title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
[ яНДЕПФЮМХЕ дНЙСЛЕМРЮ ]
</body>
</html>

мЮ ЩРНЛ Ъ ГЮЙЮМВХБЮЧ Chapter I Х ОЕПЕУНФС Й Chapter II.
[ бБЕПУ... ]

Chapter II >> Css Properties

[1] Font Properties

∙ font-family
Possible Values: кЧАНИ ЬПХТР
*Applies to : All elements
нОХЯЮМХЕ: щРН ЯБНИЯРБН НОПЕДЕКЪЕР ХЯОНКЭГСЕЛШИ ЩКЕЛЕМРНЛ ЬПХТР. еЯКХ СЙЮГЮРЭ спк, РН ЬПХТР ЮБРНЛЮРХВЕЯЙХ СЯРЮМНБХРЯЪ МЮ ЙНЛОЭЧРЕП ОНКЭГНБЮРЕКЪ
EXAMPLE:font-family:Arial Black URL('arialblack.ttf')

∙ font-style
Possible Values:
[1] normal - АЕГ ХГЛЕМЕМХИ
[2] italic - ЙСПЯХБ
*Applies to : All elements
нОХЯЮМХЕ: яРХКЭ ЩКЕЛЕМРЮ. йСПЯХБМШИ ХКХ НАШВМШИ
EXAMPLE:font-style:italic

∙ font-variant
Possible Values:
[1] normal - АЕГ ХГЛЕМЕМХИ
[2] small-caps - ГЮЛЕМЪЕР БЯЕ АСЙБШ МЮ АНКЭЬХЕ
*Applies to : All elements
нОХЯЮМХЕ: Netscape БННАЫЕ МЕ ОНДДЕПФХБЮЕР ЩРН ЯБНИЯРБН.
EXAMPLE:font-variant:small-caps

∙ font-weight
Possible Values:
[1] normal - АЕГ ХГЛЕМЕМХИ
[2] bold - ФХПМШИ
[3] bolder - НВЕМЭ ФХПМШИ ( Б MSIE МЕ НРКХВЮЕРЯЪ НР bold, Б мЕРЯЙЕИОЕ НР МНПЛЮК )
[4] lighter - РНМЙХИ ( МЕ НРКХВЮЕРЯЪ НР normal )
[5] КЧАНЕ ГМЮВЕМХЕ НР 100 ДН 900
*Applies to : All elements
нОХЯЮМХЕ: бШДЕКЕМХЕ ( ФХПМНЯРЭ ) ЩКЕЛЕМРЮ
EXAMPLE:font-weight:bold

∙ font-size
Possible Values:
[1] ПЮГЛЕП (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large - КЧАНЕ ХГ ЩРХУ ГМЮВЕМХИ
[3] smaller, larger - КЧАНЕ ХГ ЩРХУ ГМЮВЕМХИ
*Applies to : All elements
нОХЯЮМХЕ: пЮГЛЕП ЬПХТРЮ
EXAMPLE:font-size:30pt

∙ font
Possible Values:
*Applies to : All elements
нОХЯЮМХЕ: нАНАЫЮЕР БЯЕ БШЬЕОЕПЕВХЯКЕММШЕ ЯБНИЯРБЮ
EXAMPLE:font: italic bolder Arial 12pt

[ бБЕПУ... ]

Chapter II >> Css Properties

[2] Text Properties

∙ word-spacing
Possible Values:
[1] ДКХМЮ (+)
[2] normal - АЕГ ХГЛЕМЕМХИ
*Applies to : All elements
нОХЯЮМХЕ: пЮЯЯРНЪМХЕ ЛЕФДС cКНБЮЛХ. мЕ ПЮАНРЮЕР МХ Б мЕРЯЙЕИОЕ, МХ Б MSIE
EXAMPLE:word-spacing:0.4em

∙ text-decoration
Possible Values:
[1] none - МЕР
[2] underline - ОНДВЕПЙМСРШИ
[3] overline - МЮДВЕПЙМСРШИ ( МЕ ОНДДЕПФХБЮЕРЯЪ Б мЕРЯЙЕИОЕ )
[4] line-through - ОЕПЕВЕПЙМСРШИ
[5] blink - ЛХЦЮЧЫХИ ( МЕ ОНДДЕПФХБЮЕРЯЪ Б IE )
*Applies to : All elements
нОХЯЮМХЕ: "сЙПЮЬЕМХЕ" РЕЙЯРЮ
EXAMPLE:text-decoration:line-through

∙ letter-spacing
Possible Values:
[1] ДКХМЮ (+)
[2] normal - АЕГ ХГЛЕМЕМХИ
*Applies to : All elements
нОХЯЮМХЕ: пЮЯЯРНЪМХЕ ЛЕФДС АСЙБЮЛХ. мЕ ПЮАНРЮЕР Б мЕРЯЙЕИОЕ
EXAMPLE:letter-spacing:100

∙ vertical-align
Possible Values:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] ОПНЖЕМР
*Applies to : Inline elements
нОХЯЮМХЕ: оНГХЖХНМХПНБЮМХЕ ЩКЕЛЕМРНБ ОН НРМНЬЕМХЧ Й ДПСЦХЛ ЩКЕЛЕМРЮЛ ЯРНЪЫХУ Б НДМНЛ ПЪДС. мЕ ПЮАНРЮЕР Б мЕРЯЙЕИОЕ
EXAMPLE:vertical-align:top-text

∙ text-transform
Possible Values:
[1] none - МЕР
[2] Capitalize - ЙЮФДНЕ ЯКНБН МЮВХМЮЕРЯЪ Я АНКЭЬНИ АСЙБШ
[3] UPPERCASE - ЙЮФДЮЪ АСЙБЮ РЕЙЯРЮ ЯРЮМНБХРЯЪ ГЮЦКЮБМНИ
[4] lowercase - ЙЮФДЮЪ АСЙБЮ РЕЙЯРЮ ЯРЮМНБХРЯЪ ЛЮКЕМЭЙНИ
*Applies to : Inline elements
нОХЯЮМХЕ: хГЛЕМЕМХЕ РЕЙЯРЮ. мЕ ПЮАНРЮЕР Б мЕРЯЙЕИОЕ
EXAMPLE:text-transform:Capitalize

∙ text-align
Possible Values:
[1] left - РЕЙЯР ЯКЕБЮ
[2] right - РЕЙЯР ЯОПЮБЮ
[3] center - РЕЙЯР ОН ЖЕМРПС
[3] justify - РЕЙЯР "ПЮЯРЪМСР"
*Applies to : Block-level elements
нОХЯЮМХЕ: оНКНФЕМХЕ РЕЙЯРЮ
EXAMPLE:text-align:right

∙ text-indent
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : Block-level elements
нОХЯЮМХЕ: нРЯРСО
EXAMPLE:text-indent:30 em

∙ line-height
Possible Values:
[1] normal - АЕГ ХГЛЕМЕМХИ
[2] ДКХМЮ (+)
[3] ОПНЖЕМР
*Applies to : All elements
нОХЯЮМХЕ: нРЯРСО ЯБЕПУС
EXAMPLE:line-height:100%

[ бБЕПУ... ]

Chapter II >> Css Properties

[3] Color and Background Properties

∙ color
Possible Values:
[1] ЖБЕР (+)
*Applies to : All elements
нОХЯЮМХЕ: жБЕР
EXAMPLE:color:#f00000

∙ backgroung-color
Possible Values:
[1] ЖБЕР (+)
*Applies to : All elements
нОХЯЮМХЕ: жБЕР ТНМЮ ЩКЕЛЕМРЮ
EXAMPLE:background-color:#f00000

∙ background-image
Possible Values:
[1] none - МЕР
[2] URL (+)
*Applies to : All elements
нОХЯЮМХЕ: тНМНБНЕ ХГНАПЮФЕМХЕ
EXAMPLE:background-image:URL(cool.gif)

∙ background-repeat
Possible Values:
[1] repeat - ПЮГЛМНФЮЕР ТНМНБНЕ ХГНАПЮФЕМХЕ БН БЯЕУ МЮОПЮБКЕМХЪУ
[2] repeat-x - ПЮГЛМНФЮЕР ТНМНБНЕ ХГНАПЮФЕМХЕ ЦНПХГНМРЮКЭМН
[3] repeat-y - ПЮГЛМНФЮЕР ТНМНБНЕ ХГНАПЮФЕМХЕ БЕПРХЙЮКЭМН
[4] no-repeat - МЕ ОНБРНПЪЧЫХЕЯЪ ХГНАПЮФЕМХЕ
*Applies to : All elements
нОХЯЮМХЕ: оНБРНПЕМХЪ ТНМНБНЦН ХГНАПЮФЕМХЪ
EXAMPLE:background-repeat:no-repeat

∙ background-attachment
Possible Values:
[1] scroll - ТНМНБНЕ ХГНАПЮФЕМХЕ ЯЙПНККХРЯЪ БЯЕЯРЕ Я ЯНДЕПФЮМХЕЛ ДНЙСЛЕМРЮ
[2] fixed - МЕ ЯЙПНККХРЯЪ. тХЙЯХПСЕРЯЪ Б НДМНЛ ЛЕЯРЕ
*Applies to : All elements
нОХЯЮМХЕ: бНГЛНФМНЯРЭ ОПНЙПСРЙХ ТНМНБНЦН ХГНАПЮФЕМХЪ
EXAMPLE:background-attachment:fixed

∙ background-position
Possible Values:
[1] ОПНЖЕМР НР ДКХММШ + ОПНЖЕМР НР БШЯНРШ (+)
[2] top, middle, bottom - НДМН ХГ ГМЮВЕМХИ
[3] left, center, right - НДМН ХГ МЮВЕМХИ
[4] ПЮЯЯРНЪМХЕ НР КЕБНЦН ЙПЮЪ + ПЮЯЯРНЪМХЕ НР БЕПЬХМШ
*Applies to : Block-level and replaced elements
нОХЯЮМХЕ: оНКНФЕМХЕ ТНМНБНЦН ХГНАПЮФЕМХЪ ( ПЮАНРЮЕР Я background-repeat ПЮБМШЛ repeat-x ХКХ repeat-y )
EXAMPLE:background-position:50%0%

∙ background
Possible Values:
*Applies to : All elements
нОХЯЮМХЕ: нАНАЫЮЕР БЯЕ БШЬЕОЕПЕВХЯКЕММШЕ ЯБНИЯРБЮ
EXAMPLE:background:no-repeat black fixed 50%0%

[ бБЕПУ... ]

Chapter II >> Css Properties

[4] Classification

∙ display
Possible Values:
[1] none - МЕ НРНАПЮФЮЕРЯЪ
[2] block - ПЮГАХБЮЕР КХМХЧ ( = ЯРПНЙС ) ДН Х ОНЯКЕ ЩКЕЛЕМРЮ.
[3] inline - МЕ ПЮГАХБЮЕР КХМХЧ ( = ЯРПНЙС ). р.Е. ЩКЕЛЕМР ЛНФЕМ МЮУНДХРЯЪ МЮ НДМНИ КХМХХ Я ДПСЦХЛХ ЩКЕЛЕМРЮЛХ.
[4] list-item - ПЮГАХБЮЕР КХМХЧ ( = ЯРПНЙС ) ДН Х ОНЯКЕ ЩКЕЛЕМРЮ + ДНАЮБКЪЕР ЛЮПЙЕП ЙЮЙ С list-item ЩКЕЛЕМРНБ
*Applies to : All elements
нОХЯЮМХЕ: нОПЕДЕКЪЕР ЙЮЙ АСДЕР НРНАПЮФЮРЭЯЪ ЩКЕЛЕМР.
EXAMPLE:display:none

∙ white-space
Possible Values:
[1] normal - "ЯФХЛЮЕР" МЕЯЙНКЭЙН ОНДПЪД ХДСЫХУ ОПНАЕКНБ Б НДХМ
[2] pre - ДНОСЯЙЮЕР НРНАПЮФЕМХЕ МЕЯЙНКЭЙНКЭЙХУ ОНДПЪД ХДСЫХУ ОПНАЕКНБ
[3] nowrap - МЕ ДНОСЯЙЮЕР ОЕПЕМНЯ ЯРПНЙХ АЕГ РЮЦЮ <BR>
*Applies to : Block-level elements
нОХЯЮМХЕ: нОПХДЕКЪЕР ЙЮЙ АСДСР НРНАПЮФЮРЭЯЪ ОПНАЕКШ ЛЕФДС ЩКЕЛЕМРЮЛХ
EXAMPLE:white-space:nowrap

∙ list-style-type
Possible Values:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha ХКХ upper-alpha
[2] none - МХЙЮЙНИ
*Applies to : Elements with display value list-item
нОХЯЮМХЕ: нОПЕДЕКЪЕР БХД list-item ЛЮПЙЕПЮ. еЯКХ ГМЮВЕМХЕ list-style-image ПЮБМН none ХКХ МЕ СРНВМЕМН
EXAMPLE:list-style-type:lower-alpha

∙ list-style-image
Possible Values:
[1] none - МЕР
[2] URL (+)
*Applies to : Elements with display value list-item
нОХЯЮМХЕ: гЮДЮЕР БХД list-item ЛЮПЙЕПЮ Б БХДЕ ЙЮПРХМЙХ
EXAMPLE:list-style-image:URL(cool.gif)

∙ list-style-position
Possible Values:
[1] inside - ОПХ ОЕПЕМНЯЕ ЯКЕДСЧЫХЕ ЯРПНЙХ АСДСР НРНАПЮФЮРЭЯЪ АЕГ НРЯРСОЮ
[2] outside - ОН СЛНКВЮМХЧ
*Applies to : Elements with display value list-item
нОХЯЮМХЕ: нОПЕДЕКЪЕР ОНКНФЕМХЕ ЛЮПЙЕПЮ Б ГЮБХЯХЛНЯРХ НР list item ЩКЕЛЕМРЮ
EXAMPLE:list-style-position:inside

[ бБЕПУ... ]

Chapter II >> Css Properties

[4] Box Properties

∙ margin-top
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
[3] auto - ЮБРНЛЮРХВЕЯЙХ
*Applies to : All elements
нОХЯЮМХЕ: нОПЕДЕКЪЕР НРЯРСО ЯБЕПУС
EXAMPLE:margin-top:100

∙ margin-right
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
[3] auto - ЮБРНЛЮРХВЕЯЙХ
*Applies to : All elements
нОХЯЮМХЕ: нОПЕДЕКЪЕР НРЯРСО ЯОПЮБЮ
EXAMPLE:margin-right:100%

∙ margin-bottom
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
[3] auto - ЮБРНЛЮРХВЕЯЙХ
*Applies to : All elements
нОХЯЮМХЕ: нОПЕДЕКЪЕР НРЯРСО ЯМХГС
EXAMPLE:margin-bottom:100em

∙ margin-left
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
[3] auto - ЮБРНЛЮРХВЕЯЙХ
*Applies to : All elements
нОХЯЮМХЕ: нОПЕДЕКЪЕР НРЯРСО ЯКЕБЮ
EXAMPLE:margin-left:100pt

∙ margin
Possible Values: ^
*Applies to : All elements
нОХЯЮМХЕ: нАНАЫЮЕР БЯЕ БШЬЕОЕПЕВХЯКЕММШЕ ЯБНИЯРБЮ
EXAMPLE:background:100pt

∙ padding-top
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : All elements
нОХЯЮМХЕ: нРЯРСО НР БЕПУМЕЦН border'Ю
EXAMPLE:padding-top:100pt

∙ padding-right
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : All elements
нОХЯЮМХЕ: нРЯРСО НР ОПЮБНЦН border'Ю
EXAMPLE:padding-right:100%

∙ padding-bottom
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : All elements
нОХЯЮМХЕ: нРЯРСО НР МХФМЕЦН border'Ю
EXAMPLE:padding-bottom:100em

∙ padding-left
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : All elements
нОХЯЮМХЕ: нРЯРСО НР КЕБНЦН border'Ю
EXAMPLE:padding-top:100

∙ padding
Possible Values: ^
*Applies to : All elements
нОХЯЮМХЕ: нАНАЫЮЕР БЯЕ БШЬЕОЕПЕВХЯКЕММШЕ ЯБНИЯРБЮ
EXAMPLE:padding:100px

∙ border-top-width
Possible Values:
[1] ДКХМЮ (+)
[2] thin, medium ХКХ thick
*Applies to : All elements
нОХЯЮМХЕ: РНКЫХМЮ БЕПУМЕЦН border'Ю
EXAMPLE:border-top-width:100pt

∙ border-right-width
Possible Values:
[1] ДКХМЮ (+)
[2] thin, medium ХКХ thick
*Applies to : All elements
нОХЯЮМХЕ: РНКЫХМЮ ОПЮБНЦН border'Ю
EXAMPLE:border-right-width:thick

∙ border-bottom-width
Possible Values:
[1] ДКХМЮ (+)
[2] thin, medium ХКХ thick
*Applies to : All elements
нОХЯЮМХЕ: РНКЫХМЮ МХФМЕЦН border'Ю
EXAMPLE:border-bottom-width:100em

∙ border-left-width
Possible Values:
[1] ДКХМЮ (+)
[2] thin, medium ХКХ thick
*Applies to : All elements
нОХЯЮМХЕ: РНКЫХМЮ КЕБНЦН border'Ю
EXAMPLE:border-left-width:medium

∙ border-color
Possible Values: color
нОХЯЮМХЕ: жБЕР border'Ю (+)
*Applies to : All elements
EXAMPLE:border-color:green

∙ width
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : Block-level and replased elements
нОХЯЮМХЕ: ЬХПХМЮ ЩКЕЛЕМРЮ
EXAMPLE:width:10%

∙ height
Possible Values:
[1] ДКХМЮ (+)
[2] ОПНЖЕМР (+)
*Applies to : Block-level and replaced elements
нОХЯЮМХЕ: БШЯНРЮ ЩКЕЛЕМРЮ
EXAMPLE:height:100pt

∙ float
Possible Values:
[1] left - ЯКЕБЮ
[2] right - ЯОПЮБЮ
[3] none - ОН СЛНКВЮМХЧ
*Applies to : All elements
нОХЯЮМХЕ: ПЮЯОНКНФЕМХЕ ЩКЕЛЕМРЮ
EXAMPLE:float:right

∙ clear
Possible Values:
[1] left - ЯКЕБЮ
[2] right - ЯОПЮБЮ
[3] both - c ДБСУ ЯРНПНМ
[4] none - ОН СЛНКВЮМХЧ
*Applies to : All elements
нОХЯЮМХЕ: ПЮЯОНКНФЕМХЕ ДПСЦХУ ЩКЕЛЕМРНБ БНЙПСЦ ДЮММНЦН
EXAMPLE:clear:both

[ бБЕПУ... ]

Chapter III >> Units

[1] Length Units

Syntax : "+" ХКХ "-" ГЮРЕЛ [ВХЯКН] ОКЧЯ [ЕДХМХЖЮ ХГЛЕПЕМХЪ] ( АЕГ ОПНОСЯЙНБ )
Example : -566pt
еДХМХЖШ ДКХММШ :
em - ems , БШЯНРЮ ХЯОНКЭГСЕЛНЦН ЩКЕЛЕМРНЛ ЬПХТРЮ
ex - x-height, ЬХПХМЮ АСЙБШ "x" ХЯОНКЭГСЕЛНЦН ЩКЕЛЕМРНЛ ЬПХТРЮ
px - pixels, ОХЙЯЕКШ
in - inches, ДЧИЛШ
cm - centimeters, ЯЮМРХЛЕРПШ
mm - millimeters, ЛХККХЛЕРПШ
pt - points, РНВЙЮ ( 1pt = 1/72in )
pc - picas ( 1pc = 12pt )
[ бБЕПУ... ]

Chapter III >> Units

[2] Percentage Units

Syntax : "+" ХКХ "-" ГЮРЕЛ [ВХЯКН] ОКЧЯ "%" ( АЕГ ОПНОСЯЙНБ )
Example : -566%
[ бБЕПУ... ]

Chapter III >> Units

[3] Color Units

Syntax : [color]
Example : magenta
гМЮВЕМХЕЛ ЖБЕРЮ ЛНФЕР АШРЭ ЕЦН МЮГБЮМХЕ ( red , lightgreen, coral Х Р.Д. ) ХКХ RGB ГМЮВЕМХЕ

яОНЯНАШ БШПЮГХРЭ ЖБЕР Б RGB ( red green blue ) :
∙ #rrggbb ( МЮОПХЛЕП, #00cc00 )
∙ rgb(x,x,x) -- ЦДЕ "У" ВХЯКН НР 0 ДН 255 ( МЮОПХЛЕП, rgb(0,204,0 ) )
∙ #rgb ( МЮОПХЛЕП, #0c0 )
∙ rgb (x%,x%,x%) -- ЦДЕ "У%" ВХЯКН НР 0.0 ДН 100.0 ( МЮОПХЛЕП, 0%,80%,0% )

бЯЕ ОПХЛЕПШ НРНАПЮФЮЧР НДХМ Х РНР ФЕ ЖБЕР
[ бБЕПУ... ]

Chapter III >> Units

[4] URLs

Syntax : "URL" , ОНРНЛ Б ЯЙНАЙЮУ ОПХБНДХРЯЪ ЯЯШКЙЮ.яЯШКЙС РЮЙФЕ ЛНФМН, ОНЛХЛН ЯЙНАНЙ, ГЮЙКЧВХРЭ Б НДХМЮПМШЕ ХКХ ДБНИМШЕ ЙЮБШВЙХ ( АЕГ ОПНОСЯЙНБ )
Example : URL('cool.gif')
[ бБЕПУ... ]

Other >> нР юБРНПЮ

Disclaimer (НРЛЮГЙЮ) : бНГЛНФМН МЮКХВХЕ НЬХАНЙ Х НОЕВЮРНЙ Б ЩРНИ ЯРЮРЭЕ. бЯЕ ЛШ КЧДХ Х МЕ ГЮЯРПЮУНБЮМШ НР МЕНФХДЮМНЯРЕИ. еЯКХ РЮЙНБШЕ АСДСР бЮЛХ ГЮЛЕВЕМШ - ЯННАЫХРЕ ЛМЕ, Ъ ХУ НАЪГЮРЕКЭМН ХЯОПЮБКЧ. рЮЙФЕ ЛНФЕРЕ ОПХЯШКЮРЭ ОПЕДКНФЕМХЪ Х ДНОНКМЕМХЪ ЙЮЯЮРЕКЭМН ЩРНИ ЯРЮРЭХ.
оНД MSIE ( ОПНЯРН IE ХКХ хМРЕПМЕР щЙЯОКНПЕП ) Х мЕРЯЙЕИОНЛ ОНДПЮГСЛХБЮЕРЯЪ Microsoft Internet Explorer 4.0+ Х Netscape Navigator 4.0+ ЯННРБЕРЯРБЕММН.

----------------------------------------------------------------------------------------------------------------

дЮММЮЪ ЯРЮРЭЪ ЪБКЪЕРЯЪ ЛНЕИ ХМРЕКЕЙРСЮКЭМНИ ЯНАЯРБЕММНЯРЭЧ Х ГЮЫХЫЮЕРЯЪ ГЮЙНМНЛ пт НА ЮБРНПЯЙНЛ ОПЮБЕ.
кЧАНЕ ЙНЛЛЕПВЕЯЙНЕ ХЯОНКЭГНБЮМХЕ ЛЮРЕПХЮКНБ ДЮММНИ ЯРЮРЭХ АЕГ ОХЯЭЛЕММНЦН ПЮГПЕЬЕМХЪ ЮБРНПЮ ГЮОПЕЫЕМН.
оПХ МЕЙНЛЕПВЕЯЙНЛ ХЯОНКЭГНБЮМХХ ЯЯШКЙЮ МЮ ЮБРНПЮ НАЪГЮРЕКЭМЮ.