Стильдерді біріктіре отырып пайдалану

1 2 3 4 5 6 7

Мысал

<!--

Н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 қарпін қолданады.

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

Стильдерді біріктіре отырып пайдалану.

Сонымен 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">

 </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> 

<LINK rel=stylesheet type="text/css" href-prim.css>

<STYLE type="text/css">  </STYLE> <TITLE> 4 мысал </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 қасиеті үшін бір емес, бірнеше қаріп көрсеткен абзал (үтір арқылы бөліп), мысалы:

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: