24.Форматирование текста средствами css. Способы. Примеры.
Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях.
Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид. Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, загрузка сайта при этом будет происходить чуть быстрее.
Для каждого документа можно подключать сразу несколько стилевых таблиц. Например, при добавлении новых документов к сайту придется добавлять новые правила отображения, создавать новые стили. Для этого корректируется уже существующая стилевая таблица, или можно создать дополнительный файл и подключить его к документу. Иногда может возникнуть ситуация, когда в нескольких CSS-файлах содержатся правила отображения для одного и того же тега. И правила эти могут не совпадать. В этом случае браузером используется самое последнее объявление правила отображения. В этом заключается каскадность таблиц.
Добавление CSS
Таблицы стилей могут быть добавлены на веб-страницу тремя разными способами.
Таблицы связанных стилей
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link> с атрибутом REL="stylesheet" в заголовке страницы (пример 1).
Пример 1. Подключение таблицы связанных стилей
Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.
Достоинства данного способа
Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
Можно изменять таблицу стилей без модификации веб-страниц.
При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
Стилевая таблица представляет собой обычный текстовый файл специализированного формата. В спецификациях данный формат имеет обозначение text/css. В CSS-файле записываются правила отображения для некоторых тегов.
Все правила CSS состоят из двух частей. В первой части записывается наименование тега, к содержимому которого и будет примерено данное правило оформления. Это объявление в спецификации CSS называют selector (селектор).
После наименования тега в фигурных скобках записывается правило (rule) оформления текстового содержимого.
Формат правила CSS следующий:
селектор{свойство1:значение1; свойство2: значение2;…}
В фигурных скобках может записываться сразу несколько правил, разделенных символом точки с запятой. Само правило состоит из двух частей. Сначала записывается наименование параметра отображения, например, вид применяемого шрифта, а затем, после двоеточия, значение этого параметра.
Пример 2:
Н1 {color:blue}
В документе, для которого определено данное правило, все заголовки H1 будут выделяться синим цветом.
Пример 3:
a {color : navy; font-family : Arial}
Это правило указывает на то, что текстовое содержимое всех тегов <а>, которым в HTML обозначаются гиперссылки, будет отображаться при помощи любого доступного шрифта из семейства Arial, темно-синего цвета (navy).
Пример 4:
a, h1 { color : navy }
Данное правило указывает, что текстовое содержимое гиперссылок и заголовков первого уровня будет отображаться темно-синим цветом.
Пример 5:
H1,H2,H3 {color:blue},
Синим цветом будут выделяться заголовки первого, второго и третьего уровней.
Таблицы глобальных стилей
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 7).
Пример 7. Использование таблицы глобальных стилей
В данном примере показано изменение стиля заголовка <h1>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.