Каскадные листы стилей

Реализация идеи разделения данных и способа отображения.

Основная цель первых версий html – кроссплатформенность. В то время аппаратные возможности компьютеров были очень разными и нестандартными. Поэтому в html много тегов так называемой относительной разметки или неточно заданной. Так, например, тег <b> требует от браузера показать вложенный текст жирно, причем не уточняется степень «жирности». Тег <strong> вообще ничего не конкретизирует, он только просит выделить «сильнее», а браузер должен сам решить, как это будет выглядеть.

С течением времени возникли и распространились стандарты на аппаратуру, и необходимость в подобных неточностях отпала. Более того, потребовался способ максимально точно указать те или иные характеристики фрагмента страницы.

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

Более того, с ростом использования html стал все четче проявляться его недостаток, состоящий в невозможности задать структуру (взаимосвязи, подчиненность и т.п.) данных. Требовался другой язык, и им стал xml.

В xml-стандарт не фиксирует набор элементов, он фиксирует только правила (синтаксис) составления элементов. В xml так же, как и в html могут быть контейнерные и одиночные элементы, но синтаксические правила строгие. Форма контейнерных элементов аналогична html, а форма одиночных элементов следующая: <имя/>, т.е. в документе столько символов «/», сколько элементов. Регистр букв в именах элементов и атрибутов важен. Пустые символы (пробелы, символы табуляции и переходов на другую строку) тоже значимы, хотя можно и отказаться от этого при помощи особой инструкции. Для xml документа обязательна заголовочная строка. Существует два механизма описания семантических правил для элементов и атрибутов: схемы и DTD-описания. Формулируя правила для xml документа, мы можем сказать, что у элемента <book> может быть один или несколько вложенных элементов <page>, но не наоборот. Пожалуй, вышесказанного достаточно, для того чтобы стал понятен следующий xml документ, описывающий книги в библиотеке.

<data_pech>10.01.2005</data_pech>

<izdatel>СПБ Питер</izdate>

<kn1> <reg_nom>23</reg_nom><sost>удовлетворительное</sost>

</kn1>

<kn1> <reg_nom>24</reg_nom><sost>удовлетворительное</sost>

</kn1>

<kn1> <reg_nom>25</reg_nom><sost>плохое</sost>

</kn1>

<kn1> <reg_nom>102</reg_nom><sost>отличное</sost>

</kn1>

</kniga>

Сейчас мы не будем более подробно знакомиться с xml технологиями. Но заметим, что каскадные листы стилей применимы и к xml документам. Более того, для xml документов они необходимы, т.к. кто-то же должен сказать браузеру, как отображать тот или иной элемент. Ниже мы рассмотрим примеры и для html и для xml документов

Место описания стиля

Стиль может быть описан в нескольких местах, причем одновременно. Стиль может быть описан внутри тега, как значение атрибута style, он может быть описан в теге-контейнере style, который обычно располагается в контейнере head. Также стили могут быть описаны в отдельном файле, связь с которым устанавливается при помощи тега link. Если к некоторому тегу могут быть применены разные стилевые описания, более приоритетным считается тот, который расположен ближе к тегу. Таким образом, наибольший приоритет у стиля, описанного в теге. Если в теге style указаны разные стили для одного и того же тега, то применяется тот, который расположен ниже по тексту.

Рассмотрим на примере разные характеристики, расположенные в разных местах. Для того чтобы понимать примеры, рассматриваемые ниже, условимся заранее о том, что запись «p {color:red}» обозначает красный цвет букв для всех абзацев.

Пусть в отдельном файле style.css содержатся строки:

p {color:red}

li {color:red}

А в html-файле указан и присоединенный файл, и внутренний тег style, и одноименный атрибут в html-тегах.

<html>

<head>

<title>Место указания стиля</title>

<style>

p {color:green}

</style>

</head>

<body>

<p>Этот абзац будет показан так, как сказано в теге style.</p>

<p style=”color:blue”>Этот – как в атрибуте style - синим</p>

<ol>

<li>А пункты меню показываются так, как в </li>

<li> связанном файле, т.е. красным</li>

</ol>

</body>

</html>

Первый абзац будет показан зеленым цветом, второй – синим, а пункты списка – красным.

Синтаксис стилевого выражения

Обобщенный синтаксис можно представить следующим образом:

к_чему_применять {атрибут:значение; ... атрибут:значение}

Далее в примерах мы будем полагать, что стиль описан в теге style.

Описание стиля может быть применено ко всем тегам с заданным именем: p {color:red}. Причем можно указать несколько тегов через запятую, если к этим тегам применяются совершенно одинаковые стилевые характеристики.

li {background-color:green; color:blue}

td, li {color:red; }

Обратите внимание на то, что в данном случае пункты списка будет показаны красными буквами на зеленом фоне. Если же поменять местами эти две строчки, то буквы списка станут синими. Буквы в ячейках таблицы в любом случае будут красными.

Если требуется, чтобы стиль применился не ко всем одноименным тэгам, необходимо воспользоваться так называемыми классами тегов. У тега может быть указан атрибут class, определяющий принадлежность к тому или иному классу. В описании стиля указывается то же самое имя класса, причем оно может быть указано и само по себе с символом «точка» перед именем, либо после имени тега, но тоже с точкой – разделителем.

<style>

.c1 {color:red}

p.c2 {color:green}

</style>

<body>

<p class=c1>красный</p>

<p class=c2>зеленый</p>

<p class=c1>красный</p>

<p class=c2>зеленый</p>

<ol>

<li class=c1>красный</li>

</ol>

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

<style>

td {color:blue}

td span {background-color:ffccff}

span {color:red}

#super {bacground-color:ccffff}

</style>

<body>

<p>Перечень растений.<span>Розы.</span><p>

<table>

<tr><td>Фламинго <span>h=30</span></td>

<td>Шанель <span>h=80</span></td>

</tr>

<tr><td>Кармин<span>h=100</span></td>

<td><span id=super>Голубая</span><span>h=90</span></td>

</tr>

</table>

В примере цвет фона высоты растений розовый, цвет букв слова «Розы» - красный, а цвет остального содержимого ячеек – синий.

Можно указать стиль для тега, имеющего заданный идентификатор. Тег может иметь атрибут id, значение которого – идентификатор тега. Таким образом можно отмечать теги, содержащие особую информацию. Обращение к идентификатору тега строится по правилам построения URI. В примере выше так оформлен сорт-новинка – голубая роза.

В описании стиля (в фигурных скобках) может быть произвольное количество атрибутов, причем порядок атрибутов не важен. Имена атрибутов следует отыскивать в справочнике. Различаются атрибуты простые и обобщенные. После обобщенного атрибута может следовать набор значений, разделенных пробелами. Порядок значений в этом случае важен (см. справочник), т.к. иногда значения имеют один и тот же тип.

td {background-color:ffccff; border-top: 2 dotted black}

#tt {border: 7 dashed red}

В примере показаны обобщенные имена атрибутов: border, задающий толщину, стиль и цвет всех границ, и border-top, задающий в том же порядке характеристики верхней границы.

Есть еще одна интересная возможность: можно задавать значения атрибута через запятую. Это означает ваше предложение браузеру выбрать то значение, которым он располагает. Например, могут быть перечислены шрифты, начиная с некоторого интересного шрифта, но не распространенного, и заканчивая подходящим стандартным.

Стилевые атрибуты, определяющие цвет и фон.

Атрибут color применим ко всем тегам, определяет цвет букв (символов). Цвет может быть задан или словом (red), или шестнадцатеричным кодом (ff0000), или восьмеричным кодом (f00) или при помощи стилевой функции rgb(255,0,0).

Атрибут background-color определяет цвет фона (см. color), возможно задание прозрачного цвета transparent.

Атрибут background-image задает картинку на фоне при помощи функции url(имя_файла). Если задан и цвет фона и картинка на фоне, то в случае доступности будет показана картинка, а оставшееся место будет залито заданным цветом.

Атрибут background-repeat определяет, будет ли картинка размножаться, и в каком направлении. Возможные значения атрибута: repeat-x, repeat-y, repeat, no-repeat.

Значение fixed атрибута background-attachment задает фиксированную картинку фона, значение scroll – прокручивающуюся вместе с текстом.

Атрибут background-position определяет место картинки фона. Можно задать расположение по вертикали top, center или bottom и по горизонтали: left, center или right. Местоположение можно задавать координатами левого верхнего угла в процентах, в point, в долях экрана.

Атрибут background – обобщенный атрибут. Важно, что все свойства переустанавливаются к своему начальному значению, если они опущены в background, кроме того, эти начальные значения должны быть определены!

body {background-image: url(tx1.png); background-color:cdddff;

background-repeat: repeat-y; background-attachment: fixed;}

p {background-image: none}

td {background-image: url(tx2.png)}

В примере на фон экрана укладывается картинка, занимающая в результате размножения левую часть экрана. Картинка зафиксирована и не прокручивается вместе с текстом. Для остальной части экрана задан цвет фона. Для фона ячеек таблицы тоже задана картинка, а для абзаца специально задано отсутствие картинки, чтобы она не мехала читать текст.

Стилевые атрибуты, определяющие шрифт

Это – группа свойств: font-size, font-family, font-weight, font-style, font-variant, font, @font-face. Эти свойства описывают размер (font-size), наименование (font-family), жирность (font-weight), стиль шрифта (font-style) и некоторые преобразования (font-variant). Разберитесь по справочнику со значениями этих атрибутов.

Атрибут font-size определяет размер шрифта. Он может измеряться и в привычных нам pt, и в px, и в других. Самое интересное, что можно задавать относительный размер шрифта.

Атрибут font-family – семейство или наименование шрифта.

Атрибут font-weight – жирность шрифта, измеряемая в неких условных единицах.

Атрибут font-style позволяет устроить курсив, прозрачность.

При помощи атрибута font-variant можно устроить написание маленькими заглавными буквами и другое.

Атрибут font – обобщенный

Стилевые атрибуты, определяющие параметры текста

Далее в справочнике следует группа свойств, описывающих характеристики текста. В этом разделе содержатся описания свойств текста и форматирования абзаца.

Word-spacing – пропуск между словами.

Пропуск между буквами - letter-spacing.

Декорирование текста - text-decoration.

Вертикальное выравнивание относительно базовой линии - vertical-align.

Трансформирование текста - text-transform.

Выравнивание абзаца - text-align.

Абзацный отступ text-indent.

Межстрочное расстояние - line-height

Наконец, вы сможете оформить текст так, как положено по правилам русского языка: абзац с красной строки, левая и правая границы выровнены.

Стилевые атрибуты, определяющие параметры блоков

В справочнике в разделе BOX содержатся свойства: отступы слева, справа, сверху и снизу от предыдущего объекта (для ячеек таблицы – между ячейками) - margin-left, margin-right, margin-top, margin-bottom, margin.

Отступы от охватывающего объекта до вложенного (от границы ячейки до текста) padding-top, padding-right, padding-bottom, padding-left, paddin.

Ширина рамки - border-top-width, border-right-width, border-bottom-width, border-left-width, border-width.

Цвет рамки - 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.

Групповые имена - border-top, border-right, border-bottom, border-left, border.

Ширина блока - width, высота блока – height.

Плавающий блок - float, отсутствие объектов с заданной стороны от текущего объекта – clear.

Для блока div можно задать все четыре границы разными, в том числе отсутствующими. Это, по-видимому, хорошо. Для каждой ячейки таблицы тоже можно так задать. Но результат получается странный, поскольку граница между двумя рядом расположенными ячейками формируется из двух разных линий! Выход – по-разному оформлять краевые и внутренние ячейки, что достаточно трудоемко.

Стилевые атрибуты, определяющие классификационные свойства

Свойства классификации: свойство display определяет, каким образом элемент показывается на экране. Возможные значения: block | inline | list-item | none. По умолчанию block.

Показ в виде отдельного блока, на уровне символа текста, списковый элемент или не показывается вообще. Для всех элементов браузер имеет обычно умалчиваемый тип показа, изменить его в IE 5.0 не удается (то есть задание в листе стилей описания H1 {color : red; font-size : 20pt; display:list-item; list-style-type:lower-alpha ;} изменяет цвет заголовков первого уровня, размер, но не делает их нумерованным списком).

Свойство white-space normal | pre | nowrap. Обычное поведение – сворачивание всех пробелов и переводов на другую строку в один пробел. Можно задать вид заранее отформатированного текста, либо только отказаться от переносов строк.

OL.alpha LI { list-style: upper-alpha }

UL LI { list-style: square }

Свойство list-style-position задает компактную (inside | outside) или нет форму отображения списка. Свойство list-style – групповое имя. Порядок указания уточняющих свойств следующий: ключевые слова, расположение, адрес.

Свойства позиционирования: width, height, left, top достаточно очевидные. Свойство position задает расположение элемента в документе относительно других элементов. Значения: absolute, relative, static. Заметим, что было бы интересно, если бы можно было расположить элемент в заданной позиции относительно экрана, а не документа, но этого нет. Свойство clip описывает кусочек, в котором располагается элемент с заданным свойством position=absolute.

Некоторые свойства печати: проброс страницы после - page-break-after. Проброс страницы перед - page-break-before.

Строковый контейнер

Задать стиль, реакцию на событие можно только фрагменту HTML – кода, заключенному в некоторый контейнер. Если Вам не требуются никакие форматы, предоставляемые обычными тэгами, такими как LI, TD, то удобнее применить обезличенные контейнеры – <DIV> и <SPAN>.

Тэг <DIV> - блоковый фрагмент. То есть два рядом расположенные в исходном тексте тэга <DIV> будут изображены по вертикали друг под другом, причем каждый начнется с новой строки.

Тэг <SPAN> удобно применять в том случае, когда надо задать стиль, но текст должен остаться на том же уровне (in-line). Так же, как и <DIV> этот тэг не имеет своего собственного формата.

Характеристики блока

По умолчанию у всех объектов прозрачный фон. Задавая цвет фона, Вы делаете фон непрозрачным.

В стилях можно задать относительные отступы – margin-top, margin-left, margin-right, margin-bottom. Значения отступов могут быть положительными (в направлении от левого верхнего угла вправо и вниз) и отрицательными.

Размер блока, напомним, задается атрибутами width, height. Кроме того, для блоков удобно указывать полосу прокрутки (в стилях атрибут overflow).

Фильтры

Фильтры фактически обеспечивают графические эффекты с помощью браузера. Можно считать фильтры некоторыми встроенными программами, выполняемыми браузером клиента. Наиболее часто фильтры применяются к картинке, но можно применить и к разделу DIV, элементы которого в этом случае должны иметь атрибуты width и height (то есть должны быть ограничены!). Свойство filter имеет следующее значение: имяфильтра (параметр1, параметр2, …) и задает применяемый фильтр или набор фильтров к элементу.

IE с версии 4.0 поддерживает еще два фильтра: blendTrans и revealTrans. Свойство blendTrans (duration=время) указывает время (в секундах, вещественное число), в течение которого производятся преобразования. Свойство revealTrans (duration=время, transition=видобласти) позволяет Вам показывать или скрывать визуальные объекты, используя один из 23 способов.

Alpha – Задает степень прозрачности. Применим ко всему элементу или к некоторой градиентной области внутри элемента. STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)". Параметр 1 задает начальный уровень прозрачности (0- прозрачный, 100 – непрозрачный). 2 параметр – окончательный уровень прозрачности. 3 параметр определяет вид области, прозрачность которой изменяется (0 (uniform), 1 (linear), 2 (radial) or 3 (rectangular)). Следующие два параметра задают начальную точку области, в которой будет изменяться прозрачность. Затем – конечная точка.

Blur – фильтр обеспечивает "смазывание" элемента в указанном направлении. STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 1 параметр – логическое значение – добавлять или нет исходный объект к смазанному. 2 параметр – изменяется от 0 до 315 с шагом 45 и задает направление смазывания. 3 параметр задает глубину смазывания.

Choma – делает некоторый цвет, используемый в элементе, прозрачным. STYLE="filter:Chroma(Color = color)"

DropShadow – добавляет копию элемента, сдвинутую в заданном направлении – тень. STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 1 параметр определяет цвет тени, 2 и 3 – координаты сдвига, 4 параметр определяет, на какие точки делается тень: любое положительное число – тень делать на непрозрачные точки, 0 задает тень на прозрачные точки.

FlipH – отражение текста по горизонтали. STYLE="filter:FlipH"

FlipV – отражение текста по вертикали. STYLE="filter:FlipV"

Glow – добавление размытой области вокруг объекта – эффект подтаивания. STYLE="filter:Glow(Color=color, Strength=strength)" 1 параметр – цвет, 2 – глубина (0-100).

Gray – убирает цвет из объекта, заменяя его градациями серого.

Invent – цвета объекта заменяет на инвертированные.

Light – фильтр задает освещенность объекта. Несколько методов определяют изменение освещенности.

Mask – берет все прозрачные точки объекта, устанавливает для них указанный цвет и делает прозрачными ранее непрозрачные точки. STYLE="filter:Mask(Color=color)"

Shadow – формирует обычную тень в заданном направлении. filter:Shadow(Color=color, Direction=direction)

Wave – изгибает объект. filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength) 1 параметр – добавлять ли исходный объект к измененному. 2 параметр – количество изгибов. 3 – изменение яркости цвета в процентах. 4 параметр – 5 параметр – определяет интенсивность изгибов.

XRay – заштриховка.

Важно! Фильтры реализованы при помощи встроенных программ, часто не работающих в браузерах, отличных от Internet Explorer.

Некоторые замечания о виде значений атрибутов. Длина может задаваться в пикселях, в поинтах, в сантиметрах, в дюймах, процентах, в долях от предыдущего размера, в высоте буквы «х» в заданном шрифте. Процентное задание может быть либо явным, либо в виде отрицательного или положительного приращения. Цвет можно задавать в виде зарезервированных слов, в виде шести шестнадцатеричных цифр (две цифры – красный, две – зеленый, две – синий, так же как было рассказано ранее), в виде трех шестнадцатеричных цифр, в функциональном виде: rgb(r,g,b), где r – десятичное число от 0 до 255, обозначающее интенсивность красного цвета, g – зеленого, b – синего. Адрес файла задается в функциональном виде url(полное имя файла).

<== предыдущая лекция	\|	следующая лекция ==>
ОТЛАДОЧНЫЕ СРЕДСТВА В СИСТЕМАХ ПРОГРАММИРОВАНИЯ НА ПРИМЕРЕ VBA.	\|	Смещение расположения объекта на экране

Дата добавления: 2016-04-19; просмотров: 463;