3.6. Форматирование с использованием css
Cascading Style Sheets (Каскадные таблицы стилей — CSS) — это специальный язык описания стилей, который обладает гораздо более богатым и функциональным, по сравнению с HTML, набором средств форматирования и управления стилями элементов документа.
С момента разработки CSS, было принято две его спецификации: CSS 1 и CSS 2 (в настоящее время W3C ведет работы над проектом CSS 3). Мы не будем здесь подробно рассматривать язык CSS (для этого у меня нет ни времени, ни полноты знаний), а рассмотрим лишь его основные и часто применяемые элементы. Для детального изучения языка описания каскадных стилей вам необходимо ознакомиться с переводом материалов консорциума W3C, подготовленным на WEBCLUB.RU — Спецификация CSS level 2.
Итак переходим к предмету. Первоначально рассмотрим основные свойства CSS, используемые для управления стилями элементов HTML документов.
CSS позволяет манипулировать следующими свойствами элементов:
Свойства шрифта
font-family — определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
font-style — стиль шрифта (normal, italic);
font-variant — варианты отображения шрифта (normal, small-caps);
font-weight — жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900);
font-size — размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
font — обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);
Свойства текста
word-spacing — расстояние между словами (значение, normal);
text-decoration — декорация текста (none, underline, overline, line-through, blink);
letter-spacing — расстояние между буквами (значение, normal);
vertical-align — позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);
text-transform — изменение текста (none, Capitalize, UPPERCASE, lowercase);
text-align — положение текста (left, right, center, justify);
text-indent — отступ (значение, %);
line-height — отступ сверху (normal, значение, %);
Свойства фон и цвет
color — цвет элемента (значение);
backgroung-color — цвет фона элемента (значение);
background-image — изображение фон (none, URL);
background-repeat — варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);
background-attachment — возможность прокрутки фонового изображения (scroll, fixed);
background-position — положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);
background -обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);
margin-top — определяет отступ сверху (значение, %, auto);
margin-right — определяет отступ справа (значение, %, auto);
margin-bottom — определяет отступ снизу (значение, %, auto);
margin-left — определяет отступ слева (значение, %, auto);
margin — обобщает все вышеперечисленные свойства;
padding-top — отступ от верхнего border’а (значение, %);
padding-right — отступ от правого border’а (значение, %);
padding-bottom — отступ от нижнего border’а (значение, %);
padding-left — отступ от левого border’а (значение, %);
padding — обобщает все вышеперечисленные свойства;
border-top-width — толщина верхнего border’а (значение, thin, medium, thick);
border-right-width — толщина правого border’а (значение, thin, medium, thick);
border-bottom-width — толщина нижнего border’а (значение, thin, medium, thick);
border-left-width — толщина левого border’а (значение, thin, medium, thick);
border-width — обобщает все вышеперечисленные свойства;
border-color — Цвет border’а. (значение);
border-style — стиль border’ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
border-top — обобщает вышеперечисленные свойства для верхнего border’а;
border-right -обобщает вышеперечисленные свойства для правого border’а;
border-left — обобщает вышеперечисленные свойства для левого border’а;
border-bottom — обобщает вышеперечисленные свойства для нижнего border’а;
border — обобщает все вышеперечисленные свойства;
width — ширина элемента (значение, %);
height — высота элемента (значение, %);
float — расположение элемента (left, right, none);
clear — расположение других элементов вокруг данного (left, right, both, none);
Классификационные свойства
display — определяет, как будет отображаться элемент (none, block, inline, list-item);
white-space — определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap);
list-style-type — определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none);
list-style-image — задает вид list-item маркера из картинки (none, URL);
list-style-position — определяет положение маркера в зависимости от list item элемента (inside, outside);
list-style — обобщает вышеперечисленные свойства;
Свойства элемента
position — определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute);
top — определяет позицию элемента TOP относительно элемента родителя (значение, %);
left — определяет позицию элемента LEFT относительно элемента родителя (значение,%);
width — определяет ширину элемента (значение, %, auto);
height — определяет высоту элемента (значение, %, auto);
overflow — режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll);
visibility — управление видимостью элемента в документе (hidden, » «);
Лист стилей представляет собой набор правил CSS. Правила задаются в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов.
Простейшее правило CSS задается следующим образом:
Селектор это любой из рассмотренных нами ранее тегов HTML (например BODY, P, H1, LI). Далее в фигурных скобках декларируется значение свойств CSS определяющих стиль данного элемента в документе. Например:
H1 < color:red >— задает стиль заголовкам первого уровня.
Для удобства применения можно декларировать в одном правиле несколько свойств CSS для нескольких селекторов. Например:
H1, H2, H3, H4, H5, H6 — данное правило задает стиль заголовкам всех уровней в документе.
При задании правил можно использовать принцип наследования, который задается при помощи контекстных селекторов, стиль которых зависит от вложенности в другие элементы. Контекстные селекторы задаются без разделительных запятых.
P STRONG < color:red; font-weight:bold >— задает стиль для элементов STRONG заключенных в контейнере абзаца.
Кроме этого следует помнить о внутреннем наследовании стилей в документе. Например стиль элемента BODY (в части тех свойств CSS, значения которых не переопределены в персональных правилах вложенных элементов) распространяется на все дочерние элементы и без их перечисления в контекстных селекторах.
В правилах CSS используется понятие класса. Класс элемента задается следующим образом:
Для использования в HTML документе элемента конкретного класса применяется атрибут CLASS:
Технические параметры устройства DJP67575
В CSS можно определять классы не связанные с конкретными элементами:
.red < color:red >— класс красного стиля элементов;
В HTML документе использование данного стиля выглядит так:
Ничего не получается сказал он и набрал команду
Псевдоклассы и псевдоэлементы
В CSS определена особая группа классов и элементов автоматически поддерживаемых CSS совместимыми броузерами.
Селектор:псевдоэлемент
Например вот так можно задать стили для псевдоклассов элемента А:
a:hover < color:red; text-decoration:underline >- стиль ссылок над которыми находится курсор-указатель;
a:focus < background-color:silver >- стиль ссылок получивших фокус ввода;
Манипулируя свойствами псевдоклассов можно задать разные стиль для выделенных посещенных и выделенных не посещенных ссылок:
А вот так можно задать стиль псевдоэлементу first-letter элемента P:
p:first-letter < color:red; font-weight:bold >- стиль для первой буквы абзаца;
Кроме классов в правилах CSS применяются так называемые "ID селекторы", задающие стиль конкретного элемента документа со значением атрибута ID равным значению "ID селектора".
В HTML документе применение данного правила выглядит так:
Использование листов стилей в документах
Со свойствами и правилами CSS разобрались, но как их применить к конкретному документу ? Рассмотрим три способа:
Применение внутренних стилей в документе, основано на использовании тегов , и атрибута STYLE.
Атрибут STYLE применяется для определения стиля конкретного элемента HTML документа. Например, вот так можно задать выравнивание по обоим краям для абзаца текста:
А вот так можно определить стиль заголовка:
Красный заголовок
Тег используется для применения заданного в нем стиля на группу элементов документа. Например, вот так можно задать левый отступ для фрагмента документа и выровнять фрагмент по обоим краям:
Заголовок 1
Заголовок 2
С помощью данного тега можно творить чудеса - делать многослойные документы. Многослойные документы можно создавать манипулируя свойствами CSS: position, left, top, visibility. Например вот так можно наложить два заключенных в контейнер
Заголовок нижнего слоя
Заголовок верхнего слоя
Подумайте какие возможности открываются разработчику, ведь элементом слоя может быть и графический файл - элемент , а манипулируя свойством visibility слоев документа можно отображать в определенной области документа различное содержимое.
Тег используется для применения заданного в нем стиля на фрагмент элемента документа. Например вот так можно выделить разными цветами элементы предложения, в HTML документах используемых для образования в начальной школе:
В окне броузера отобразится следующая cтрока: Мы пошли за грибами.
Глобальные таблицы стилей
Глобальные стили задаются в контейнере , помещенным между заголовком и телом документа. Если тип языка описания стилей не задан в заголовке документа мета-записью Content-Style-Type (См. раздел 2.3.)то его необходимо задать при помощи атрибута TYPE, следующим образом:
Вот пример HTML документа с глобальной таблицей стилей. Язык описания стиля задан мета-записью.
font-family:Times New Roman, serif;
Связанные таблицы стилей
Связанные таблицы стилей используются, когда необходимо применять один и тот же стиль для множества документов (например для поддержания корпоративного стиля крупной организации, лист стилей головного офиса связывается с документами отделений). В данном случае, набор правил CSS сохраняется в текстовом файле с расширением CSS, (желательно снабдить файл комментариями) например вот так:
/* таблица стилей - my_style.css */
font-family:Times New Roman, serif;
Связывание файла стиля с документом осуществляется в заголовке документа при помощи тега - (См. раздел 2.3.).
При использовании связанных стилей, можно создавать разные таблицы стилей, для разных форм представления документа. Например вы можете наряду со стандартной таблицей стилей - normal.css создать таблицу стилей с более компактными шрифтами и форматированием, предназначенную для печати - prn.css. Тогда линковка данных таблиц осуществляется следующим образом:
Атрибут MEDIA указывает броузеру какую таблицу стилей использовать для печати, а какую для просмотра документа.
Использование CSS позволяет существенно упростить разработку и поддержку Web-сайтов за счет отделения стиля представления документов от их содержания, т.к. один раз созданный набор правил представления элементов стиля, можно использовать для множества документов.
Отделение формы представления документа от содержания продемонстрируем на конкретном примере. Постараемся создать документ содержащий лишь теги структурирования (заголовки, абзацы, разделители), а правила форматирования его элементов определим в глобальной таблице стилей.
Пример 7. Использование CSS.