Пакет Adobe GoLive

         

Применение стилей

Мы уже знаем, что применение каскадных таблиц стилей позволяет нам добиваться самых поразительных эффектов в оформлении содержимого Web-страниц. Но когда эти и без того немалые возможности соединяются с технологией DHTML, разработчик Web-страниц получает в свое распоряжение практически неограниченные возможности манипулирования содержимым Web-страницы. В этом разделе мы рассмотрим основные приемы манипулирования правилами отображения элементов Web-страниц при помощи стилей.
Как мы знаем, есть два метода работы со стилями. Можно создать стилевую таблицу, причем, в данном случае не так уж важно, будет она встроенной или внешней, а затем обращаться к правилам отображения из этой таблицы при помощи значений параметров class, которые будут совпадать с теми или иными селекторами стилевой таблицы. А можно воспользоваться параметром style, который встраивается практически во все теги. Мы уже знаем, что создание отдельной стилевой таблицы оправданно в тех случаях, когда необходимо создать единообразное оформление. А если нам требуется, как можно более гибко управлять параметрами отображения многих элементов, стоит использовать задание стиля для каждого отдельного тега.
Для начала мы рассмотрим примеры операций с отдельными стилевыми таблицами. Существует два подхода к данной проблеме. Мы можем либо динамически изменять подключенную стилевую таблицу, либо менять идентификаторы классов у элементов оформления Web-страниц.
Изменение идентификаторов классов обычно используется в тех случаях, когда все необходимые правила отображения уже описаны в стилевой таблице, связанной с HTML-документом, а разработчику необходимо лишь гибко применять различные правила к одному и тому же элементу содержимого. Приведем один из примеров подобного подхода.
Мы можем создать документ, основным содержимым которого является таблица с тремя столбцами и одной строкой. В первой ячейке мы раполо-жим два наименования коротких заметок, связанных с переключателями. Сами заметки мы разместим во второй и третьей ячейках. А пользователь, выбирая тот или иной переключатель, будет визуализировать соответствующий текст. Таким образом, когда отображается содержимое второй ячейки, не отображается содержимое третьей ячейки, и наоборот. Код подобного документа приведен в листинге 7.3, а результат — на рис. 7.3.

Листинг 7.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>flMHaMM4ecKMe cTnrm</title>
<script language="javascript">
<! —
function chan_cont(x)
{
if (x==l) {pi.className="visible"; p2.className="hidden"};
if (x==2) {p2.className="visible"; pi.className="hidden"};
}
//-->
</script>
<style type="text/css">
.visible {visibility: visible}
.hidden (visibility :hidden} </style> </head> <body>
<table border=2 id="tablel"> <tr>
<td>
<р>Первая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (1) " value="l" checkedx/p>
<р>Вторая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (2) " value="2"x/p>
</td>
<td>
<p id="pl" class="visible">TeKCT первой заметки</р>
</td>
<td>
<p id="p2" class="hidden">TeKCT второй заметки</р>
</td> </tr> </table>
</body>
</html>

Рис. 7.3. Окно браузера с результатом отображения файла приведенного в листинге 7.3, в тот момент, когда пользователь активизировал второй переключатель

Теперь рассмотрим структуру HTML-кода созданной нами Web-страницы. Функционально код разбивается на три части: программа-скрипт, стилевая таблица и содержимое документа. Начнем со стилевой таблицы.
Легко заметить, что мы объявляем два класса с селекторами visible и hidden. Правила отображения для этих классов чрезвычайно просты. В обоих случаях мы явно устанавливаем видимость элементов, входящих в тот или иной класс при помощи свойства visibility, которое отвечает за видимость элемента данного класса. Соответственно, класс visible будет отображаться в окне просмотра, а класс hidden — нет.
Содержимое страницы полностью "упаковано" в таблицу. В первой ячейке размещены два переключателя. Так как нам не придется передавать данные об их состоянии обрабатывающей программе на сервер, мы с успехом обходимся без формы, создаваемой при помощи тега <form>. Для каждого переключателя мы установили обработку события onclick, возникающего при щелчке мышью на данном переключателе. Так как щелчок мыши по переключателю вызывает изменение ее состояния, то, казалось бы, можно для этих целей воспользоваться и событием onchange. Однако здесь решающую роль играет тот факт, что событие onclick передается вверх по объектной иерархии до объекта document, a onchange — нет. Дело в том, что событие onclick для объекта document инициирует его обновление в окне просмотра браузера, если содержимое данного объекта было изменено каким-либо образом. То есть, если бы мы воспользовались событием onchange, то видимые изменения в отображении документа происходили бы только после того, как пользователь дополнительно бы щелкал мышью где-либо кроме переключателей.
Для обработки щелчка мышью на обоих переключателях мы используем одну и ту же функцию с наименованием chan_cont, которая объявлена в программе-скрипте. В качестве параметра для этой функции мы передаем порядковый номер заметки, которую необходимо сделать видимой. А затем в теле функции, в зависимости от переданного параметра мы меняем идентификаторы классов у заметок, пользуясь их уникальными идентификаторами, созданными при помощи параметров id. Для того, чтобы изменить наименование класса, мы пользуемся свойством className.
Впрочем, мы можем использовать более радикальный вариант динамического стилеобразования. Так, мы обладаем возможностью создать несколько полноценных стилевых таблиц, внедренных в HTML-документ, а затем в зависимости от обстоятельств менять их. Очень часто этой возможностью пользуются для создания так называемых "скинов" сайта, т. е. для всех Web-страниц сайта создается одинаковый набор стилевых таблиц, которые полностью определяют их внешний вид. А затем удаленному пользователю предоставляется возможность выбрать именно тот вариант оформления сайта, который ему больше всего нравится. Идентификатор соответствующей стилевой таблицы записывается в строку cookie-информации. Затем, при следующем посещении сайта, скрипт получает эту cookie-информацию, записанную в локальной системе удаленного пользователя, и на ее основе активизирует ту или иную стилевую таблицу. При создании подобного сценария следует учесть тот факт, что многие браузеры позволяют запретить создание cookie-записей на машине пользователя, следовательно, по умолчанию должна использоваться одна из стандартных стилевых таблиц.
Попробуем создать подобный документ. Мы не будем встраивать в него обработку cookie-информации, так как для ее создания и записи надо создавать специализированную форму. Мы ограничимся просто прямым выбором того или иного варианта оформления Web-страницы при помощи переключателей. Код подобного HTML-документа приведен в листинге 7.4.

Листинг 7.4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<1;11;1е>Динамические стили</1:11:1е>
<style id="stylel" type="text/css">
hi {color:red}
p {font-family:"Courier New"}
</style> <style id="style2" type="text/css">
hi {color:blue}
p {font-family:"Times New Roman"}
</style>
<script language="javascript">
function chan_style(x)
if (x==l) {stylel.disabled=true; style2.disabled=false}; if (x==2) {style2.disabled=true; stylel.disabled=false};
</script>
</head> <body>
<р>Первый стиль o<$opwieHHH<input type="radio" name="groupl' onClick="chan_style (1) " value="l" checkedx/p>
<р>Второй стиль oфopмлeния<input type="radio" name="groupl'
onClick="chan_style (2) " value="2"x/p>
<п!>3аголовок первого уровня</п!>
<р>Пример обычной строки текста</р>
</body>
</html>

Рис. 7.4. Окно браузера с результатом отображения файла, приведенного в листинге 7.4, в тот момент, когда пользователь активизировал второй переключатель

Сама структура документа практически не претерпела изменений по сравнению с предыдущим документом. Только теперь мы использовали два тега <style> с двумя взаимоисключающими наборами правил отображения обычного текста и заголовков первого уровня. Для каждого такого тега мы задаем уникальный идентификатор. При загрузке HTML-документа, браузер изначально использует вторую стилевую таблицу, так как она полностью перекрывает область действия первой стилевой таблицы, будучи загруженой после нее.
После изменения состояния переключателей в дело вступает программа-скрипт. Для того, чтобы активизировать одну стилевую таблицу и отключить другую, используется свойство disabled, присущее тегам <style>. Его значением, как хорошо видно в тексте, является логическое выражение. В зависимости от переданного в функцию значения, мы отключаем одну стилевую таблицу и подключаем другую (рис. 7.4).
В самом начале данного раздела мы уже говорили, что можем воспользоваться объектом style, который входит в стандартную объектную иерархию DHTML. Этот объект присущ всем тегам в качестве встроенного свойства. Рассмотрим простейший пример его применения (рис. 7.5).

Листинг 7.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm!4/strict.dtd">
<html> <head>
<title>flMHdMM4ecKMe CTi«iJi</title> <script language="javascript"> <! —
function chan_style() {
pi.style.backgroundColor="blue" ; pi.style.color="white" ; }
//--> </script> </head> <body>
<p id="pl" onMouseover="chan_style()">Пример обычной строки текста</р>
</body>
</html>

Рис. 7.5. Окно браузера с результатом отображения файла, приведенного в листинге 7.5, в тот момент, когда пользователь навел курсор мыши на текстовую строку

Механизм подключения скрипта к единственному абзацу, расположенному на нашей демонстрационной Web-странице, уже должен быть вполне понятен. Единственное место в данном HTML-документе, которое следует несколько внимательнее рассмотреть — это тело функции, обрабатывающей событие onMouseover. В ее коде видно, что мы воспользовались объектом style, а точнее, его несколькими свойствами. По аналогии с технологией CSS легко догадаться, что свойство backgroundcoior устанавливает цвет фона, а свойство color — цвет шрифта. Однако хотелось бы точно знать, какими свойствами обладает объект style, и какие параметры CSS они дублируют. В табл. 7.8 перечислены все свойства объекта style.

Таблица 7.8. Свойства объекта style

Наименование свойства
Описание свойства
background
Задает URL графического изображения, использующегося в качестве фона для элемента
backgroundAttachment
Определяет механизм прокручивания фонового изображения вместе с содержимым элемента
backgroundColor
Задает цвет фона
background Image
Содержит URL графического изображения, используемого в качестве фона
backgroundPosition
Определяет координаты левого верхнего угла фонового изображения
backgoundPositionX
Устанавливает горизонтальную координату верхнего левого угла фонового рисунка
backgoundPositionY
Устанавливает вертикальную координату верхнего левого угла фонового рисунка
backgroundRepeat
Задает механизм повторения фонового изображения на пространстве, занимаемом элементом, если это пространство больше по размерам, чем применяемое графическое изображение
border
Задает стиль отображения границы вокруг элемента
borderBottom
Определяет параметры отображения нижней границы элемента
borderBottomColor
Задает цвет нижней границы элемента
borderBottomStyle
Задает стиль линии нижней границы элемента
borderBottomWidth
Устанавливает ширину нижней границы элемента
borderColor
Задает цвет границы элемента
BorderLeft
Определяет параметры отображения левой границы элемента
border LeftColor
Задает цвет левой границы элемента
borderLeftStyle
Задает стиль линии левой границы элемента
borderLeftWidth
Устанавливает ширину левой границы элемента
borderRight
Определяет параметры отображения правой границы элемента
border Right Color
Задает цвет правой границы элемента
borderRight Style
Задает стиль линии правой границы элемента
borderRightWidth
Устанавливает ширину правой границы элемента
borderStyle
Указывает стиль линий границы элемента
borderTop
Определяет параметры отображения верхней границы элемента
borderTopColor
Задает цвет верхней границы элемента
borderTopStyle
Задает стиль линии верхней границы элемента
borderTopWidth
Устанавливает ширину верхней границы элемента
borderWidth
Указывает ширину границы элемента
clear
Указывает порядок позиционирования и выравнивания содержимого элемента
clip
Задает порядок отображения содержимого элемента, если оно по размерам превосходит пространство, отведенное элементу в окне просмотра браузера
color
Задает цвет элемента
cssText
Содержит текстовое значение атрибута style, внедренного в тег
cursor
Задает тип курсора мыши, который будет отображаться в то время, когда он будет находиться над элементом
display
Определяет, будет или нет отображаться данный элемент в окне просмотра браузера
filter
Указывает на набор всех графических фильтров, которые применялись к данному элементу
font
Задает свойства шрифта, которым будет отображаться текстовое содержимое элемента
font Family
Устанавливает шрифт, которым будет отображаться текст
fontSize
Задает размер используемого шрифта
fontStyle
Указывает начертание применяемого шрифта
fontVariant
Задает способ отображения строчных символов
fontWeight
Устанваливает ширину линий, которыми отображаются символы шрифта
height
Задает высоту элемента
left
Устанавливает горизонтальную координату верхнего девого угла элемента
letterSpacing
Задает межсимвольное расстояние
lineHeight
Устанавливает межстрочный интервал
listStyle
Указывает способ отображения элементов списка
listStylelmage
Задает графическое изображение для создания маркера
listStyle Position
Устанавливает расположение маркеров элементов списка
listStyleType
Указывает, какой тип стандартных маркеров будет использоваться в данном элементе
margin
Определяет внешний вид полей элемента
marginBottom
Задает размеры нижнего поля элемента
MarginLeft
Задает размеры левого поля элемента
MarginRight
Задает размеры правого поля элемента
marginTop
Задает размеры вержнего поля элемента
overflow
Определяет правило отображения содержимого элемента, переполняющего выделенное для него пространство
paddingBottom
Определяет размер отступа между содержимым элемента и его нижней границей
paddingLeft
Определяет размер отступа между содержимым элемента и его левой границей
paddingRight
Определяет размер отступа между содержимым элемента и его правой границей
paddingTop
Определяет размер отступа между содержимым элемента и его верхней границей
pageBreakAfter
Устанавливает разрыв страницы перед элементом
pageBreakBefore
Устанавливает разрыв страницы после элемента
pixelHeight
Содержит численное значение высоты элемента в пикселах
pixelLeft
Содержит численное выражение горизонтальной координаты верхнего левого угла элемента в пикселах
pixelTop
Содержит численное выражение вертикальной координаты верхнего левого угла элемента в пикселах
pixelWidth
Содержит численное значение ширины элемента в пикселах
position
Определяет применяемую модедь позиционирования элемента
posLeft
Содержит числовое значение горизонтальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь
posTop
Содержит числовое значение вертикальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь
posWidth
Содержит числовое значение ширины элемента в единицах измерения, заданных в последнюю очередь
styleFloat
Задает стиль расположения содержимого элемента
textAlign
%
Устанавливает выравнивание текстового содержимого элемента
text Decor at ion
Устанавливает способ отображения текста
textlndent
Устанавливает отступ первой строки абзаца
textTransform
Задает стиль отображения различных регистров шрифта
top
Содержит вертикальную координату верхенго левого угла элемента
verticalAlign
Задает вертикальное выравнивание элемента
visibility
Регулирует видимость данного элемента
width
Задает ширину элемента
zlndex
Устанавливает псевдовертикальное позиционирование элемента

Руководствуясь этой таблицей, мы получаем доступ ко всем свойствам стилевого оформления для каждого элемента содержимого Web-страницы. Таким образом, при помощи технологии DHTML мы получаем контроль над свойствами отображения любого элемента Web-страницы.

Содержание раздела