H1,h2,h3

1 2 3 4 5 6 7

{

color: blue;

}

-->

</STYLE>

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

<TITLE> 2 мысал </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-құжаттың ішкі тəгтері санын азайтып, оның ішкі ақпараттық мазмұнын

браузер экраны-ң сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу.

19.DIV және SPAN тәгтерін пайдалану.

Бұл тәгтер CSS үшін маңызды болып табылады. Олар құжаттағы жеке бір бөліктерді ерекшелеп алып, оларға арнайы қасиеттер беру ісін атқарады. Ол үшін керекті элементтерді <DIV>…</DIV> немесе <SPAN>...</SPAN> тәгтері ішіне орналастыру керек. Бұладың айырмашылығы мынада: <DIV> блогынан соң брузер жаңа жолға көшіреді, ал <SPAN> блогынан кейін- бұрынғы жолда қала береміз. Соннымен, <SPAN> тәгін пайдалану- бір жолдағы сөздерге не символдарға жеке стильдік қасиеттер тағайындай алады. Осыларға мысал келтірейік.

<DIV> тәгін пайдалану

<HTML><HEAD><TITLE> DIV тәгін пайдалану </TITLE><STYLE type=”text/css”>

.area1{color:red; font-weight:border;font-size: 40pt; background:agua}

.area2{color:black;background:#CFB597}

.area3{color:blue; background:#C0C0C0}</STYLE></HEAD>

<BODY bgcolor=white text=black> <DIV class=area1> <IMG src=vopros.gif> Дос </DIV><DIV class=area2> жылатып айтар, </DIV> <DIV class=area3> Дұшпан күлдіріп айтар!</DIV></BODY></HTML>

<SPAN> тәгінің пайдалану мысалы

<HTML><HEAD><TITLE> SPAN тәгін пайдалану </TITLE><STYLE type=”text/css”>

.area1{color:red; font-weight:border;font-size: 40pt; background:agua}

.area2{color:maroon;background:#CFB597}

.area3{color:blue; background:#C0C0C0; padding:6pt}

</STYLE></HEAD><BODY bgcolor=white text=black><DIV class=area1> <IMG src=vopros.gif> Дос </DIV> <DIV class=area2> жылатып айтар, </DIV> <DIV class=area3> Дұшпан күлдіріп айтар! </DIV> </BODY></HTML>

20.Стиль элементтерін абсолюттік түрде және салыстырмалы түрде орналастыру.

Абсолюттік түрде орналастыру. Абсолютті орналастыру position:absolute стильдік нұсқауы арқылы беріледі. Бұл кезде элементтің бастапқы коордитасы тікелей сыртқы элемент аймағының жоғарағы сол жақ бұрышы болады. Егер барлық сыртқы элементтерде position нұсқауы жоқ болса, онда алғашқы басты нүкте ретінде <body> тәгінің экрандық бейнесінің сол жақ жоғарағы бұрышы, яғни құжаттың сол жақ жоғарғы бұрышы қабылданады. Көлденең және вертикаль координаталар left және top параметрлер арқылы беріледі. Қазір (100,50) нүктесіне орналастыратын мысал келтірілген.Браузер координаталар басы ретінде құжаттың сол жақ жоғарғы бұрышын алады.

<HTML><HEAD><TITLE> Абсолюттік орналастыру </TITLE></HEAD>

<BODY bgcolor=white text=back><H1>Абсолюттік орналастыру</H1>

Терезенің көлемін өзгертіп, суреттің сол орнында қалатынына көз жеткізіңіз. <IMG src=18166[1].jpg width=126 height=70 border=0 alt=”Египет пирамидасы” style=”position:absolute; left:80px;top:60px;”> </BODY> </HTML>

Келесі мысалда екі сурет абсолютті түрде орналастырған. Кодта оның әрқайсысы үшін (100,50) координатасы көрсетілген, бірақ оның бірі үшін координаталар басы-құжаттың басы, ал екіншісі үшін-кестенің сол жақ жоғарғы бұрышы болады.

<HTML> <HEAD> <TITLE> Абсолюттік орналастыру </TITLE> </HEAD>

<BODY bgcolor=white text=back><H1>Абсолюттік орналастыру</H1> <P>

Екі сурет те (100,50) нүктесіне абсолютті орналастырылған. Бір сурет үшін координаталар басы құжаттың басына, ал екіншісі үшін кестенің басына сәйкес келеді. <TABLE border=1 cellspacing=0 cellpadding=10 style=”position:absolute; left:50px; top:300px;”> <TR> <TD>Кесте абсолютті орналастырған. <IMG src=18166[2].jpg width=85 height=80 border=0 alt=” ” style=”position:absolute; left:110;top:50px;”> </BODY> </HTML>

Келтірілген мысалдар элементтердің абсолюттік орналастыруы кәдімгі тізбекті форматтау процесінен тыс тұратынын көрсетеді. Браузер кодтардың жазылу ретін есепке алмайды, тек бастапқы координатаны анықтау үшін парақ элементтерінің бір-бірімен қабаттасу реттілігін ғана ескереді. Элементтер парақтағы басқа объектілер үстіне болса да, көрсетілген орынға шығарыла береді. Абсолюттік түрде орналастырылған элементтер кодтарының реттілігі объектілердің бірін-бірі жауып орналасуын анықтайды: «жоғырарақта» (беткі қабатта) коды кейінірек жазылған элемент тұрады.

Салыстырмалы орналастыру. САлыстырмалы орналастыру position:relative стильдік нұсқауы арқылы беріледі. Мұндай элемент әдеттегі құжаттың тізбекті жазылуында тұра береді. Координата басы ретінде элементті орны көрсетілмеген кездегі тұратын жері(координатасы) қабылданады. Салыстырмалы орналастыру алгоритмін орындау кезінде бастапқыда браузер кәдімгі форматтауды орындай отырып, элементті параққа орналастырады, одан кейін left және top нұсқауларының мәндері бойынша оларды көрсетілген орынға жылжытады.

Келесі мысалда салыстырмалы орналастыру қолданылған

<HTML> <HEAD><TITLE> САлыстырмалы орналастыру </TITLE> </HEAD>

<BODY bgcolor=white text=back> <H1> САлыстырмалы орналастыру </H1>

<P> <IMG src=5465[1].jpg width=126 height=60 border=0 alt=құс align=left hspace=10

style=”position:relative; left:0px;top:110px;”>Бұл мысалда сурет орналастыру болмаған жағдайда орналасатын орнынан төмен қарай 110 пиксельге салыстырмалы орналасқан. <BR clear=left></BODY> </HTML>

Егер енді терезе көлемі өзгертілсе, онда суреттің экран бетінде түйінді нүктемен бірге-құжаттағы <IMG> тәгі орналасқан азат жол басымен бірге жылжитынын көруге болады. Азат жол басы оның алдындағы тақырыптың бір немесе екі экран жолына жазылуына байлынысты өзгереді.

21.Стиль элементтерін Z-index арқылы орналастыру.

Z-index

Z-index стильдік қасиеті экранда құжатты әр түрлі жазықтықта бейнелеу мүмкіндігін береді.Оның мәні бүтін сан бола алады, ол сан –элемент орналасатын жазықтықтың нөмірі (өз ішкі туындыларымен бірге). Негізгі мәтін нөлдік деңгейде болады (Z-index:0) Z-index оң мәнді элементті негізгі мәтіннің жоғарғы жағына, ал теріс мәні- төменгі жағына орналастырылады. Z-index мәні үлкен объект жоғары жақта орналасады.