Текст - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Основы CSS » Текст
Текст
EvgenyДата: Вторник, 23.02.2010, 08:33 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег < FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

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

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
[small]Табл. 1. Атрибуты CSS для управления шрифтами[/small]
Свойство Значение Описание Пример
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 показано использование параметров при работе со шрифтами.

[small]Пример 1. Задание свойств шрифта с помощью CSS[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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)

[small]Рис. 1. Вид текста после применения стилей[/small]

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

[small]Табл. 2. Результат использования различных параметров шрифтов[/small]
Пример Пример Пример Пример Пример
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.

[small]Табл. 3. Свойства CSS для управления видом текста[/small]
Свойство Значение Описание Пример
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 приведены некоторые параметры текста и результат их применения.

[small]Табл. 4. Результат использования различных параметров текста[/small]
Пример: и это все о нем
Пример: текст по центру
Пример: Это не ссылка, а просто текст Пример: отступ
первой строки
Пример: полуторный
межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5
 
Форум » Статьи о CSS » Основы CSS » Текст
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]