Подключение CSS к html-документу
http://belarusweb.net
Основы создания сайтов

Подключение CSS к html-документу

Определение таблицы стилей CSS

Для того, чтобы правила CSS могли быть применены к требуемым элементам html-документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов 'style' и 'link', а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.

Таблица стилей CSS – это свод правил CSS, собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css, то этот файл называют внешней таблицей стилей, а в случае нахождения таблицы внутри элемента 'style', ее называют внутренней таблицей стилей. Имеется возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в этом случае говорят о встроенном стиле CSS.

Виды таблиц стилей CSS и
способы их подключения к html-странице

Подключение таблиц стилей к 'html'-документу показано в примере 1.3.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Подключение таблиц стилей к документу</title>

  <!-- Подключаем к странице две внешние таблицы стилей -->
  <link href="http://localhost/test/css/style_1.css" rel="stylesheet">
  <link href="http://localhost/test/css/style_2.css" rel="stylesheet">

	<!-- Первая внутренняя таблица стилей (для всех устройств) -->
	<style type="text/css">
		/* Подключаем еще одну внешнюю таблицу стилей */
		@import "http://localhost/test/css/style_3.css";
		
		p{
		background-color: yellow;
		color: blue;
		}
	</style>
	
	<!-- Вторая внутренняя таблица стилей для распечатки документа -->
	<style type="text/css" media="print">
		p{
		background-color: white;
		color: black;
		}
	</style>
</head>
<body>
  <!-- А здесь использован встроенный стиль -->
  <p>
	К данному <span style="color: red; font-weight: bold;">абацу</span> 
	применяется одна из встроенных таблиц стилей в зависимости от 
	устройства вывода информации.
  </p>

 <!-- Подключили класс (правило) из какой-то внешней таблицы стилей -->
 <a href="http://localhost/test/index.html" class="my_links">Домой</a>

</body>
</html>

Пример 1.3. Подключение таблиц стилей CSS к html-документу

Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS. Для того чтобы подключить ее к требуемому html-документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента 'link'. Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера 'style' или во внешней таблице стилей. Оно служит для импорта содержимого css-файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате '@import url ("path");' (кавычки разрешается опускать) или же просто в кавычках после имени свойства: '@import "path";'. При этом все правило, как и положено, должно заканчиваться точкой с запятой ';' (см. пример 1.3). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.

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

Стоит отдельно отметить, что внутри элемента 'style' действует синтаксис CSS, поэтому применение тегов и комментариев HTML в этой части документа запрещены.

Также не рекомендуется частое использование встроенных стилей, хотя такая возможность и предусмотрена в HTML, т.к. при этом ухудшается читабельность кода, а также усложняется поиск и правка самих стилей. Кроме того, вместо них вполне можно воспользоваться атрибутами class или id, расположив необходимое правило CSS в таблице стилей.