Файл style.css


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

Файл style.css

Ниже показан пример подключения файла style.css к сайту. Путь можно ставить свой. Например файлы стилей лучше выносить в отдельную папку, потому что в процессе развития проекта их может быть несколько и в одной папке легче их редактировать. Тогда нужно прописать свой адрес.
Например выносим style.css в папку stl, тогда путь к нему будет - stl/style.css

И так, для начала сделаем два файла: (пример создания файлов в статье пример создания простого html сайта)
- index.html - это главная страница нашего сайта. Без страницы с таким названием - браузер не сможет увидеть сайт, и покажет только папки!!!
- к страницам сайта применим стили CSS, что максимально упростит их обслуживание:
- style.css - это будет второй файл, (он будет один для всех страниц) в который мы запишем все стили css, которые применим к нашему каркасу и наполнению страниц. Именно на разъяснении применения некоторых стилей остановимся подробно.

При переходе с простого html сайта к более сложному, в котором все параметры тегов вынесены в отдельный файл, сразу появляется вопрос - а куда же их применять и как? Все очень просто. К любому элементу дизайна стили применяются при помощи тегов id и class, которым можно присвоить значение, уникальное для данного участка кода. Например используем тег <div> для оформления блока, показанного ниже:

пример с id

пример с class

А вот полный код двух блоков <div> которым заданы значения в файле стилей. В примерах пишется, что блоку задана ширина 400 пикселей, высота 20 пикселей, бордер толщиной 1 пиксель и заданного цвета, фон для блока также задан, при нужном вам расположении. Фактически стили применяются для всех элементов дизайна сайта, что в разы упрощает их обслуживание.

Но нужно быть внимательным. В первом примере с id - в файле стилей пишеться вот так - #primer, с решеткой #,
а для применения класа class, с точкой - .primer_2!!!

Подробное описание файла style.css.


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

Для примера взят шаблон сайта, исходники которого можно скачать внизу страницы и в котором будем разбираться что и куда. Сразу возле кода будет описано его назначение именно для данного примера. Но сама структура шаблона практически не меняется во всех сайтах, возможно только добавление функций.

Как можно заметить, ничего сложного здесь нет. Теперь можно скачать шаблон сайта, HTML - ная часть которого описана в прошлом уроке. Открыть и редактировать шаблон можно при помощи программы Adobe Dreamweaver, а просматривать в браузере Mozilla Firefox. При желании, руководствуясь описанными подсказками, можно сделать свой шаблон, вставить в него свои тексты и картинки и выгружать на хостинг. А если нужно создать более серьезный сайт, в котором Вы сможете легко разобраться, тогда нужно изучить следующую статью о создании динамического веб-сайта, а если нужно быстро создать свою страничку в сети, тогда можно воспользоваться формой обратной связи.

Пример готового шаблона можно скачать по ссылке..., или посмотретьдемо...

Ответы на многие вопросы можно найти на страницах сайта.

по материалам сайта kapon.com.ua 

Поделитесь ссылкой на статью...


Всего комментариев - 2.    Можете оставить свой комментарий.

lextost   2012-10-08 15:19:29   сайт автора - http://alextost.com

Полезный материал, так держать!

Sarkis   2013-03-24 21:45:43   сайт автора - Http://diagnoz-avto.p.ht

Отличная статья.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер