HTML, Excel, Word, SEOОсновы CSS ⇒ Шрифт

Основы CSS

Учебник CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Более полно и подробно каскадные стили CSS3 рассмотрены в разделе "Основы CSS3".




Шрифт: размер и гарнитура

Когда таблиц стилей еще не существовало, для задания размера и гарнитуры шрифта применялся тег font. Однако, в данный момент использование данного тега не рекомендуется. Ниже приведены примеры использования данного тега:


HTML-код:

Как выглядит:

Минимальный размер текста
Макс-й размер текста
Helvetica
Arial
Красный

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


Поскольку, файл CSS является текстовым документом, то, при отсутствии специализированных программ, можно его написать в простом текстовом редакторе, например, в Блокноте.


Создадим файл с названием 03.css и разместим его в том же каталоге, что и наш файл примера (поскольку, примеров будет много, то, каждому файлу примера будет соответствовать свой лист стилей). В таблице стилей определим размер, цвет и гарнитуру шрифта для всей HTML-страницы - в теге BODY


Как выглядит страница без CSS: Пример №2
Как выглядит страница с CSS: Пример №3

Фрагмент измененного HTML-кода страницы (добавлен только МЕТА-тег, подключающий файл таблицы стилей; в саму же страницу изменения не вносились):




Содержание файла CSS:




Как говорится, почувствуйте разницу! Всего одна строчка файла таблицы стилей мигом изменила весь вид HTML-страницы (если бы сайт содержал десятки, сотни, тысячи страниц, то, все равно, изменения бы отобразились на всех страницах сайта).



Разберем подробнее строку CSS-файла:

"Поиграйте" с различными параметрами значений и посмотрите как мгновенно преображается ваша страница.


При помощи стилей можно делать небольшие "фокусы", которые будут видны пользователям, посещающим ваш сайт, но "незаметны" поисковым системам (по крайней мере, на время написания данного материала). Как известно, поисковики довольно высоко ранжируют текст, заключенный в заголовок первого уровня (тег <H1>). Но, текст, заключенный в этот тег выглядит не всегда приемлемо - он очень крупный и жирный. Это можно изменить, например, при помощи атрибута style:


Форматирование заголовка первого уровня: Пример №4 - первый заголовок отображается "по умолчанию", второй, отформатирован при помощи атрибута style.

HTML-код страницы:




Тот же эффект, но с применением внешнего листа стилей (в вышеприведенный код страницы никаких изменений не вносилось; менялся CSS-файл) Пример №5
Содержание файла CSS:




Нетрудно понять, что лист стилей задал заголовку первого уровня зеленый цвет и установил размер шрифта 130% от основного размера, который был задан в 8pt.

С помощью атрибута font-size (размер шрифта) можно задавать размер шрифта в следующих единицах:

У вебмастеров "ходу" последние два варианта. Обратите внимание, что при задании нецелого значения необходимо в качестве разделительно знака ставить точку, а не запятую - 2.2 mm.

При задании гарнитуры шрифтов (атрибут font-family:), можно задавать любые шрифты, но для подстраховки (на случай, если на компьютере пользователя не окажется нужного шрифта) рекомендуют включать стандартные типы гарнитур:

Цвет шрифта (атрибут color:) можно задавать в шестнадцатиричном виде (#FCD34F), либо английским названием стандартного цвета (red). Следует аккуратно подходить к заданию цвета в шестнадцатиричном виде, т.к. далеко не каждый цвет, заданный подобным образом, будет отображаться одинаково на разных мониторах. Гораздо предпочтительнее пользоваться безопасной палитрой цветов, которая одинаково отображается на всех мониторах.

16 цветов стандарта VGA:



В начало страницы



В начало страницы