2015-09-06
638
Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тәсілі бар екен:
• жеке тәг үшін анықтау;
• HTML-файлының тақырыбында анықтау;
• басқа CSS файлында стильді анықтау.
Енді осы тәсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық. Бірнеше мысалдар келтірейік. CSS анықтаулары жоқ құжат. Төмендегі мысалда тақырыптар қара түспен ақ фон арқылы жазылады.
<HTML> <HEAD> <TITLE> 1 мысал </TITLE> </HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып </H1><H2> 2 тақырып </H2><HЗ> 3 тақырып </HЗ>
</BODY></HTML>
Жеке тәг үшін CSS анықтау. Төмендегі код алғашқы екі тақырыпты қара түспен, ал соңғысын қызыл түспен бейнелейді.
<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-нұсқаулар. Төменде алғашқы екі тақырып көк, ал соңғысы – қызыл болып шығады.
|
|
|
<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-құжаттың ішкі тәгтері санын азайтып, оның ішкі ақпараттық мазмұнын браузер экранының сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу.
13.CSS қасиеттері, өлшем бірліктерін бірінен біріне түрлендіру.
Стильдік əр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет.
Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:
· қаріп (қаріп);
· түстер;
· мəтін;
· өрістер мен жақтаулар (поля и рамки);
· сыртқы түрлері.
Стильдерде қолданылатын өлшем бірліктері төменде көрсетілген.
| Белгіленуі | Атауы | Мысалы |
| In | Дюйм | <Р style="font-size:1in"> |
| Cm | Сантиметр | <Р style="font-size: 1cm"> |
| Mm | Миллиметр | <P style="font-size:1mm"> |
| Рх | Пиксел | <Р style="font-size:1px"> |
| Pt | Пункт | <Р style="font-size:1pt"> |
| Рс | Пика | <Р style="font-size:1pc"> |
| % | Пайыз | <Р style="font-size:1%"> |
Пункттер мен пикалар — типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді. Word-та, мысалы, бұл параметр 8-ден 72 пт-ке дейін. Бұл кегльдің пунктпен берілген мөлшері. 1 типографиялық пт = 1/72дюйм= 0,375 мм. Бұл символдың өз мөлшері емес, оның
“ұпай” («очко») мөлшері, яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 қаріптің бас əрпінің көлемі 7 пункт шамасында болады.
Кітап шығаруда – мəтін көлемі 10 немесе 12 пт болады. Тақырыптар үшін — үлкенірек кегль, ал сілтемелер мен ескертпелер үшін кішірек (əдетте 8 пт) мəндері қолданылады.
Пика – үленірек өлшем бірлігі, 1 пика = 12 пт.
Пайыздық өлшем (процентный отсчет) негізгі мөлшерге байланысты болады. Қаріптер үшін — ағымдағы мəн негізге алынады. Пайызды пайдалану ыңғайлы болып саналады. Егер программалаушы браузердегі қаріп көлемін стильдерде пайызбен беріп отырса, олар пропорциональ түрде өзгереді.
14.Қаріп (Шрифт) стильдері (font-family font-size); (color background-color).
Бұл стильдік қасиет қаріптің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:
serif – шығыңқы қаріп (с засечками – серифный);
sans-serif – жұмыр қаріп (без засечек – рубленый);
monospace – ені бірдей қаріп (моноширинный қаріп – символдарының ендері бірдей).
Гарнитура — бір қаріп символдарының сызылымдары жиыны.
Бұл – тіке жəне курсивтік сызылым, қарайтылуы, литер ені (қысыңқы, қалыпты, созылмалы) жəне кеглі əр түрлі болуы мүмкін деген сөз.
Қаріптер серифтік шығыңқы – ж/е жұмыр болады.
Шығыңқы қаріп —Times гарнитурасы, жұмыр қаріп - Helvetica немесе Arial гарнитурасы.
Серифтік қаріптер жеңіл оқылады. Төменгі сериф көзге жылы көрінеді.
Жұмыр қаріптер тек тақырыптар үшін қажет.
Серифтік қаріп негізгі мəтін үшін, ал жұмыр — тақырыптар немесе майда ескертпелер үшін керек.
Тағы екі топ: пропорциональ жəне ені бірдей (моноширинные) қаріптер бар.Бірдей енді қаріптер баспа машинкасындай етіп басады. Олар мынадай тəгтерден пайда болады: <PRE>, <CODE>, <ТТ>, <SAMP>, <KBD>. Кəдімгі мəтін пропорциональ қаріппен басылады. Пропорциональ қаріп бірдей енді қаріпке қарағанда жеңіл оқылады. Пропорциональ қаріп негізгі мəтін үшін, ал бірдей енді қаріп — программалар үшін қажет болып саналады Times жəне Helvetica гарнитуралары — пропорциональ.
|
|
|
Courier гарнитурасы - бірдей енді қаріп.
Кез келген графикалық операциялық жүйеде үш стандартты гарнитура бар, Windows үшін: Times Roman — серифтік қаріп;
Arial — жұмыр қаріп;
Courier — бірдей енді қаріп.
Үнсіз келісім бойынша браузер қалыпты мəтін үшін Times Roman қаріпін, ал программалар үшін – Courier қарпін (бірдей енді) пайдаланады. Сайт үшін өз гарнитураңды көрсету қажет емес, ондай қаріп компьютерде болмаса, ол иероглифке айналып кетеді. Жергілікті (локальды) гипермəтін үшін кез келген қаріп жарайды. Ал Интернет желісі үшін тек топты ғана көрсету жеткілікті шығар немесе қаріпі қоса жіберіп, оны орнату ережесі де бірге берілуі тиіс.
font-family қасиеті үшін бір емес, бірнеше қаріп көрсеткен абзал (үтір арқылы бөліп), мысалы:
