- •Как в www задается местонахождение документа?
- •Понятие тега, виды тегов
- •Vlink - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
- •Атрибуты тега br
- •Формат jpeg
- •Иерархическая структура
- •Многосвязная структура
- •Распределение материала
- •Структура каталогов
- •Value - изменяет порядок нумерации элементов списка. Используется, только если тэг li находится внутри элемента ol. В качестве значения указывается порядковый номер элемента.
- •Тема: Таблицы
- •Valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения:
- •Valign - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top bottom, middle.
- •Valign - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения:
- •Virtual - перенос слов только отображается, на сервер же поступает неделимая строка.
- •Основные понятия и определения
- •Свойства текста
- •Границы и рамки
- •Свойства позиционирования
- •Визуальные свойства
- •3 Новосибирская компьютерная академия, курс web-мастер
Основные понятия и определения
Каждая таблица стилей состоит из перечисления правил (в английской литературе - rule) и директив. Единственной работающей директивой, на сегодняшний день, является директива @import.
Таким образом, основной единицей в таблицах стилей является правило. Правило в свою очередь может быть разбито на две части. Первая часть содержит один или несколько селекторов, а вторая часть - одну или несколько деклараций.
Правило состоит из одного или нескольких селекторов и одного или нескольких свойств. При отображении html-документа те его элементы, которые соответствуют тем или иным селекторам из таблицы стилей, будут форматироваться согласно свойствам, описанным в правилах, содержащих соответствующие селекторы. Для записи правила используется следующий синтаксис:
множество селекторов {множество свойств}
Пример правила:
h1 { color:red; font-size:12px }
Селектор определяет, что именно будет форматироваться в соответствии с данным правилом. Фактически селектор является связующим звеном между множеством элементов HTML документа и множеством правил форматирования.
В HTML документе селекторы и декларации находятся между тэгами <STYLE> и </STYLE>
Селекторы тегов
Данная группа селекторов предоставляет возможность для переопределения стиля форматирования элементов HTML-документов, представленных различными тегами. Эта дает автору таблицы стилей возможность самостоятельно настроить метод отображения тех или иных тегов и их содержимого.
Синтаксис селекторов тегов предельно прост. В качестве селектора используется имя тега, которому назначается форматирование:
имяТега {декларация}
В теле самого HTML документа никаких изменений не требуется, так как стиль форматирования ассоциируется с именем тега.
Селекторы элементов
Селектор элемента указывает на конкретный элемент в теле HTML документа. Он используется для уникальной идентификации данного элемента в рамках отдельного документа. Обычно данный элемент каскадных таблиц стилей используется совместно с Dynamic HTML, где позволяет именовать отдельные элементы HTML страницы.
Все правила в таблице стилей, описывающие селекторы элементов начинаются с символа решетки (#). Синтаксис объявления селекторов элементов в таблице стилей:
#имя {декларация}
Синтаксис использования селекторов элементов в HTML-документе:
<tagName id=имя>
Селекторы классов
Для улучшения контроля над тегами в HTML был добавлен новый атрибут class. Все элементы внутри тега <BODY> (и он сам) могут быть классифицированы. Это означает, что каждому тегу может быть присвоен один или несколько атрибутов class с различными значениями. И стили форматирования будут применены ко всем тегам, обладающим атрибутом class выставленным в указанное значение.
Таким образом правила форматирования, ассоциированные с данным селектором класса применяются ко всем тегам и их содержимому если данные теги имеют в качестве параметра атрибут class со значением, совпадающим с именем селектора. Синтаксис объявления селектора класса:
.className {декларация}
Необходимо отметить точку перед именем класса. Именно точка указывает на то, что данный селектор есть селектор класса. Синтаксис объявления селектора в теге:
<h1 class=className>
Селекторы псевдоклассов
На данный момент определены только псевдоклассы для гиперссылок. Обычно браузеры по разному отображают гиперссылки, которые пользователь уже посетил, новые гиперссылки и ссылки, которые сейчас являются активными. Псевдоклассы гиперссылок позволяют назначить форматирование этим группам ссылок. Определенны следующие псевдоклассы
A:link - для еще не посещавшихся гиперссылок
A:visited - для гиперссылок, уже посещенных пользователем
A:active - для гиперссылок, активных в этот момент
A:hover - для гиперссылок под курсором или указателем мыши
Так как гиперссылки являются единственным элементом, определяющим псевдоклассы, то допустимо не указывать имя тега, с которым они связанны.
Допустимо использовать селекторы псевдоклассов для определения контекстных селекторов. Например, ниже приведено правило, задающее сплошную голубую линию вокруг изображения, используемого как гиперссылка, если данная гиперссылка еще не посещалась.
A:Link IMG {border: solid blue}
Так же допустимо комбинировать псевдоклассы с обычными классами, при этом псевдоклассы должны быть определенны последними. Ниже приведено правило, задающее черный цвет для посещенных ссылок с классом someclass.
A.someclass:visited {color: black}
Комплексные селекторы
Иногда возникает потребность определить правило форматирования для некоей совокупности элементов HTML-документа одновременно обладающих несколькими признаками. Наиболее распространенным примером данного типа селекторов является комплексный селектор, описывающий правило для указанного имени тега и указанного имени класса. Общей вид правила для записи комплексных селекторов приведен ниже:
[tagName][.className][:psedoclassName[:psedoclassName] {декларация}
Комплексные селекторы, как видно из правила, не допускают использования более одного имени тега или класса, но позволяют использовать много псевдоклассов. Так же необходимо отметить, что должен соблюдаться порядок, приведенный в правиле, то есть первым должен идти селектор тега, далее должен идти селектор класса и последним идет список псевдоселекторов. Любой из селекторов может быть опущен.
Ниже приводится пример селектора, описывающего гипессылку (тег <a>) с атрибутом класса установленном в mail, находящимся под курсором (псевдокласс - hover) и уже посещенным (псевдокласс - visited):
a.mail:visited:hover {декларация}
Контекстные селекторы
Так как в основу спецификации HTML была положена идея контейнера, спецификация CSS содержит синтаксическую конструкцию для селектора, определяющего форматирование для элемента, вложенного в другой элемент. При этом элементы, описывающие вложенный элемент и его контейнеры оперируют терминами селекторов. То есть можно задать, например, правило оформления элемента с указанным псевдоклассом, вложенным в элемент с указанным классом.
Для построения контекстного селектора используется перечисление селекторов через пробел. самый первый селектор представляет собой внешний контейнер, последний селектор описывает элемент, к которому и будет применяться указанные правила форматирования:
selector selector {декларация}
Каскадирование
Одному html-документу может быть назначено более одной таблицы CSS. Для этого есть две основные причины. Во-первых, для того, что бы уменьшить избыточность, автор может разбить все множество правил на отдельные таблицы стилей и группировать эти таблицы для разных html-документов по-разному.
Во-вторых, механизм CSS как нельзя лучше подходит для настройки отображения html-документов пользователем. Пользователь может создать свою (или свои) таблицы стилей и указать на них браузеру. Это приведет к замене значений по умолчанию на значения определенные пользователем.
Таким образом, конфликты между определениями органически присущи каскадным таблицам стилей. Для их разрешения используется концепция весов. Так пользовательские правила весят меньше чем авторские правила и, как следствие, авторские правила заменят пользовательские. И авторские и пользовательские правила заменяют установки по умолчанию.
Импортирование директивой import таблицы стилей ток же участвуют в каскадировании. Правила, описанные в самой таблице, перекрывают правила импортированные в нее. Импортированные таблицы стилей, в свою очередь, так же могут импортировать другие таблицы и так далее.
Группирование
Большинство используемых в CSS селекторов имеют некоторые общие совпадающие параметры, например используют один и тот же шрифт. Чтобы не повторять одни и те же элементы, их можно сгруппировать для удобства и сокращения записей.
Обычная запись
H1 { font-family: Arial; font-size: 160%; color: #000033; }
H2 { font-family: Arial; font-size: 135%; color: #333333; }
H3 { font-family: Arial; font-size: 120%; color: #990000; }
Сгруппированные селекторы
H1, H2, H3 { font-family: Arial; }
Декларации
Свойства шрифта
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег FONT, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойство |
Значение |
Описание |
Пример |
font-family |
имя шрифта |
Задает список шрифтов |
font-family: Arial, serif |
font-style |
normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
font-style: italic |
font-variant |
normal small-caps |
Капитель (особые прописные буквы) |
font-variant: small-caps |
font-weight |
normal lighter bold bolder 100-900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный |
font-weight: bold |
font-size |
Размер шрифта normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal; font-size: 12pt; font-size: 12px; font-size: 80% |