CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

body {background-color: #c5ffa0}
a {color: #000060; font-weight: bold; }
a: hover {color: #ff0000; font-weight: bold; text-decoration: none}
h1 {color: #0000ff; font-size: 18px}
h2 {color: #ff00ff; font-size: 16px}
p {color: #600000; font-size: 14px}

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

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега < link> (связь). Тег < link> многоцелевой и служит для " связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег < link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как < link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами < head> < /head> и не выводится браузерами на экран.

Тег < link> имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

shortcut icon - Определяет, что подключаемый файл является иконкой.

stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.

application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

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

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type=" text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Пример:

Файл mystyle.css
body {background-color: #c5ffa0}
a {color: #000060; font-weight: bold; }
a: hover {color: #ff0000; font-weight: bold; text-decoration: none}
h1 {color: #0000ff; font-size: 18px}
h2 {color: #ff00ff; font-size: 16px}
p {color: #600000; font-size: 14px}

Файл index.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Всё о слонах< /h1>
< p> На этом сайте Вы найдёте любую информацию о слонах.< /p>
< /body>
< /html>

Файл elephant.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Купить слона< /h1>
< p> У нас Вы можете по выгодным ценам приобрести лучших слонов!! < /p>
< /body>
< /html>

Файл elephant1.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> каскадная таблица стилей< /title>
< link rel=" stylesheet" href=" mystyle.css" type=" text/css" >
< /head>
< body>
< h2> Меню: < /h2>
< a href=" index.html" > Всё о слонах.< /a>
< a href=" elephant.html" > Купить слона.< /a>
< a href=" elephant1.html" > Взять слона на прокат.< /a>
< hr>
< h1> Взять слона на прокат< /h1>
< p> Только у нас Вы можете взять любых слонов на прокат!! < /p>
< /body>
< /html>

В примере выше, " сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его " разгрузили" и сделали дизайн всего сайта " мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

Полезные советы:

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.

Используйте тег < style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.

В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.