Сатылай орналастыру (каскадирование)

CSS көмегімен тұтынушылар экрандағы ақпаратты ыңғайлы түрде бейнелейтін мүмкіндік алады.

Тек жасалған стильдердің бір-бірімен өзара байланысын және тәгтер атрибуттарының жазылуын (олар да стильді анықтайды) браузердің өз стилімен (үнсіз келісім бойынша анықталатын стиль) шатастырып алмау керек.

Жоғарыда айтылғандай, программалаушы HTML-құжатта үш түрлі стиль пайдалана алады:

- Құрамдас (встроенный - inline). Style атрибуты арқылы тәг ішінде жазылған стиль, ол жеке тәг жұмысын бақылайды.

- Енгізілген (внедренный - embedded). HTML-файл тақырыбында <style>…</style> тәгтері арқылы жа-зылған стиль, ол жеке HTML-құжаттағы стильді бақылайды.

- Байланысқан (связанный - linked). Жеке CSS-файлда жазылған стиль.

Ол көптеген HTML-құжаттар стилін бақылай алады. Мұнда стильдік файлға сілтеме жасау үшіни HTML-құжаттың бас жағына <link> тәгі жазылады.

Бір құжатта осы айтылған үш стильдер механизмін де қолдануға болады. Бұған тәгтердің кәдімгі атрибуттары арқылы берілетін стильді және браузердің “келісім бойынша” тағайындалған өз стилін қосайық. Бұлар бір-бірімен қалай әрекеттесер екен, компьютер экранына құжатты шығарарда браузер қай стильді пайдаланады?

Құжатты шығарарда кәдімгі браузер ұстанатын ережелер каскадты, яғни сатылы деп аталады. Бұл браузер үшін ең негізгі стиль – құрамдас стиль деген сөз, одан кейін төмен қарай реті бойынша енгізілген және байланысқан стильдер қолданылады.

Сонымен браузер үшін енгізілген және байланысқан стильдер бірдей болып саналады, ол тек соңғы қолданылуға байланысты өзгереді.

Стильдік реттілік бойынша ең төменгі сатыда «үнсіз келісім бойынша» стиль тұрады. Оны браузер ешқандай стильдік нұсқау болмаған жағдайда қолданады. «Каскадтау - сатылау» ұғымына арғы тегінен берілу – мұралау (наследования) механизмі де жатады, ол бойынша өз стилі жоқ бала-тәг ата-тәгтің стилін қабылдайды.

Кәдімгі атрибуттар арқылы берілген стильдер осы сатылау ережесі бойынша жұмыс істейді.

1 -мысал.

Бұл көк түсті болып көрінеді.

</P>

</FONT>

2- мысал.

Бұл, көк түспен,ал

бұл қызыл түспен көрінеді.

</FONT> </P>

Бақылау сұрақтары

1. «Иерархия» деген не?

2. Төменде келтірілген әрбір схемаға (3.20 және 3.21-суреттер) сәйкес келетін HTML-кодтарын жазыңыздар.

3.20-сурет. 1-схема

3. Стильдердің мұралану механизмін сипаттаңыздар.

4. Мұраланатын стильді алдын ала анықтау мүмкін бе? Егер мүмкін болса қалай?

5. <Р> тәгі үшін р {color:red} стилі берілген. Келесі кодтарға сәйкес «күрделі» сөзі қандай түспен шығарылады:

а)<Н1>Бұл күрделі мысал</Н1>;

б)<Н1>Это < SPAN style="Color:Blue">күрделі</SPAN> мысал.</Н1>;

в)<Р>Бұл күрделі мысал.</Р>;

г) <Р>Бұл < SPANstyle="color:blue">күрделі</SPAN> мысал.</Р>;

д)<Р>Бұл<FONT color= blue>күрделі</SPAN> мысал.</Р>;

е)<Р>Это<SPAN style =”font-size:smaller”>күрделі</SPAN>мысал.</Р>.

6. «Контекстік анықтау» деген не?
7. Р ЕМ {color:red} стилі берілген. Келесі кодтарға сәйкес «күрделі» сөзі қандай түспен шығарылады:

а) <Н1>Бұл күрделі мысал</Н1>;

б) <Н1>Бұл <ЕМ>күрделі </ЕМ> мысал</Н1>;

в) <Р>Бұл күрделі мысал.</Р>;

г) <Р>Бұл <ЕМ>күрделі</ЕМ> мысал</Р>?

3.21-сурет. 2-схема

8. Төменде көрсетілген әрбір программаның бұтақ тәріздес иерархиясын құрыңыздар.

1 Программа	2 Программа
<BODY> <DIV> … </DIV> <DIV> <DIV> <DIV> <DIV> … </DIV> </DIV> </DIV> <DIV> … </DIV> </DIV> <DIV> … </DIV> </BODY>	<BODY> <DIV> <DIV> … </DIV> <DIV> … <DIV> </DIV> <DIV> … </DIV> </DIV> <DIV> <DIV> … </DIV> </DIV> </DIV> </BODY>

9. Р, ЕМ {color:red} стилі берілген. Келесі кодтарға сәйкес «күрделі» сөзі қандай түспен шығарылады?:

а) <Н1>Бұл күрделі мысал</Н1>;

б) <Н1>Бұл <ЕМ>күрделі</ЕМ> мысал</Н1>;

в) <Р>Бұл күрделі мысал.</Р>;

г) <Р>Бұл <ЕМ>күрделі</ЕМ> мысал</Р>.

10. <div> және <span> тәгтерінің атқаратын қызметтерін сипаттаңыздар. Бұл тәгтерінің нәтижелерінің ұқсастықтары мен айырмашылықтары неде?

11. «Абсолютті орналастыру» деген не, ол қандай стильдік нұсқау арқылы беріледі?

12. Абсолютті орналастыру кезінде координата басы ретінде қай нүкте алынады?

13. Абсолютті орналастырылған объектілер қандай ереже бойынша бір-бірімен қабатталып орналасады?

14. z-index стильдік қасиеті қандай мәндерді қабылдай алады және ол объектінің экрандық бейнесіне қалай әсер етеді?

15. Сатылы стильдік нұсқаулар деген не?

Тапсырмалар:

1. Азат жол аралықтары 1 сантиметрге тең болатын және барлық азат жолтар оң жақ және сол жақ шетке тураланған парақ құрыңыз.

2. P.def жаңа стилін құрыңыз. Бұл стильдің азат жолтары ені бойынша тураланған, сол жақтан 2 см, оң жақтан 1 см шегініс болсын. Параққа P.def. азат жолынан басқа кәдімгі азат жолтарды да орналастырыңыздар.

3. Тауардың бұрынғы және кейінгі бағасын жазуға арналған стильді анықтаңыздар. Бұрынғы бағасы – сұр түсті, үсті сызылған. Жаңа бағасы – қызыл түсті, өлшемі басқа мәтінге қарағанда 50% үлкен болсын. Бұрынғы және кейінгі бағалары көрсетілген тауарлар тізімін құрыңыздар.

4. Екі стильді анықтаңыздар. Бірінші стильде:

· әріптер ашық сұр фонға қоңыр түспен жазылсын;

· элемент жақтауы мен мазмұнынның арасындағы қашықтық 0,5 см болсын;

· мәтін оң және сол жақ шеті бойынша туралансын.
Екінші стильде:

· фон көгілдір болсын;

· элемент жақтауы мен мазмұнының арасындағы қашықтық 0,5 см болсын;

· элементтен оң жақ және сол шетке дейінгі қашықтық 1 см;

· жұмырланған қаріп.

Екі бөлімнен тұратын құжат дайындаңыз. Бірінші бөлім бірінші стильмен, екінші бөлімі екінші стильмен анықталатын болсын. Мұралану көрініп тұруы үшін екінші бөлім бірінші бөлім ішіне ендірілуі тиіс. Екінші бөлімде қандай стильдік нұсқаулар мұраланады, ал қандайлары мұраланбайды?

5..nb стилін құрыңыз: элемент жақтау ішінде орналассын, браузер терезесінің (оның өлшемінен қатыссыз) жартысын (ені бойынша) алып тұрсын, сол жақ шетіне орналассын, ал парақтың басқа элементтері осы элементтің оң жағынан «көмкеріп» (обтекали) тұрсын.

6. Оң және сол жағынан тік сызық (азат жол биіктігімен бірдей) жүргізілетін азат жолқа арналған стиль құрыңыздар.

7. Стильдерді қолдана отырып, мәтін екі бағанға шығатындай (газеттегідей) парақ құрыңыздар. Бұл кезде кестелерді қолданбаңыздар.

8. Экранда айналдыру сызғыштары бар екі аймақты тұрғызып, оған ақпараттық элементтерді орналастырыңыздар.

9. z-index қасиетін қолдана отырып, экранда бір-бірін жауып тұратын бірнеше объектілерді орналастырыңыздар.

3.6 Объектіні белгіленген орынға қою, z-index

3.6.1 Объектіні бір орынға қою

Объектіні бір орынға қою, яғни орналастыру – бұл браузер терезесіндегі элементтің орналасатын коор-динатасын басқару болып табылады. Ол үшін CSS ортасында position параметрі (қасиеті) қолда-нылады.

Бұл қасиет үш мәнді қабылдай алады: absolute (абсолюттік орналастыру), relative (салыстырмалы орналастыру) және static (статикалық орналастыру). Static мәні элементті сайтта ешқандай әрекетсіз қалыпты түрде орналастырады, сондықтан бұл мәнді қолданудың ешқандай қажеті жоқ. Ал absolute және relative мәндерін кейінірек қарастырамыз, алдымен HTML-кодының иерархиялық құрылымының бір маңызды сәтін атап өтейік.

3.6.2 Парақ коды сатылары (иерархиясы)

Иерархия — бұл қабаттасқан матрешкалар ойыншығына ұқсас, мәліметтердің бір-бірінің ішіне салынып жинақталған қапшықтарға салынғаны сияқты орналасуы. Парақтың барлық элемент-тері <body> блогының ішіне орналасады. Сондықтан <body> тәгі парақтағы барлық басқа элементтердің «анасы» болып табылады. Парақ коды суреттегідей болсын делік.

Мысалда <body> элементінің e0l және е02 тәрізді екі тікелей ішкі туынды элементтері (ұрпағы) бар. Өз кезегінде бұл элементтердің де екі-екіден өз ұрпақтары бар: сәйкесінше е011, 012 және е021, е022.

...

</DIV>

...

</DIV>

...

</DIV>

...

</DIV>

<BODY>

3.6.3 Абсолюттік түрде орналастыру

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

Көлденең және вертикаль координаталар left және top параметрлері арқылы беріледі.

Төменде суретті (100, 50) нүктесіне орналастыратын мысал келтірілген. Браузер координаталар басы ретінде құжаттың сол жақ жоғарғы бұрышын алады.

<HTML>

<HEAD>

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

</HEAD>

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

<P>

Бұл мысалда сурет абсолютті орналасқан.

Ол құжаттың басынын көлденең бойынша 80 пиксель, тігінен 60 пиксельде орналасқан.

<P>

Терезенің көлемін өзгертіп, суреттің сол орнында қалатынына көз жеткізіңіз.

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

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

<P>

Екі сурет те (100,50) нүктесіне абсолютті орналастырылған.

Бір сурет үшін координаталар басы құжаттың басына, ал

екіншісі үшін кестенің басына сәйкес келеді.

<TABLE border=l cellspacing=0 cellpadding=10

style="position:absolute; left:50px;

top:300px;">

<TR>

<TD>

Кесте абсалютті орналастырылған.

<IMG src=11494[2].jpg width=85 height=80

border=0 alt= " " style="position:absolute; left:100px;

top:50px;">

</TD>

</TR>

</TABLE>

<IMG src=5465[1].jpg width=126 height=60

border=0 alt=""

style="position:absolute; left:100px;

top:50px;">

</BODY>

</HTML>

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

Тағы мысалдар қарастырайық.

<HTML>

<HEAD>

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

</HEAD>

<H1>Абсолютті орналастыру</H1>

<P> Бұл мысалда екі сурет те абсолют орналастырылған.

Коды бұрын орналастырғандықтан, екінші сурет бірінші суретті жауып тұр.

<IMG src=111.jpg width=160 height=120

border=0 alt=су гүлі

style="position:absolute;

left:l00px; top:150px;">