Создание статического содержания. CSS
3.1.5. Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других [2, 5]. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE>, внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере.
Пример наследования параметров цвета:
…
<head>
…
<style type="text/css">
TABLE {
color: red;
background: #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
…В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. При этом цвет фона у ячеек в данном примере черный, хотя он не наследуется, так как у атрибута background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента "проглядывает" сквозь дочерний элемент.
Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня.
3.1.6. Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа [5]. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий:
Элемент:Псевдокласс { Описание правил стиля }Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов ( A.menu:hover {color: green} ) и контекстным селекторам ( .menu A:hover {background: #fc0} ).
Условно все псевдоклассы делятся на группы, которые перечислены далее [2, 5].
3.1.6.1. Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае [2, 5].
- Active – происходит при активации пользователем элемента (например, при наведении курсора на ссылку и нажатии левой кнопки мыши).
- Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.
-
Focus – применяется к элементу при получении им фокуса.Замечание. Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.
- Hover – псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
- Visited – данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.
3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе. Примером такого псевдокласса является first-child (применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа).
3.1.7. Псевдоэлементы
Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста [5]. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента.
Синтаксис использования псевдоэлементов следующий:
Селектор:Псевдоэлемент { Описание правил стиля }Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже:
.foo:first-letter { color: red }
.foo:first-line { font-style: italic }Далее перечислены все псевдоэлементы, их описание и свойства [2, 5]:
- after – применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки.
- before – по своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента.
-
first-letter – определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.Замечание. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал – увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
- first-line – определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
3.1.8. Элементы CSS
3.1.8.1. Текст
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 3.1 [2, 5].
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.2 [2, 5].
3.1.8.2. Цвет
CSS имеет несколько опций для определения цвета текста и фоновых областей на веб-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом HTML, но и дают массу новых возможностей. Например, традиционный путь для создания цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц, предлагая более простые и удобные варианты управления цветом.
В табл. 3.3 перечислены свойства элементов, предназначенных для задания цвета [2, 5].
Цвет, используя CSS, можно задавать тремя способами [5]:
- По его названию. Браузеры поддерживают некоторые цвета по их названию.
- По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.
- С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении
3.1.8.4. Ссылки
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 3.4 приведены допустимые псевдоклассы и их описания [2, 5].
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
3.1.8.5. Списки
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 3.5 перечислены свойства элементов, предназначенных для создания и изменения списков [2, 5].
Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.
3.1.8.6. Единицы измерения
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 3.6 перечислены основные относительные единицы [5].
| Единица | Описание |
|---|---|
| em | Высота шрифта текущего элемента |
| ex | Высота символа x |
| px | Пиксел |
| % | Процент |
Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size ). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1 em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1 em принимается размер шрифта его родителя.
Аргумент ex определяется как высота символа "x" в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.
Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 3.7 перечислены основные такие единицы [5].
| Единица | Описание |
|---|---|
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Миллиметр |
| pt | Пункт (1 пункт равен 1/72 дюйма) |
| pc | Пика (1 пика равна 12 пунктам) |
Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.