StepkinBlog.top
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
31.01.2017
15:49
9420
2
Оформление текста в CSS. Основы CSS для начинающих. Урок №5
Всем привет!
В этом уроке я расскажу, как в CSS коде оформить текст.
Итак, вы научитесь через файл CSS выравнивать текст по правому и левому краю, по ширине и по центру, делать подчеркивание текста, надчеркивание и перечеркивание, а также сможете изменить размер между буквами и словами.
В статье не весь список возможностей в CSS для оформления текста, но этого вполне достаточно, чтобы оформить текст.
Итак, приступим к уроку №5 и научимся сегодня форматировать текст 
.
Для начала подготовим текстовые файлы.
Создайте файл «HTML» и «CSS».Свяжите их вместе, как на примере ниже или прочитайте статью о том, «как подключить CSS» (в статье есть три способа подключения).
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключения таблицы CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Заголовок h1</h1> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <p>На сайте StepkinBlog.top вы найдете уроки по основам HTML, Bootstrap3, CSS, PHP, WordPress, JavaScript и т.д. Жду вас на своем блоге! Подписывайтесь на обновления, чтобы не пропустить ничего новенького. Этот текст был подготовлен для статьи по основам CSS</p> </body> </html>
Выравнивание текста в CSS
Свойство «TEXT-ALIGN»
Все вы, наверное, помните с уроков HTML атрибут «align». Этим атрибутом мы выравнивали текст по правому и левому краю, по ширине и по центру. Так вот, в CSS есть что-то подобное, это свойство называется «text-align».
Значение:
- left - выравнивание по левому краю (значение по умолчанию);
- right - выравнивание по правому краю;
- center - выравнивание по центру;
- justify - выравнивание по ширине (по правому и левому краям одновременно).
Пример:
h1{ text-align:center; /* выравнивание текста по центру */}
h2 {text-align:left; /* выравнивание текста по левому краю */}
h3 {text-align:right; /* выравнивание текста по правому краю */}
p {text-align:justify; /* выравнивание по ширине */}
Результат:
Подчеркивание, надчеркивание и перечеркивание текста
Свойство «TEXT- DECORATION»
Подчеркивание и надчеркивание можно использовать в различных ситуациях, но я часто использую это правило для ссылок.
Перечеркивание текста можно использовать для интернет-магазина. Вы, наверное, замечали такой маркетинговый ход, кода старая цена перечеркивается и ставиться новая. Так вот, это делается с помощью CSS правила «text- decoration».
Значение:
- none - без оформления (значение по умолчанию);
- underline - текст подчеркивается снизу;
- overline - текст надчеркнут сверху;
- line-through - текст перечеркивается;
Пример:
h1 {
text-decoration:underline; /* текст подчеркивается снизу */
}
h2 {
text-decoration:overline; /* текст надчеркивание сверху */
}
h3 {
text-decoration:line-through; /* текст перечеркивается */
}
p {
text-decoration:none; /* без оформления */
}
Результат:
Абзац (красная строка) в CSS
Свойство «TEXT-INDENT»
Правило «text-indent» пригодится вам, если вы решили на веб-страницах сделать отступы первой строки, то есть, сделать абзац или красную строку.
Значение задается в «px» или «%».
Пример:
p {text-indent:20px; /* отступ первой строки в 20 px */}
или вот так:
p {text-indent:10%; /* отступ первой строки в 10% */}
В HTML еще один длинный текст с тегом <p>Текст</p>.
Результат:
Текстовый регистр
Свойство «TEXT-TRANSFORM»
Если вам захотелось, чтобы буквы заголовка были заглавными или, наоборот, маленькими (строчными), или чтобы все первые буквы в словах начинались с большой буквы, то CSS правило «text-transform» со всеми этими задачами справится быстро.
Значение:
- none - значение по умолчанию
- capitalize - Все Первые Буквы Слов Заглавные
- uppercase - ВСЕ БУКВЫ ЗАГЛАВНЫЕ
- lowercase - все буквы строчные
Пример:
h1 {
text-transform: none; /* значение по умолчанию */
}
h2 {
text-transform: uppercase; /* все буквы заглавные */
}
h3 {
text-transform: lowercase; /* все буквы строчные */
}
p {
text-transform: capitalize; /* все первые буквы слов заглавные */
}
Результат:
Расстояние между буквами в CSS
Свойство «LETTER-SPACING»
Правило «letter-spacing» поможет изменить расстояние между буквами.
Значение задается в «px».
Пример:
p {
letter-spacing :10px; /* расстояние между буквами */
}
Результат:
Расстояние между словами в CSS
Свойство «WORD-SPACING»
Правило «word-spacing» поможет изменить расстояние между словами.
Значение задается в «px».
Пример:
p {
word-spacing :50px; /* расстояние между словами */
}
Результат:
Тень текста с помощью CSS
Свойство «TEXT-SHADOW»
Чтобы добавить тень для текста, существует правило «text-shadow».
Синтаксис:
text-shadow: «X» «Y» «Амплитуда» «Цвет»;
Значение:
- X – это горизонтальное смещение тени (положительное значение – смещение тени вправо, отрицательное – смещение тени влево);
- Y – вертикальное смещение тени (положительное значение – смещение тени вниз, отрицательно значение – смещение тени вверх);
- Амплитуда – чем выше ее значение, тем больше степень размытия;
- Цвет – цвет тени
Пример:
h1
{
text-shadow: 4px 1px 3px #999; /* тень заголовка*/
}
Результат:
Цвет текста в CSS
Свойство «COLOR»
Если вам нужно заменить цвет заголовков или текста, воспользуйтесь правилом «color». Цвет можно задавать по названию (англ. слова), по шестнадцатеричному значению и RGB.
Пример:
По названию
p
{
color: yellow; /* Цвет текста по названию */
}
По шестнадцатеричному значению
p
{
color: #FFFF00; /* по шестнадцатеричному значению*/
}
С помощью RGB
p
{
color: RGB(249, 231, 16); /* Цвет текста в RGB */
}
Результат:
Подробней о свойстве «color» мы рассмотрим в другой статье, в которой я расскажу, как заменить цвет фона, теста, ссылки, рамки и т.д. Дам таблицу кодов цветов.
Так что подписывайтесь на обновления моего блога, чтобы не пропустить новых уроков, так как следующая статья будет о том, как поменять размер шрифта, стиль и многое другое 
.
В статье не весь список возможностей в CSS для оформления текста>>>
А где весь?
Владимир, Вы название рубрики видели? Рубрика называется "Основы CSS". Для основ этого достаточно!
Отвечу на Ваш вопрос "А где весь?", в Яндексе и в Гугле 100% есть.