Каскадные таблицы стилей - CSS

🕛 17.08.2007, 11:45

Наверное, практически каждый из нас хоть раз да пробовал себя в роли веб-дизайнера. Кто-то удовлетворился несколькими попытками, кто-то скромно создает веб-странички для себя и знакомых, а кто-то нашел в этом свое призвание и уверенно движется к статусу профессионального веб-дизайнера. Но и те, и другие, и третьи знают, что при разработке сайта часто приходится изменять какие-то элементы дизайна - цветовые компоненты, параметры шрифтов или таблиц. Можно ли как-то упростить этот процесс и не заниматься монотонным и, скажем откровенно, нудным исправлением тегов?
Изменение дизайна "одним кликом".

Редко, очень редко начинающий веб-дизайнер работает в "Блокноте" - чаще всего его инструментом является какой-либо визуально ориентированный HTML-редактор наподобие популярнейшего "Dreamweaver" или малоизвестной, но весьма интересной программы Antenna.
На панели инструментов любого такого редактора присутствует кнопка, закладка или меню (в зависимости от редактора) под названием "CSS". Многие не обращают внимание на этот инструмент, а зря - ведь технология CSS (Cascade Style Sheet - "каскадные таблицы стилей") была разработана как раз для того, чтобы упростить работу над веб-дизайном.
CSS позволяет описывать параметры тегов отдельно, а потом подключать это описание к нужным страницам сайта. По сути, цель этой технологии - отделить дизайн сайта от его текстовой и программной части и облегчить редактирование HTML-кода.

Преимущества такого подхода в написании страниц очевидны:
изменяя только один стиль, мы вносим изменения в параметры всех тегов, с которыми он связан;
повышается удобочитаемость HTML-кода страницы, а значит, становится гораздо проще корректировать его и править дизайн на лету;
объем страницы становится меньше, поэтому она быстрее загружается.

И наконец, можно быстро создать несколько вариантов страниц в зависимости от разрешения монитора пользователя или других параметров.
Как работает CSS ?

CSS-таблица состоит из разнообразных элементов-селекторов: стилей, классов, идентификаторов и псевдоэлементов.

Стили позволяют определить параметры конкретных HTML-элементов и используются наиболее часто. С их помощью удобно задавать параметры фона страниц, отступов таблиц, параметры шрифта в текстовых блоках. Именно используя стили, можно оперативно изменять дизайн веб-страниц.
Например, чтобы при помощи CSS задать тегам заголовков первого и второго уровней красный цвет текста и шрифт семейства Arial, Verdana, надо в CSS-таблице ввести такую строчку: h1, h2 {color: #FF0000; font-family: Verdana, Arial, Helvetica, sans-serif}

Для того чтобы задать параметры не всех, а лишь некоторых элементов, нужно применить классы. В отличие от стилей они не привязаны к какому-то элементу и могут использоваться с любым из них. Описание классов аналогично стилям, только имя класса должно начинаться с точки - .имя_класса. Для того чтобы связать определенный класс с HTML-элементом, нужно внутри соответствующего тега в качестве значения параметра class указать имя класса (без точки!).
Классы имеют более высокий приоритет, чем стили. Это означает, что если элементу назначен стиль и к этому же элементу подключен класс, атрибуты элемента примут значения, описанные в классе.
Если в примере с заголовками применить классы, сначала придется определить красный цвет текста и шрифт семейства Arial, Verdana классом .attention {color: #FF0000; font-family: Arial, Verdana}, а потом сослаться на него в соответствующем теге: <h1 class=”attention”>текст заголовка</h1>

Еще один тип CSS-селекторов - идентификаторы. С их помощью можно не только задать внешний вид элемента, но и присвоить ему уникальное имя. Благодаря этому можно обращаться к элементу из сценариев (например, JavaScript). Есть ограничение - веб-страница не может содержать более одного элемента с данным идентификатором.
При описании идентификаторов перед самим именем нужно добавлять символ решетки - #имя_идентификатора. Для связи идентификатора с HTML-элементом используется атрибут ID, в качестве значения которого задается имя идентификатора (без знака #).

Существуют также псевдоэлементы, которые позволяют задать несколько стилей для одного и того же элемента. Ярким примером использования псевдоэлементов является изменение цвета гиперссылки при наведении на нее мыши и при нажатии. Кроме описания состояний гиперссылок, псевдоэлементы используются крайне редко.

CSS-таблица может содержать неограниченное количество стилей, классов, идентификаторов и псевдоэлементов.
Чтобы все указанные в CSS-таблице параметры заработали, нужно подключить CSS к веб-странице. Существует четыре способа подключения CSS в зависимости от глобальности определяемых параметров и их применения на страницах сайта.
Для подключения внешнего CSS-файла (*.CSS), содержащего таблицу стилей, к странице сайта нужно внутри элемента HEAD (тег заголовка документа, где располагается информация о названии страницы, описание и ключевые слова, а также сведения о подключенных таблицах стилей и скриптах) вписать следующую строку: <link rel=”stylesheet” href=”путь_к_*.CSS_файлу” type=”text/css”>
При таком подходе CSS-таблицу называют таблицей связанных стилей, тип подключения - связыванием, применяют его в том случае, когда CSS-таблица определяет параметры для всех или для большинства страниц сайта.
Если технологию CSS нужно применить только к одной странице сайта, то нет необходимости создавать отдельный CSS-файл; достаточно внутрь элемента HEAD добавить следующую конструкцию:
<style type="text/css"> CSS-таблица
</style>
Такой способ подключения называют внедрением.
Если же требуется применить технологию CSS только к одному элементу, то в теге элемента добавляют атрибут STYLE. Возвращаясь к примеру с заголовками, мы получим такую конструкцию: <h1 style="font-size: 12pt; font-family: Verdana, Arial, Helvetica, sans-serif”>Заголовок</h1>
Описанный способ подключения называют встраиванием.
Иногда требуется сочетать подключение CSS связыванием и внедрением. Для этого существует тип подключения импортирование. Он позволяет часть CSS-таблицы импортировать из внешнего файла, а оставшуюся часть, индивидуальную для каждой страницы, описать внутри элемента STYLE.
Для этого в элемент HEAD веб-страницы нужно вставить конструкцию типа:
<style type="text/css"> @import url("путь_к_*.CSS-файлу"); CSS-таблица
</style>

Комплексное решение - Macromedia Dreamweaver.

WYSIWYG-редактор Macromedia Dreamweaver предоставляет расширенные возможности для работы с CSS-таблицами. Это, прежде всего, инструменты управления параметрами HTML-элементов. Можно просмотреть древовидную структуру всех связанных с сайтом CSS-таблиц, при этом есть возможность быстрого изменения параметров выбранного элемента.

После создания нового CSS-файла ("File" -> "New" -> "Basic page" -> "CSS") на панели инструментов "CSS" нажмите на кнопку "New CSS Rule". Появится одноименное окно, в котором требуется указать тип добавляемого элемента (стиль, класс, идентификатор или псевдоэлемент) и его имя. После нажатия на кнопку "ОК" появится окно настройки свойств для выбранного элемента.

В целом возможностей данной программы достаточно для разработки даже самых сложных CSS-таблиц.
Мощный CSS-инструмент TopStyle Pro.

Облегченная (Lite) версия этой небольшой утилиты поставляется вместе с популярным веб-редактором Macromedia HomeSite. Pro-версия значительно отличается от TopStyle Lite, предоставляя массу инструментов, упрощающих создание CSS-таблиц. Присутствует возможность предварительного просмотра и мастер создания стилей.

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

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