Понятие Таблицы Стилей
Применение Таблицы Стилей к документу
Связывание документа с Таблицей Стилей
Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей
Синтаксис Таблиц Стилей
Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства background
Обрамление элементов
Свойства списков
Свойства текста
Группирование свойств для упрощения определения стиля
Наследование свойств
Применение контекстных селекторов
Почему Таблицы Стилей называются каскадными
Использование классов в Таблицах Стилей
Понятие таблиц стилей
Таблицы стилей предусмотрены рекомендациями W3C и являются стандартным
инструментом форматирования Web - страниц,
использующим подходы, характерные для
настольных издательских систем. Программа Microsoft
Internet Explorer 3.0 стала первым браузером,
поддерживающим таблицы стилей. Браузер Netscape
Navigator поддерживает таблицы стилей, начиная с
версии 4.0В2 (Beta 2), доступной с февраля 1997 года.
Подробные сведения о рекомендациях W3C можно
получить по адресу: http://www.w3.org/pub/WWW/TR/WD-cssl.html. В стандарте W3C используется термин
"каскадные таблицы стилей уровня 1" ("cascading
style sheets level 1, CSSI").
Для начала необходимо пояснить, что
имеется в виду под названием “таблиц стилей”.
Большинство современных текстовых редакторов
позволяют пользователю определять стиль,
который будет использоваться для форматирования
документа. В частности, можно выбрать стиль
абзаца с одинарным межстрочным интервалом,
шрифтом Courier и левым полем в один дюйм. Этот стиль
форматирования может быть в дальнейшем применен
к любому числу абзацев этого и других документов.
Таблицы стилей НТ ML действуют
точно таким же образом. Ниже приведен краткий
список основных функций:
Изменение расстояний между строками,
словами и отдельными символами.
Установка левого, правого, верхнего и
нижнего полей элемента (блока текста контейнера
HTML).
Установка отступа элемента.
Изменение размера, стиля и других
атрибутов шрифта элемента.
Установка рамки вокруг элемента.
Включение фонового изображения и
фонового цвета в элемент.
Применение таблицы стилей к документу
Большим преимуществом таблиц стилей HTML
является возможность отделить операцию
форматирования от содержания документа. Сначала
определяется, как должен выглядеть текст в том
или ином месте страницы, а затем вводите сам
текст. Если вы позднее решите, например, заменить
цвет шрифта заголовков на синий, для этого будет
достаточно поменять только стиль этих
заголовков. Делать изменения в тексте нет
необходимости.
Существует четыре метода применения
таблицы стилей к документу:
Связывание (Linking) — можно связать HTML -
документ с таблицей стилей, хранящейся в
отдельном файле.
Встраивание (Embedding) — можно встроить
таблицу стилей в HTML - документ с помощью
контейнера <STYLE>.
Задание стиля для отдельного фрагмента
документа (Inline) - можно определять элементы стиля
"на лету", т. е. указывать их в тэгах HTML,
например, в тэге абзаца <P>.
Импорт (Import) — можно использовать
зарезервированное слов @import для импортирования
таблицы стилей в HTML - документ.
Связывание документа с таблицей стилей
Как было указано выше, существует
возможность создания таблиц стилей в виде
отдельного файла для применения его ко всем
страницам cайта. Этот метод упрощает создание
сайта.
Хранить таблицу стилей следует в
текстовом файле с расширением .css. Его можно
создать при помощи любого текстового редактора.
Для связывания таблицы стилей с документом HTML
необходимо использовать тэг <LINK> следующим образом:
<LINK REL=STYLESHEET HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
В атрибуте HREF указывается URL - адрес таблицы
стилей.
Встраивание таблицы стилей в документ
Таблицу стилей необязательно хранить в
виде отдельного файла. Ее можно встроить
непосредственно в документ, однако в этом случае
она будет действовать только внутри файла этого
документа. Для распространения действия таблицы
на другие документы ее необходимо скопировать в
каждый из них.
Для включения таблицы стилей в документ
необходимо воспользоваться контейнером <STYLE>. Он
размещается между тэгами <HTML> и <BODY>:
<HTML>
<HEAD> </HEAD>
<STYLE TYPE="text/css">
STYLE definitions go here
</STYLE>
<BODY> </BODY>
<HTML>
Тэг <STYLE> имеет единственный атрибут TYPE, определяющий тип MIME (Multipurpose Internet
Mail Extension, стандарт электронной почты Internet). Для
того, чтобы браузеры, не поддерживающие таблицы
стилей, могли игнорировать тэг <STYLE>,
его необходимо определить как "text/css".
Задание стиля для отдельного фрагмента документа
Можно определять стиль, что называется,
"на лету", оперативно внося требуемые
изменения. Например, если сначала определен
стиль документа с заголовком одного цвета, а
потом необходимо выделить цветом какой-то
элемент заголовка, можно это сделать внутри тэга
заголовка, не изменяя общий стиль документа.
Такой метод действует внутри тэга, где
определен или переопределен стиль при помощи
атрибута STYLE он поддерживается
всеми подчиненными тэгами тэга <BODY>. Для оперативного определения стиля
необходимо добавить к нужному тэгу атрибут STYLE и присвоить ему строковое
значение, указывающее новый стиль:
<H1
STYLE="color: bluе">
Если оперативное указание стиля в
строке вступает в конфликт с другими методами
определения, оно всегда "берет верх".
Например, если при помощи связанного с
документом файла стиля цвет заголовка H1 определен как
синий, а в самом тэге заголовка цвет изменен на
красный, браузер выведет этот заголовок шрифтом
красного цвета.
Используя атрибут STYLE c
тэгом <DIV>,
можно определять стиль части документа,
расположенной в контейнере <DIV>.
Это работает благодаря принципу
"наследования", о чем будет рассказано ниже.
Например, если необходимо установить цвет шрифта
для целого блока тэгов синим, можно расположить
эти тэги внутри контейнера <DIV> и определить цвет шрифта
текста следующим образом:
<DIV STYLE="color: bluе">
<H1>This is a heading</H1>
<P>This is a paragraph. It will look blue in the user's browser</P>
</DIV>
Для изменения стиля нескольких слов или
даже символов можно использовать атрибут STYLE совместно с тэгом <SPAN>,
например:
This is a <SPAN STYLE="color:
blue">simple</SPAN> block of text
Импорт таблицы стилей
Для того чтобы импортировать таблицу
стилей в HTML - документ, надо поместить в него
зарезервированное слово @import. Импортированный
файл должен размещаться в контейнере <STYLE>.
Эта операция весьма похожа на встраивание
таблицы стилей, например:
<STYLE TYPE="text/css">
@import url(http://www.myserver.com/style.css) ;
</STYLE>
Синтаксис таблиц стилей
Как было указано ранее, таблицы стилей
хранятся в текстовых файлах, удобных для
редактирования. Их нетрудно создавать вручную,
однако существуют специальные редакторы таблиц
стилей, например, популярная программа Мicrosoft FrontPage.
Таблицы стилей позволяют определять
стиль для одного или нескольких тэгов. Например,
можно создать таблицу стилей, определяющую стили
для тэгов <H1>, <H2>, <P> и <EM>. Каждое
определение называется правилом (rulе). Правило содержит селектор
(тэг HTML), за которым следует декларация
(определение стиля). Селектор является связующим
звеном между определением и тэгом. Ниже приведен
пример правила, указывающего стиль для каждого
из тэгов заголовка <H1>:
H1 (color: blue}
Декларация заключается в фигурные
скобки. Каждая декларация имеет две части:
название свойства и присваиваемое ему значение,
разделенные двоеточием. В HTML включены десятки
свойств (font-size, font-style, color, margin-right и т. д.), о которых
будет рассказано ниже. Каждое свойство может
принимать несколько значений, одно из которых
приписывается ему по умолчанию.
Указание нескольких свойств одновременно
В предыдущем примере было указано лишь
одно свойство color. Однако ничто не мешает
определить целый ряд свойств в одном тэге,
отделив их друг от друга точкой с запятой:
HI {color: blue; font-size: 12pt; text-line: center}
В этом примере программа просмотра
выведет каждый заголовок первого уровня синим
шрифтом размером 12 пунктов и выровняет их по
центру окна. Для всех прочих свойств будут
использоваться значения по умолчанию (например,
свойству font-style будет присвоено значение normal).
Группирование селекторов
Если необходимо определить один и тот же
стиль для нескольких тэгов, можно перечислить их
в отдельном списке:
Р (font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}
HTML позволяет сделать то же самое и в
более компактном виде - в одной строке:
Р, UL, LI (font-size: 12pt}
Запятая здесь является обязательным
элементом. Если она опущена, смысл правила
изменится (см. раздел "Применение
контекстных селекторов" ниже в этой главе).
Комментирование таблицы стилей
По мере усложнения таблицы стилей,
скорее всего, понадобится включить в нее
дополнительные сведения о назначении того или
иного правила. Комментарии располагаются между
символами /* и */ и игнорируются программами
просмотра, например:
BODY {margin-left: lin} /* Отступ на 1
дюйм */
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */
Свойства стилей
HTML позволяет определить широкий спектр
свойств таблиц стилей. Имена свойств состоят из
одного, а чаще - из двух или трех слов, разделенных
дефисом. В сложных названиях первое слово обычно
представляет категорию и одновременно является
сокращенным вариантом (shorthand) имени свойства (см.
раздел "Группирование
свойств для упрощения определения стиля").
В таблице приведен обзор свойств таблиц
стилей HTML.. В колонке "Категория" показано,
может ли то или иное свойство объединяться в
группу с другими свойствами. В третьей колонке
приведены сведения о том, наследуется или нет
свойство подчиненными тэгами (о наследовании
свойств см. раздел "Наледование
свойств").
Свойства background
Таблицы стилей HTML позволяют украшать
фон элемента страницы цветом или изображением.
Необходимо заметить, что здесь и далее речь
пойдет об использовании свойств не для всей
страницы, а для отдельного элемента. Например,
если определяется фон для тэга <UL>,
то это фон будет только у тэгов <UL>
всей страницы:
UL
{background-image: URL(http://www.myserver.com/images/watermark.gif)}
Background-attachment.
Это свойство определяет, является ли фоновое
изображение зафиксированным в окне программы
просмотра или может сдвигаться при
использовании полосы прокрутки. Оно может
применяться для здания фона в виде водяных
знаков, который остается неподвижным при
прокрутке страницы.Это свойство может принимать
два значения:
Background-color.
Это свойство используется для изменения
фонового цвета элемента страницы. Значения
могут указываться как стандартным именем, и
шестнадцатеричным числом. Например, если для
тэга <UL> установить это
свойство как blue, то все неупорядоченные списки
документа будут иметь синий фон.
Background-image.
Указав в этом свойстве URL - адрес, можно вывести
какой-либо элемент страницы на фоновом
изображении, например:
H1 (background-image:
URL(http://www.myserver.com/images/heading.gif)}
Многие из свойств таблиц стилей
подразумевают задание размеров элементов
страницы. HTML предполагает определение размеров
при помощи относительных и абсолютных единиц. В
таблице показаны относительные единицы.
Единица |
Пример |
Описание |
em |
0.5em |
Высота
шрифта элемента |
ex |
0.75ex |
Высота
символа Х |
px |
15px |
Размер
в пикселах (это относительный размер, так как
абсолютный размер зависит от устройства вывода) |
Рекомендуется по возможности
пользоваться относительными единицами, в этом
случае страница лучше масштабируется
программами просмотра. Однако существуют и
абсолютные единицы размеров:
Единица |
Пример |
Описание |
in |
.5in |
Дюймы |
cm |
1cm |
Сантиметры |
mm |
20mm |
Миллиметры |
pt |
12pt |
Пункты
(1пункт = 1/72дюйма) |
pc |
1pc |
Пика
(1пика = 12 пунктов) |
Кроме того, размеры могут быть указаны в
процентах относительно родительского элемента.
Например, если указывается размер шрифта
элемента 50%, это означает, что шрифт элемента
будет в 2 раза меньше размера рифта родительского
элемента.
Background-position.
Это свойство используется для изменения
положения фонового изображения. Положение
всегда отсчитывается от верхнего левого угла
элемента, содержащего это изображение. Так, если
позиционируется изображение для тэга <UL>, его положение определяется
относительно верхнего левого угла
неупорядоченного списка. Указание позиции
фонового изображения выглядит следующим
образом:
background-position: x y
где x и y - положение по горизонтали и
вертикали. Эти величины могут определяться в
процентах относительно размеров элемента, а
также в абсолютных единицах (например, 1in) или
одним из служебных слов, указанных в таблице:
Служебное
слово |
Описание |
top |
Выравнивает
изображение по верхнему краю элемента; имеет
значение только для у |
left |
Выравнивает
изображение по левому краю элемента; имеет
значение только для х |
right |
Выравнивает
изображение по правому краю элемента; имеет
значение только для х |
bottom |
Выравнивает
изображение по нижнему краю элемента; имеет
значение только для у |
Background-repeat.
Программа просмотра может размножить
изображение и заполнить им фон всего элемента.
Это свойство имеет четыре значения:
Служебное
слово |
Описание |
repeat |
Повторяет
изображение по вертикали и горизонтали |
repeat-x |
Повторяет
изображение по горизонтали |
repeat-y |
Повторяет
изображение по вертикали |
no-repeat |
Не
размножает изображение |
Обрамление элементов
Рекомендации W3C дают возможность
определять рамки, поля и свободное пространство
для элементов страницы. Можно, например,
заключить заголовок в рамку или изменить поля в
тэге абзаца <Р> так, чтобы
организовать отступ для всех абзацев текста. Для
этих целей можно использовать следующие группы
свойств:
border - используются для
определения рамки, расположенной слева, справа,
сверху и снизу от элемента. Можно устанавливать
ширину, цвет и стиль рамки.
margin - используются для
определения полей, расположенных слева, справа,
сверху и снизу от элемента. Можно также
устанавливать ширину полей.
padding - применяются для того,
чтобы указать свободное пространство между
рамкой и содержимым элемента.
Border-bottom-width.
Это свойство употребляется для указания ширины
нижней части рамки и не оказывает влияния на
другие ее стороны. Это свойство может иметь
следующие значения:
Значение |
Описание |
thin |
Узкая рамка |
medium |
Средняя
рамка |
thick |
Широкая
рамка |
length |
Определяет
точную ширину рамки в пунктах (pt), дюймах (in),
сантиметрах (cm) или пикселах
(px) |
Border-color.
Устанавливает цвет рамки элемента. Для
определения цвета но использовать стандартные
имена или шестнадцатеричные RGB - значения.
Border-left-width.
Определяет ширину левой стороны рамки и не
оказывает влияния на другие ее стороны.
Значения этого свойства идентичны
представленным для border-bottom-width.
Border-right-width.
Указывает ширину правой стороны рамки и не
оказывает влияния на другие ее стороны.
Значения этого свойства идентичны
представленным для border-bottom-width.
Border-style.
Это свойство определяет стиль рамки элемента.
Ему может быть присвоено от одного до четырех
значений:
Одно значение - все стороны рамки
одного стиля.
Два значения - верхняя и нижняя стороны
рамки имеют стиль, указанный первым значением,
левая и правая стороны имеют стиль, указанный
вторым значением.
Три значения - первое значение
определяет стиль верхней стороны; второе - стиль
левой и правой стороны; третье - стиль нижней
стороны рамки.
Четыре значения - первое значение
указывает стиль верхней стороны; второе - стиль
правой стороны; третье - стиль нижней стороны;
четвертое - стиль левой стороны рамки.
В таблице описаны значения свойства
border-style:
Значение |
Описание |
none |
Рамка
отсутствует |
dotted |
Точечная
линия |
dashed |
Штриховая
линия |
solid |
Обычная
линия |
double |
Двойная линия;
ширина линий и расстояние между ними
соответствуют значению свойства border-width |
groove |
Трехмерная
вдавленная (groove) линия цвета, определенного
свойством color |
ridge |
Трехмерная выпуклая
(ridge) линия цвета, определенного свойством color |
inset |
Трехмерная (inset)
линия цвета, определенного свойством color |
outset |
Трехмерная
(outset) линия цвета, определенного свойством |
Border-top-width.
Используется для определения ширины верхней
стороны рамки и не оказывает влияния на другие
ее части. Имеет значения, идентичные указанным
для border-bottom-width.
Clear.
Это свойство используется для запрещения вывода
плавающих элементов слева или справа от
другого элемента. Например, clear: left значит что
программа просмотра не будет располагать
плавающие элементы с левой стороны элемента. В
таблице указаны значения этого свойства:
Значение |
Описание |
none |
Плавающие
элементы разрешены с обеих сторон |
left |
Плавающие
элементы запрещены слева |
right |
Плавающие
элементы запрещены справа |
| both |
Плавающие
элементы запрещены с обеих сторон |
Float.
Это свойство указывает на то, что элемент
располагается с левой или с правой стороны, при
этом другие элементы обтекают его. В таблице
приведены значения этого свойства:
Значение |
Описание |
none |
Выводит
элемент без обтекания его другими |
left |
Располагает
элемент слева, при этом текст обтекает элемент |
| right |
Располагает
элемент справа, при этом текст обтекает элемент |
Height.
Устанавливает общую высоту элемента — блока
текста или изображения. Например, можно
применить свойства height и width для создания
специального предупреждения фиксированного
размера. Однако это свойство чаще используется
при работе с изображениями. Ему можно научить
величину любым указанным выше способом, включая
процентный, или определить его как auto, при этом
программа просмотра сама установит минимальные
размеры элемента.
Margin-bottom.
Определяет нижние поля элемента. Значение может
быть задано любым способом, включая процентный
(относительно height и width) и auto,
позволяющий программе просмотра определять поля
оптимального размера. Для специальных эффектов
могут использоваться отрицательные значения.
Margin-left.
Определяет левые поля элемента. Значение может
быть задано любым способом, включая процентный
(относительно height и width) и auto, позволяющий
программе просмотра определять поля
оптимального размера. Для специальных эффектов
могут использоваться отрицательные значения.
Margin-right.
Определяет правые поля элемента. Значение может
быть задано любым способом, включая процентный
(относительно height и width) и auto, позволяющий
программе просмотра определять поля
оптимального размера. Для специальных эффектов
могут использоваться отрицательные значения.
Margin-top.
Определяет верхние поля элемента. Значение может
быть задано любым способом, включая процентный
(относительно height и width) и auto, позволяющий
программе просмотра определять поля
оптимального размера. Для специальных эффектов
могут использоваться отрицательные значения.
Padding-bottom.
Указывает величину свободного пространства
между нижней стороной рамки и содержимым
элемента. Значение может быть задано любым
способом, включая процентный (относительно height и
width).
Padding-left.
Указывает величину свободного пространства
между левой стороной рамки и содержимым
элемента. Значение может быть задано любым
способом, включая процентный (относительно height и
width).
Padding-right.
Указывает величину свободного пространства
между правой стороной рамки и содержимым
элемента. Значение может быть задано любым
способом, включая процентный (относительно height и
width).
Padding-top.
Указывает величину свободного пространства
между верхней стороной рамки и содержимым
элемента. Значение может быть задано любым
способом, включая процентный (относительно height и
width).
Width.
Устанавливает общую ширину элемента — блока
текста или изображения. Ему можно назначить
значение любым указанным выше способом, включая
процентный, или определить его как auto, при этом
программа просмотра сама установит оптимальные
размеры элемента.
Свойства списков
Эти свойства применяются для указания
способов вывода списков. С их помощью можно
изменить позицию маркера (свойство list-style-position),
стиль или изображение маркера (свойства list-style-type
и list-style-image).
Свойства списков наследуются, т. е. если
определено свойство в тэге <UL>,
оно будет действительно для всех тэгов <LI> контейнера UL.
List-style-image.
Это свойство применяется для определения
изображения, используемого в качестве маркера
списка. Имеет единственное значение в формате url
(address), указывающее адрес изображения:
list-style-image: url
(http://myserver.com/images/marker.gif)
Для того, чтобы назначить одинаковые
маркеры всем пунктам списка, надо определить
свойство list-style-image в тэге списка <UL>.
Можно переопределить это свойство для любого
внутреннего тэга <LI>.
List-style-position.
Определяет относительную позицию маркера. Может
меть два значения, описанные в таблице:
Значение |
Описание |
inside |
Текст
пункта при переводе строки начинается под
маркером |
outside |
Текст
пункта при переводе строки начинается под
текстом предыдущего пункта (висячий отступ) |
List-style-type.
Используется для определения типа маркера. Может
применяться вместо свойства list-style-image.
Значения свойства list-style-type приведены в таблице:
Значение |
Описание |
disc |
Диск |
circle |
Круг |
square |
Квадрат |
decimal |
Арабские
цифры (1,2,3,4, ...) |
| lower-roman |
Маленькие
римские цифры (i, ii, iii, iv, ...) |
upper-roman |
Большие римские
цифры (I, II, III, IV, ...) |
lower-alpha |
Строчные
буквы (a, b, с, d, ...) |
upper-alpha |
Прописные
буквы (А, В, С, D, ...) |
none |
Маркер
отсутствует |
Свойства текста
Свойства дают вам полный контроль того,
как программа просмотра выводит текст. С их
помощью можно управлять цветом, размером,
шрифтом, межстрочным интервалом и т, д. Ниже будут
подробно описаны все свойства текста.
Color.
Это свойство определяет цвет содержимого
элемента, например, текста. Может быть указан в
шестнадцатеричном RBG - формате, либо при помощи
следующих стандартных RGB - имен
Font-family.
Определяет приоритетную гарнитуру шрифта. Может
быть указана одна гарнитура или перечень
альтернативных гарнитур (через запятую),
например:
font-family: Courier, Times, Serif
Можно употреблять конкретные или
обобщенные названия гарнитур. В таблице
приведены обобщенные названия групп и примеры
отдельных гарнитур:
Обобщенное
название |
Пример |
serif |
Times New Roman |
sans-serif |
Arial |
| cursive |
Script |
fantasy |
Comic |
monospace |
Courier New |
Последним в списке шрифтов, указанных в
свойстве font-family, должно стоять обобщенное
название одной из гарнитур на случай, если
пользователь не располагает шрифтом, который
используется в странице. В предыдущем примере
таким названием было serif. Если на машине
пользователя нет шрифтов courier и times, программа
просмотра воспользуется одним из шрифтов группы
serif.
Если название шрифта состоит из
нескольких слов, его нужно заключить в кавычки,
например:
font-family: "Courier New", Serif
Font-size.
Определяет размер шрифта в пунктах (pt), дюймах (in),
сантиметрах (cm), или пикселах (рх). Можно также
использовать значение в процентах (относительно
размера шрифта родительского элемента) либо одно
из значений, указанных в таблице:
Значение |
Описание |
xx-small |
На 50% меньше
размера x-small |
x-small |
На 50% меньше
размера small |
small |
На 50% меньше размера
medium |
medium |
Шрифт
среднего размера, возможно, в 10 пунктов |
large |
На 50% больше
размера medium |
x-large |
На 50% больше
размера large |
xx-large |
На 50% больше
размера x-large |
larger |
На 50% больше
шрифта родительского элемента |
smaller |
На 50% меньше
шрифта родительского элемента |
Font-style.
Определяет стиль шрифта и имеет значения,
указанные в таблице:
Значение |
Описание |
normal |
Нормальное
начертание |
oblique |
Наклонное
начертание |
italic |
Курсив |
Font-variant.
Употребляется для вывода текста прописными
буквами маленького размера. Имеет два
значения: normal (нормальный шрифт) и small-caps
(маленькие прописные буквы).
Font-weight.
Определяет жирность шрифта и имеет значения normal,
bold, bolder и lighter. Можно также задавать значения
числами 100, 200 ... 900 (чем больше число, тем жирнее
начертание). Например, font-weight: 700 жирнее, чем
font-weight: 400.
Letter-spacing.
Определяет расстояние между символами в строке
текста. Если его значение указано как normal, это
расстояние определяет браузер, однако этому
свойству может быть присвоено любое значение
размера (например, 1px).
Line-height.
Используется для определения расстояния между
базовыми линиями строк текста. Может
указываться числовым значением, в процентах от
аналогичного свойства родительского элемента,
либо иметь значение normal. Необходимо помнить, что
межстрочный интервал добавляется не после, а до
строки. Это свойство плохо работает, если в одной
строке используются разные размеры шрифтов.
Text-align.
Определяет способ выравнивания текста элемента.
Значения этого свойства показаны в таблице:
Значение |
Описание |
left |
Текст
выравнивается по левому краю |
right |
Текст
выравнивается по правому краю |
center |
Текст
выравнивается по центру |
justify |
Текст выравнивается
по левому и правому краю |
Text-decoration.
Используется для подчеркивания, зачеркивания и
т. д. Значения могут комбинироваться:
Значение |
Описание |
none |
Свойство
отключено |
underline |
Подчеркивание |
overline |
Линия над
строкой |
line-through |
Зачеркивание |
blink |
Мерцание
текста |
Text-indent
.Используется для отступа в первой строке текста
элемента и может указываться числовым
значением, например:
P {text-indent: 1in}
Text-transform.
Это свойство указывает, как должен быть
трансформирован текст:
Значение |
Описание |
capitalize |
Делает
первую букву каждого слова прописной |
uppercase |
Делает все
буквы текста прописными |
lowercase |
Делает все
буквы текста строчными |
none |
Трансформация
отсутствует |
Vertical-align.
Регулирует вертикальное положение текста внутри
элемента. Зачения этого свойства указаны в
таблице:
Значение |
Описание |
baseline |
Выравнивает базовую
линию элемента по базовой линииродительского
элемента |
middle |
Выравнивает
середину элемента по середине родительского
элемента |
sub |
Опускает
элемент на подстрочный уровень |
| super |
Поднимает
элемент на надстрочный уровень |
text-top |
Выравнивает вершину
элемента по верху текста родительского элемента |
text-bottom |
Выравнивает
низ элемента по низу текста родительского
элемента |
| top |
Выравнивает
низ элемента по низу текста
родительскогоэлемента |
bottom |
Выравнивает
низ элемента по низу текста
родительскогоэлемента |
White-space.Определяет,
как программа просмотра будет интерпретировать
свободное пространство внутри элемента. Если не
определить это свойство, браузер сожмет
свободное пространство. Однако можно заставить
его относиться к свободному пространству так,
будто оно заключено в контейнер <PRE>.
значения этого свойства показаны в таблице:
Значение |
Описание |
normal |
Свободное
пространство сжимается |
pre |
Свободное
пространство интерпретируется так, как это
делается при указании тэга <PRE> |
nowrap |
Разрешается
перевод строки только по указанию тэга <BR> |
Word-spacing.
Определяет расстояние между словами текста. Ему
можно назначить значение normal (тогда решение
принимает программа просмотра) или любое
цифровое значение, например, 1px.
Группирование свойств для упрощения определения стиля
Многие из описанных выше свойств могут
группироваться друг с другом. Так, вместо правила
H1 (font-weight: bold; font-style: normal;
font-size: 12pt; font-family: serif)
можно записать более краткую
формулировку:
H1 (font: bold normal 12pt serif}
Таблицы стилей HTML позволяют
группировать свойства border, background, font, list, margin и
padding. Рассмотрим каждую из групп в отдельности.
Группа свойств border
Группировать свойства border можно пятью
различными способами. Можно определить свойства
для отдельной стороны рамки, используя border-top, border-right, border-bottom И border-left, либо
определить всю рамку сразу при помощи border.
С каждым из этих свойств можно указать
ширину, стиль и цвет рамки, например:
border-top:
thin dotted black
Группа свойств background
В группе свойств background можно указать
значения для color, image, repeat, attachment и position, например:
background: white
URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left
Группа свойств font
Группе font можно дать значения weight, style, size
и family, например:
font: bold normal 12pt times, serif
Группа свойств list
Свойства группируются при помощи
свойства list-style. Возможно указание изображения
для маркера, типа и позиции маркера, например:
list-style: square
URL(http://www.myserver.com/images/marker.gif) inside
Группа свойств margin
Группе margin можно определить ширину для
каждого из полей top, right, bottom и left, например:
margin: .5in 1in .5in 1in
Если будет указано только одно значение,
программа просмотра сделает ширину других полей
такой же. Если не указать одно или два значения,
поля с неуказанным значением будут такой же
ширины, как противоположные поля. Например, если
опустить последнее значение (left), ширина левых
полей будет равна ширине правых полей, т. е. 1
дюйму.
Группа свойств padding
В Группе padding можно указать значения для
top, right, bottom и left, например:
padding: .25in .25in .25in .25in
Если будет указано только одно значение,
программа просмотра назначит отсутствующим
значениям такую же величину. Если не указать одно
или два значения, свободные пространства с
неуказанными значениями будут такой же ширины,
как и им противоположные. Например, если опустить
последнее значение (left), свободное пространство
между левой стороной рамки и содержимым элемента
будет таким же, как и пространство с правой
стороны.
Наследование свойств
В HTML подчиненные тэги наследуют
некоторые свойства родительских тэгов. Например,
все тэги контейнера <BODY> (<P> и <UL>) будут обладать некоторыми
свойствами тэга <BODY>. Точно так
же тэг <LI> наследует свойства
тэга <UL>. Рассмотрим следующий
код:
<STYLE TYPE="text/css">
Р (color: blue)
</STYLE>
<BODY>
<P>Hello. This is a paragraph of text. <EM>This is
emphasized</EM><P>
</BODY>
Таблица стилей этого документа
устанавливает цвет в тэге <P> синим, однако,
цвет для тэга <EM> явно не определен (по умолчанию —
это черный цвет). Здесь не о чем беспокоиться, так
как этот тэг находится в родительском контейнере <P> и наследует таким образом
синий цвет.
В таблице в начале этой
главы указано, какие свойства наследуются
подчиненными тэгами.
Применение контекстных селекторов
Иногда возникает необходимость
определения двух (и более) стилей для одного тэга.
Например, может понадобиться указание двух
стилей для тэга <LI>: один для
случая, когда он подчинен тэгу <UL>, и второй, когда он подчинен тэгу <UL>. Это возможно сделать с
помощью контекстных селекторов.
Контекстный селектор определяет точную
последовательность тэгов, для которых будет
применен тот или иной стиль. Другими словами,
можно указать, что какой-то стиль должен
применяться, например, в тэге <LI>
только в том случае, если этот тэг является
подчиненным тэгу <OL>:
OL LI (list-style-type: decimal}
Для того же тэга <LI>
можно определить другой стиль, действительный
только в случае подчиненности тэгу <UL>:
UL LI {list-style-type: square}
Необходимо заметить, что список
селекторов не разделен запятыми. В противном
случае всем тэгам списка будет приписан один и
тот же стиль.
Почему таблицы стилей HTML называются каскадными
В рекомендациях W3C таблицы стилей
называются "каскадными таблицами стилей"
потому, что для верстки Web - страницы можно
применять не одну, а сразу несколько таблиц. При
этом программа просмотра сама определяет
последовательность использования таблиц и
разрешает конфликты между ними по принципу
каскадирования. Например, таблица стилей для
страницы может быть определена не только ее
автором, но и читателем, и тогда правила
каскадирования решают, какая из таблиц стилей
будет иметь силу.
Kак это работает? Каждому правилу
браузер приписывает весовой коэффициент. При
интерпретации каждого тэга программа
просматривает все правила этого тэга и сортирует
их по величине весового коэффициента. Выигрывает
самое "весомое" правило.
Существуют следующие общие принципы
разрешения конфликтов между таблицами стилей:
Таблица стилей автора страницы
"весомее" таблицы стилей читателя, которая,
в свою очередь, "весомее" установок браузера
по умолчанию.
Старшинство типов таблиц стилей в
документе (по убыванию): текущее задание стиля
(inline), встраивание (embedding), связывание (linking).
Также можно изменить весовой
коэффициент правила при помощи служебного слова
important. В следующем примере значение red свойства color и значение sans-serif свойства font-family
помечены этим служебным словом, и поэтому
программа просмотра не должна их переопределять.
Однако если вступают в конфликт два таких
правила, противоречие решается согласно
принципам, изложенным выше.
H1 (color: red ! important font-weight: bold
font-family: sans-serif ! important}
Использование классов в таблицах стилей
Классом называется определение
нескольких стилей одного элемента, каждый из
которых может использоваться в нужном месте
страницы. Например, можно определить три
вариации стиля заголовка H1.
Определение вариаций похоже на указание стиля,
только к названию тэга добавляется произвольное
имя класса, отделенное точкой:
H1 blue (color: blue} H1 .red (color: red} H1 .black
(color: black}
Теперь, включая в документ тэг <H1>, можно указать в нем
конкретный стиль при помощи атрибута CLASS:
<H1 CLASS=red>Red Heading</H1>
| 
главная
Смотрите также
