Веб-мастерская Ларисы ВоронинойОформление текста с помощью CSS. Текст CSS.

WEB-мастерская Ларисы Ворониной

Оформление текста с помощью CSS. Окт 29 2016

С помощью CSS можно задать тексту множество свойств. В этом уроке мы рассмотрим основные из них.

Для примера создадим два файла Index.html и style.css

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Текст CSS</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Этот текст мы сделали специально длинным, чтобы получилось несколько строк.
Так проще и наглядней будет понять работу языка CSS. Для примера <span>этот текст мы сделали зачёркнутым</span>.
</p>
</body>
</html>

Файл style.css пока пуст.

Итак, поехали…

Шрифт текста.

Чтобы задать тексту определённый шрифт, используем свойство font-family.

* {
font-family: verdana;
}

В этом примере для всех элементов HTML – документа используется только шрифт Verdana.

Размер шрифта.

За размер шрифта отвечает свойство font-size, значением которого будет число в пикселях.

* {
font-family: verdana;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}

Для заголовка размер шрифта составляет 30px, для абзаца 18px.

Цвет текста.

Цвет текста определяется свойством color. Значением цвета будет шестнадцатиричный RGB код с символом решётки (#) впереди. Найти код цвета можно либо в Photoshop, либо в программе ColorMania, либо в поисковике по запросу «HTML палитра цветов”.

* {
font-family: verdana;
}
h1 {
font-size: 30px;
color: #ff0c00;
}
p {
font-size: 18px;
color: #092a60;
}

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

Выровнять текст можно с помощью свойства text-align. Это свойство может иметь несколько значений:

Center – текст по центру

Left – текст слева

Right – текст справа

Justify – выравнивание текста по ширине.

* {
font-family: verdana;
}
h1 {
font-size: 30px;
color: #ff0c00;
text-align: center;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
}

Начертание шрифта.

За начертание шрифта отвечает свойство font-style со следующими значениями:

Normal – нормальное начертание

Italic - курсив

Oblique – наклонный шрифт

За насыщенность шрифта отвечает свойство font-weight. Значения могут устанавливаться числами от 100 до 900, чем больше число, тем жирнее шрифт. Также значения могут устанавливаться с помощью ключевых слов:

Normal – нормальное начертание.

Bold – полужирное начертание.

* {
font-family: verdana;
}
h1 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
}

Декорирование текста.

Декорировать текст позволяет свойство text-decoration. Значения этого свойство бывают следующими:

underline – подчёркнутыйтекст

overline – надчёркнутый текст

line-through – перечёркнутый текст

blink – мигающий текст

none – обычный текст без оформления (убирает подчёркивание у ссылок)

* {
font-family: verdana;
}
h1 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
}
p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
}
span {
text-decoration: line-through ;
}

Отступ первой строки.

Отступ первой строки задаётся свойством text-indent. Значением является расстояние от левого края, указывается в пикселях.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
}

Расстояние между строками текста.

Задаётся свойством line-height.

Значения этого свойства могут задаваться в процентах, множителях и пикселях. В этом примере значение задано в множителе.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
line-height: 1.5;
}

Расстояние между символами.

Определяется свойством letter-spacing. Значение задаётся в пикселях.

h1 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
}

Расстояние между словами.

Определяется свойством word-spacing. Значение также задаётся в пикселях.

p {
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
line-height: 1.5;
word-spacing: 10px;
}

Добавляем тень к тексту.

Тень добавляется с помощью свойства text-shadow. В качестве значений будут числа, которые определяют следующие свойства :

Значение 1 – смещение тени по горизонтали

Значение 2 – смещение тени по вертикали

Значение 3 – радиус размытия

Значение 4 – цвет тени.

h1 {
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
text-shadow: 2px 2px 2px #3a0d04;
}

Получайте новые статьи по почте

Категории