Работа с текстом
Как только нельзя изменить текст в CSS
Вы можете придать ему любой цвет, расположение, форму, даже буквы можете сами нарисовать! Но обо всём по-порядку...
font-family
Это свойство определяет шрифт элемента в HTML документе. Это могут быть шрифты такие как Arial, Times New Roman, Courier New и многие другие. Пример использования:
body {
font-family: Arial;
}
h1 {
font-family: "Times New Roman";
}
Как Вы могли заметить из примера - все шрифты написанные несколькими словами пишутся в двойных кавычках.
Все шрифты разделяют на 5 семейств:
-serif (обычные шрифты с засечками)
-sans-serif (обычные шрифты без засечек)
-monospace (шрифты фиксированной ширины)
-cursive (шрифты, имитирующие почерк)
-fantasy (декоративные шрифты, для названий и т.д)
Также можно прописать разные шрифты в свойстве font-family через запятую, чтобы в случае, если один или несколько шрифтов не поддерживаются на устройстве, CSS выдавал другой.
Пример:
b { font-family: Alial, Calibri, "Times New Roman"; }
С примерами и разновидностями Вы можете ознакомится по ссылке https://www.w3.org/Style/Examples/007/fonts.ru.html (не реклама!) или с большим списком шрифтов с названиями по ссылке http://www.hdsw.ru/?p=21 (тоже не реклама, а совет!).
font-size
Отвечает за размер текста, как размер символов в Microsoft Word. Измеряется в пикселях или любой другой удобной Вам величине. Пример использования:
p {
font-size: 8; //Текст размером символов в 8 пикселей
}
div {
font-size: 10px; //Текст размером символов в 10 пикселей
}
h2 {
font-size: 10cm; //Текст размером символов в 10 сантиметров
}
! Как и в атрибутах в HTML документе, так и в CSS свойствах используются идентичные единицы измерения (px, cm, %, em и другие).
Также установить размер символов с помощью font-size можно ключевыми словами small, medium, large, xlarge, x-small и другими.
font-style
Данное свойство может использоваться к тексту как и тег форматирования <i> в HTML. Font-style может принимать три значения: normal (по умолчанию), italic (текст курсивом) и oblique (тоже наклонный текст как и курсив, но менее поддерживаемый).
font-weight
Свойство font-weight отвечает за толщину текста и используется как тег форматирования <b> или <strong> в HTML документе. Может принимать 4 значения: normal (размер по умолчанию), bold (полужирный текст), bolder (жирный) и lighter (тонкий). Также можно установить числовые значения для этого свойства от 100 (тонкий) до 900 (жирный).
font-variant
Это свойство позволяет конвертировать буквы в маленькие заглавные. Принимает значения normal (по умолчанию), small-caps (маленькие) и inhert (нормальные). Но помните, что это поддерживает не каждый шрифт, поэтому не забывайте тестировать!
Практика
Поиграйтесь с разными свойствами. Попробуйте выбрать разные и интересные шрифты и использовать их в своём HTML документе. Откройте какой-нибудь сайт и измените в исходном коде шрифты сайта.
На этом пока всё. Остальные свойства Вы можете изучить в следующем уроке. Удачи!