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

Мы уже знаем, что применение каскадных таблиц стилей позволяет нам добиваться самых поразительных эффектов в оформлении содержимого 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-страницы.