Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Работаем с текстом в CSS.

Viktor | 24.02.2014 | нет комментариев

Форматируем текст web-страницы в CSS.

В данном уроке мы будем учиться работать с текстом – это различные отступы, подчеркивания, выравнивания, высота строки и т.д.

Первое свойство котором мы изучим – это выравнивание. В CSS это свойство задается как text-align: . Так же как и в HTML может принимать значение:

  • left – выравнивание по левому краю (хотя как Вы знаете выравнивание по левому краю принято по умолчанию, но иногда это необходимо прописать явно);
  • right – выравнивание по правому краю;
  • center – выравнивание по центру;
  • justify – выравнивание по ширине страницы;

Как записать в коде? Открываем нашу таблицу стилей style.css и создаем новый класс, называем его например .alig или как то иначе, лишь бы потом сами разобрались :-) и добавляем такой код (например мы хотим выравнить абзац текста по ширине страницы):

Листинг 6.1.

.alig {
text-align:justify;
}

Естественно не забываем присвоить этот класс этому самому абзацу или другому элементу внешний вид которого необходимо изменить например так:
<p>

Следующее свойство уже знакомое Вам с этим свойством мы сталкивались при изучении ссылок в 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;
}

В этом уроке я не буду приводить примеры того что у нас получилось, пробуйте и экспериментируйте. Думаю Вы уже давно усвоили что все эти свойства прописываются в таблице стилей и естественно этот созданный класс присваивается тому элементу (абзацу, заголовку и т.д.) внешний вид которого хотите изменить. Если что-то не понятно спрашивайте, отвечу…

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB