Внешние, подключаемые таблицы стилей

Введение в CSS.

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте (например - всех абзацев), придется просматривать все страницы, чтобы найти и поменять теги.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяет хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор элементов форматирования, который применяется к тексту документа, чтобы быстро изменить его внешний вид.

Основное преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML, в чем вы сами могли убедиться на практике. Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. Кроме того, с их помощью можно, например, изменить вид всех заголовков или абзацев в документе. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу H1 (или P для абзаца). Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

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

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были более заняты содержанием документов, чем их оформлением. Однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник и подходов к созданию веб-страниц. Таких как:

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

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

Стили решают часть этих проблем механизмов представления HTML.

Добавление стиля

Стили могут быть добавлены на страницу тремя разными способами, которые различаются по своим возможностям.

Атрибут "style" (внутренний стиль)

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

Пример:

<h1 style="color: #660000; text-decoration: underline;">Заголовок, использующий стиль.</h1>

Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурной разметки документа, когда содержимое и его оформление разделены.

Элемент "style" (таблицы глобальных стилей)

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля значительно превосходит предыдущий. Он позволяет размещать все стили в одном месте в документе и применять форматирование не одному элементу, а сразу множеству элементов, отбираемых с помощью селекторов (см. далее). Определение стиля задается тегом <style>. Атрибут type данного элемента должен указывать тип используемого языка стилей.

Пример:

... <head> <style type="text/css"> p { font-size: 18pt; font-family: Arial, sans-serif; color: #333366; } </style> </head> <body> <p>Hello, world!</p> </body> ...

Благодаря заданному правилу стиля, форматирование шрифта и цвета будет применено ко всем абзацам в документе. Забегая немного вперед можно отметить, что "p" - селектор, позволяющий отбирать элементы заданного типа - абзацы.

Внешние, подключаемые таблицы стилей

Самый мощный и удобный способ определения стилей для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link /> в заголовке страницы:

В данном примере вдрес "mysite.css" - файл, содержащий правила оформления элементов для данной страницы.

Достоинства данного способа:

Используется один файл со стилем для любого количества веб-страниц, а также возможно его применять на других сайтах (исп. абсолютный адрес);
Можно изменять внешний вид элементов без модификации веб-страниц;
При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех ста или больше веб-страницах нашего сайта.
Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

В заключение отмечу, что файл стилей "*.css" не должен содержать в себе элементов разметки. Только стилевае правила и комментарии. Комментарии в CSS используются только блочные и оформляются как блочные комментарии в "C++" или "JavaScript":

/* Сие есть стилевое правило для элемента "р" - сиречь абзаца */ p { font-size: 10pt; font-family: Arial, sans-serif; color: #333366; } /* А это другое правило уже - заголовка для */ h1 { font-size: 18pt; font-family: Tahoma, sans-serif; text-align: center; }

По большому счету, и расширение .css не является обязательным. Вы можете использовать файлы с любыми расширениями. Главное - правильно написанное содержимое. Расширение .css просто является устоявшимся, традиционным и общепринятым.

Селекторы

Селекторами называют специальным образом записанные выражения, позволяющие применить правила форматирования некоторой группе элементов web-страницы:

селектор { правила форматирования ... }

Правила форматирования в фигурных скобках записываются с использованием того же синтаксиса, что и при использовании атрибута style. Огромным преимуществом такого подхода по сравнению с внедренными стилями является возможность форматирования сразу группы элементов, имена и атрибуты которых удоалетворяют заданным условиям. Именно селекторы задают такие условия.

Селектор элемента

Одним из наиболее распостраненных селекторов является селектор элемента или тип элемента:

Листинг №9.2.1: Использование селектора типа элемента
h1 { font-size: 14pt; color: #660000; } p { text-align: justify; }
выполнить.

В данном примере используется стиль для заголовков 1го уровня и абзацев документа. Выполнив пример и рассмотрев его исходный код (в нижней части) вы убедитесь в простоте и широте возможностей такого подхода. Как можно видеть в коде прмера, абзацы не содержат выравнивания, однако их содержимое выравнивается по ширине, как то задает стиль для селектора p.

Селектор class

Классы применяются, когда необходимо задать разные стили для одного тега или просто определить стиль для элемента веб-страницы. При использовании совместно с тегами синтаксис для классов будет следующий:

Элемент.КЛАСС { Правила стиля ... }

Используется класс стиля путем указания атрибута class с заданным значением у элементов заданного типа. К примеру, если класс и именем "с1" создан для абзаца (элемент "p"), то его нельзя использовать для форматирования, к примеру, заголовков.

Пример:

Листинг №9.2.2: Использование классов стиля
p { /* стиль обычного абзаца / text-align: justify; } p.cite { / создание класса альтернативного стиля абзаца */ text-align: justify; font-style: italic; font-sise: 8pt; color: #999999; } ... <!-- использование класса --> <p class="cite">Селекторами называют ... </p>
выполнить.

Существует так же возможность создать класс стиля не привязанный к конкретнову типу элемента. Прия создании такого стиля просто не указывайте тип элемента, к которому его можно применить:

.КЛАСС { Правила стиля ... }

Таким образом, класс получится универсальным и может быть применен с одинаковым успехом как для абзацев, так и для заголовков и для остальных текстовых элементов страницы (если, конечно, речь идет о форматировании текста).

Селектор ID

Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля, обращения к нему скриптов или ссылок на элемент (см. урок по гиперссылкам).

Для назначения стиля элементу с заданным ID используется следующий синтаксис:

#идентификатор { правила форматирования }

После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов. То есть, должна соблюдаться уникальность идентификатора. Таким образом, для каждой страницы селектор ID может задавать представление единственного элемента.

Селекторы ID удобно применять в сочетании с внешними таблицами стилей, подключаемыми в большое количество страниц, составленных по одному шаблону. К примеру, у каждой страницы есть "шапка" (header), завершающая часть (foother), главное меню (main_menu) и прочие повторяющиеся элементы, уникальные для каждой страницы в отдельности.

Пример:

Листинг №9.2.3: Применение селектора ID
/* селектор в CSS */ #copyright { txt-align: center; font-size: 10pt; font-weight: bold; color: #996633; border-top: 1px dashed black; } <!-- Применение на странице --> ... <p id="copyright"> © 2005, Артемов АН. Специально для студентов "КА ШАГ". </p>
выполнить.

Селекторы по иерархии

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

При этом, не играет никакой роли, является ли элемент прямым потомком родителя или же нет. При создани контекстных селекторов, родительские селекторы перечисляются, разделяясь пробелом, от родителей к потомкам.

Ниже показан пример оформления абзаца, вложенного в ячейку таблицы:

td p { color: #660000; }

Наиболее наглядным примером применения контекстных селекторов является создание правил автоматической нумерации многоуровневых упорядоченных списков. Просматривая материал одного из предыдущих уроков можно заметить, что для многоуровневых маркированных списков существует механизм смены маркера на каждом уровне вложенности (до 3го), реализованный по умолчанию. Для упорядоченных списком такого механизма по умолчанию не существует. Именно ликвидацией этого печального факта мы с вами и займемся.

Наш подопытный список будет иметь три уровня и выглядеть примерно так:

Листинг №9.2.4 (1): Структура списка
<ol> <li>Элемент 1</li> <li>Элемент 2 <ol> <li>Элемент 2.1 <ol> <li>Элемент 2.1.1</li> <li>Элемент 2.1.2</li> <li>Элемент 2.1.3</li> </ol> </li> <li>Элемент 2.2</li> <li>Элемент 2.3</li> <li>...</li> </ol> </li> <li>...</li> </ol>

В общем и целом - вполне привычно, не так ли? А вот и таблица стилей:

Листинг №9.2.4 (2): Таблица стилей для примера со списком
/* 1й уровень / ol { list-style-type: upper-roman; } / 2й уровень / ol ol { list-style-type: decimal; } / 3й уровень */ ol ol ol { list-style-type: lower-alpha; }
выполнить.

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

Псевдоклассы

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:

селектор:псевдокласс { Правила стиля }

Существуют следующие псевдоклассы:

active - Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
link - Непосещенная ссылка.
hover - Ссылка при наведенном курсоре мыши.
visited - Посещенная ссылка.
first-letter - Определяет стиль для первого символа текстового блока.
first-line - Устанавливает стиль для первой строки текстового блока.

Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последние 2 - к любому текстовому блоку.

Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

Листинг №9.2.5: Псевдоклассы гиперссылок
/* Стилевые правила */ a.rollover { color: #660000; text-decoration: none; } a.rollover:hover { color: #FF0000; text-decoration: underline; } <!-- Применение в HTML --> ... <a class="rollover" href="#">Ссылка-ролловер</a><br /> <a href="#">Обычная гиперссылка</a> <br />
выполнить.

Группирование селекторов

Для оптимизации стилевых таблиц и сокращения набираемого кода часто можно использовать группирование селекторов, требующих применения одного и того же набора правил форматирования. Примером таких элементов могут служить элементы <b> и <strong> - оба они размечают текст полужирным шрифтом.

Допустим, вы желаете, чтобы текст, отмеченный одним (любым) из этих элементов был полужирным, темно-красным и имел подчеркивание. В этом случае вам придется воспользоваться следующим набором правил:

b { color: #660000; text-decoration: underline; } strong { color: #660000; text-decoration: underline; }

Или воспользоваться группированием и записать предыдущие стили в более компактной форме:

b, strong { color: #660000; text-decoration: underline; }

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

Группирование селекторов можно применить и в таком контексте: допустим, необходимо задать заголовкам всех уровней одинаковые свойства font-family, text-align и color и сделать их отличающимися только размерами текста:

/* Общие свойства */ h1, h2, h3, h4, h5, h6 { font-family: Tahoma; text-align: Center; color: navy; } /* Индивидуальные свойства */ h1 { font-size: 18pt; } h2 { font-size: 16pt; } h3 { font-size: 14pt; } ...

доп. инфа

http://everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/

хабрахабр

habrahabr.ru