- •Css: Базовые понятия.
- •Id в качестве селектора
- •Css: Каскадирование.
- •Модульная структура
- •Баланс автор/читатель
- •Определение веса определений 'important'
- •Порядок каскадирования
- •Единицы измерения, используемы в таблице стилей.
- •Свойства шрифта.
- •Задание семейства шрифта ('font-family').
- •Задание начертания шрифта ('font-style')
- •Задание варианта шрифта ('font-variant').
- •Задание веса шрифта ('font-weight')
- •Задание размера шрифта ('font-size').
- •Задание шрифта в целом ('font')
- •Css: свойства цвета и фона.
- •Определение цвета ('color')
- •Определение цвета обоев ('background-color').
- •Определение рисунка фона ('background-image').
- •Определение повтора рисунка фона ('background-repeat').
- •Определение привязки фона ('background-attachment').
- •Определение положения фона ('background-position')
- •Определение свойств фона в целом ('background')
- •Css: свойства текста. Установка интервалов ('word-spacing')
- •Установка трекинга1 ('letter-spacing')
- •Установка оформления текста ('text-decoration')
- •Установка вертикального выравнивания текста ('vertical-align').
- •Установка преобразования текста ('text-transform')
- •Установка выравнивания текста ('text-align')
- •Установка абзацного отступа ('text-indent')
- •Установка высоты строки ('line-height').
Css: Базовые понятия.
Базовые понятия.
Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например, для определения цвета элементов 'H1' как синий, достаточно сказать:
H1 {color: blue}
Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ('H1') и определения ('color: blue'). Определение в свою очередь тоже состоит из двух частей: свойства ('color') и значения ('blue'). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.
Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML, т.е. все тэги, которые вы изучали в курсе HTML, могут являться селекторами таблиц стилей.
Свойство 'color' является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений мы с Вами изучим в данном курсе.
Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для всех своих документов и при этом сократить написанный код. Каждый User Agent (UA), он же броузер, должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде.
Включение в HTML
Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML определяет способы включения таблиц стилей в HTML.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://server.odessa.ua/html.css" TITLE="HTML">
<STYLE TYPE="text/css">
@import url(http://server.odessa.ua/test.css);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY STYLE=”background-color: yellow”>
<H1>Headline is blue</H1>
<P STYLE="color: green">Текст этого абзаца зеленый.
</BODY>
</HTML>
Данный пример демонстрирует четыре способа объединения стиля с HTML:
Используя элемент 'LINK' для связи с внешней таблицей стилей. Таблица стилей закачивается с сервера и хранится на диске клиента, что ускоряет обращение к ней при просмотре других страниц того же сайта.
Используя элемент 'STYLE' внутри элемента 'HEAD', импортируя таблицу стилей с помощью нотации CSS '@import'. При этом таблица стилей как бы встраивается в документ, передаваемый с сервера.
Используя атрибут 'STYLE' в элементе внутри тэга 'BODY'.
Последний способ – атрибут 'STYLE' внутри тэга 'P', смешивает стиль с содержимым и поэтому теряет соответствующие достоинства традиционных таблиц стилей.
Элемент 'LINK' ссылается на внешнюю таблицу стилей, которую может выбрать разработчик, в то время как импортируемые таблицы стилей автоматически объединяются с остальной частью таблицы стилей.
Традиционно UA игнорировали неизвестные теги. Как результат старые UA будут игнорировать элемент 'STYLE', но его содержимое будет считаться, как часть тела документа и будет отображаться в документе. В течение переходного периода содержимое элемента 'STYLE' можно "прятать", используя комментарии:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Таким образом, даже если пользователь и будет использовать старые броузеры, то тэг 'STYLE' будет проигнорирован, а все содержимое таблицы будет воспринято как комментарий и не помешает пользователю просматривать страницу.
Группирование
Группирование - достаточно удобный инструмент таблиц стилей. Применяется он в тех случаях когда необходимо указать одни и те же определения для различных селекторов. Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки:
H1, H2, H3 { font-family: helvetica }
Точно также можно группировать определения:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
В дополнение к этому некоторые свойства имеют собственный синтаксис группировки:
H1 { font: bold 12pt/14pt helvetica }
что эквивалентно предыдущему примеру, но об этом мы поговорим позже.
Наследование
В первом примере цвет элементов 'H1' был установлен в синий. Представьте, что есть элемент 'H1' с элементом <EM> внутри:
<H1>Эта строка <EM>очень</EM> важна!</H1>
Если для элемента 'EM' не было определено никакого цвета, то Emированный "очень" унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например 'font-family' и 'font-size'.
Некоторые свойства стилей не наследуются от родительских элементов дочерними элементами. В большинстве случаев интуитивно понятно в каких случаях возникает такая ситуация. Например свойство 'background' не наследуется, но фон родительского элемента по умолчанию будет просвечивать сквозь прозрачный фон дочернего элемента.
Часто значение свойства указывается в процентах от другого свойства:
P { font-size: 10pt }
P { line-height: 120% } /* относительно от 'font-size', т.е. 12pt */
Для любого свойства, значения которого могут указываться в процентах, определено свойство на которое оно ссылается. Дочерние элементы 'P' унаследуют вычисленное а не процентное значение 'line-height' (12pt).
Класс в качестве селектора
Для увеличения гибкости контроля над элементами, в HTML, практически к каждому тэгу, добавлен новый атрибут 'CLASS'. Все элементы внутри элемента 'BODY' могут быть классифицированы, а на класс можно сослаться через таблицу стилей:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Очень зеленый</H1>
</BODY>
</HTML>
К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа.
Можно адресовать все элементы одного класса, опустив имя тэга в селекторе:
.pastoral { color: green } /* все элементы класса pastoral */
Для каждого селектора можно определить только один класс. 'P.pastoral.marine' таким образом, является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут определять один класс для одного простого селектора).
CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура основанная на классах имеет узкое применение только в тех случаях, когда значения классов оговорены с обеих сторон.