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

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

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

Псевдоэлементы позволяют задать стиль логических частей, не определенных в дереве частей документа, также генерировать содержимое, которого нет в начальном коде текста [5]. К примеру, объектная модель документа не предлагает комфортного механизма для доступа к первому Псевдоклассы, имеющие отношение к дереву документа символу текста, потому псевдоэлементы позволяют поменять стиль труднодоступного другим образом элемента.

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

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

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

.foo:first-letter { color Псевдоклассы, имеющие отношение к дереву документа: red }

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

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

Дальше перечислены все псевдоэлементы, их описание и характеристики [2, 5]:

· 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 можно определять стиль и вид текста. Аналогично тому, что употребляется тег , задающий характеристики шрифта, но стили владеют большенными способностями и позволяют уменьшить код HTML.

Изменение начертания шрифта и его размера происходит через характеристики CSS, которые описаны в Табл. 3.1 [2, 5].

Табл Псевдоклассы, имеющие отношение к дереву документа. 3.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 % Обычный размер Пункты Пикселы Проценты

Не считая конфигурации характеристик шрифтов, можно управлять и качествами всего текста. Значения параметров приведены в Табл. 3.2 [2, 5].

Табл. 3.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 перечислены характеристики частей, созданных для задания цвета [2, 5].

Табл. 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, можно задавать 3-мя методами [5]:

1. По его наименованию. Браузеры поддерживают некие цвета по их наименованию.

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

3. При помощи RGB. Можно найти цвет, используя значения красноватой, зеленоватой и голубой составляющей в десятичном исчислении. Значение каждого из 3-х цветов Псевдоклассы, имеющие отношение к дереву документа может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении

Ссылки

Для управления видом разных ссылок в CSS употребляются псевдоклассы, которые указываются после селектора A через двоеточие. В Табл. 3.4 приведены допустимые псевдоклассы и их описания [2, 5].

Табл. 3.4. Псевдоклассы для работы с сылками

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

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

Списки

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

В Табл. 3.5 перечислены характеристики частей, созданных для сотворения и конфигурации списков [2, 5].

Табл. 3.5. CSS-свойства для работы со перечнями

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

Так как тег

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