9.3 Форматирование текста - HTML - Каталог статей

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

Некоторые стилевые свойства, отвечающие за оформление текстовых элементов. такие как семейство и размер шрифта, жирность, выравнивание, мы с вами уже рассматривали ранее. В данном уроке будут изучены некоторые новые стилевые свойства и некоторые не рассмотренные ранее аспекты применения уже известных вам свойств. Так же мы с вами подведем некоторый итог для стилей оформления текста.

Свойства шрифта

Свойства шрифта со всеми возможными вариантами из значений и коментариями собраны в следующей таблице:

Свойство	Значения	Описание	Пример
font-family	имя шрифта	Задает список шрифтов	p {font-family: Arial, serif}
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт	a {font-style: italic}
font-weight	normal lighter bold bolder 100-900	Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный	li {font-weight: bold}
font-size	Размер шрифта normal pt px %	нормальный размер пункты пикселы проценты	font-size: normal font-size: 12pt font-size: 12px font-size: 120%
font-variant	normal small-caps	Малые прописные	p {font-variant: small-caps}

Новым свойством из перечисленных для вас будет являться только font-variant, создающий малые прописные символы - размер как у строчных, начертание как у заглавных:

Пример малых прописных символов

К сведению: когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах.

Свойства текста

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Например - выравниванием текста и отступом первой стрки для блочных элементов. Свойства оформления текста сведены в следующую таблицу:

Свойство	Значения	Описание	Пример
text-decoration	none underline overline line-through	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание	a { text-decoration: none; }
text-align	left right center justify	Выравнивание текста	p { text-align: justify; }
text-indent	точно %	Отступ первой строки	p { text-indent: 20px;}
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	span.name { text-transform: capitalize; }
line-height	normal множитель точно %	Интерлиньяж (межстрочный интервал)	p { line-height: 200% } /* двойной интервал */

Все свойства, за исключением line-height и text-transform нам уже знакомы.

Свойство line-height используется для регулировки высоты строки, и, следовательно, расстоянием между строками. Можно указать точную высоту строки в пикселях или других единицах измерения, а можно в процентах. Второй случай предпочтительнее, так как высота строки бедет замисеть от размера шрифта элемента:

В данном абзаце использеутся
двойная высота строки (200%).

Свойство text-transform используется для преобразования регистра символов. Поддерживаемые значения позволяют выполнить перевод как в верхний, так и в нижний регистр, а так же, перевести в верхний регистр только 1. буквы каждого слова. Последний способ очень хорошо использовать "для страховки" при записи составных имен собственных (ФИО или составного названия организации,города и пр.)

Пример использования значения capitalize (исходная фраза "хосе фернандо доминик гарсия рамирез."):

хосе фернандо доминик гарсия рамирез.

Пример использования значения uppercase (исходная фраза "вднх.")

вднх.

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 1348 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]