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

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

Есть еще множество возможностей таблиц CSS, которые делают необходимым и очень полезным их использование. В частности, каскадирование, допустимость применения стилей читателя и т.д. Дополнительным плюсом является увеличение скорости загрузки страниц за счет общего уменьшения кода документа.

Общие положения.

 

Разберем совсем простое правило таблицы стилей

H1 {color: blue; font-size: 16pt; }

 

Любое правило каскадных таблиц стилей состоит из двух частей:

- селектора и

- объявление (или определения). Блок объявлений может состоять из одного или более объявлений. Последние отделяются друг от друга символом точки с запятой.

 

Селектор отделяется от объявлений фигурными скобками.

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В примере выбраны элементы заголовка < h1 >. Если бы селектором был p, тогда выбирались бы все элементы < p > (абзацы).

 

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

свойства и значения, разделенных знаком двоеточия (: ).

 

Назначение свойства почти очевидно из его названия. В приведенном правиле селектором является элемент H1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий (значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение I6pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (; ), как это демонстрируется в приведенном выше примере.

 

Вот схематичный пример записи стилевого свойства:

Замечание:

Правила написания каскадных таблиц стилей не чувствительны к регистру. Селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке. Однако каскадные таблицы стилей чувствительны к синтаксису задания правил и правильности названий свойств, значений и селекторов. Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется.

 

 

Объявления и ключевые слова

В блок объявлений (определений) входит одно или несколько объявлений. Формат

объявлений обычно такой: имя свойства, за которым следует двоеточие, затем значение и точка с запятой. После двоеточия и точки с запятой может быть произвольное количество пробелов (в частности, возможно отсутствие пробела). Практически во всех случаях значение –это или отдельное ключевое слово, или список из нескольких допустимых для данного свойства ключевых слов, разделенных пробелами.

Если указать неверное свойство или значение, будет проигнорировано все объявление целиком. Поэтому следующие два объявления не будут

выполнены:

{

brain-size: 2cm; /* неизвестное свойство */

color: ultraviolet; /* неизвестное значение */

}

 

В случаях, когда допускается указывать в качестве значения свойства более одного ключевого слова, ключевые слова обычно разделяются пробелами. Не все свойства могут принять несколько ключевых слов, но некоторые, такие как свойство font, могут.

 

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

p {font: medium Helvetica; }

 

Пробел между значениями medium и Helvetica указывает на границу очередного ключевого слова. Первое – размер шрифта, второе – имя шрифта. Благодаря пробелу браузер пользователя различает эти два ключевых слова и применяет их правильно.

Точка с запятой указывает на завершение объявления.

 

 

CSS-свойство font – это единственное место, где два ключевых слова могут быть разделены прямым слэшем (/).

Например:

h2 {font: large/150% sans-serif; }

 

Здесь слэш разделяет ключевые слова, которые задают размер шрифта и высоту строки элемента.

 

 

Встраивание таблиц стилей в документ

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.

 

Существует четыре способа связывания документа и таблицы стилей:

1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.

 

2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.

 

3. Импортирование — позволяет встраивать в документ таблицу стилей,

расположенную на сервере.

 

4. Встраивание в тэги документа — позволяет изменять форматирование

конкретных элементов страницы.

 

Связывание

позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга < LINK>, задаваемого в разделе < HEAD>:

Связывание позволяет разработчику применить одинаковый набор правил

форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность работе разработчика.

 

Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS.

Допустимы и другие расширения, но предпочтительнее все же css.

 

< head> ….

< link rel=" stylesheet" type=" text/css" href=" sheet1.css" media=" all" />

< /head>

 

Основное назначение тега – предоставить авторам HTML возможность устанавливать связь между документом, содержащим тег < link …> , и другими документами. Таблицы стилей, не являющиеся частью HTML-документа, но используемые им, называются внешними таблицами стилей (external style sheets). Это название дано потому, что такие таблицы стилей являются внешними по отношению к HTML-документу.

 

Чтобы внешняя таблица стилей была успешно загружена, тег < link> должен быть помещен внутрь элемента < head> и не может находиться внутри какого-либо другого элемента (так же как < title> ). В результате веб-браузер отыщет и загрузит таблицу стилей, после чего будет использовать любые содержащиеся в ней стили для формирования представления HTML-документа.

 

Формат внешней таблицы стилей - это просто список таких же правил, какие мы видели в предыдущих примерах. Но в данном случае правила сохраняются в отдельном файле.

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

 

h1 {color: red; }

h2 {color: maroon; background: white; }

h3 {color: white; background: black; font: medium Helvetica; }

Их сохраняют в простом текстовом файле и обычно дают расширение.css

⇐ Предыдущая1234Следующая ⇒

Поделиться: