Аралас стильдерді пайдалану
Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тәсілі бар екен:
• жеке тәг үшін анықтау;
• HTML-файлының тақырыбында анықтау;
• басқа CSS файлында стильді анықтау.
Енді осы тәсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық.
Бірнеше мысалдар келтірейік.
CSS анықтаулары жоқ құжат
Төмендегі мысалда тақырыптар қара түспен ақ фон арқылы жазылады.
1.4 мысал
<HTML>
<HEAD> <TITLE> 1 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<HЗ> 3 тақырып </HЗ>
</BODY>
</HTML>
Жеке тәг үшін CSS анықтау
Төмендегі код алғашқы екі тақырыпты қара түспен, ал соңғысын қызыл түспен бейнелейді.
1.5 мысал
<HTML> <HEAD> <TITLE> 2 мысал </TITLE> </HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
<HEAD> тәгіндегі CSS-нұсқаулар
Төменде (1.6 мысал) алғашқы екі тақырып көк, ал соңғысы – қызыл болып шығады.
1.6 мысал
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<TITLE> 3 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып</H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
CSS-файлдағы CSS-анықтаулар
Алдын ала жазылған prim.сss файлының ішкі мәтіні:
H1, H2, H3
{
color: green;
}
Енді осы файлды пайдаланатын HTML-құжат коды мен оның бейнесін қарастырайық.
Мысал
<HTML>
<HEAD>
<!-- prim.css файлын іске қосу. -->
<LINK rel=stylesheet type="text/css" href-prim.css>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<TITLE> 4 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
Енді <style> және <link> тәгтерін басқаша тәртіппен орналастырайық.
Мысал
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H1,H2,H3
{
color: blue;
}
-->
</STYLE>
<!-- prim.css файлын іске қосу -->
<LINK rel=stylesheet type="text/css" href=prim.css>
<TITLE> 5 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1>
<H2> 2 тақырып </H2>
<H3 style="color:red"> 3 тақырып </H3>
</BODY>
</HTML>
Сонымен, CSS арқылы мыналар атқарылады:
· өрістер, шегіністер, қаріп мөлшері (көлемі) және типі, мәтін түсі мен фоны, т.б. парақтың жекелеген элементтері (абзацтар, сөздер, әріптер) үшін беріледі.
· жүздеген файлдардан тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек бір ғана CSS файлын түзету арқылы өзгерту;
· HTML-құжаттың ішкі тәгтері санын азайтып, оның ішкі ақпараттық мазмұнын браузер экранының сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу.