Таблица стилей CSS

Каскадная таблица стилей CSS уже создана в нашем шаблоне. Она находится в папке css. Файл имеет название styles.css. Что это такое и с чем его едят? Если говорить простыми словами то каскадные таблицы стилей или CSS позволяют физическое форматирование HTML документов или веб страниц заменить на логическое. Что такое физическое и логическое форматирование? При физическом форматировании HTML документов, имеются специальные теги (например, теги <font>, <b>, <i>) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием – просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой «неподвластности» логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если, например, стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать некий стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем. То-же можно проделать практически для любых тегов HTML страницы. Подробнее об этом можно почитать в небольшом учебнике по CSS.

А мы рассмоторим процесс создания и подключения к HTML странице каскадной таблицы стилей CSS в Dreamweaver 8. Для этого предположим, что в шаблоне ее нет. Тогда для начала в основной папке шаблона создадим папку под названием css, затем идем в главное меню программы File −> New и на открывшейся панели в окне Category выбираем Basic Page и в правом окне CSS, как показано на рисуне ниже и жмем кнопку Creat.

Создание таблицы стилей CSS

В результате в рабочем окне программы появится новый файл под названием Untitled-1, который затем небходимо сохранить, например, как styles_test.css в папке D:/Mysite/css. Для этого неоходимо выполнить простую процедуру через главное меню программы File −> Save As ... Далее необходимо, пока еще пустую таблицу стилей присоединить к индексной странице нашего шаблона. Для этого в рабочем окне программы необходимо выбрать закладку с открытой индексной страницей index.html, зате в главном меню программы Text −> CSS Styles −> Attach Style Sheet и на открывшейся панели выбора файла выбрать необходимый файл styles_test.css, как показано на рисунке ниже и нажать OK.

Присоединение таблицы стилей

Вот и все, теперь между тегами <head>.. <head> в голове страницы появится запись <link href="css/styles_test.css" rel="stylesheet" type="text/css">. Это означает, что файл styles_test.css подсоединен к основной странице шаблона index.html. Теперь можно наполнять созданную и присоединенную таблицу стилей нужными записями.

Здесь был рассказан только сам процесс создания и присоединения каскадной таблицы стилей к HTML файлу шаблона. Конечно-же далее, чтобы не запутать процесс построения сайта на базе шаблона все необходимо возвратить на место. Для этого достаточно убрать из головы файла index.html запись <link href="css/styles_test.css" rel="stylesheet" type="text/css">и удалить из папки css файл styles_test.css. Наш шаблон уже имеет присоединееную таблицу стилей в файле stylest.css, который находится в той-же папке css. О записях в этом файле и их назначении мы поговорим далее.

Перейти и растаять в своей любимой социалке