Как вынести стили в отдельный файл CSS
Как вынести таблицу стилей в отдельный файл CSS
Интересная эта темка, скажу я вам. Мне видимо повезло, в самом начале моего сайтостроения, на форуме мне сказали про эту ошибку. И посоветовали вынести стили веб страниц в отдельный файл, потому что страницы все сделаны по своему собственному шаблону и нет смысла браузеру загружать каждый раз лишние байты.
А вот как это сделать не подсказали. Так что налив большую чашку кофе и набравшись терпения, полез осваивать все ту же Macromedia Dreamweaver, и после всего одной чашки я увидел как все это просто.Это маленький отрывок кода (рис.3) простой страницы с одним видом шрифта и тремя цветами, (примерно как у меня) можете взглянуть http://www.instructing.ru/css.css, а у более сложной структуры такая таблица стилей может вытянуться на полторы- две страницы.
И что б она не загружалась при каждом обращении к сайту, нам необходимо вынести таблицу стилей в отдельный файл с расширением CSS. Имя можете дать любое, самое популярное style.css.
Вот собственно и сама инструкция:
У кого страницы уже оформлены как надо, первые два скриншота можете пропустить.
В вышеупомянутой программе нижняя панель управления почти та же, что и в мелкософтовском Wordе, который знают практически все пользователи компьютера. Щелкаем внизу по надписи Параметры и панель открывается. Видим самую большую кнопку Настройка страницы и жмем на нее. (Все остальное на этой панели - это доводка до ума и просто подстановка уже готовых стилей, вобщем как в Wordе)
Итак нажали на кнопку и попали в настройки страницы. Здесь делаем глобальные настройки стилей:
1 Тип основного шрифта, размер шрифта, его цвет
2 Цвет основного фона или ставим картинку фона (если она маленькая, то автоматически замостится на весь экран)
3 Верхние и боковые границы сайта (отступ от края в пикселях)
4 Так же настраиваем вид ссылок или оставляем по умолчанию
5 То же делаем с заголовками - размер, шрифт, цвет. Это то, что выделяется тегами <h1></h1>.......<h6></h6>, т.е. заголовки, подзаголовки и прочие важные фрагменты.
Потом в основной панели рис.1 добавляем еще несколько стилей шрифтов (размер, цвет и т.д.) которые будут в дальнейшем вами использоваться на страницах сайта, вобщем настраиваем страницу полностью до кондиции. А таблица стилей между последним мета-тегом и тегом </head> автоматически дополняется при любом изменении в оформлении.
Теперь вырезаем стили полностью после <style type="text/css">и до </style>. Можете захватить коментарий <!-- в начале и --> в конце, не помешает.
В корневой дирректории создаем новый файл (см. Как создать страницу сайта), сразу переименовываем его например в style с расширением (обязательно!!!) css. Итого получаем style.css, открываем его двойным щелчком и вставляем вырезанное. Закрываем, при запросе на сохранение сохраняем.
В коде страницы остатки стилей <style type="text/css"> и </style> удаляем или сохраняем на отдельном листочке, зачем? Поясню позже...
Вот и пришла очередь вставить в код каждой страницы ссылку на отдельный файл стилей css перед тегом </head>. Поскольку файл стилей лежит в корне сайта, ссылка будет иметь такой вид:
<link rel="stylesheet" type="text/css" href="style.css">
где href="style.css" ссылка на файл, а style - имя вашего нового файла(можете задать любое). Если внутренние страницы находятся не в корне сайта а в подпапках, то ссылка будет иметь вид:
<link rel="stylesheet" type="text/css" href="../style.css">
где знаками ../ перед style.css обозначаем, что файл находится в корне, относительно страницы.
Вот пример структуры сайта с корневой папкой (директорией), подпапками (поддиректориями) и вынесенными стилями в отдельный файл CSS, находящемся в корне сайта.
Если вы правильно поставили ссылку на файл стилей, то страница будет сразу же иметь правильно оформленный вид хоть на сервере, хоть на вашем компьютере. После проверки можете загружать все на сервер.
P.S. Теперь о том, что вы сохранили на отдельный листочек! Если вы вдруг через какое то время решили добавить что то в оформление страницы (например новый вид шрифта), удаляем из кода ссылку на файл css, вставляем удаленные ранее "остатки"
<style type="text/css"> и </style>, а между ними то, что вырезали из кода (сами стили). Теперь обновляем оформление страницы (стили в коде меняются автоматически) и проводим процедуру в обратном порядке, т.е. как с самого начала (рис. 3). Это делается для того, что бы потом у вас не было путаницы с оформлением разных страниц. Или же создайте несколько файлов css для разных по назначению страниц.
|
RSS |