Урок 5: Текст - Уроки CSS - Каталог статей - Учебник-основы HTML
Понедельник, 26.12.2011, 10:22:03
Главная Регистрация RSS
Приветствую Вас, Прохожий
Меню сайта
Категории раздела
Наш опрос
Оцените мой сайт
Всего ответов: 52
Мини-чат
 
200
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Поиск
Главная » Статьи » Уроки CSS

Урок 5: Текст

Урок 5: Текст

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:


p {
text-indent: 30px;
}

Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:


th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.


h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:


h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize
Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase
Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none
Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.


h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

Резюме

В течение трёх последних уроков вы вы изучили несколько CSS-свойств, но их  - множество. В следующем уроке мы рассмотрим работу со ссылками.

Категория: Уроки CSS | Добавил: Timon-shymerlya (08.04.2010)
Просмотров: 313 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email:
Код *: