2020-04-07
164
Каскадные таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.
Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.
Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные и связанные.
Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.
|
|
|
Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Броузер, поддерживающий таблицы стилей, будет следовать их порядку, интерпретируя информацию стилей.
Это означает, что вы можете использовать все три типа стилей, и броузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей.
Другой аспект каскадирования - наследование. Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.
Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.
Существует три метода для применения таблицы стилей к документу HTML:
- Встроенный - этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код;
- Внедренный - внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице;
|
|
|
- Связанный - связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей, которые можно затем применять ко всему узлу. Основной документ таблицы стилей создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла. Любая страница, связанная с этим документом, будет использовать указанные стили.
Таблицы стилей строятся в соответствии с определенным порядком, в противном случае они не могут нормально работать.
Синтаксис всех методов, используемых для применения стилей к документу HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:
- Указатель - указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка или абзаца. Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее;
- Свойство - свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель;
- Значение - значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1 и вы включаете свойство type family. Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства;
- Описание - свойства и значения объединяются, образуя описание;
- Строка - указатель и описание образуют строку.
