Вебучебники

 

Полезные ссылки

УРОК 7 - ФОРМАТИРОВАНИЕ ТЕКСТА


Цвет текста

Свойство color используется для установки цвета текста.

В CSS цвет обычно указывается с помощью:

  • шестнадцатеричного (HEX) значения - например "#ff0000";

  • RGB значения - например "rgb(255,0,0)";

  • имени цвета - например "red".

Цвет текста по умолчанию для страницы определяется в селекторе body.

 

Пример:

 

{color:red;}

h1 {color:#00cc99;}

p.ex {color:rgb(0,0,255);}

 

нажмите чтобы увидеть результат

 

Выравнивание Текста

Свойство text-align используется для горизонтального выравнивания текста.

Текст может быть отцентрирован (center), или выровнен по левому краю (left), по правому краю (right), а также по левому и по правому краям одновременно (justify).

Когда свойство text-align установлено в "justify", каждая линия растягивается так, что каждая линия имеет однинаковую длину, и левое и правое поля одинаковы (наподобие как в журналах или газетах).

 

Пример:

 

h1{ text-align:center;}

h2 {text-align:left;}

h3 {text-align:right;}

p {text-align:justify;}

 

нажмите чтобы увидеть результат

 

Декорация Текста

Свойство text-decoration используется. чтобы установить или удалить декорации из текста.

Свойство text-decoration в основном используется для того, чтобы удалить подчеркивание ссылок для целей дизайна:

 

Пример:

 

a {text-decoration:none;}

 

нажмите чтобы увидеть результат

 

Также оно может использоваться, чтобы декорировать текст:

 

Пример:

 

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

 

нажмите чтобы увидеть результат

 

Свойство TEXT-INDENT

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

 

Пример:

 

h1{text-align:center;}

p {

text-indent: 40px;

}

 

нажмите чтобы увидеть результат

 

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

Свойство text-transform используется, чтобы изменять регистр букв в тексте.

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

 

Пример:

 

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

 

нажмите чтобы увидеть результат

 

Свойство LETTER-SPACING

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

 

Пример:

 

h1 { letter-spacing: 20px;}

p{ letter-spacing :8px; }

 

нажмите чтобы увидеть результат

 

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

 

Свойство WORD-SPACING

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

 

Пример:

 

h1 { word-spacing: 20px;}

p{ word-spacing :10px; }

 

нажмите чтобы увидеть результат

 

Предыдущая Следующая
здесь то, что нужно         
Полезные ссылки

Яндекс.Метрика
Сайт создан в системе uCoz