С помощью CSS можно задать тексту множество свойств. В этом уроке мы рассмотрим основные из них.
Для примера создадим два файла Index.html и style.css
Index.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. Значением является расстояние от левого края, указывается в пикселях.
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
}
Расстояние между строками текста.
Задаётся свойством line-height.
Значения этого свойства могут задаваться в процентах, множителях и пикселях. В этом примере значение задано в множителе.
font-size: 18px;
color: #092a60;
text-align: left;
font-style: italic;
text-indent: 20px;
line-height: 1.5;
}
Расстояние между символами.
Определяется свойством letter-spacing. Значение задаётся в пикселях.
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
}
Расстояние между словами.
Определяется свойством word-spacing. Значение также задаётся в пикселях.
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 – цвет тени.
font-size: 30px;
color: #ff0c00;
text-align: center;
font-weight: 900;
text-decoration: underline;
letter-spacing: 5px;
text-shadow: 2px 2px 2px #3a0d04;
}