CSS текст и примеры его форматирования

CSS шрифт, стиль и размер шрифта

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

· Georgia, Times New Roman, serif

· Arial, Helvetica, sans-serif

· Courier New, Courier, monospace

· Verdana, Geneva, sans-serif

· Times New Roman, Times, serif

CSS виды и семейства шрифтов:

font-family:	Pезультат
Verdana, Geneva, sans-serif	Семейство шрифтов без засечек
Arial, Helvetica, sans-serif	Семейство шрифтов без засечек
'Times New Roman', Times, serif	Семейство шрифтов с засечками
'Courier New', Courier, monospace	Семейство моноширинных шрифтов

Еще пример форматирования:

<title>CSS шрифты и примеры их форматирования</title> <style type="text/css"> p { font-family:'Times New Roman', Times, serif; font-weight:bold; font-size:18px; font-style:italic } </style> </head> <body> <div>Обычный текст</div> <p> Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman </p> </body>

Результат: стиль шрифта, определенный с помощью CSS

В примере выше стилевые описания распространяются на параграфы данного документа. Атрибутfont-family: содержит три различных шрифта, одного семейства (с засечками). Указывать их можно в различном порядке, но будет применен первый или второй если браузер не сможет найти на компьютере пользователя установленный первый шрифт, или третий, если программа браузера не прочтет первые два. При написании кода, название, состоящее из нескольких слов выделяется кавычками, например, 'Times New Roman'.

Для web-сайтов рекомендуется применять шрифты без засечек, чтобы не затруднять чтение текста.

Шриф sans-serif является представителем семейства шрифтов без засечек. К нему относятсяVerdana, Geneva и другие. Если прописать код: font-family: sans-serif — программа браузера выберет на компьютере пользователя один из шрифтов без засечек, например, Verdana. Если обозначить: font-family: serif — будет выбран шрифт семейства с засечками, например, Times. CSS aтрибут со значением font-family: monospace — установит моноширинный шрифт, к примеру, Courier New.

CSS aтрибут font-family: определит, выбранный вами, вид шрифта. Можно установить свой шрифт, но нет ни какой гарантии, что он будет присутствовать на компьютере пользователя. Если его там не окажется, программа браузера не сможет правильно интерпретировать, указанный вами, шриф.

CSS наклонный и жирный шрифт

Определим наклонный шрифт:

CSS атрибут со значением style="font-style:italic" определяет наклонный шрифт.

Определим жирный шрифт:

CSS ключение style="font-weight:bold" определяет жирный шрифт.

Определим нормальный объем шрифта:

Строчка style="font-weight:300" преобразует жирный шрифт в обычный.

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

Пример с изменением размера:

<head> <style type="text/css"> p {font-size:13px} p.big {font-size:16px} </style> </head> <p>Текстовая строка размером 13 пикселей.</p> <p class="big">Текстовая строка размером 16 пикселей.</p>

Результат:

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

CSS текст, примеры форматирования текста

CSS текст и примеры его форматирования

Атрибут со значением	Полученный результат
font-family:Tahoma, sans-serif	CSS текст – форматирование
font-size:15px	CSS текст – форматирование
font-style:italic	CSS текст – форматирование
font-variant:small-caps	CSS текст – форматирование
font-weight:bold	CSS текст – форматирование
letter-spacing:2px	CSS текст – форматирование
word-spacing:7px	CSS текст – форматирование
color:#cc0033	CSS текст – форматирование
text-indent:40px	CSS текст – форматирование
text-decoration:underline	CSS текст – форматирование
text-decoration:overline	CSS текст – форматирование
text-decoration:line-through	~~CSS текст – форматирование~~
text-transform:capitalize	CSS Текст – Форматирование
text-transform:lowercase	css текст – форматирование
text-transform:uppercase	CSS ТЕКСТ – ФОРМАТИРОВАНИЕ
vertical-align:super	CSS текст – форматирование^text
vertical-align:sub	CSS текст – форматирование_text

Атрибуты и значения

· font-family:Tahoma, sans-serif – определяет вид и семейство шрифта.

· font-size:13px – устанавливает размер шрифта в пикселях или процентах.

· font-style:italic – преобразует текст в наклонный (еще его называю курсивным).

· font-variant:small-caps – капитель – большие буквы маленького размера.

· font-weight:bold – определяет жирный текст.

· letter-spacing:2px – дополнительное расстояние между символами в пикселях.

· word-spacing:7px – создает дополнительное расстояние между словами в пикселях.

· color:#cc0033 – определяет цвет текста.

· text-indent:40px – устанавливает отступ строки в пикселях или процентах.

· text-decoration:underline – выводитподчеркнутыйтекст.

· text-decoration:overline – выводитнадчеркнутыйтекст.

· text-decoration:line-through – выводитперечеркнутыйтекст.

· text-transform:capitalize – отображает каждое слово с заглавной буквы.

· text-transform:lowercase – преобразует все буквы в маленькие.

· text-transform:uppercase – преобразует все буквы в заглавные.

· vertical-align:super – отображает текст в верхнем индексе.

· vertical-align:sub – отображает текст в нижнем индексе.