 |
 |
 |
|
|
||
 |
|
|
|
|
|
||
|
Эти 3 урока - самые большие и сложные за курс XHTML+CSS. На этом уроке мы рассмотрим стили для текста.
Мы изучили только структуру стилевых таблиц. Мы еще не изучали систематически комманды языка CSS. В CSS команды пишутся так: команда:значение, команда:значение1, значение2, значение3,... или команда:значение1 значение2 значение3... .
Шрифт изменяется командой font-family. Значением команды может быть один или несколько названий шрифтов, перечисляемых через запятую. Браузер попытается вывести текст указанным шрифтом, если он не сможет, он возьмет следующий шрифт, написанный Вами, если он не поддерживает ни один из шрифтов, он отобразит текст стандартным шрифтом. Пример:
<span style="font-family:Arial">Arial</span>
<span style="font-family:'Times New Roman'">Times New Roman</span>
<span style="font-family:GothicE">GothicE</span>
<span style="font-family:GothicG, Arial">Arial</span>
<span style="font-family:'Comic Sans MS'">Comic Sans MS</span>
Arial
Times New Roman
GothicE
GothicG, cursive
Comic Sans MS
Обратим внимание на то, что браузер(к сожалению) не смог воспроизвести красивые декоративные шрифты GothicE и GothicG. Первый он заменил шрифтом по умолчанию (Arial или Times New Roman), второй заменил тем шрифтом, который мы указали вместо главного, т.е. cursive.
Обратим внимание и на то, что мы взяли Times New Roman и Comic Sans MS в теге стиля в одинарные кавычки(на самом деле здесь не имеет значение какие кавычки, нужно лишь чтобы они отличались от кавычек атрибута style). Если в названии шрифта более одного слова, оно берется в кавычки. Это правило только для команды font-family.
И последнее. Вы заметили, что браузер отобразил шрифты cursive и Comic Sans MS одинаково. Это произошло из-за того, что большинство шрифтов родственны, и выглядят одинаково. Также, в каждый браузер встроенно 5 шрифтов. Это: serif(аналог Times New Roman), sans-serif(аналог Arial), cursive(аналог Comic Sans Ms), fantasy(Broadway - только для английских букв), monoscape(аналог Courier New - моноширинный текст).
За размер шрифта отвечает команда font-size.
font-size определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в таблице.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large |
|---|---|---|---|---|---|---|---|
| HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пиксели (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
Команда font-style позволяет наклонить текст(oblique), выделить его курсивом(italic) или оставить в обычном состоянии(normal). Наклон и курсив - разные вещи, в первом случае текст просто искажается в сторону, во втором - пишется рукописным шрифтом.
Например, мы хотим сделать так, чтобы тег em писал текст наклонным шрифтом. Тогда добавим в вынесенную таблицу стилей:
em
{font-style:oblique}
Вот и все!
font-weight управляет плотностью или толщиной текста. Имеет 4 основных параметра (остальные практически не используются):
Mini-caps - написание текста так, что строчные буквы переводятся в заглавные, размер которых меньше, чем обычные заглавные буквы. За Mini-caps отвечает команда font-variant, принимающая значение small-caps или normal.
Команда font может указать все стили шрифта, разделенные пробелами в следующем порядке: [font-style][,font-variant][, font-weight][, font-size][, font-family]. Обратите внимание! В дальнейшем, написание атрибутов, значений в квадратных скобках указывет на их необязательность. Эта форма записи принята среди всех программистов.(Причем запятые должны стоять именно так).
Пример:
font: italic 12px Arial,serif
В этой главе рассматриваются такие вещи, как расстояние между словами, строками и т.п. Глава необязательна, но ее можно прочитать. В отличие от главы "Офомление шрифта", то, что описано здесь, не может быть повторено тегами или атрибутами. Это прерогатива только CSS.
Кернинг - расстояние между буквами в слове. Команда CSS - letter-spacing, принимающая либо значения типа 10px, 1em и т.п. либо normal (по умолчанию).
Интервалы между словами задаются командой word-spacing. Помимо обычных значений, как у letter-spacing, word-spacing может принимать отрицательные значения, тогда слова могут накладываться друг на друга.
line-height определяет межстрочный интервал. Может иметь несколько видов значений:
text-transform - эта команда полезна для работы с динамическим текстом(скрипты). Она показывает, как будут написаны слова на экране - прописными или строчными буквами.
text-transform может принимать такие значения:
text-align - одна из самых часто используемых функций. Она выравнивает текст на странице таким образом:
vertical-align - эта команда работает только с тегами, не размечающими страницу, но между которыми помещается текст. Пример: <em>, <strong>, <a> и т.п.
vertical-align может принимать три значения: super (надстрочный шрифт), sub (подстрочный шрифт), baseline (стандартное значение).
Уже знакомая нам команда text-indent определяет отступ первой строки. Только для тегов разметки. Ее значение - цифра с мерой длины (px, em и т.п.).
Мы можем вставлять лишние пробелы, но браузер урежет их. Избежать этого поможет команда white-space. Только для тегов разметки(таблицы, абзацы и т.п.).
Принимает такие значения:
text-decoration определяет способ подчеркивания текста. Принимает такие значения:
Вы можете использовать несколько значений одновременно, они разделяются пробелом. Среди них не должно быть none. Пример:
<span style="text-decoration:overline underline"></span>
page-break-before - мощный инструмент, позволяющий Вам задать место, где браузер при печати будет переносить страницу. Тогда не возникнет непредвиденных ситуаций, когда на одном листе распечатается название(логотип), а на других - текст.
Для чего это нужно? Допустим, что Ваша страница состоит из минитем с заголовками(как здесь). Тогда вы можете вставлять атрибут style="page-break-before:always" в теги заголовка и страница будет автоматически разрываться при печати. Это единственное свойство, которое не может быть вынесено в отдельный css файл.
Вы уже познали мощь таблиц стилей? Теперь украсим текст!
uroki.webservis.ru