Свойства текста
Воскресенье, 22 августа 2010 г.Рубрика: Учебник CSS
Метки: свойства текста
Просмотров: 1014
Подписаться на комментарии по RSS
В стилях css существует 8 свойст текста:
text-indent;
letter-spacing;
word-spacing;
text-decoration;
text-align;
line-height;
text-transform;
vertical-align;
Первое свойство отвечает за красную строку, если мы хотим чтобы текст как-то выделялся, а не был сплошным, то мы должны использовать это свойство.
Давайте будем рассматривать это на примерах:
Создадим html файл index.html и пропишем в нём такой код:
<html><BR><BR><head><BR><title>CSS чебник</title><BR><link rel="stylesheet" type="text/css" href="style.css"/><BR></head><BR><body><BR><p><BR>Этот текст будет изменяться в стилях, ему будут присвоины свои параметры, и он будет уникальным. Всем должно быть понятно то, что не стоит обращать внимание на содержание текста, именно этого текста, а главное его оформление, оформление именно этого текста.</p><BR></body><BR></html>
У нас будет использоваться таблица - style.css и в тексте мы будем изменять тег p:
Теперь создадим css таблицу style.css, в которой и создадим красную строку - отступ первого слова от левого края:
p {<BR>text-indent: 20px;<BR>}У нас будет отступ в 20px(20 пикселей). Если хотите проверить, то можете скопировать эти коды и создать такие же файлы.
Теперь перейдём ко второму свойству:
letter-spacing - задёт отступ между символами(буквами, цифрами, и т.д.):
style.css
p {<BR>letter-spacing: 3px;<BR>}Как Вы заметили мы будем менять только файл style.css.
Следующее свойство - word-spacing - оно задаёт размер пробела в тексте. Изменим в css файле стили для тега p на такие:
p {<BR>word-spacing: 20px;<BR>}В этом примере наглядно видно большие пробелы.
Следующее свойство text-decoration - оно содаёт декорацию для текста, рассмотрим все примеры:
none - отменяет все оформительские приемы (включая, отображаемые браузером по умолчанию).
underline - устанавливает нижнее подчёркивание.
overline - устанавливает верхнее подчёркивание.
line-through - зачёркивает текст.
blink - делает текст мигающим(то есть, то нет).
inherit - заимствует значение свойства у родительского элемента.
Но в нашем примере мы рассмотрим текст с нижним подчёркиванием:
p {<BR>text-decoration: underline;<BR>}Дальше идёт свойство - text-align - оно задаёт положение текста по горизонтали:
right - справа.
left - слева.
center - по центру.
В нашем примере текст будет справа:
p {<BR>text-align: right;<BR>}Давайте рассмотрим свойство - line-height - оно задаёт расстояние между строками в тексте, мы зададим расстояние в 30px:
p {<BR>line-height: 30px;<BR>}Теперь рассмотрим свойство - text-transform - оно определяет какими будут буквы в тексте - прописными или строчными:
capitalize - каждое слово в предложении будет начинаться с прописной буквы.
uppercase - все буквы в каждом слове будут прописными.
lowercase - все буквы в каждом слове будут строчными.
none - отменяет вышеуказанные значения, текст отображается как обычно.
inherit - заимствует значение свойства у родительского элемента.
Мы будем использовать uppercase:
p {<BR>text-transform: uppercase;<BR>}Ну и последний - vertical-align - вертикальное выравнивание текста.
top - по верху.
middle - по середине.
bottom - внизу.
У нас это будет не заметно, поэтому пример мы показывать не будем.
Поделиться...
Оставьте свой комментарий!
