Бірнеше 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 тіліндегідей кесте қолданбай, өріс көрсетпей, стиль арқылы ғана осындай мүмкіндіктер жасауға болады екен.