Уроки CSS

Включение CSS в HTML

Включать CSS в HTML станичку можна тремя способами:

Встраивание	—Этот срособ позволяет применить стиль к любому дескриптору.
Внедрение	—Позволяет управлять стилями всего документа.
Связывание	—Этод метод позволяет назначить всему документу внешний лист стилей.

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

<h2 style="font: 16px Arial; color: #f00;">Мой заголовок</h2>

А вот результат:

Мой заголовок

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

Для внедрения стилей, в HTML-документ, используеться элемент style, который располагается в разделе head.

Рассмотрим предыдущий пример.

...
<head>
...
<style type="text/css">
h1 {
  font-family: Arial;
  font-size: 16px;
  color: #ff0000;
}
</style>
...
</head>
...
<body>
...
<h2>Мой заголовок</h2>
...
</body>
...

Результат будет тотже.

Кроме того, содержимое тега <style></style> вы можете поместить в отдельном файле и присвить ему расширение .css. И потом связать его с HTML-документом. Такие таблицы стилей называются внешними. Связывание осуществляется с помощью элемента <link> следующим образом: