|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Встраивание таблиц стилей в документСтр 1 из 3Следующая ⇒
ТЕХНОЛОГИЯ CSS ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Общие положения Каскадные таблицы стилей представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль, говоря житейским языком, - это все то, что определяет внешний вид документа HTML - при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца < P>, и т.д. Стиль задается по определенным правилам, о которых, собственно говоря, и пойдет речь, а таблица стилей - набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей - это шаблон, который управляет форматированием тэгов HTML в Web -документе. Если вы работали с текстовым редактором Microsoft Word, то концепция таблицы стилей напомнит вам концепцию стилевых файлов этого редактора: изменить внешний вид документа HTML можно простым изменением присоединенных к нему стилей. Точно также изменить внешний вид документа HTML можно простым изменением присоединенной к нему таблицы стилей. Почему в название таблиц стилей включено определение " каскадные"? Дело в том, что здесь разрешено использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким " каскадом", по которому и " прокатывается" документ. Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице следует задать правило: H1 {color: blue; font-size: 16pt} Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тэг HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (: ). Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент H1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color ) определен как синий (значение blue ) и размер шрифта (свойство font-size ) определен в 16 пунктов (значение 16pt ). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (; ), как это демонстрируется в приведенном примере. Созданная только что таблица стилей влияет на форматирование элемента определенного типа: заголовок первого уровня. Ее комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера. Замечание. Синтаксис правил каскадных таблиц стилей не чувствителен к регистру. Селекторы, свойства и их значения можно задавать как строчными (маленькими), так и прописными (большими) буквами, или в смешанном порядке. Однако каскадные таблицы стилей чувствительны к синтаксису задания правил и правильности названий свойств, значений и селекторов. Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется! Авторы страниц HTML должны создавать свои таблицы стилей, только если они хотят придать документу вид, отличный от вида, предоставляемого умалчиваемой таблицей стилей браузера.
Селекторы. Параметр CLASS Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня: < STYLE TYPE=" text/css" > <! -- H1.red { color: red; } H1.blueBgrd { color: red; background-color: blue; }--> < /STYLE>В тексте документа ссылка на соответствующий класс задается в параметре CLASS: < Н1 CLASS=" red" > Красный шрифт< /Н1> < Н1 CLASS=" blueBgrd" > Красный шрифт на синем фоне< /Н1>Приведем полный текст HTML -документа и его отображение в браузере (рисунок 1).
Примечание. Имя класса в параметре CLASS задается без лидирующей точки. Оно может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек, например CLASS=red. В приведенном примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента: < STYLE TYPE=" text/css" > <! --.red {color: red; }.blueBgrd { color: red; background-color: blue}--> < /STYLE>Теперь два класса red и blueBgrd можно применять к любым элементам документа: < P CLASS=red> Первый абзац< /P> < P CLASS=blueBgrd> Второй абзац< /P>Первый абзац отобразится красным шрифтом, а второй - красным шрифтом на синем фоне. Селекторы. Параметр ID Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, он используется для задания имени элемента, которое может использоваться затем для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа. Для определения такого имени его применяют в качестве селектора, перед которым ставится символ #: < HTML> < HEAD> < TITLE> Пример использования параметра ID< /TITLE> < STYLE TYPE=" text/css" > <! -- #par24 { letter-spacing: 10px; } H1#form3 { color: red; background-color: blue; }--> < /STYLE> < /HEAD> < BODY> < P ID=par24> Разреженные слова в абзаце< /P> < H1 ID=form2> Черный шрифт< /H1> < /BODY> < /HTML>Результат просмотра этого документа в браузере изображен на рисунке 1.
В этом примере с абзац связан с именем par24 в параметре ID, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок с именем form2 отображается с применением правила по умолчанию. Контекстные селекторы При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом < ЕМ> в каком-нибудь абзаце, задаваемом тэгом < Р>. В этом случае говорят, что элемент P порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента P. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color ). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже: P {color: blue; } ЕМ {color: red; }Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом красного цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались красным цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Например, поставленную задачу решит следующее правило: P EM {color: red; }Приведем пример использования контекстного селектора: < HTML> < HEAD> < TITLE> Пример использования контекстного селектора< /TITLE> < STYLE TYPE=" text/css" > <! -- P {color: blue; } P EM {color: red; }--> < /STYLE> < /HEAD> < BODY> < P> Цвет голубой, а затем < EM> красный< /EM> < BR> < H3> < EM> А здесь черный шрифт, так как селектор не контекстный< /EM> < /H1> < /BODY> < /HTML>Результат просмотра этого документа в браузере изображен на рисунке 1.
Как видно из приведенного примера контекстный селектор состоит из нескольких простых, разделенных пробелами. Браузер находит элементы ЕМ, порожденные элементом P, и применяет к ним указанное правило форматирования. Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами.
Свойство font-family Свойство font-family позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимый символ, если его нет в используемом пользователем шрифте, или на компьютере нет вообще этого шрифта. В отличие от других свойств каскадных таблиц стилей названия семейств шрифтов в списке отделяются запятыми, например: BODY { font-family: TimesDL, " Times New", serif; }При интерпретации HTML -страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif - одного из типовых семейств шрифтов компьютера. Понятие типовое семейство шрифтов введено в каскадные таблицы стилей с целью реализации сто процентного отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
Имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки: BODY {font-family: " Times New Roman", serif; } < BODY STYLE=" font-family: 'Times New Roman', serif; " >Замечание. Следует использовать кавычки разных типов при задании последовательности всех определяемых свойств в параметре STYLE и при задании имени шрифта в свойстве font-family. Отображение списков Внешним видом списков также можно управлять, используя свойства каскадных таблиц стилей. Всего таких свойств четыре, причем некоторые из них дублируют параметры тэгов < OL> и < UL>, а другие расширяют возможности отображения списков. Рассмотрим эти свойства подробнее. Свойство list-style-type определяет стандартный тип маркера списка. Допустимые значения этого свойства перечислены в таблице 1.
Как видно из приведенной таблицы перечисленные значения свойства list-style-type дублируют значения параметра TYPE тэгов < OL> и < UL>. Приведем простой пример, иллюстрирующий использование этого свойства. < HTML> < HEAD> < TITLE> Задание маркеров списка< /TITLE> < STYLE TYPE=" text/css" > <! --OL { list-style-type: lower-roman; }--> < /STYLE> < /HEAD> < BODY> < OL> Список 1< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < OL STYLE=" list-style-type: none; " > Список 2< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < /BODY> < /HTML>Результат просмотра этого документа в браузере приведен на рисунке 1.
Замечание. Обратите внимание, что второй список выводится без маркеров. Это лишний раз подтверждает тот факт, что стиль, заданный непосредственно в тэге, перекрывает общий стиль. Отображение списков Свойство list-style-image определяет графическое изображение, которое будет использоваться в качестве маркера списка, если оно доступно. Значениями этого свойства могут быть либо none (не задается никакое изображение для маркера), либо полный или относительный адрес графического файла, задаваемый с помощью функции URL(): OL {list-style-image: url(redball.gif); }Изменим таблицу CSS в примере из предыдущего шага, добавив в нее свойство list-style-image с нижеприведенным значением, сохраним изменения и просмотрим HTML -документ в браузере. < HTML> < HEAD> < TITLE> Задание маркеров списка< /TITLE> < STYLE TYPE=" text/css" > <! --OL { list-style-type: lower-roman; list-style-image: url(redball.gif); }--> < /STYLE> < /HEAD> < BODY> < OL> Список 1< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < OL STYLE=" list-style-type: none; " > Список 2< LI> Первый пункт< LI> Второй пункт< LI> Третий пункт< /OL> < /BODY> < /HTML>Результат просмотра измененного HTML -документа приведен на рисунке 1.
Приведенный рисунок позволяет сделать следующие выводы.
Свойство list-style-position определяет положение маркера в списке:
Результат просмотра этого документа в браузере изображен на рисунке 2.
Как и для большинства свойств каскадных таблиц стилей, так и для этих свойств определено свойство, в котором можно одновременно определить значения всех свойств отображения списка. Значением свойства list-style является список значений свойств list-style-type, list-style-image и list-style-position: UL {list-style: circle url(list.gif) inside; }В заключение отметим, что на первый взгляд может показаться излишним задавать значение circle, так как задано графическое изображение для маркера списка. Однако это не так. Значение circle будет использовано в том случае, если по каким-то причинам указанный файл не будет найден, или просмотр HTML -документа будет осуществляться при отключенной графике. Блоки Мы рассматривали тэги < DIV> и < SPAN>, которые позволяют выделять фрагменты HTML -документа и задавать их характеристики. В дальнейшем подобные фрагменты мы будем называть блоками. Начиная с этого шага мы рассмотрим свойства, позволяющие задавать параметры блоков. Все свойства можно разделить на три большие группы, задающие параметры полей, границ и отступов блоков, причем группу, работающую с границей, можно подразделить еще на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Рассмотрим более подробно свойства каждой из перечисленных групп. В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента. Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например: BODY {margin: 10px 20px; } /* верх и низ - 10px, право и лево - 20px. */Приведем пример использования этого свойства. < HTML> < HEAD> < TITLE> Форматирование поля< /TITLE> < STYLE TYPE=" text/css" > <! --P {margin: 10px 120px; border-style: solid; }--> < /STYLE> < /HEAD> < BODY> < P> Это первый блок.< P> Это второй блок.< /BODY> < /HTML>Результат просмотра этого документа в браузере изображен на рисунке 1.
Здесь задана каскадная таблица стилей для тэга абзаца < P>, причем для наглядности добавлено свойство border-style со значением solid для отображения сплошной рамки (об этом свойстве разговор пойдет позднее). Значение 10px задает отступы по вертикали первого абзаца от рабочей области окна браузера и второго абзаца от первого. Аналогично значение 120px - это размеры отступов слева и справа от границы окна браузера. Блоки Имеется возможность задавать отступы от краев блока. Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Изменим каскадную таблицу стилей примера из предыдущего шага следующим образом: < HTML> < HEAD> < TITLE> Форматирование поля< /TITLE> < STYLE TYPE=" text/css" > <! --P {margin: 10px 120px; border-style: solid; padding: 30px; }--> < /STYLE> < /HEAD> < BODY> < P> Это первый блок.< P> Это второй блок.< /BODY> < /HTML>Результат просмотра измененного таким образом HTML -документа приведен на рисунке 1.
Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые слова thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, - это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick. Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border-bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. следующий шаг), но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается. Блоки Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 1.
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы. Проиллюстрируем использование перечисленных свойств. Изменим пример из предыдущего шага так, чтобы результат его просмотра в браузере был аналогичен приведенному на рисунке 1.
Чтобы получить такой результат нужно задать следующие параметры у тэга < P>:
Абсолютное позиционирование Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причем сам элемент или его потомки могут перекрывать ранее отображенные элементы. Чтобы определить точку отсчета местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение левой верхней вершины блока этого элемента и будет точкой отсчета для абсолютно позиционированного элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдет до элемента < BODY>, то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент. Следующий HTML -документ иллюстрирует абсолютное позиционирование элемента: < HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: static; background-color: #90EE90" > Родитель, позиционированный статически! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>
На рисунке 1 показано отображение страницы с абсолютно позиционированным элементом (графическим изображением буквы Ж) в тэге < SPAN>. Так как в исходном документе родитель (тэг < SPAN> ) элемента < IMG>, позиционированного абсолютно, является статически позиционированным элементом, то ищется ближайший абсолютно позиционированный родитель. Таковым будет тело документа, относительно начала которого и смещается вправо и вниз на 40 пикселей изображение. Если к этому фрагменту добавить один абзац, то элемент < SPAN> сместится вниз, но его потомок - элемент < IMG> - все равно будет позиционирован относительно начала документа (рисунок 2), что приводит к перекрытию изображением родителя.
Вот текст приложения: < HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < P> Абзац 1< P> < SPAN STYLE=" position: static; background-color: #90EE90" > Родитель, позиционированный статически! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>Если теперь изменить позиционирование родителя на относительное, то элемент < IMG> будет смещен вниз и вправо относительно начала элемента-родителя (рисунок 3).
Вот текст документа: < HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: relative; background-color: #90EE90" > Родитель, позиционированный относительно! < IMG SRC=" G.gif" STYLE=" position: absolute; top: 40px; left: 40px; " > < /SPAN> < /BODY> < /HTML>А если добавить перед элементом < SPAN> абзац, то изображение сместится вместе со своим родителем, оставаясь расположенным на 40 пикселей вниз и вправо относительно начала элемента-родителя (рисунок 4).
Замечание. Изменение размеров окна браузера не изменит положение абсолютно позиционированного элемента. Поэтому при уменьшении размеров окна такой элемент может оказаться за границами окна и, следовательно, невидим. Абсолютное позиционирование Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя:
Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением. Проиллюстрируем это на конкретном примере. Возьмем текст примера, результат просмотра которого в браузере приведен на предыдущем шаге на рисунке 3, и изменим его следующим образом: < HTML> < HEAD> < TITLE> Абсолютное позиционирование< /TITLE> < /HEAD> < BODY> < SPAN STYLE=" position: relative; background-color: #90EE90" > Родитель, позиционированный относительно! < IMG SRC=" G.gif" STYLE=" position: absolute; top: auto; left: auto; " > < /SPAN> < /BODY> < /HTML>Результат просмотра этого документа в браузере изображен на рисунке 1.
Визуальные эффекты Свойство visibility управляет отображением элемента. Если его значение равно visible (значение по умолчанию), то элемент отображается, если оно установлено равным hidden, то элемент не отображается. Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения. Это означает, что соответствующий ему блок занимает надлежащее положение на странице, но содержимое этого блока (элемент) не отображается. Подобное поведение отличается от поведения объекта со свойством display равным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу. Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определенной ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height. Та часть элемента, которая отображается в блоке, является его видимым изображением. Блок отображения не обязательно должен соответствовать размерам самого элемента: он может вмещать весь элемент, а может только его часть. Например, блок отображения элемента < IMG> может быть меньше размеров графического изображения, представляемого этим элементом. Свойство clip воздействует только на блок отображения элемента. Его значением может быть auto (никакого отсечения не производится). Также можно задавать координаты прямоугольника, в котором будет отображаться элемент. Прямоугольник задается с помощью параметра rect(< top> < right> < bottom> < left> ), где величины < top>, < right>, < bottom> и < left> определяют, соответственно, верхнюю, правую, нижнюю и левую границы видимого изображения элемента относительно блока отображения. На рисунке 1 показан пример использования свойства clip со значением rect (0 80 50 20).
Текст HTML -документа: < HTML> < HEAD> < TITLE> Обрезка изображения< /TITLE> < /HEAD> < BODY BGCOLOR=" AQUA" STYLE=" font-weight: 900; " > < P> Это изображение всего рисунка < IMG SRC=" G.gif" STYLE=" position: absolute; " > < P> Это обрезанное изображение < IMG SRC=" G.gif" STYLE=" position: absolute; clip: rect (0 80 50 20); " > < /BODY> < /HTML>Замечание. Для Microsoft Internet Explorer изображение должно быть позиционировано абсолютно, однако в некоторых других браузерах поддерживается как абсолютное позиционирование, так и относительное.
Визуальные эффекты Свойство overflow определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения, установленного свойствами top, width, height и left. Существует четыре значения этого свойства, определяющие поведение элемента:
В следующем примере используется свойство overflow для создания механизма прокрутки первого текста. < HTML> < HEAD> < TITLE> Позиционирование< /TITLE> < /HEAD> < BODY BGCOLOR=" AQUA" STYLE=" font-weight: 900; " > < DIV STYLE=" position: absolute; top: 0; left: 70; width: 50; height: 100; " > < IMG SRC=" g.gif" > < /DIV> < DIV STYLE=" position: absolute; top: 10; left: 15; width: 220; height: 120; overflow: scroll; " > < H1 STYLE=" color: red; " > Первый позиционированный текст, который накладывается на рисунок и на второй текст< /Н1> < /DIV> < DIV STYLE=" position: absolute; top: 60; left: 300; width: 50; height: 100; " > < H1 STYLE=" color: blue; " > Второй позиционированный текст< /Н1> < /DIV> < /BODY> < /HTML>Результат просмотра в браузере этого документа приведен на рисунке 1.
В этом примере был использован тэг < DIV> для выделения группы элементов страницы. Он выполнил роль контейнера. Напомним, что элементы, находящиеся в контейнере, наследуют некоторые свойства контейнера, указанные в параметре STYLE. В данном примере контейнеры содержали лишь по одному элементу, хотя можно было вставить в них еще и другие элементы. Визуальные эффекты Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-index задает слой, в котором располагается элемент при отображении. Если слой расположен ближе к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением слоя, даже если последний и отображается позже. Следующий HTML -документ иллюстрирует использование свойства z-index: < HTML> < HEAD> < TITLE> Свойство z-index< /TITLE> < /HEAD> < BODY BGCOLOR=" AQUA" STYLE=" font-weight: 900; " > <! -- Первая пара --> < IMG STYLE=" position: absolute; top: 20px; left: 0px; z-index: auto; " SRC=G.gif> < DIV STYLE=" position: absolute; top: 40px; left: 10px; width: 150px; color: white; background-color: blue; z-index: auto; " > Две буквы " Ж" < /DIV> < IMG STYLE=" position: absolute; top: 50px; left: 25px; z-index: auto; " SRC=G.gif> <! -- Вторая пара --> < IMG STYLE=" position: absolute; top: 120px; left: 0px; z-index: 3; " SRC=G.gif> < DIV STYLE=" position: absolute; top: 140px; left: 10px; width: 150px; color: white; background-color: blue; z-index: 1; " > Две буквы " Ж" < /DIV> < IMG STYLE=" position: absolute; top: 150px; left: 30px; z-index: auto; " SRC=G.gif> < /BODY> < /HTML>Результат просмотра в браузере этого документа приведен на рисунке 1.
Если значением свойства z-index является auto, то элемент перекрывает все элементы с таким же значением этого свойства, но его перекрывает любой элемент со значением свойства z-index, отличным от auto. Первый фрагмент иллюстрирует значение auto. Второй элемент в потоке отображения перекрывает первый, а третий - все предыдущие. Во втором фрагменте третья буква Ж перекрывается всеми предыдущими элементами, так как значение ее свойства z-index равно auto, а у предыдущих элементов это свойство определяет номер слоя. Первая буква Ж перекрывает текст, так как значение ее свойства z-index больше значения этого же свойства текста, хотя в потоке отображения она идет ранее. ТЕХНОЛОГИЯ CSS ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Общие положения |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 995; Нарушение авторского права страницы
