Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты



Документация - Главная
- Macromedia Dreamweaver
- CSS
- Раскрутка
- PHP
- SQL
- Дизайн [1 2]
- Java
- Разное

главная > статьи >

Основы CSS - Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег FONT, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

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

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в таблице 1.

Таблица 1. Атрибуты CSS для управления шрифтами

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

4+
4+
4+
4+

4+
4+
4+
4+

нормальный размер
пункты
пикселы
проценты

font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

NC — Netscape Communicator, IE — Microsoft Internet Explorer; 4+ означает, что свойство поддерживается в браузере 4 версии и выше. 4W — работает только под Windows.

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

Пример 1. Задание свойств шрифта с помощью CSS
<html>
<head>
<style>
H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light }
</style>
</head>
<body>
<H1>Заголовок</H1>
Обычный текст
</body>
</html>

Ниже приведен результат примера 1.

Заголовок

Обычный текст

В таблице 2 даны некоторые параметры и результат их применения.

Таблица 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.

Таблица 3. Свойства CSS для управления видом текста

Свойство Значение NC IE Описание Пример
line-height normal
множитель
точно
%
4W
4+
4+
4+
4+
4+
4+
4+
Интерлиньяж (межстрочный интервал) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration
none
underline
overline
line-through
blink
4+
4+
 
4+
4+
4+
4+
4W
4+
 
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: none
text-transform
none
capitalize
uppercase
lowercase
4+
4+
4+
4+
4W
4W
4W
4W
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: capitalize
text-align left
right
center
justify
4+
4+
4+
4+
4+
4+
4+
4W
Выравнивание текста text-align: justify
выравнивание по ширине
text-indent точно
%
4+
4+
4+
4+
Отступ первой строки text-indent:15px;
text-indent:10%

NC — Netscape Communicator, IE — Microsoft Internet Explorer; 4+ означает, что свойство поддерживается в браузере 4 версии и выше. 4W — работает только под Windows.

Ниже, в таблице 4 приведены некоторые параметры текста и результат их применения.

Пример 4. Результат использования различных параметров текста

Пример: и это все о нем Пример: текст по центру Пример: Это не ссылка, а просто текст Пример: отступ первой строки Пример: полуторный межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5

Автор: Влад Мержевич

главная > статьи >

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru