УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 4 Добавление Стилей в HTML Документ

« Назад Далее »

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

Три Способа Вставить 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 (браузере Internet Explorer), но не в браузерах Firefox или Opera.

Внутренняя Таблица Стилей

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

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

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

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

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

<p style="color:sienna;margin-left:20px">Это параграф.</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 элемента
  • внутри head-секции страницы HTML
  • во внешнем CSS файле

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

Порядок соединения

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

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

  1. Стиль браузера по умолчанию
  2. Внешняя таблица стилей
  3. Внутренняя таблица стилей (в head-секции)
  4. Встроенный стиль (внутри HTML элемента)

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

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




« Назад Далее »



© 2011 - 2022 Уроки CSS