Перейти на главную   
  helloworld.ru - документация и книги по программированию  
helloworld.ru - документация и книги по программированию
    главная     хостинг    
Поиск по сайту:  
Смотрите также
Языки программирования
C#
MS Visual C++
Borland C++
C++ Builder
Visual Basic
Quick Basic
Turbo Pascal
Delphi
JavaScript
Java
PHP
Perl
Assembler
AutoLisp
Fortran
Python
1C

Интернет-технологии
HTML
VRML
HTTP
CGI
FTP
Proxy
DNS
протоколы TCP/IP
Apache

Web-дизайн
HTML
Дизайн
VRML
PhotoShop
Cookie
CGI
SSI
CSS
ASP
PHP
Perl

Программирование игр
DirectDraw
DirectSound
Direct3D
OpenGL
3D-графика
Графика под DOS

Алгоритмы
Численные методы
Обработка данных

Сис. программирование
Драйверы

Базы данных
MySQL
SQL

Другое

Хостинг


Друзья
demaker.ru
Реклама

Лучший хостинг. Аренда серверов




helloworld.ru

Таблицы стилей

Понятие Таблицы Стилей
Применение Таблицы Стилей к документу
Связывание документа с Таблицей Стилей
Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей
Синтаксис Таблиц Стилей
Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства 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-attachment

background

Нет

background-color

background

Нет

background-image

background

Нет

background-position

background

Нет

background-repeat

background

Нет

border-bottom-width

border

Нет

border-color

border

Нет

border-left-width

border

Нет

border-right-width

border

Нет

border-style

border

Нет

border-top-width

border

Нет

clear

 

Нет

color

 

Да

float  

Нет

font-family

font

Да

font-size

font

Да

font-style

font

Да

font-variant

 

Да

font-weight

font

Да

height

 

Нет

letter-spacing

 

Да

line-height

 

Да

list-style-image

list-style

Да

list-style-position

list-style

Да

list-style-type

list-style

Да

margin-bottom

margin

Нет

margin-left

margin

Нет

margin-right

margin

Нет

margin-top

margin

Нет

padding-bottom

padding

Нет

padding-left

padding

Нет

padding-right

padding

Нет

padding-top

padding

Нет

text-align

 

Да

text-decoration

 

Нет

text-indent

 

Да

text-transform

 

Да

vertical-align

 

Нет

white-space

 

Да

width

 

Нет

word-spacing

 

Да

Свойства background

Таблицы стилей HTML позволяют украшать фон элемента страницы цветом или изображением. Необходимо заметить, что здесь и далее речь пойдет об использовании свойств не для всей страницы, а для отдельного элемента. Например, если определяется фон для тэга <UL>, то это фон будет только у тэгов <UL> всей страницы:

UL {background-image: URL(http://www.myserver.com/images/watermark.gif)}

Background-attachment. Это свойство определяет, является ли фоновое изображение зафиксированным в окне программы просмотра или может сдвигаться при использовании полосы прокрутки. Оно может применяться для здания фона в виде водяных знаков, который остается неподвижным при прокрутке страницы.Это свойство может принимать два значения:

  • fixed - Фиксирует изображение в окне браузера

  • scroll - Разрешает изображению прокручиваться вместе со страницей

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>


[ Оглавление ]









helloworld.ru © 2001-2021
Все права защищены
Rambler's Top100