Псевдоклассы и псевдоэлементы

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:

<основной селектор>:<псевдоэлемент> { <стиль> }

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу(увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы.

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

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

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

Псевдоклассы условно делятся на три группы:

• определяющие состояние элементов;

• имеющие отношение к дереву элементов;

• указывающие язык текста.

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

Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a{...} и a:link{...} в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

Псевдокласс :visited определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.

Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

И последний псевдокласс :hover применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

Псевдоклассы тега <A> регламентируют правила для отображения связей:

link – непосещенная связь

visited – посещенная связь

active – активная связь

hover – связь, на которой расположен курсор мыши.

В данном примере все элементы ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора исчезнет подчеркивание.

Способы применения таблиц стилей в документе.

Внутренние таблицы стилей.

Использование внутренних таблиц стилей мало чем отличается от использования тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE. Такой тип таблиц следует использовать только при необходимости задания одному элементу индивидуального стиля.

Глобальные таблицы стилей.

Задают вид элементов всего документа. Для этого используется тег <STYLE type=”text/css”>, который размещается в заголовке документа.

Связанные таблицы стилей.

Используются для придания нескольким документам одного стиля и хранятся в отдельном файле. Позволяют выдержать сайт в одном стиле без особого затрдунения.

1) встроенные стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет, будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;

2) внедренные стили (перечисленные в теге-контейнере <style> в «голове» документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);

3) импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style>) – еще меньший приоритет, будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;

4) связанные стили (стили, присоединенные к html-файлу посредством тега <link>) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

Свойства таблиц стилей

Свойства шрифта.

Font-family – название семейства шрифта. На случай, если браузер не имеет нужного шрифта, можно установить несколько семейств в порядке предпочтения через запятую.

Font-size – размер шрифта.

Font-style – определяет стиль шрифта: normal, italic, oblique (тоже наклонный).

Font-weight – определяет жирность текста. Возможные значения normal, bold, bolder, lighter или числовые. Если используется числовое выражение, то число должно быть кратным 100. 400 – normal, 700 – bold.

Свойства цвета и фона.

Color – устанавливает цвет текста элемента. Допустимые значения название цвета или его номер.

Background – определяет цвет фона. Допустимые значения:

transparent– отсутствие фона;

color – цвет фона;

URL– алрес картинки.

Настройки для картинки:

repeat - Отвечает за размножение картинки на экране. Допустимые значения:

repeat – изображение размножается по всему экрану;

repeat-x – изображение размножается по оси Х;

repeat-y – изображение размножается по оси У

no-repeat– изображение на размножается.

scroll - определяет при прокручивании страницы, будет картинка оставаться на месте или прокручиваться вместе с ней. Значения: fixed и scroll.

position - определяет положение изображения на странице. Значения могут быть:

· процентным (горизонтальное, вертикальное);

· абсолютным расстоянием (горизонтальное, вертикальное);

· ключевое слово: top, middle, bottom, left, center, right.

С помощью свойств background-attachment (прокрутка), background-color, background-image, background-position, background-repeatможно определить свойства фона по частям.

Свойства текста.

Letter-spacing – определяет расстояние между буквами.

Line-height – определяет высоту текущей строки. числовые значения интерпретируются как размер шрифта текущего элемента умноженный на соответствующее число.

Text-align – выравнивание текста относительно содержащего его элемента. значения: left, right, center, justify.

Text-decoration – специальный вид текста. Допустимые значения:

none – нет;

overline – подчеркивание над текстом;

underline– подчеркивание под текстом;

line-through – зачеркнутый текст.

Text-indent – устанавливает величину отступа в единицах измерения или как процент от ширины родительского элемента.

Text-transform – изменяет текст. Допустимые значения:

capitalize – делает заглавной первую букву каждого слова в элементе;

uppercase – делает все буквы в словах элемента заглавными;

lowercase – делает все буквы в словах элемента строчными;

none – снимает все установки, приобретенные в результате наследования.

Vertical-align – определяет расположение по вертикали текущего элемента. Допустимые значения:

baseline – устанавливает выравнивание по образцу родительского элемента;

middle – устанавливает вертикальную среднюю линию элемента на основе родительского плюс половина строки последнего;

super – переводит элемент в верхний регистр;

sub – переводит элемент в нижний регистр;

text-top – выравнивает элемент по верху текста, набранного шрифтом родительского элемента;

text-bottom - выравнивает элемент по низу текста, набранного шрифтом родительского элемента;

top – выравнивает верх элемента по верхе самого высокого элемента текущей строки;

bottom - выравнивает верх элемента по верхе самого высокого элемента текущей строки.

Не нашли, что искали? Воспользуйтесь поиском по сайту: