Реферат: Каскадные таблицы стилей CSS
CSS (Cascading Style Sheets — Каскадные таблицы стилей) – это технология описания внешнего вида документа, написанного языком разметки. Основная идея CSS состоит в том, чтобы отделить описание логической структуры документа (HTML) от его внешнего вида(CSS). Чтобы поменять отображение сайта, достаточно изменить описание стиля. Один и тот же документ с помощью CSS можно отобразить различными способами, например: на экран, печать, голосом, шрифтом Брайля.
Таблицы стилей CSS позволяют уменьшить размер HTML кода, улучшить его читаемость, сократить объем работ разработчиков веб-страниц, менять внешний вид документа без изменения HTML кода. Одна таблица стилей может применяться и к нескольким документам.
CSS используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML.
Способы включения каскадных таблиц стилей
CSS можно включить в HTML-документ четырьмя способами:
Встраиваниестиля (inline styles) с помощью атрибута style. Стиль встраивается непосредственно в один из тегов HTML – документа в свойстве style этого тега. Например:
font-variant:small-caps»>Красный текст на желтом фоне,
маленькими заглавными буквами.
Кроме приведенных в примере тегов, стили часто встраиваются в теги h, body.
Считается, что способ встраивания стиля нарушает идеологию CSS.
Внедрение таблицы стилей в заголовок HTML документа (embedded style sheet) с помощью тега style. При этом CSS-стили располагаются между открывающим и закрывающим тегами style. Тег размещается в заголовке HTML-документа между тегами
и и содержит определения стилей для всего HTML-документа:Связывание с внешней таблицей стилей. Если предполагается использовать один стиль для нескольких страниц документа или нескольких документов, можно описать стиль в отдельном файле с расширением .CSS, например style.css. Для подключения стилевого файла используется тег , расположенный внутри тега .
Первые два свойства указывают браузеру, что на странице используется CSS. Значение последнего свойства — имя файла, в котором прописан стиль страницы.
Импортирование — добавление внешней таблицы стилей при помощи правила @import. В отличие от HTML-тега правило @import является языковой конструкцией CSS и добавляется в элемент style:
Свойство @import таблицы стилей следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL файла, содержащего таблицы стилей. Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Таблицы стилей не чувствительны к регистру. Текстовые комментарии в таблицах стилей оформляются так же, как и в языке Си:
Стиль – это правило, описывающее форматирование фрагмента документа. Каждое правило состоит из селектора и определения. Селектор определяет, на какую часть документа распространяется правило, а определение задает значения его свойств в фигурных скобках.
В фигурных скобках после селектора задаются значения свойств. Если у свойства несколько значений, то значения отделяются друг от друга пробелами. Описания свойств отделяются друг от друга точкой с запятой.
Селектором может быть любой элемент HTML, например
Рассмотрим пример использования таблицы стилей, определяющей стиль заголовков первого уровня h1:
Жирный заголовок красного цвета
Ниже приводится пример более сложного кода CSS, встраиваемого в теги HTML, в том числе в теги body и html.
Примеры CSS — это заголовок H1
пример кода CSS, встраиваемого в HTML страницу.
Этот код должен располагаться внутри элемента head. Селектором является тег body
Примеры CSS — это заголовок H2
Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне,
жирный шрифт Comic Sans MS размером 14 пикселей и выровненный по обоим краям с
отступами со всех сторон 10 пикселей.
По традиции для совместимости со старыми браузерами, не понимающими CSS содержимое элемента могут заключать в комментарий . Новые браузеры поймут, что в комментариях заключена таблица стилей и подключат ее. В старых браузерах содержимое не будет отображено в окне браузера. В таблицу стилей можно ставить любое количество пробелов и переносов строк, браузер оставит столько, сколько нужно.
Значения свойств, являющихся адресами устанавливается следующим образом: url(адрес).
Группирование. Если двум селекторам присваивается одинаковое определение, то их можно записывать через запятую:
Если селектор имеет несколько определений:
то они записываются через точку с запятой:
Наследование. При определении стиля элемента, вложенные элементы наследуют свойства головного элемента. Например, если в параграфе
задается красный цвет шрифта, то выделенный с помощью текст также будет красным:
Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.
Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого достаточно описать стиль тега , порождающего остальные элементы документа.
При сложении стилей приоритет имеют атрибуты, определенные в более конкретном стиле. Стили в порядке убывания конкретности: , остальные теги html, CSS – классы, комбинированные стили, встроенные стили.
Чтобы иметь возможность отображать одни и те же элементы в разных случаях по-разному, необходимо использовать классы. Это позволяет для каждого тега использовать несколько стилей. Свойства класса присваиваются данному тегу с помощью атрибута class: Имя класса и его свойства должны быть определены в виде селектора класса:
Это можно продемонстрировать на следующем примере: