HTML-верстка: инструменты и приемы профессиональной front-end разработки

Вставка стиля CSS в HTML


назад вперед

Браузер форматирует документ в соответствии с css стилем.


Способы вставки стиля CSS

Существует три способа вставки стиля css:


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

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

Пример

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

Внешние таблицы стилей можно создать в любом текстовом редакторе (хотя лучше использовать специальные текстовые редакторы, например, Notepad ++). В этом файле не должно быть тегов html. Файл внешних стилей надо сохранить с расширением .css. Смотрите пример файла css:

Пример

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

Совет: следите за тем, чтобы между значением свойства и единицами измерения не оставалось пробелов, "margin-left:20 px" вместо "margin-left:20px". Такая запись будет работать только в IE.


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

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

Пример

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


Строчный стиль css

Строчный стиль CSS противоречит идеологии разделения оформления и содержания, поэтому используйте его осторожно. Кстати, о том, почему надо разделять содержимое и оформление, вы можете почитать здесь.

Для вставки строчного стиля используется атрибут style соответствующего элемента html. Атрибут style может содержать любое свойство CSS. В примере ниже показано, как изменить отступ слева и цвет текста параграфа:

Пример

<p style="color:sienna;margin-left:20px">Это параграф.</p>


Сложение стилей

Что произойдет, если для одного и того же элемента html заданы различные значения одного и того же свойства в различных таблицах стилей (внешних, внутренних и строчных)?

В этом случае, к элементу будет применен стиль более конкретной таблицы стилей (мне проще запомнить, что будет применен стиль, который находится ближе к форматируемому элементу).

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

Пример

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

Во внутренней таблице стилей для этого же элемента указаны такие свойства:

Пример

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

Если кроме внутреннего стиля, на странице будет ссылка на внешний файл css, тогда у элемента h3 будет такой стиль:

Пример

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

Цвет заголовка наследуется из внешней таблицы стилей, а выравнивание текста (text-align) и размер шрифта (font-size) — из внутренней таблицы стилей.


Конфликт стилей

Как уже указывалось выше, стили могут быть записаны в:

Совет: в html документе может быть несколько ссылок на внешние файлы css.

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

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

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

  1. Установки браузера
  2. Внешний стиль
  3. Внутренний стиль (в элементе head)
  4. Строчный стиль (в html элементе)

Таким образом, строчный стиль имеет наивысший приоритет, что означает то, что он отменит стили внутренних и внешних стилевых таблиц, а также настройки браузера.

Совет: помните о том, что если ссылка на внешний файл css записана после внутренней таблицы стилей, то внешний стиль отменит внутренний стиль.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта