html.okpython.net
HTML и CSS для начинающих

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

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

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

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

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

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

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

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

	<!-- Первая внутренняя таблица стилей (для всех устройств) -->
	<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. Подключение таблиц стилей CSS к html-документу

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

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

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

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

Быстрый переход к другим страницам

▲
▼