CSS.MANUAL.RU



Введение
Синтаксис CSS
Включение стилей в документ
Значения свойств
Свойства шрифта
Свойства текста
Свойства цвета и фона
Свойства обрамления
Свойства позиционирования
Визуальные свойства
Свойства списков
Свойства полос прокрутки
Тег SPAN
Статьи
Идеология CSS
Как использовать CSS
Меню с помощью CSS
Алфавитный указатель
Ссылки
Обратная связь
Форум





  Встроенные стили. Атрибут Style

Встроенный стиль – самый простой способ задать стиль тега. Включите в тег атрибут style со списком свойств и их значений. Пример:

<h1 style="color: blue; font-style: italic">Title</h1>

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


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

Стили на уровне документа определяются тегом <Style>. Тег <Style> (за описанием этого тега загляните в  НTML справочник) может находиться только внутри тега <head>. Все что находиться внутри тега <style> рассматривается броузером как стилевые правила. Стили, определенный в  теге <Style>, действует на все теги документа.

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

  Пример:
<html>
<head>
<title>Документ со стилями, определенными на уровне документа.</title>
<style>


</style>
<body>
<h2>Красный заголовок</h2>
<h1 class="red">Синий заголовок</h1>
</body>

В этом примере мы добрались до использования регулярных классов. Внутри тега <style>, был определен родовой класс red тега <h2> (за описанием этого тега загляните в  НTML справочник). Чтобы применить это стилевой правило к тегу некоторому тегу <h2>, надо назначить атрибуту class тега <h2> значение, совпадающее с именем родового класса, в данном случае это red. Аналогично используются родовые классы. Определите стилевое правило для родового класса, потом назначьте атрибуту class некоторого тега значение, совпадающее с именем родового класса. Тогда этот тег отобразится в  соответствии со стилевым правилом.

  Пример:
<html>
<head>
<title>Документ со стилями, определенными на уровне документа.</title>
<style>

.italic {font-style: italic}
</style>
<body>
<h1 class="red">Заголовок</h1>
<p class="italic">Абзац</p>
</body>

В этом примере как заголовок, так и абзац, выведутся курсивом.


  Внешние таблицы стилей

Стандарт CSS предусматривает создание отдельных файлов со стилями и присоединение их к  документу. Существует несколько способов сделать это:

  • Тег <link>. Пусть ваш стиль находится в файле style.css (расширение .css общепринято для стилевых файлов). Впишите в тег <head> следующую запись:
    <link rel="stylesheet" type="text/css" href="http://somehost/style.css">
    URL таблицы стилей может быть как абсолютным, так и относительным.
  • Директива @import. Директива import применяется внутри тега <style>:

    <style>

    @import url(http://somehost/style.css)
    ....
    </style>

    Команда import должна появляться до любых стилевых правил.

Чуть позже мы вернемся к внешним таблицам стилей.


  Приоритеты стилей

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

Такой принцип объединения стилей называется каскадным, поэтому и таблицы называются каскадными.


  Еще кое-что о внешних таблицах стилей

На первый взгляд может показаться, что способы присоединения внешние таблиц стилей с  помощью директивы @import и тега <link>(за описанием этого тега загляните в  НTML справочник) эквивалентны. Это так если в  документе один тег <link> и одна директива @import. Если в документе несколько директив @import, то броузер, согласно стандартам CSS, должен слить множество казанных в директивах таблиц в один набор стилевых правил для документа. Если же броузер встретил несколько тегов <link>, то он должен предложить пользователю выбрать стилевой файл для документа, однако на практике современные броузеры, встретив несколько тегов <link>, каскадно их объединяют.

Я не советую использовать команду @import, для присоединения внешних таблиц стилей, так как ее поддерживает только Intenet Explorer.






Владимир Климонтович (контакт), Copyright (C) 2003
При поддержке проекта MANUAL.RU