CSS Как сделать ...

Когда браузер читает стили, он форматирует документ в соответствии с ними.

Три способа вставки CSS

Есть три способа вставки таблицы стилей:

Внешние таблицы стилей
Внутренние таблицы стилей
Встроенный стиль

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

Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С внешней таблицей стилей, вы можете изменить внешний вид всего веб-сайта путем изменения одного файла. На каждой странице необходимо указать ссылку на таблицу стилей с использованием тега <link>. Тег <link> должен быть внутри головного (head) раздела:

<head>
       <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Внешняя таблица стилей может быть записана в любом текстовом редакторе. Файл не должен содержать любые HTML-теги. Таблица стилей должна быть сохранена с расширением .css. Пример файла таблицы стилей приведен ниже:

hr { color:sienna; }
p { margin-left:20px; }
body { background-image: url("images/back40.gif"); }

Не оставляйте пробелы между значением свойства и единицами! "margin-left:20 px" (вместо "margin-left:20px") будет работать в IE, но не будет в Firefox и Opera.

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

Внутренние таблицы стилей следует использовать, когда один документ имеет уникальный стиль. Для определения внутренних стилей в головной части страницы HTML, используется тег <style>, как это:

<head>
<style type="text/css">
   hr { color:sienna; }
   p { margin-left:20px; }
   body { background-image: url("images/back40.gif"); }
</style>
</head>

Встроенные стили

Встроенный стиль теряет многие преимущества стилей, смешивая содержимое с презентацией. Используйте этот метод, экономно!

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

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Листы нескольких стилей

Если некоторые свойства были созданы для того же селектора в различных стилях, значения будут унаследованы от более конкретных таблиц стилей.

Например, внешняя таблица стилей обладает этими свойствами для селектора h3:

h3
{
     color:red;
     text-align:left;
     font-size:8pt;
}

И внутренняя таблица стилей обладает этими свойствами для селектора h3:

h3
{
     text-align:right;
     font-size:20pt;
}

Если страница с внутренней таблицей стилей также ссылается на внешнюю таблицу стилей свойства для h3 будут:

color:red;
text-align:right;
font-size:20pt;

Цвет унаследован от внешней таблицы стилей и выравнивание текста и размер шрифта заменены внутренней таблицей стилей.

Несколько стилей будут собраны в один

Стили могут быть указаны:

внутри элемента HTML
внутри головной части страницы HTML
во внешнем файле CSS

Совет: Даже несколько внешних таблиц стилей могут ссылаться внутри одного документа HTML.

Порядок сбора

Какой стиль будет использоваться, когда есть более одного стиля, указанные для элемента HTML?

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

Браузер по умолчанию
Внешние таблицы стилей
Внутренние таблицы стилей (в секции заголовка)
Встроенный стиль (внутри элемента HTML)

Так, встроенный стиль (внутри элемента HTML) имеет самый высокий приоритет, это означает, что он перекрывает стиль, определенный в теге <head>, или во внешней таблице стилей, или в браузере (значение по умолчанию).

Примечание: Если ссылка на внешнюю таблицу стилей помещается после внутренней таблицы стилей в HTML <head>, внешняя таблица стилей заменит внутренние стили!

Была ли эта информация полезной?

Да Нет