Текст
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
| font-style | normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
P {font-style: italic} |
| font-variant | normal small-caps |
Капитель (особые прописные буквы) |
P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100-900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный |
P {font-weight: bold} |
| font-size | normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Шрифт</title>
<style type="text/css">
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный текст</p>
</body>
</html>
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель точно % |
Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration |
none underline overline line-through blink |
Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста |
text-decoration: none |
| text-transform |
none capitalize uppercase lowercase |
Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные |
text-transform: capitalize |
| text-align | left right center justify |
Выравнивание текста | text-align: justify выравнивание по ширине |
| text-indent | точно % |
Отступ первой строки | text-indent:15px; text-indent:10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
| Статья опубликована: 13.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
oleg
08.07.2006
Правило: "якщо розм_р шрифта задати абсолютним значенням (тобто в пойнтах чи п_кселях) то його розм_р не можна зм_нити за допомогою меню Вид/Размер шрифта" справедливе лише для браузера Internet Explorer. Firefox а також Opera дивляться на це якось б_льш "снисходительно" _ дозволяють зм_нювати розм_р шрифта. П_д час перегляду ц_?ї статт_ спробуйте зажати клав_шу Ctrl _ прокрутити скрол_нг мишки
Розм_р шрифта буде зм_нюватись
Розм_р шрифта буде зм_нюватись
Иван
11.09.2006
oleg, в IE не будет. Скроллинг мыши при зажатом Ctrl как раз и приводит к изменению значения "Размер шрифта" меню "Вид". Проверял на специально созданной тестовой станице.
Практичный Gendo
19.09.2006
Везет же так - найти такой клад как этот сайт
Большое Спасибо создателю сайта ...
За "Разложенный по полочкам" CSS
Большое Спасибо создателю сайта ...
За "Разложенный по полочкам" CSS
dmitry
15.10.2006
Про letter-spacing и word-spacing можно еще сказать
Влад Мержевич
16.10.2006
Что еще сказать?
Максим
21.03.2007
"Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно."
FireFox (2.0.0.2), видимо, об этом не знает.
Примечание актуально для IE; NN не проверял.
FireFox (2.0.0.2), видимо, об этом не знает
.Примечание актуально для IE; NN не проверял.
Влад Мержевич
21.03.2007
Да, это замечание действительно только для браузера IE6 и младше. В IE7 шрифт можно менять через меню уже независимо от заданных размеров.
Алексей
04.04.2007
--Да, это замечание действительно только для браузера IE6 и младше. В IE7 шрифт можно менять через меню уже независимо от заданных размеров.
У меня IE7: через меню размер шрифта на этой странице меняется не весь. Комменты остаются тамими же. Видимо, у них задан абс. размер.
У меня IE7: через меню размер шрифта на этой странице меняется не весь. Комменты остаются тамими же. Видимо, у них задан абс. размер.
Lime
05.04.2007
IE7 может увеличивать заданый размер текста ?
Это что за свинство ? - автор страниц, наверное, специально задавал им размеры с какой-то целью ... и не обязательно только для "спайдера", раскрутки ради
Это что за свинство ? - автор страниц, наверное, специально задавал им размеры с какой-то целью ... и не обязательно только для "спайдера", раскрутки ради
stranger
10.04.2007
В IE7 есть два способа изменения размера текста - "классический", который не трогает абсолютные размеры, и новый, который может изменять размер в любом тексте.
Antizook
03.08.2007
Кто нть подскажет что написать в стилях для отображения одного и того же элемента, типа
image: url('img/pp.jpg'); и что при этом писать на выводе, типа <div этот image
image: url('img/pp.jpg'); и что при этом писать на выводе, типа <div этот image
Влад Мержевич
07.08.2007
Почитай про свойство background, оно поможет.
Роман
08.02.2008
text-decoration: blink;
У меня не работает - ИЕ6
У меня не работает - ИЕ6
Aggress
13.02.2008
Подскажите плиз, как записать различные стили для текста в отдельный css, и как потом названия стилей забивать в html документ?
Артур
02.04.2008
>> Роман
>> 08.02.2008
>> text-decoration: blink;
>> У меня не работает - ИЕ6
Если ты решил эту проблему - сообщи как!
Заранее благодарен!
>> 08.02.2008
>> text-decoration: blink;
>> У меня не работает - ИЕ6
Если ты решил эту проблему - сообщи как!
Заранее благодарен!
Nikita
14.05.2008
А можно и стоит ли, при помощи css вставить на сайт свой шрифт?
FXIX
15.05.2008
Aggress Подскажите плиз, как записать различные стили для текста в отдельный css, и как потом названия стилей забивать в html документ?
Создаешь стилевый классы для текста:
.class1 {фонт\размер\цвет\гарнитура итд итп}
.class1 {фонт\размер\цвет\гарнитура итд итп}
.class1 {фонт\размер\цвет\гарнитура итд итп}
И потом в html документе подключаешь их, типа <p class="class1">бла бла бла</p>
Создаешь стилевый классы для текста:
.class1 {фонт\размер\цвет\гарнитура итд итп}
.class1 {фонт\размер\цвет\гарнитура итд итп}
.class1 {фонт\размер\цвет\гарнитура итд итп}
И потом в html документе подключаешь их, типа <p class="class1">бла бла бла</p>