Таблица связанных стилей
Для подключения стилей к Web-странице существует несколько способов, которые различаются по своим возможностям и назначению:
- Внутренние стили задаются в элементе разметки. Применяют параметр тега style для конкретного элемента HTML-страницы, а его атрибуты указываются с помощью языка таблицы стилей.
- При использовании таблицы глобальных стилей, свойства описываются с помощью контейнера <style> в самом документе, и располагаются в заголовке <head> Web-страницы.
- При использовании таблицы связанных стилей, описание селекторов и их свойств располагается в отдельном файле, а для связывания Web-страницы с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>.
Все методы могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо придерживаться их иерархии. Приоритет, в случае комбинированного применения нескольких способов назначения стилей, имеет внутренний стиль, затем таблица глобальных стилей, в последнюю очередь таблица связанных стилей.
Описание стилей в отдельном файле позволяет использовать стили на любом количестве Web-страниц, легко и быстро менять на всех страницах сразу элементы оформления. Если для всех страниц сайта используется единый внешний лист стилей, страницы загружаются быстрее, так как, загрузившись раз, файл стилей кэшируется браузером, не требуя повторной передачи данных для следующих открываемых страниц сайта.
Стилевой файл создается в любом текстовом редакторе, например, в Блокноте. При сохранении следует изменить расширение текстового файла *txt на *.css. Теги <style></style> не указываются.
Вот как выглядит стилевой файл предыдущего примера:
html, body, div {
margin: 0px;
padding: 0px;
border: 0px
}
body {
background:#000000;
color: #ffffff
}
#header, #menu {
text-align: center;
font-family: Tahoma, Veranda, Arial
}
h1 {
color:#ff0000;
font: bold 300%
}
#header, #footer {
margin: 0px;
padding: 10px 20px
}
#menu {
font-size: 80%;
color:#00ff00;
padding: 0px 20px
}
a {
color: #00ff00;
text-decoration: none;
padding: 0px 10px
}
a:hover {
color: #f00
}
#content {
text-align: justify;
padding: 40px 30px;
height:70%
}
#footer {
text-align: right;
font-size: 70%
}
Копируем его в Блокнот и сохраняем под именем style.css. Так как описание стилей располагается в отдельном файле, то между тегами <head>...</head>, каждого HTML документа сайта, добавляем ссылку на файл таблицы связанных стилей: <link rel="stylesheet" type="text/css" href="style.css">
Если этот файл находиться в другом каталоге, указываем полный путь к нему:
<link rel="stylesheet" type="text/css" href="http://path/style.css">
Вот такая получилась страница. Стоит сравнить сколько весит эта и предыдущая, сверстанная при помощи таблицы глобальных стилей.
