Бірнеше HTML-файлдарына арналан стиль

Аралас стильдерді пайдалану

Жеке бір тг шін жазылан стиль

Мысалы, <P> тгі арылы наты бір абзац алай бейнеленетінін былай крсете аламыз:

<Р style="font-size:1.5cm; color:green">

Бл абзаца стильдік анытау тсілі олданылып отыр.

Стиль style атрибутымен берілген. Мнда браузерге абзацты клемі 1.5 сантиметр болатын жасыл ріптермен жазуа нсау берілген.

Стильді анытау мынадай трде жазылады:

сипаттама:мні;

font-size:1.5cm;

color:green;

рбір анытаулар бір-бірінен «;» символы арылы блініп жазылады. Style атрибутын оны параметрлері арылы рбір тгке олдана аламыз. Енді стильдер олданылатын толыыра бір мысал арастырайы.

Мысал

<HTML>

<HEAD>

<TITLE> Жеке тг стилі </TITLE>

</HEAD>

<BODY bgcolor=white text=black>

<H2> Бір тг шін жазылан стиль </H2>

<HR>

<UL>

Lt;LI> Бл арапайым мтін.

<LI style="color: red; font-size: 1cm;

font-style: italic">

Биіктігі 1 см исайтылан ызыл

Ріптер.

<LI style="margin-left: 2cm">

Сол жа шеттен 2 сантиметр шегініс.

</UL>

</BODY>

</HTML>

Жеке HTML-файлына арналан стиль

Стильді тек бір тг шін немесе бірнеше тгтер шін бір рет жазылан анытаулар HTML-жатыны басынан соына дейінсер ететіндей етуге болады.

Мысалы, барлы тгтер атауларын тізіп, стильдік анытауларды жатты таырып блігіне орналастыру ажет.

Стильдік анытаулар немесе селекторлар мынадай блок ішіне жазылады

<style>. . . </style>

жне HTML-комментарий ретінде жазылады.

 

1.2 мысал:

<HTML>

<HEAD>

<TITLE> Жеке файла арналан стиль </TITLE>

<STYLE type="text/css">

<!--

H1,H2,H3,H4,H5,H6

{

text-align: right;

color:red;

font-family: "Arial Cyr",

Geneva, sans-serif;

}

-->

</STYLE>

</HEAD>

<BODY bgcolor=#DFF0D5 text=black>

<H2> Жеке файл стилі </H2>

<HR>

Lt;P> Бл арапайым мтін

<H3> Бл таырып </H3>

Lt;P> Бл да арапайым мтін

Lt;/BODY

</HTML>

 

Браузер мндаы таырыптарды жмыр аріппен (рубленый аріп) ызыл тсте о жа шетке туралап орналастырады. Браузерді мндай рекетін мынадай кодтар атарады (1.3 мысал):

1.3 мысал

<STYLE type="text/css">

<!--

Н1,Н2,НЗ,Н4,Н5,Н6

{

text-align: right;

color: red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

-->

</STYLE>

Бл мысалда ш сипаттама былай берілген:

 

• text-align: right; – о жа шетке туралау;

• color: red; – тсі ызыл;

• font-family: "Arial Cyr", – жмыр аріп (аріп).

Geneva, Helvetica, sans-serif;

Таырыптар Arial Cyr арпімен берілуі тиіс (егер ттынушы компьютерінде ол бар болса). Егер ол аріп (аріп) болмаса, браузер келесі крсетілген Geneva, Helvetica аріптерді немесе йтеуір бір жмыр аріпі ( «sans-serif») пайдаланады. Егер бір де бірі табылмаса, «нсіз келісім бойынша аріпті» (аріпом по умолчанию), яни кбінесе Times New Roman арпін олданады.

Бірнеше HTML-файлдара арналан стиль

детте бірнеше файлдара арналан стильдер баса бір жеке файла блек жазылады. Мндай файл типі (кеейтілуі) css болып жазылады. Мысалы, style.css файлына мынадай стильдерді жазайы:

BODY {margin-left: 40рх;}

Hl,H2,H3,H4,H5,H6

{

text-align: right;

color: red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

Осы стильдерді іске осу шін HTML-файлды таырып <head>...</head> блігіне мынадай сілтеме орналастыру керек:

<LINK rel=stylesheet type="text/css“ href=style.css>

Осы стильдік файла бірнеше HTML-жаттар сілтеме жасай алады. Осы файла бір згеріс енгізу ішкі сілтемелері бар ондаан паратара сер етеді.

Мынадай стильдік анытау

body {margin-left: 40рх;}

барлы жолдар шін сол жа шеттен 40 пиксель шегініс береді. Міне, HTML тіліндегідей кесте олданбай, ріс крсетпей, стиль арылы ана осындай ммкіндіктер жасауа болады екен.