Главная | Обратная связь | Поможем написать вашу работу!

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.

Active – происходит при активации пользователем элемента (например, при наведении курсора на ссылку и нажатии левой кнопки мыши).
Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.

Замечание. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.

Focus – применяется к элементу при получении им фокуса.

Замечание. Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.

Hover – псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
Visited – данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно

Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.

Замечание. Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.

Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе. Примером такого псевдокласса является first-child (применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа).

Псевдоэлементы

Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента.

Синтаксис использования псевдоэлементов следующий:

Селектор:Псевдоэлемент { Описание правил стиля }

Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже:

.foo:first-letter { color: red }

.foo:first-line { font-style: italic }

Замечание: Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.

Далее перечислены все псевдоэлементы, их описание и свойства:

after – применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки.

Замечание. Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии.

before – по своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента.
first-letter – определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.

Замечание. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал – увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

first-line – определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.

Замечание. К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.

Элементы CSS

Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в таблице 1.

Таблица 1. CSS-свойства для работы со шрифтами
Свойство	Значение	Описание
font-family	имя шрифта	Задает список шрифтов
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт
font-variant	normal small-caps	Капитель (особые прописные буквы)
font-weight	normal lighter bold bolder 100-900	Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный
font-size	normal pt px %	Нормальный размер Пункты Пикселы Проценты

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в таблице 2.

Таблица 2. CSS-свойства для работы с текстом
Свойство	Значение	Описание
line-height	normal множитель точно %	Межстрочный интервал
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать с прописных Все прописные Все строчные
text-align	left right center justify	Выравнивание текста
text-indent	точно %	Отступ первой строки

Цвет

CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц, предлагая более простые и удобные варианты управления цветом.

В таблице 3 перечислены свойства элементов, предназначенных для задания цвета.

Таблица 3. CSS-свойства для работы с цветами
Свойство	Значение	Описание
color	Цвет	Устанавливает цвет текста
background-color	Цвет transparent	Цвет фона Прозрачный
background-image	URL none	Фоновый рисунок Отсутствует
background-repeat	repeat repeat-x repeat-y no-repeat	Повторяемость фонового рисунка
background-attachment	scroll fixed	Прокручиваемость фона вместе с документом
background-position	Проценты Пикселы top center bottom left right	Начальное положение фонового рисунка

Цвет, используя CSS, можно задавать тремя способами:

По его названию. Браузеры поддерживают некоторые цвета по их названию.
По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.
С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении

Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В таблице 4 приведены допустимые псевдоклассы и их описания.

Таблица 4. Псевдоклассы для работы с сылками
Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

Списки

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В таблице 5 перечислены свойства элементов, предназначенных для создания и изменения списков.

Таблица 3.5. CSS-свойства для работы со списками
Свойство	Значение	Описание
list-style	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные – для нумерованного.
list-style-image	none URL	Устанавливает символом маркера любую картинку.
list-style - position	outside inside	Выбор положения маркера относительно блока строк текста.

Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.

Единицы измерения

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В таблице 6 перечислены основные относительные единицы.

Таблица 6. Основные относительные единицы
Единица	Описание
em	Высота шрифта текущего элемента
ex	Высота символа x
px	Пиксел
%	Процент

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1 em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1 em принимается размер шрифта его родителя.

Аргумент ex определяется как высота символа "x" в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В таблице 7 перечислены основные такие единицы.

Таблица 7. Основные абсолютные единицы
Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.

⇐ Предыдущая 1 234 Следующая ⇒