Стили CSS

На этом занятии мы познакомимся с очень интересными и важными свойствами CSS, описывающими шрифты. Хочу сразу предупредить начинающих Web-строителей о том, что, употребляя в дизайне своего сайта какие-нибудь малораспространенные шрифты, вы должны помнить, что они будут отображаться на компьютере пользователя только в том случае, если они установлены в его системе. Запомнили? Теперь можно приступать к изучению свойств. Если вас интересует качественный и проверенный seo специалист, то стоит обратить внимание на сайт seoshnik.ru.

Свойство «font-family» - определяет семейство шрифта

Прописывая в коде каскадной таблицы стилей CSS свойство «font-family», мы указываем браузеру приоритетный список шрифтов. Значения «font-family» - это список, на первом месте которого стоит имя шрифта, используемого вами при создании страницы. Если на компьютере пользователя такой шрифт не установлен, то браузер ищет следующий в списке шрифт, пока не найдет подходящий. Для подразделения шрифтов используются два типа имен: имя семейства - family-name и род семейства - generic family.

Family-name – это просто имя шрифта. Например: "Arial", "Times New Roman" или" Tahoma". Generic family - это группа шрифтов, объединенных общим признаком. Пример: sans-serif, набор шрифтов без «засечек». Если браузер пользователя не найдет ни одного шрифта из вашего списка имен, он поставит какой-нибудь шрифт из семейства. Поэтому в конце списка шрифтов обязательно указывайте родовое имя.

Пример 11-1: Пропишем в таблице стили для тегов H1 и H2 Сохраним файл style. css и посмотрим, как браузер изобразил наши заголовки/

Как видите, заголовок H1 прописан шрифтом «Arial» без засечек, а H2 шрифтом «Georgia» с засечками. Обратите внимание, что "Times New Roman" мы заключили в кавычки. Запомните! Если имя шрифта состоит из нескольких слов, его нужно брать в кавычки!

Свойство «font-style» - стиль шрифта

Это свойство имеет несколько значений: normal, italic и oblique.

Пример 11-2: Давайте посмотрим, что случится с заголовками H1, H2 и H3, если мы применим к ним разные значения этого свойства.

Сохраняем нашу таблицу стилей и смотрим, как изменились заголовки.

Что мы видим? Normal - он и есть normal, т. е. ничего не изменилось. Italic и oblique отображают текст курсивом. Советую запомнить font-style: italic, если нужно какую-то часть текста отобразить курсивом.

Свойство «font-variant» - вариант шрифта

Это свойство используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы вместо букв нижнего регистра.

Пример 11-3: Чтобы было понятнее, пропишем в стили h1 и h2 одинаковые параметры кроме свойства «font-variant».

Сохраняем нашу таблицу стилей и смотрим, как изменились заголовки. В заголовке h1 вместо букв нижнего регистра используются малые заглавные буквы. Сравните знаки H1 и h1; А и а.