Labs_7_10_CSS

</FONT>

</P>

СҰРАҚТАР

1. «Иерархия», яғни “сатылы” деген ұғым нені білдіреді?

2. Для каждой из приведенных ниже схем (рис. 3.10, 3.11) запишите HTML-коды, которые им соответствуют.

Рис.3.10. Схема 1

3.Опишите механизм наследования стилей.

4.Можно ли переопределить наследуемый стиль? Если да, то как?

5.Для тега <Р> задан стиль Р {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:

а)<Н1>Это сложный пример</Н1>;

б)<Н1>Это <SPAN style="Color:Blue">сложный</SPAN> пример.</Н1>;

в)<Р>Это сложный пример.</Р>;

г)<Р>Это<SPAN style="color:blue">cлoжный</SPAN> пример.</Р>; д)<Р>Это<FONT color= blue>сложный</SPAN> пример.</Р>;

а) <Н1>Это сложный пример</Н1>; б) <Н1>Это <ЕМ>сложный</ЕМ> пример</Н1>; в) <Р>Это сложный пример.</Р>;

г) <Р>Это <ЕМ>сложный</ЕМ> пример</Р>?

21

Рис. 3.11. Схема 2

8. Постройте иерархическое дерево для каждой приведенной ниже программы.

9.Задан стиль Р, ЕМ {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:

а) <Н1>Это сложный пример</Н1>; б) <Н1>Это <ЕМ>сложный</ЕМ> пример</Н1>; в) <Р>Это сложный пример.</Р>;

г) <Р>Это <ЕМ>сложный</ЕМ> пример</Р>.

10.Опишите назначение тегов <div> и <span>. В чем сходство работы этих тегов, а в чем различие?

11.Что такое «абсолютное позиционирование», каким стилевым указанием оно задается?

12.Что принимается за начало координат при абсолютном позиционировании?

13.По какому правилу абсолютно позиционированные области накладываются друг на друга?

22

14.Какие значения может принимать стилевое свойство z-index и как оно влияет на экранный образ объекта?

15.Что понимается под каскадированием стилевых указаний?

Задания

При подготовке заданий, представленных ниже, рекомендуется использовать справочник свойств CSS, в Приложениях к учебникам.

1. Сделайте страницу, в которой все абзацы выровнены по левому и правому краям, и имеют красную строку в один сантиметр.

2.Создайте новый стиль P.def. Абзацы этого стиля должны выравниваться по ширине, иметь отступ слева 2 см и справа 1 см. Расположите на странице обычные абзацы вместе с абзацами P.def.

3.Определите стили для написания старой и новой цены товара. Старая цена — серого цвета, перечеркнутая. Новая цена — красного цвета, на 50% более крупного кегля, чем остальной текст. Напишите список товаров со старыми и новыми ценами.

4.Определите два стиля. В первом стиле:

•буквы должны печататься коричневым по светло-серому фону;

•расстояние между содержимым и рамкой элемента должно составлять 0,5 см;

•фон бирюзовый;

•расстояние между содержимым и рамкой элемента должно составлять 0,5 см;

•поля слева и справа от элемента по 1 см;

•рубленый шрифт.

Подготовьте документ с двумя разделами. Первый раздел определяется первым стилем, второй — вторым. Второй раздел должен быть вложен в первый, чтобы было видно наследование. Какие стилевые указания наследуются во втором разделе, а какие нет?

5.Сделайте стиль .nb такой, чтобы элемент заключался в рамку (бордюр), занимал (по ширине) половину окна браузера (независимо от его размера), был расположен у левого края, а остальные элементы страницы «обтекали» бы этот элемент справа.

6.Подготовьте стиль для абзаца, у которого слева и справа проводится вертикальная черта (на всю высоту абзаца).

7.Подготовьте стиль абзаца «подложка» (.ground) и стиль «надпись» (.poster). Используя созданные стили, создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло-серого цвета. Надпись пишется коричневыми буквами обычного размера.

8.Используя стили, сделайте страницу, в которой текст выводится в две колонки (как в газете). Таблицы при этом не используются.

9.Постройте на экране две области с линейками прокрутки и поместите в них информационные элементы.

10.Используя свойство z-index, постройте на экране несколько перекрывающих друг друга областей.

23

10 лабораториялық жұмыс

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

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

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

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

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

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

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

<BODY id=e0> <DIV id=e01>

<DIV id=e011>

. . .

</DIV>

<DIV id=e012>

. . .

</DIV>

</DIV>

<DIV id=e02> <DIV id=e021>

. . .

</DIV>

<DIV id=e022>

. . .

</DIV>

</DIV>

<BODY>

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

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

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

24

10.1 мысал

<HTML>

<HEAD>

<TITLE>Абсолютное позиционирование</TITLE> </HEAD>

<BODY bgcolor=white text=black> <H1>Абсолютное позиционирование</H1> <P>

В этом примере картинка абсолютно позициони-рована.Она располагается в 80 пикселах по горизон-тали и в 60 пикселах по вертикали от начала документа.

<P>

Измените размеры окна и убедитесь,что картинка всегда остается на прежнем

месте.

<IMG src=IMG061.GIF width=126 height=70

border=0 alt=«Египетская пирамида»

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

top:60px;">

</BODY>

</HTML>

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

10.2 мысал

<HTML>

<HEAD>

<TITLE>Абсолютное позиционирование </TITLE> </HEAD>

<BODY bgcolor=white text=black>

<H1> Абсолютное позиционирование </H1> <P>

Обе картинки абсолютно позиционированы в точку (100, 50). Начало координат для одной картинки совпадает с началом документа, для второй  — с началом таблицы.

<TABLE border=l cellspacing=0 cellpadding=10

style="position:absolute; left:50px; top:300px;">

<TR>

<TD>

Таблица абсолютно позиционирована.

<IMG src=gerbrk.jpg width=85

height=80

border=0 alt= "Здание акимата" style="position:absolute; left:100px;

top:50px;">

25

</TD>

</TR>

</TABLE>

<IMG src=kbtu.jpg width=126 height=60 border=0 alt="Здание акимата"

style="position:absolute; left:100px; top:50px;">

</BODY>

</HTML>

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

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

<HTML>

<HEAD>

<TITLE>Абсолютное позиционирование

</TITLE>

</HEAD>

<BODY bgcolor=white text=black> <H1>Абсолютное позиционирование</H1> <P>

В этом примере обе картинки абсолютно пози-ционированы.Так как код “ Мальчик” идет раньше кода “Вышки”,то вторая картинка перекрывает первую.

<IMG src=IMG061.gif width=160 height=120 border=0 alt=Пирамида

style="position:absolute; left:l00px; top:150px;">

<IMG src=vishka.jpg width=140 height=150 border=0 alt=Вышка

style="position:absolute;

left:200px;top:250px;">

</BODY>

</HTML>

4. Салыстырмалы орналастыру

Салыстырмалы орналастыру position: relative стиль-дік нұсқауы арқылы беріледі. Мұндай элемент əдеттегі құжаттың тізбекті жазылуында тұра береді.

Координата басы ретінде элементті орны көрсетіл-меген кездегі тұратын жері (координатасы) қабылда-нады.

Салыстырмалы орналастыру алгоритмін орындау кезінде бастапқыда браузер кəдімгі форматтауды орындай отырып, элементті параққа орналастырады, одан кейін left жəне top нұсқауларының мəндері бойынша оларды көрсетілген орынға жылжытады.

Төменде келтірілген мысалда құжат осы айтылған түрде форматталады.

26

10.4 мысал

<HTML>

<HEAD>

<TITLE>Обычное построение документа

</TITLE>

</HEAD>

<BODY bgcolor=white text=black> <H1>Обычное построение

документа</H1> <P>

<IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет

align=left hspace=10>

Это обычное форматирование документа без всякого позиционирования.<BR clear=left> </BODY>

</HTML>

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

<HTML>

<HEAD>

<TITLE><Относительное позиционирование

</TITLE>

</HEAD>

<BODY bgcolor=white text=black>

<H1> Относительное позиционирование </H1> <P>

<IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10

style="position:relative; left:0px; top:150px;">

В этом примере картинка смещена вниз на 150 пикселов относительно того места, которое она занимала бы на экране при отсутствии позиционирования. <BR clear=left>

</BODY>

</HTML>

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

5. Аралас түрде орналастыру Аралас түрде орналастырудың шартты түрде белгілен-ген төмендегідей төрт

нұсқасын қарастырайық:

·absolute [relative] — абсолюттік орналастыру ішіндегі салыстырмалы орналастыру блогы;

·relative [absolute] — салыстырмалы орналастыру ішіндегі абсолютті орналастыру блогы;

27

·absolute [absolute] — абсолюттік орналастыру ішіндегі абсолютті орналастыру блогы;

·relative [relative] — салыстырмалы орналастыру ішіндегі салыстырмалы орналастыру блогы.

5.1. Absolute [relative]

Салыстырмалы түрде орналасқан суреттің коды абсолют түрде орналасқан кесте кодының ішіне орналасқан. Кесте құжат басынан оңға қарай 50 пикселге жылжытылған, осы қалып терезе көлемін өзгерткенде де сақталады. Сурет кесте ішіндегі «өз қалпынан» төмен қарай 100 пикселге жылжытылған. Бірақ кесте ішіндегі мəтін сурет бұрынғы өз орнында тұрған сияқты болып орналасады.

10.6 мысал

<HTML>

<HEAD> <TITLE> Смешанное позиционирование

</TITLE>

</HEAD>

<BODY bgcolor=white text=black> <H1>Смешанное позиционирование</H1> <P>

Таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы расположена картинка с относительным позиционированием вниз на 100 пикселов.

<P>

<TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB

style="position:absolute;

left:50px;top:0px">

<TR><TD>

<P> <IMG src=F:/CSS/IMG/kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10

style="position:relative; left:0px; top:100px;">

Тег <TT><B>IMG</B></TT> размещается внутри таб-лицы. Для картинки записано относительное пози-ционирование вниз на 100 пикселов.<BR clear=left>

</TD></TR>

</TABLE>

</BODY>

</HTML>

<P>

Таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы расположена картинка с относительным позиционированием вниз на 100 пикселов.

<P>

<TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB

style="position:absolute;

left:50px;top:0px">

<TR><TD>

<P> <IMG src=F:/CSS/IMG/kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10

28

style="position:relative; left:0px; top:100px;">

Тег <TT><B>IMG</B></TT> размещается внутри таб-лицы. Для картинки записано относительное пози-ционирование вниз на 100 пикселов.<BR clear=left>

</TD></TR>

</TABLE>

</BODY>

</HTML>

BODY

absolute

relative

5.2. Relative [absolute]

Екінші мысалда абсолютті орналасқан суреттің коды салыстырмалы орналасқан кесте кодының ішінде тұр. Кесте өзінің «қалыпты» орнынан оңға қарай 50 пикселге жылжытылған. Сурет үшін координаталар басы кестенің сол жақ жоғарғы бұрышы болып табылады. Сурет осы қалпынан төмен қарай 100 пикселге ығысып орналасады. Осы сəтте кесте ішін-дегі мəтін <img> тəгін есепке алмай форматталады.

10.7 мысал

<HTML>

<HEAD>

<TITLE>Смешаннoe позиционирование</TITLE> </HEAD>

<BODY bgcolor=white text=black>

<H1> Смешанное позиционирование </H1>

<P> Таблица относительно позиционирована вправо на 50 пикселов.Внутри кода таблицы расположена картинка с абсолютным позиционированием (0,100)

<P> <TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position: relative;

left :50px;top: 0px"> <TR><TD>

<P> <IMG src=F:/Css/IMG/kbtu.jpg width=126 height=60 border=0

alt=Университет align=left hspace=10 style="position:absolute;

left:0px; top:l00px;">

Тег <TT><B>IMG</B></TT> размещается внутри таблицы.Для картинки записано абсолютное позиционирование вниз на 100 пикселов.<BR clear=left>

</TD></TR>

29

</TABLE>

</BODY>

</HTML>

BODY

relative

absolute

5.3. Absolute [absolute]

Абсолютті түрде орналасқан суреттің коды абсо-лютті түрде орналасқан кестенің ішіне тұр. Мұнда терезе көлемін өзгерткенімен сурет өз қалпында тұр, өйткені кесте координаталары өзгеріссіз қалады. 10.8 мысал

<HTML>

<HEAD>

<TITLE>Смешанное позиционирование</TITLE> </HEAD>

<BODY bgcolor=white text=black> <H1>Смешанное позиционирование</H1>

<P> Таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы расположена картинка с абсолютным позиционированием в точку (0,120).

<P> <TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position:absolute;left:50px;top:0px"> <TR><TD>

<P> <IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:absolute; left:0px; top:120px;">

Тег <TT><B>IMG</B></TT> размещается внутри таб-лицы.Для картинки записано абсолютное позицио-нирование в точку (0,120).<BR clear=left>

</TD></TR>

</TABLE>

</BODY>

</HTML>

30