- •Синтаксис таблиц стилей
- •Внутренние стили тегов.
- •Стили уровня документа.
- •6.2 Общие классы.
- •6.3 Псевдоклассы стилей
- •7. Наследование классов
- •7.1 Наследование свойств.
- •8. Свойства стилей
- •8.2 Обрамление элементов
- •8.4 Свойства шрифта текста.
- •8.5 Свойства текстов.
- •8.6 Свойства полосы прокрутки.
6.2 Общие классы.
Можно определить класс стиля, не связывая его с конкретным тегом, а затем применять его к различным тегам. Для этого через точку определяем название класса.
.italic {font-style:italic;font-color:skyblue}
Создан класс с именем italic. Для его применения нужно обратиться к нему через имя
<P class=italic>……</P>
<Table class=italic>…….</table>
<H1 class=italic>……</H1>
Почти все браузеры понимают атрибут id, присваивающий элементу уникальный идентификатор. Для создания класса стиля, который можно применить с атрибутом id, используется такой же синтаксис, как обычно, но перед именем класса вместо точки используется #
<style>
#qwerty {color:yellow}
H1#arial {color:red;font-family:arial}
</style>
Для создания в документах заголовках можно использовать <H1 id=arial> или добавлять id=qwerty почти к любому тегу.
6.3 Псевдоклассы стилей
Псевдоклассы позволяют задавать стиль вывода для некоторых состояния тегов. Псевдоклассы аналогичны обычным классам, но имеют 2 отличия: они соединяются с именем тега не точкой, а двоеточием; имеют предустановленные имена. (пользователь не может устанавливать имена сам)
Есть 6 псевдоклассов, четыре из которых связаны с тегом <A> два оставшихся можно использовать с любым текстовым элементом.
Браузеры различают 4 состояния ссылок: посещались, не посещались, посещается в данный момент, наведен курсор. С помощью псевдоклассов мы можем управлять тем, как отображаются эти состояния.
A:link{color:green}
A:active {color:gold}
A:visited {color:blue;font-weight:bold}
A:hover {color:black}
Два других псевдокласса называются first-letter и first-line. Эти классы определяют вид первой буквы (буквицы) и красной строки абзаца. Через эти классы можно создать эффекты, присущие печатным документам.
P:first-line {font-style:underline}
P:first-letter {font-size:200;font-color:silver}
7. Наследование классов
Классы наследуют свойства стиля своего родового базового тега. Например: все свойства простого тега<P> применяются к специально определенному классу абзаца, если только какое либо из свойств не переопределяются классом.
Классы не могут наследовать другим классам, а только бесклассовой версии тега, который они представляют. Поэтому следует помещать как можно больше общих стилей в правило для базовой версии тега и создавать классы только для тех свойств, которые уникальны для данного класса.
7.1 Наследование свойств.
Вместо того чтобы использовать особые правила для каждого тега, свойства и их значения для отдельных тегов внутри тегов наследуются от родительского тега. Установка некоторых свойств <body> влечет применение данного свойства ко всем тегам в теле документа
Body {color:darkblue}
Достаточно для того, чтобы текст выводился голубым и не нужно это определять отдельно для каждого тега. Наследование распространяется на все уровни документа. Если нужно другое выделение его делают либо указанием нового стиля в тегах, либо создавая контейнер <div> с другим базовым оформлением.