Подключение таблицы стилей

Продолжим изучение уроков css. Как же нам прикрепить таблицу стилей к html-странице?

Для начала давайте создадим нашу первую таблицу стилей. В этом нам поможет простой Блокнот. Открываем Блокнот и сохраняем файл как таблицу стилей. Сохраняем файл в ту же папку, где лежит наша html-страничка и даем ему имя, например, style.css. Все, таблица стилей создана, правда в ней пока нет ни одной записи.

Теперь нам необходимо подключить таблицу стилей к нашей html-страничке. Вспоминаем из уроков по html, что у нас создана html-страничка имя которой index.html. И как же подцепить нашу таблицу стилей style.css к данной html-странице?

Открываем файл index.html в Блокноте. Внутри контейнера <head> (между тегами <head> и </head> в голове документа) с помощью одинарного тега <link>. К тегу <link> применяем три атрибута: атрибут href - указывает путь, где лежит таблица стилей (в нашем случае "style.css" так как таблица находится в той же папке), атрибут type - тип подключаемой таблицы стилей (тип всегда один и тот же - "text/css"), атрибут rel - указывает на то, как взаимосвязаны между собой html-страница index.html и таблица стилей style.css ( связь такая: style.css является таблицей стилей для страницы index.html поэтому в значении пишем "stylesheet".

Пример:

<!DOCTYPE html public "-//W3C//DTD html 4.01 Transitional//EN">

<html>

<head>

<title>заголовок документа (web-страницы)</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="Keywords" content="Ключевые слова">

<meta name="Description" content="Описание страницы">

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

</head>

<body>

 

</body>

</html>


Вот так мы подключили таблицу стилей к html-странице.