Воскресенье, 17.12.2017, 07:30
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Урок 5: Текст

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

  •      text-indent
  •      text-align
  •      text-decoration
  •      letter-spacing
  •      text-transform


Отступы [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
    Капитализирует каждое слово. Например: "жанна моро" станет "Жанна Моро".

uppercase
    Конвертирует все символы в верхний регистр. Например: "
жанна моро" станет "ЖАННА МОРО".

lowercase
    Конвертирует все символы в нижний регистр. Например: "
ЖАННА МОРО" станет "жанна моро".

none
    Трансформации нет - текст отображается так же, как в HTML-коде.

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

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

h1{
text-transform:uppercase;
}


li{
text-transform:capitalize;
}



трансформация текста


Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет