Урок 6. Работаем с текстом в CSS.
Автор: Андрей Краснокутский
Дата: 2009-03-19 Форматируем текст web-страницы в CSS.
В данном уроке мы будем учиться работать с текстом - это различные отступы, подчеркивания, выравнивания, высота строки и т.д.
Первое свойство котором мы изучим - это выравнивание. В CSS это свойство задается как text-align: . Так же как и в HTML может принимать значение:
-
left - выравнивание по левому краю (хотя как Вы знаете выравнивание по левому краю принято по умолчанию, но иногда это необходимо прописать явно);
-
right - выравнивание по правому краю;
-
center - выравнивание по центру;
-
justify - выравнивание по ширине страницы;
Как записать в коде? Открываем нашу таблицу стилей style.css и создаем новый класс, называем его например .alig или как то иначе, лишь бы потом сами разобрались :-) и добавляем такой код (например мы хотим выравнить абзац текста по ширине страницы):
Листинг 6.1.
.alig {
text-align:justify;
}
| |
Естественно не забываем присвоить этот класс этому самому абзацу или другому элементу внешний вид которого необходимо изменить например так: <p class="center">
Следующее свойство уже знакомое Вам с этим свойством мы сталкивались при изучении ссылок в CSS это text-decoration: может принимать значения:
-
underline - подчеркивание снизу как у ссылок;
-
none - без подчеркивания;
-
overline - линия сверху текста;
-
line-through - зачеркнутый текст;
Например мы хотим зачеркнуть текст (очень часто применяется в интернет магазинах при указании цен Старая цена - зачеркивают, Новая цена). Записывается в коде так,:
Листинг 6.2.
.alig {
text-decoration:line-through;
}
| |
Следующее свойство это text-indent: . С помощью этого свойства можно задать красную строку (отступ справа первого слова - вспоминате русский язык) например на 30px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Записывается так:
Листинг 6.3.
.alig {
text-indent:3em;
}
| |
Следующее свойство это text-transform: . Это свойство изменяет вид букв в предложении маленькие или большие. Может принимать значения:
-
capitalize - с помощью этого значения можно заставить браузер отображать каждую первую букву слова в предложении с большой буквы, хотя в исходном коде эти буквы будут записаны маленькими (строчными);
-
uppercase - все слова в предложении написаны большими буквами, хотя в исходном коде эти буквы будут записаны маленькими (строчными);
-
lowercase - все слова в предложении написаны маленькими (строчными) буквами ;
Записывается в коде:
Листинг 6.4.
.alig {
text-transform:capitalize;
}
| |
Следующее свойство это letter-spacing: . С помощью этого свойства можно задать интервал между буквами в предложении например в 10px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Т.е. между каждой буквой в каждом слове будет интервал в 10 px или 15 px (сколько укажете). Записывается так:
Листинг 6.5.
.alig {
letter-spacing:10px;
}
| |
Следующее свойство это word-spacing: . С помощью этого свойства можно задать интервал между словами в предложении например в 20px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Т.е. между каждым словом в предложении будет интервал например в 20 px или 30 (сколько укажете) . Записывается так:
Листинг 6.6.
.alig {
word-spacing:20px;
}
| |
Конечно же применять все эти свойства можно не только по отдельности, но и все вместе или же в любом сочетании в зависимости от ваших дизайнерских задумок и фантазии. Например создать такой класс:
Листинг 6.7.
.alig {
text-align:justify;
text-decoration:line-through;
text-indent:3em;
text-transform:capitalize;
letter-spacing:10px;
word-spacing:20px;
word-spacing:20px;
}
| |
В этом уроке я не буду приводить примеры того что у нас получилось, пробуйте и экспериментируйте. Думаю Вы уже давно усвоили что все эти свойства прописываются в таблице стилей и естественно этот созданный класс присваивается тому элементу (абзацу, заголовку и т.д.) внешний вид которого хотите изменить. Если что-то не понятно спрашивайте, отвечу...
Читайте так же:
Смотрите поясняющие Видео Уроки.
Приступаем к форматированию текста.
Вставляем заголовки на web-страницу.
Форматируем текст web-страницу.
Правила написания коррекного кода web-страницы.
Просмотров: 11236
|