p {background: blue url(“*.gif”) center}
2.7 Шрифты
Красивое оформление Web-страницы связано с удачным выбором шрифтов и их параметров. В этом разделе даны основные свойства для работы со шрифтами.
font-family
Указывает список семейств или названий шрифтов. Браузер будет последовательно перебирать семейства списка, пока не обнаружит имеющийся на компьютере пользователя шрифт. Имена шрифтов, которые состоят из нескольких слов, должны заключаться в кавычки.
Пример:
body {font-family: “Times New Roman”, serif}
font-style
Определяет начертание шрифта. По умолчанию шрифт имеет нормальное прямое начертание. Значениями свойства могут быть:
italic – курсивное начертание шрифта;
oblique – наклонное начертание шрифта;
normal – нормальное прямое начертание шрифта.
Пример:
p {font-style: italic}
font-variant
Задает вариант начертания шрифта, который позволяет представить строчные буквы как прописные, но с меньшими размерами. По умолчанию вид шрифта не изменяется. Значениями свойства могут быть:
small-caps – строчные буквы будут выглядеть как прописные, но с меньшими размерами;
normal – вид шрифта изменяться не будет.
Пример:
p {font-variant: small-caps}
font-weight
Указывает степень жирности шрифта. Используется 9 градаций жирности шрифта от 100 до 900. Значение 100 соответствует наиболее бледному шрифту, 900 – самому жирному. По умолчанию степень жирности шрифта равна 400. Значениями свойства могут быть:
численное значение степени жирности шрифта;
bolder – степень жирности шрифта равна 900;
bold – степень жирности шрифта равна 700;
normal – степень жирности шрифта равна 400;
lighter – степень жирности шрифта равна 100.
Пример:
p {font-weight: bold}
font-size
Определяет размер шрифта. По умолчанию шрифт имеет размер 12 пунктов. Значениями свойства могут быть:
численное значение размера шрифта в единицах длины или процентах;
medium – размер шрифта равен 12 пунктов;
large – размер шрифта равен 14,4 пункта;
x-large – размер шрифта равен 17,28 пункта;
xx-large – размер шрифта равен 20,74 пункта;
small – размер шрифта равен 10 пунктов;
x-small – размер шрифта равен 8,33 пункта;
xx-small – размер шрифта равен 6,94 пункта.
Пример:
p {font-size: large}
font
Одновременно устанавливает свойства font-style, font-variant, font-weight, font-size, line-height (см. описание данного свойства в разделе «Представление текста») и font-family.
Пример:
p {font: italic small-caps bold large}
@font-face
Указывает список семейств или названий шрифтов, а также электронный адрес, по которому будут загружаться шрифты, если их нет на компьютере пользователя.
Пример:
body {@font-face: Myfont; src: url(“http://www. firm. ru/Myfont. eot”)}
2.8 Представление текста
Форматирование текста играет особую роль при создании сайта. В этом разделе даны основные свойства, необходимые для представления текста.
text-indent
Определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0.
Пример:
p {text-indent: 3em}
text-align
Выравнивает текст в блоке содержимого элемента. Значениями свойства могут быть:
left – текст выравнивается по левому краю;
right – текст выравнивается по правому краю;
center – текст выравнивается по центру;
justify – текст выравнивается по обоим краям.
Пример:
p {text-align: justify}
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}
2.9 Таблицы
Свойства, необходимые для работы с таблицами.
caption-side
Указывает положение табличного заголовка относительно таблицы. По умолчанию заголовок отображается сверху таблицы. Значениями свойства могут быть:
left – заголовок расположен слева от таблицы;
right – заголовок отображается справа от таблицы;
top – заголовок расположен сверху таблицы;
bottom – заголовок отображается снизу таблицы.
Пример:
caption {caption-side: bottom}
table-layout
Определяет алгоритм, который используется для размещения ячеек, столбцов и рядов таблицы. По умолчанию применяется автоматический алгоритм раскладки таблицы. Значениями свойства могут быть:
fixed – фиксированный алгоритм раскладки таблицы. В этом алгоритме горизонтальная раскладка таблицы не зависит от ее содержимого, а определяется шириной столбцов, границ и отступов в ячейках;
auto – автоматический алгоритм раскладки таблицы, которая задается размерами содержимого ячеек.
empty-cells
Указывает, отображаются ли рамки вокруг пустых ячеек. По умолчанию рамки выводятся вокруг пустых ячеек. Значениями свойства могут быть:
hide – рамки не отображаются вокруг пустых ячеек;
show – рамки выводятся вокруг пустых ячеек.
Пример:
table {empty-cells: hide}
border-collapse
Определяет модель рамки таблицы. По умолчанию рамка является общей для всех ячеек таблицы. Значениями свойства могут быть:
separate – каждая ячейка таблицы обладает собственной рамкой;
collapse – рамка является общей для всех ячеек таблицы.
Пример:
table {border-collapse: separate}
border-spacing
Задает расстояние между рамками смежных ячеек таблицы в случае индивидуальных рамок в ячейках. По умолчанию интервал между рамками равен 0. Если указано одно значение, то оно применяется к горизонтальному и вертикальному расстояниям. Если заданы два значения, то первое устанавливает горизонтальный интервал, а второе – вертикальное расстояние.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 |
