Вход/Регистрация
HTML: Популярный самоучитель
вернуться

Чиртик Александр Анатольевич

Шрифт:

...

H3 {text-align: right ! important; color: black}

...

H3 {text-align: center}

Теперь для всех HTML-элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.

Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той же таблицы стилей установлен модификатор important сразу для нескольких значений одного и того же свойства.

Рассмотрим пример:

...

H3 {text-align: right ! important; color: black}

...

H3 {text-align: center ! important}

...

H3 {text-align: left}=

В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.

Следует также отметить, что стили, заданные для HTML-элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):

• стили, заданные для HTML-элементов;

• стилевые классы;

• встроенные стили.

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

...

<STYLE type = "text/css">

P {font-weight: bold}

.p {color: blue}

</STYLE>

</HEAD>

<BODY>

<P class = "p" style = "text-decoration: underline">Текст абзаца

...

Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).

Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML-элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):

• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;

• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;

• стиль элемента P класса italic добавляет к шрифту курсивное начертание;

• «инлайн-стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.

Пример 10.6. Наследование стилей

<HTML>

<HEAD>

<TITLE>Наследование свойств стиля</TITLE>

<STYLE type = "text/css">

BODY {font-size: 18}

P {color: blue}

P.italic {font-style: italic}

</STYLE>

</HEAD>

<BODY>

Текст 18-м шрифтом

синего цвета

<P class = "italic"> курсивного начертания

<P class = "italic" style = "{font-weight: bold}"> полужирный

</BODY>

</HTML>

Рисунок 10.4 наглядно показывает постепенное наследование свойств стиля, использованное в примере 10.6.

Рис. 10.4. Наследование стилей

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

В общем, каскадирование и наследование стилей являются мощным средством для формирования единого дизайна HTML-документов, которое к тому же уменьшает объем таблиц стилей.

10.5. Единицы измерения CSS

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

Линейный размер и положение

Обозначения, названия и расшифровки единиц измерения приведены в табл. 10.1. Единица измерения указывается после числа с количеством единиц (например, 10cm, 10%).

Таблица 10.1. Единицы указания размера и положения

Цвета

Задавать цвет в CSS можно двумя способами. Во-первых, можно использовать предопределенные названия цветов: black, white, red и т. д. (см. табл. 2.3). Второй способ состоит в указании RGB-кода цвета. В этом случае задается значение, определяющее цвет, которое состоит из трех компонентов: уровней интенсивности красного, зеленого и синего цветов. Существуют четыре модификации этого способа: задание цвета с использованием десятичных значений, использование процентных значений насыщенности цветов, задание цвета с использованием полного или сокращенного набора шестнадцатеричных значений. Ниже приведены примеры, иллюстрирующие использование указанных модификаций второго способа для задания одного и того же цвета.

  • Читать дальше
  • 1
  • ...
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: