Связанные стили

Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном файле с расширением .css и подключаются к документу (или нескольким документам).

Этот способ добавления стилей наиболее удобный из всех описанных способов и предоставляет большее число возможностей для web-разработчика.

Во-первых, действие стилей, описанных в отдельномом файле, распространяется на любое количество документов, к которым он подключен, а также этот же файл можно использовать и на других сайтах.

Во-вторых, можно изменять стили без изменения html-страниц. И все изменения автоматически применятся ко всем страницам, к которым подключен файл стилей.

И, в-третьих, при первой загрузке браузер кэширует (запоминает) такие файлы, поэтому загружаться Ваш сайт будет нескольк о быстрее.

Примером таблицы связанных стилей является файл style_school.css, который подключается к каждой страничке наших уроков. И стоит нам захотеть изменить, например, цвет или размер заголовков во всех уроках, мы всего лишь изменим соответствующие параметры в подключенном файле стилей, и заголовки во всех уроках автоматически приобретут нужные свойства.

Чтобы подключить к документу файл стилей, нужно в начале документа внутри тега < head> вставить тег < link> с тремя параметрами:

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

Где параметры rel=" stylesheet" и type=" text/css" - постоянные, а параметру href присваивается адрес файла стилей. Адрес может быть как абсолютный, так и относительный.

Например, к нашим урокам файл стилей style_school.css можно подключить так:

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

Внутри файла стилей описываются все необходимые стили, разделенные переносом строки, точно так же как и глобальные стили:

стиль1 {
атрибут1: значение;
атрибут2: значение;
...
}
стиль2 {
атрибут1: значение;
атрибут2: значение;
...
}
...

Посмотрите, как устроен файл style_school.css.

Для примера создадим документ с заголовками (откройте его, посмотрите, как он выглядит без стилей, и посмотрите его код). Сделаем все заголовки < h1> оранжевого цвета и размером 22 пиксела и все заголовки < h2> красного цвета и размером 20 пикселов. Для этого создадим файл стилей style.css, содержащий следующее:

h1 {
color: #CD6600;
font-size: 22px
}
h2 {
color: #FF0000;
font-size: 20px
}

И подключим этот файл к нашему документу:

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

Получится такой документ (откройте его, посмотрите, как он выглядит с применением стилей, и посмотрите его код).