BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Текст в css

Текст в css

2013-02-06 / Вр:19:29 / просмотров: 3567

Все мы понимаем, что основная часть сайта, это текст. В этой статье я хочу рассказать, а точнее показать, как можно в CSS стилях менять на сайте вид текста. Если вы не знаете, как создать файл CSS, тогда прочитайте основы CSS, а потом двигайтесь в этом направлении дальше. А для тех, кто в курсе, о чем я сейчас говорю, можно приступать к делу :idea:.

Текст в 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 type="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>

Результат:

Выравнивание текста css

Оформление текста.

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;}

Результат:

Тень текста в CSS

Вот и все. Я думаю хватит. Статья получилась немного великоватой, но надеюсь полезной.

С уважением Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663