Как создать CSS

Как вставить таблицу стилей

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

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

Когда стиль нужно применить ко многим страницам, внешние таблицы стилей являются идеальным выбором. При использовании внешних таблиц стилей вы можете изменить вид всего сайта, изменив один файл. Каждая страница использует тег <link> для подключения к таблице стилей.<link> тег находится в заголовке (документа):

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

Браузер читает объявления стилей из файла mystyle.css и форматирует документ на их основе.

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

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

Не оставляйте пробелы между значением атрибута и единицей измерения. Если вы используете "margin-left: 20 px", вместо "margin-left: 20px", это работает только в IE 6, но не в Mozilla/Firefox или Netscape.

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

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

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

Внутрисимвольный стиль

Поскольку стили и содержимое混杂аются вместе, внутрисимвольные стили теряют множество преимуществ таблиц стилей. Будьте осторожны с этим методом, например, когда стиль нужно применить к одному элементу только один раз.

Чтобы использовать внутрисимвольный стиль, вам нужно использовать атрибут стиля (style) в соответствующих тегах. Атрибут стиля может содержать любые свойства 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;

Следовательно, цвет атрибута будет наследован из внешнего стиля, а текст выравнивания (text-alignment) и размер шрифта (font-size) будут заменены правилами внутреннего стиля.