- •1 Подключение таблиц стилей
- •1.1 Встроенные стили
- •1.2 Глобальные таблицы стилей
- •1.3 Внешние таблицы стилей
- •2 Свойства каскадных таблиц стилей
- •2.1 Свойства шрифтов
- •2.2 Управление фоном и передним планом
- •2.3 Форматирование текста
- •2.4 Свойства блоков с обрамлением
- •2.5 Свойства списков
- •2.6 Позиционирование блоков. Слои
- •2.6.1 Координаты и размеры
- •2.6.2 Управление видимостью
1.2 Глобальные таблицы стилей
Если одинаковые стили используются в файле в нескольких местах, то удобнее использовать глобальные стили. В этом случае они располагаются в специальном элементе HTML <style>. Элемент представляет контейнер, который размещается в разделе заголовков <head>. Поскольку ранние версии браузеров могут не поддерживать стили, то рекомендуется скрывать содержимое <style> в комментариях. Например:
<style type-"text/css">
<!-- описание стиля -->
</style>
Описание стиля производится следующим образом:
selector_1 {свойство_стиля: значение; свойство_стиля: значение; ...}
selector_2 {свойство_стиля: значение; свойство_стиля: значение; ...} и т.д.,
где селектор (selector) указывает на элемент или группу элементов, к которым применяется задаваемое правило. Само правило размещается в фигурных скобках, причем до двоеточия располагается свойство, после - его значение.
Преимущества глобальных стилей проявляются при применении правила к группе элементов. Например, если правило надо применить ко всем параграфам, то оно запишется так:
р{ font: 'Times New Roman' 12pt italic 400;}
Если таким же образом оформлять и другие элементы, то их наименование в разделе селектора достаточно указать через запятую, а не записывать одно и то же правило для каждого элемента:
р, div, h1, a{ font: 'Times New Roman' 12pt italic 400;}
Селектор работает с понятием class. Такой атрибут имеется практически у всех элементов HTML. Класс элементов может выделять подмножество как одноименных, так и различных элементов, которые будут иметь одинаковые способы форматирования.
Описание класса задается в виде имени класса после точки, затем следует стандартное правило форматирования, заключенное в {...}.
Например:
p.myFont { font: 'Times New Roman' 12pt italic 400;}
В этом примере задан класс элементов <р>, называемый myFont, Такое правило применяется к элементам <р>, но не ко всем, а толь ко к тем из них, у которых указан соответствующий атрибут class.
Например:
<р class="myFonf">тeкст абзаца</р>
CSS позволяет задавать обобщенный класс, к которому можно присоединить любой элемент указанием соответствующего атрибута class="myFont" в теге элемента.
Например, можно использовать класс
.myFont { font: 'Times New Roman' 12pt italic 400;}
в нескольких элементах:
<h4 class="myFont">...</h4>
<p class="myFont">...</p>
К элементам, определенным без класса "myFont", вышеописанное правило применяться не будет.
В отличие от классов псевдоклассы определяют форматирование элемента не только в зависимости от его имени и положении в структуре страницы, но и от наличия некоторых определенных внешних условий.
В настоящее время псевдоклассы чаще всего и активно используются для выделения ссылок. Одни и те же ссылки в зависимости от условий (ссылка уже просматривалась ранее, на ссылку попал курсор и т.п.) могут отображаться по-разному. Имя псевдокласса в селекторе ставится после двоеточия.
a:link { color:blue } - непосещенные ссылки (браузер определяет, посещалась ли ссылка реньше, на основании списка предыстории). Чаще всего ссылки отличаются цветом.
a:visited { правило стиля } -посещенные;
a:active { правило стиля } - активные, определяет, как должна отображаться выбранная ссылка (ссылка считается выбранной до отпускания кнопки мыши).
a:hover { правило стиля } - ссылки, на которых находится курсор мыши (поддерживается только Internet Explorer).
Эти псевдокласссы относятся только к ссылкам, поэтому имя элемента a может быть опущено. Например, допустимо:
:hover { правило стиля }
Псевдоклассы могут объединяться с другими селекторами. Например, следующее правило применяется только к выбранной ссылке и только в том случае, если она входит в состав элемента указанного класса:
.bizarre :active { font-size: 300% }