Rambler's Top100
Воскресенье, 19.11.2017, 20:36

КАК СОЗДАТЬ СВОЙ САЙТ

Урок "5"

Текст в CSS

В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:

left - выравнивание по левому краю(значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине(по правому и левому краям одновременно).

Тут все очень просто, ну вот например:

h1{ text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}

Свойство TEXT- DECORATION

Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:

none - значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;

h1 {
text-align:center;
text-decoration
:underline;
}
h2 {
text-align:center;
text-decoration
:overline;
}
h3 {
text-align:center;
text-decoration
:line-through;
}

Это свойство частенько используется при задании оформления ссылок, к примеру для того, чтобы при наведении на ссылку убиралось подчеркивание. Подробнее о ссылках в следующем уроке.

 

 

Свойство TEXT-INDENT

Это свойство пригодится нам для создания отступов первой строки, другими словами абзацев. Значение лучше задавать в пикселах, это универсальный способ.

h1{text-align:center;}
p
{
text-indent: 40px;
}

Однако можно задать и в процентах от общей длины базовой строки(строки без отступа)

h1{text-align:center;}
p
{
text-indent: 20%;
}

Как видите, все очень просто, а в html это сделать гораздо сложнее.

 

Свойство TEXT-TRANSFORM

C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:

capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".
Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!

uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS "

lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".

none - не производит смены регистра; это значение используется по умолчанию.

 

 

Свойство LETTER-SPACING

C помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.

h1 { letter-spacing: 10px;}
p{ letter-spacing :4px; }

В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;

 

Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.

h1 { word-spacing: 20px;}
p{ word-spacing :10px; }

А вообще, при создании того или иного шрифта, разработчиками идеально выбираются интервалы между буквами и словами, и поэтому применять последние два свойства я вообще не советую. Исключением может быть своеобразное дизайнерское решение или что-то типа того...

Вот мы и закончили изучение основных свойств из этого урока. Поверьте, дальше будет гораздо интересней. В следующем уроке мы поговорим о списках. Но не спешите идти дальше, сначала хорошенько закрепите пройденный материал!

 

См. также

Следующий   - Урок 6: Списки в CSS
Предыдущий - Урок 4: Шрифты в CSS

Google +1
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 80
Поиск
Календарь
«  Ноябрь 2017  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Архив записей
Друзья сайта
  • Обновление навигаторов
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

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