2015-03-07
1487
Для определения таблицы стилей отдельного тэга используется атрибут style.
Например, стиль тэга H1 из предыдущего примера мог бы быть задан и так: <H1 style="color: red; text-align: center" >...</H1>
Подставляемые таблицы стилей приемлемы только в том случае, когда документ содержит единственный элемент с данным набором стилей.
4.3. Свойства стилей и их значения
Полная спецификация CSS2 (так же, как и последней версии HTML) содержится на сайте www.w3.org. Строгой группировки свойств стилей нет, удобно их разделить, например, на такие группы:
· Цвет и фон;
· Шрифт (размер, начертание);
· Текст (отступы, выравнивание, декорирование текста);
· Блоки элементов (размеры, отступы, границы);
· Позиционирование блока;
· Визуальные свойства (тип курсора, в частности)
· Фильтры (спецэффекты, применяемые к документу)
Разные типы браузеров и их разные версии поддерживают не все свойства. Поэтому при разработке сайта нерационально использовать эффекты, поддерживаемые, допустим, только Internet Explorer 6.0. С другой стороны, ориентироваться на свойства, поддерживаемые старыми версиями браузеров тоже нерационально.
Как было уже описано в подразделе 4.1, синтаксис декларации (объявления свойства): Название свойства: значение свойства;
Не каждое свойство стиля может быть применено к любому элементу! Например, свойства фильтров могут применяться только к изображениям и блокам текста (см. приложение 2).
Возможны значения свойств стилей следующих типов:
· ключевое слово
· число
· размер
· процентная величина
· URL
· Цвет
· область
Некоторые ключевые слова уникальны, например, значение underline (подчеркнутый) или blink (мерцающий) свойства text-decoration. Другие ключевые слова используются в качестве значений целого ряда свойств стиля, например, значения normal, none и auto есть у многих свойств.
Значения типа " число " могут предваряться знаками + и -.
Для значений типа "размер" (в оригинале length) могут применяться следующие единицы измерения:
| em | ширина символа m | относительное |
| ex | высота символа x | относительное |
| px | пиксел (относительно устройства вывода) | относительное |
| in | дюйм = 2.54 сантиметра | абсолютное |
| cm | сантиметр | абсолютное |
| mm | миллиметр | абсолютное |
| pt | пункт (точка) = 1/72 дюйма | абсолютное |
| pc | пика = 12 пунктов | абсолютное |
Значения типа "процентная величина" задают размер относительно какого-либо другого свойства стиля.
Например: line-height: 90% задает межстрочный интервал, равный 90% высоты текущей строки.
Значение типа " URL " задаёт адрес ресурса.
Значение типа " цвет " задается одним из способов:
· Традиционная шестнадцатиричная RGB-триада - две позиции на интенсивность каждой составляющей (16 777 216 оттенков), например, #00FFFF или #87CEEB.
· Сокращенная шестнадцатиричная RGB-триада - одна позиция на интенсивность каждой составляющей. Применима для простых цветов (4 096 оттенков), например: цвет #00FFFF равносилен #0FF в сокращенной записи. Для #87CEEB сокращенного эквивалента записи нет.
· Десятичное обозначение - либо целыми числами от 0 до 255, либо в процентной записи. Например, запись цвета rgb(0,255,255) равносильна записи rgb(0%,100%,100%) или #00FFFF
· Имя цвета. Например, запись цвета #00FFFF равносильна cyan, а цвет #87CEEB равносилен skyblue.
Для значения типа " область " определено одно значение - прямоугольник, задаваемый парой координат левого верхнего угла и парой координат правого нижнего угла, например, rect (20px, 30px, 420px, 330px)
В большинстве групп свойств стилей есть так называемые " стенографические " (обобщенные) свойства. При их применении в одной декларации задаются несколько значений свойств, они разделяются пробелами. Иногда существенен порядок следования значений.
Например, в приведенном на рис. 4.1 файле style_lmp.css свойства font для тэга TD можно было объявить и так: TD {font: italic bold 24pt Helvetica}.
Результат применения некоторых свойств стилей, в том числе и спецэффектов фильтрации, показан на рис. 4.2. Это результат отображения файла Demo_css.htm, текст которого приведён в окне рис. 4.3.
Рис. 4.2. Применение свойств стилей для декорирования текста
Из текстов файлов, показанных на рис. 4.3 и 4.4 становятся понятными разные способы включения стилевых таблиц: в приведённом примере работает внешняя таблица style1_lmp.css, подключённая директивой @import. Обратите внимание - для того, чтобы иметь возможность применить к заголовку спецэффекты фильтрации, автор разместил этот заголовок в ячейку таблицы.
Рис. 4.3. Текст файла, демонстрирующего разные способы включения таблиц стилей
Рис. 4.4. Таблица стилей, задающая один из вариантов оформления страницы
4.4. Наследование и каскадность
Любой HTML-документ, как показано на рис. 4.5, может быть представлен в виде дерева.
Рис.4.5. Дерево объектов HTML-документа
Корнем этого дерева является элемент HTML, который имеет двух сыновей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P. Два последних элемента называются братьями, причем H1 является старшим братом, а P — младшим (возраст по мере появления в тексте документа). Все элементы дерева являются потомками корня, а тот является их предком.
Некоторые свойства наследуются детьми элемента в дереве документа. В определении каждого свойства указывается, является оно наследуемым или нет. Например, свойство color - наследуемое, а border – нет.
По этой причине для задания стиля отображения элементов "по умолчанию", часто достаточно задать стиль элемента HTML или BODY. Все остальные элементы являются потомками этих элементов, поэтому они будут наследовать их свойства.
При этом важно помнить, что значения, заданные в виде процентных величин, не наследуются!
Многие свойства имеют в качестве возможного значения значение inherit. Оно означает, что в качестве значения свойства должно использоваться вычисленное значение данного свойства отцовского элемента.
Каскадность языка CSS состоит в том, что каждому правилу приписан определенный вес. Если к конкретному элементу применимы несколько правил, то используется то, которое имеет наибольший вес. В результате происходит накопление свойств элементов в соответствии с правилами наследования, распространяющееся от предков к потомкам.
Порядок наследованиястиля элемента по приоритетности таблиц стилей:
· подставляемый
· внешняя таблица 1
· внешняя таблица 2
·...
· внутренняя (встроенная) таблица
Из текста файла 4.3 понятно, что стилевая таблица style1_lmp.css, согласно правилам наследования, наиболее приоритетна (она введена позже таблицы style_lmp.css), поэтому и вид страницы рис 4.2 определяется именно этой таблицей, а также подставляемым стилем элемента TD второй таблицы. Чтобы подключить к страничке внутреннюю или другую внешнюю таблицу, достаточно заключить в тэги комментария фрагменты кода, вводящего, стилевые таблицы, ставшими ненужными.
4.5. Селекторы классов, идентификаторов
Если несколько селекторов имеют одинаковые декларации, то их можно сгруппировать, перечислив селекторы через запятую.
Например, следующий набор правил
H1 {font-family: sans-serif}
H2 {font-family: sans-serif}
H3 {font-family: sans-serif}
эквивалентен одному правилу H1, H2, H3 {font-family: sans-serif}
CSS реализует возможность задавать стили не всем одинаковым элементам страницы, а избирательно – для этого используется атрибуты CLASS = "имя класса" или ID ="имя элемента", присваивающиеся любому элементу страницы. Атрибуты классов и идентификаторов подчиняются всем способам включения свойств стилей, описанным в подразделе 4.2.
На рис 4.6 приведён пример применения селекторов классов и идентификаторов к разным элементам страницы, а на рис. 4.7 – код этой страницы. Обратите внимание, что один и тот же селектор - class="cursiv" применён к разным тэгам – H2 и P, а с другой стороны, к одному и тому же тэгу H2 в разных случаях применены разные селекторы - class="cursiv" и id="fon".
Рис. 4.6. Отображение страницы с использованием селекторов классов и идентификаторов
Рис. 4.7. Способы включения селекторов классов и идентификаторов
В названии классов и идентификаторов необходимо соблюдать регистр символов, в соответствии с первоначальным описанием. Рекомендуется выбирать названия классов, отражающие их назначение.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
При присвоении стилей можно использовать и составные (контекстуальные) селекторы, учитывающие иерархию контейнеров:
Например, нужно выделить один из списков:
<UL class="man"> Студенты:
<LI class="student">Иванов
<LI class=student>Петров
<LI class=student>Сидоров</UL>
<UL class="man">А это просто другие люди:
<LI >Иваненко
<LI >Петренко</UL>
Для решения этой задачи в таблице стилей достаточно написать:
UL LI.man.student {font-style:italic;
background:violet}
Т.е. наклонный шрифт и фон следует применить только к элементам класса student, входящих в список класса man.
4.6. Использование тэгов <SPAN> и <DIV>
Стиль можно установить почти для всех элементов HTML, но два тэга <SPAN> и <DIV> особенно удобны тем, что они не накладывают на стиль никакого собственного типа представления.
При использовании атрибутов CLASS и ID эти тэги вместе с CSS практически неограниченно расширяют HTML.
<SPAN>...</SPAN> и <DIV>...</DIV> являются контейнерами для HTML-элементов. Они позволяют применять атрибуты форматирования к отдельным частям документа. В контейнер <DIV>...</DIV> можно включать другие тэги, исключая <HEAD>, <BODY> и тэги, связанные с фреймами (кроме <IFRAME>). Используя тэг <DIV>, Web-страницу можно разделить на части и каждой из них присвоить отдельный стиль.
На рис. 4.8 и 4.9 приведёны код страницы с использованием тэгов <SPAN> и <DIV> и её отображение на экране браузера. Полезно сравнить эти два рисунка с подобной страницей, изображение которой на экране браузера было показано на рис 3.2. Практически одинаковый результат здесь достигнут другими средствами: применение CSS упрощает форматирование.
Рис. 4.8. Примеры использования тэгов <SPAN> и <DIV>
Рис. 4.9. Результат применения тэгов <SPAN> и <DIV>
Вопросы применения CSS2 ещё недостаточно полно и систематично освещаются в литературе, поэтому в заключение предлагается список наиболее интересных сетевых ресурсов по тематике данного раздела:
1. https://wdh.suncloud.ru/refindex.htm - Исчерпывающее описание CSS2 в электронном учебнике Ю. Лукача "Справочник Веб-разработчика"
2. www.arcus.lv/dimas/2.html - Справочник по CSS2
3. www.shortway.to/css2/start/start_css.html - Интерактивный учебник «CSS как стиль» - свежий, удобный и красивый, об использовании каскадных таблиц стилей в HTML-документах
4. vvz.nw.ru/Lessons/CSS/examples.htm – примеры CSS, в том числе фильтры
5. css.manual.ru/index.php - CSS-справочник (многостраничный), переходы по содержанию
