Динамический HTML (каскадные листы стилей и др.)

Каскадные таблицы стилей (Cascade Style Sheets – CSS)

Каскадные таблицы стилей предоставляют

Правило каскадных таблиц стилей

Любое правило каскадных таблиц стилей состоит из двух

Синтаксис правил каскадных таблиц стилей не чувствителен к регистру (селекторы, свойства

Встраивание таблиц стилей в документ

Связывание
Таблица стилей храниться в отдельном файле
Присоединяется с

Внедрение
Таблица стилей задаётся в стилевом блоке в разделе HEAD
Используется тэг

Импортирование
В тэге
Встраивание в тэги документа
Каждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей
<Н1 STYLE= "color: red">
3аголовок отображается красным цветом

Группирование

Для уменьшения размеров таблиц стилей можно группировать разные элементы страницы HTML

Можно группировать свойства элемента
H1 {font-weight: bold}
H1 {font-size: 14pt}
H1 {font-family:

Селекторы

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

Использование классов

В тексте документа ссылка на соответствующий класс задаётся в параметре

Если класс должен применяться ко всем элементам документа, то в селекторе

В качестве селектора можно использовать уникальное идентификационное имя элемента, предваряя его

Свойства форматирования элементов

В каскадных таблицах стилей все доступные свойства форматирования элементов

Единицы измерения, используемые для задания значений свойств

Шрифты

Шрифты различаются по
внешнему виду (начертанию)
размеру
стилю (прямой, курсив или наклонный)
"жирности" отображения (нормальный,

Определение шрифта

Свойство font-family задаёт приоритетный список шрифтов
body {font-family: Impact, "Times New

Стиль шрифта

Свойство font-style определяет стиль шрифта
normal
italic
oblique
font-variant - шрифт капитель (small-caps)
H1 {font-style:

Жирность шрифта

Свойство font-weight выбирает из заданного семейства шрифт определённой жирности
Числовые значения

Размер шрифта

Свойство font-size определяет размер шрифта
line-height - высота строки

Абсолютное значение

ключевые слова:

Для сочетания всех возможных стилей для шрифта используется свойство font
Все значения

Текст 1

Цвет и фон

цвет элемента
фон элемента
цвет
изображение
положение
повторение
фиксация

Цвет элемента

color - цвет текста элемента






Текст 1

Текст 2

Фон

background-color – цвет фона (начальное значение transparent - прозрачный)
background-image – фоновое

background-position – начальное положение фонового изображения
ключевые значения: left, right, center, top

Форматирование текста

Позволяет определить
расстояние между словами
расстояние между буквами в словах
отступы и высота

word-spacing влияет на расстояние между словами
letter-spacing влияет на расстояние между символами
line-height

text-decoration - задаёт подчеркивание, надчеркивание или перечеркивание текста
underline – подчеркивание
overline –

vertical-align – положение элемента по вертикали относительно элемента-родителя
baseline – выравнивание базовой

Пример

текст1

текст2

текст3