Все мы понимаем, что основная часть сайта, это текст. В этой статье я хочу рассказать, а точнее показать, как можно в CSS стилях менять на сайте вид текста. Если вы не знаете, как создать файл CSS, тогда прочитайте основы CSS, а потом двигайтесь в этом направлении дальше. А для тех, кто в курсе, о чем я сейчас говорю, можно приступать к делу 
.
Выравнивание текста css.
text-align
Для того, чтобы выравнять по горизонтали текст, используйте в CSS правило text-align.
text-align: center | justify | left | right
Значения.
center - выравнивание по центру;
justify - выравнивание по ширине экрана ( от левого до правого краев экрана);
left - выравнивание по левому краю (по умолчанию);
right - выравнивание по правому краю;
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание текста css</title>
<style ENGINE="text/css">
H1 {text-align: left; /* текста по левому краю */}
H2 {text-align: right; /* текста по правому краю */}
H3 {text-align: center; /* текста по центру */}
p {text-align: justify; /* текст от левого до правого краев экрана */}
</style>
</head>
<body>
<H1>Заголовок-1</H1>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте. Как выровнять текст на сайте через каскадную таблицу стилей CSS. </p>
</body>
</html>
Результат:
Оформление текста.
text-decoration
Если вам нужно оформить текст подчеркиванием, перечеркиванием, линиями над текстом, то можно применить правило text-decoration.
text-decoration: none | underline | overline | line | blink | inherit
Значения.
none - отсутствие элементов оформления (по умолчанию).
underline - подчеркивание.
overline - линия над текстом.
line-through - перечеркивание.
blink - мерцание.
inherit - применяется значение родительского элемента.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Оформление текста</title>
<style type="text/css">
H1 {text-decoration: underline; /* заголовок по умолчанию */}
H2 {text-decoration: underline; /* заголовок с подчеркиванием */}
H3 {text-decoration: overline; /* линия над текстом */}
p {text-decoration: line-through; /* текст перечеркнутый */}
</style>
</head>
<body>
<H2>Заголовок-2</H2>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте</p>
</body>
</html>
Результат:
text-indent
Если вам нужно установить величину отступа первой строки блока текста (красная строка), создайте правило text-indent.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
p {text-indent:18px; /* отступ первой строки */}
</style>
</head>
<body>
<p>Здесь много текста</p>
</body>
</html>
Результат:
Отступ первой строки в тексте будет 18px.
text-transform
Бывают случаи, когда нам необходимо изменить в тексте регистр букв. Воспользуйтесь правилом text-transform.
text-transform: none | capitalize | uppercase | lowercase
Значения:
none - значение по умолчанию
capitalize - Все Первые Буквы Слов Заглавные
uppercase - ВСЕ БУКВЫ ЗАГЛАВНЫЕ
lowercase - все буквы строчными
Пример:
p {text-transform: capitalize;}
Результат:
Все Первые Буквы В Тексте Будут Заглавными.
letter-spacing
Letter-spacing можно задать отступ между буквами.
Пример:
p {letter-spacing: 10px;}
Результат:
В т е к с т е м е ж д у б у к в а м и б у д е т о т с т у п 1 0 p x .
word-spacing
Можно задать расстояние между словами.
Пример:
p {word-spacing: 20px;}
Результат:
Расстояние между словами будет 20px.
Цвет текста.
color
Задавать цвет можно как словом, так и кодом. Вот, например, можно задать значение в color red, что означает красный, а можно сделать вот так #cc0000.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет текста в css</title>
<style type="text/css">
H1 {color: red;/* заголовок будет красным цветом */}
p {color: #0000ff; /* цвета текст синим */}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Цвет текста</p>
</body>
</html>
Результат:
Цвет заголовка <H1> будет красного цвета, текст параграфа <р> будет синим.
Размер текста в CSS.
font-size
В CSS можно указать каждому текстовому элементу свой размер.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Оформление текста</title>
<style type="text/css">
H1 {font-size:50px; /* размер заголовка 50px */}
H2 {font-size:30px; /* размер заголовка 30px */}
H3 {font-size:20px; /* размер заголовка 20px */}
p {font-size:10px; /* размер заголовка 10px */}
</style>
</head>
<body>
<H1>Заголовок-2</H1>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте</p>
</body>
</html>
Результат:
Размер заголовка <H1> будет 50px,
<H2> - 30px,
<H3> - 20px,
<p> - 10px.
Шрифт текста.
font-family
При помощи правила font-family, вы сможете задать шрифт тексту.
p {font-family: Georgia, 'Times New Roman', Times, serif;}
Тень текста в CSS.
text-shadow
Если вам нужно создать тень от текста, меню или заголовка, есть классная возможность в CSS с помощью правила text-shadow.
Пример:
H1 {text-shadow: blue 5px 5px 3px;}
Результат:
Вот и все. Я думаю хватит. Статья получилась немного великоватой, но надеюсь полезной.
С уважением Webmasterok2009
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как поменять стандартную нумерацию в списке на свой стиль, используя CSS
Обтекание текста вокруг изображения с помощью CSS
Выдвигающаяся форма поиска для сайта на CSS3
Как закруглить углы в CSSПохожие статьи
HTML кодировка страницы. В какой кодировке сохранять web-страницу? Урок №14
Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка
Как создать папку, папку с паролем, невидимую папку
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222616 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187976 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
Добавить комментарий
Метки: css, для начинающих, основы
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐