- •Анна ивановна таранухина основы web-дизайна
- •Оглавление
- •Введение
- •Модуль 1
- •Содержание модуля 1
- •1. Теория html
- •1.1 Основные понятия
- •1.2 Ссылки
- •1.3 Списки
- •1.4 Таблицы
- •1.5 Графика
- •1.6 Фреймы
- •Проектное задание
- •Содержание модуля 2
- •2. Теория css
- •2.1 Встраивание таблиц стилей в документ
- •2.2 Блоковые элементы
- •2.3 Визуальное форматирование
- •2.4 Визуальные эффекты
- •Visibility
- •2.5 Автоматическая нумерация и списки
- •2.6 Цвет и фон
- •2.7 Шрифты
- •2.8 Представление текста
- •Vertical-align
- •2.9 Таблицы
- •Проектное задание
- •Приложение 2 Специальные символы
- •Приложение 3
- •Основная литература
- •Дополнительная литература
Vertical-align
Определяет вертикальное положение блока. По умолчанию базовая линия блока выравнивается по базовой линии родительского блока. Значениями свойства могут быть:
величина смещения блока по вертикали в единицах длины или процентах;
baseline – базовая линия блока выравнивается по базовой линии родительского блока;
middle – средняя точка блока выравнивается на уровне базовой линии родительского блока в сумме с половиной ширины родительского блок;
sub – базовая линии блока смещается вниз для представления нижних индексов;
super – базовая линии блока смещается вверх для представления верхних индексов;
text-top – верхняя граница блока выравнивается с верхом шрифта родительского элемента;
text-bottom – нижняя граница блока выравнивается с низом шрифта родительского элемента;
top – верхняя граница блока выравнивается по наиболее высокому элементу строки;
bottom – нижняя граница блока выравнивается по самому низкому элементу строки.
Пример:
p {vertical-align: middle}
line-height
Задает высоту строки.
Пример:
div {line-height: 1.2em}
text-decoration
Определяет оформление текстового элемента в виде подчеркивания, надчеркивания или перечеркивания текста. По умолчанию никакого оформления текста не производится. Значениями свойства могут быть:
underline – каждая строка текста подчеркнута;
overline – каждая строка текста обрамляется чертой над ней;
none – оформления текста не производится;
line-through – каждая строка текста отображается перечеркнутой.
Пример:
p {text-decoration: underline}
text-shadow
Указывает набор теневых эффектов, разделенных запятой, которые нужно применить к тексту элемента. По умолчанию теневые эффекты не применяются. Каждый теневой эффект должен задавать смещение тени, величину размытости или радиус пятна, а также цвет тени. Смещение тени определяется двумя величинами, указывающими отступ от текста. Первое значение задает горизонтальное смешение вправо относительно текста. Второе значение определяет вертикальное смешение вниз относительно текста.
Пример:
p {text-shadow: 3px 3px 5px red}
letter-spacing
Определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть:
normal – стандартный интервал для текущего шрифта;
величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.
Пример:
p {letter-spacing: 0.1em}
word-spacing
Указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть:
normal – стандартный интервал для текущего шрифта;
величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.
Пример:
p {word-spacing: 1em}
text-transform
Управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется. Значениями свойства могут быть:
capitalize – первая буква каждого слова преобразуется в прописную:
uppercase – все буквы преобразуются в прописные;
lowercase – все буквы преобразуются в строчные;
none – преобразования регистра не производятся.
Пример:
p {text-transform: capitalize}
white-space
Определяет форматирование пустых символов при отображении элементов. По умолчанию пустые символы исключаются по мере необходимости при заполнении строк текста. Значениями свойства могут быть:
pre – запрещает браузеру исключать пустые символы из текста;
normal – позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Дополнительные переводы строк могут вставляться в местах, обозначенных в контексте;
nowrap – позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Запрещает все переводы строк, кроме тех, что непосредственно обозначены в контексте.
Пример:
p {white-space: pre}