Каскадные таблицы стилей и способы задания стилевого оформления веб-документов

Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.

Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.

CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние)

Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код. Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного между тегами </head> и <bodу> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.

для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах. Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей.

Связанный (Linked или External). Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение.css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.

Для того чтобы данные стили были использованы в веб страницах необходимо использовать между тегами </title> и </head> следующую конструкцию:

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

Как и для стандартных шрифтов HTML, можно задавать свойства для управления размером и цветом, а также управлять интервалами отступами и насыщенностью цвета. Для шрифтов существуют различные начертания. Насыщенность (weight) показывает толщину шрифта. Курсивное и полужирное начертания должны использоваться экономно. Их функция - выделение. Обычно не следует использовать полужирный или курсив для длинных фрагментов основного текста. Размер шрифта в таблицах стилей можно определять, используя пункты (points), пиксели (pixels), дюймы и пр.

Пример работы с текстом:

Два других интересных аспекта таблиц стилей - это классы и группировка.
Классы (class) определяют способ разбиения стилей на очень точные части. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).

Группировка (grouping) состоит в объединении нескольких свойств и значений стилей. При этом возникают более жесткие правила для форматирования.

Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.

Для управления полями Web-страницы используются четыре свойства: margin-top, margin-bottom, margin-left и margin-right.

Фильтры - это эффекты изменения внешнего вида текста и графики на странице.
Иначе, фильтр - это трансформация исходного изображения по определенным правилам.

Существуют статические и динамические фильтры.
Статические фильтры просто изменяют внешний вид элемента. Динамические фильтры позволяют изменить графический элемент со скоростью, задаваемой пользователем.

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

Псевдоэлементы и позволяют добавлять содержимое (стили) до и после элемента, к которому были применены. Всего существует несколько типов псевдоэлементов::first-line,:first-letter,::selection,:before и:after. Элементы:before и:after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.

Использовать псевдоэлементы крайне просто::before добавляется перед нужным элементом, а:after — после.

Защита информации

Date: 2016-06-06; view: 721; Нарушение авторских прав