Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству 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 тип данных подключаемого файла.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту 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" "http://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" "http://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" "http://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 файл.
