CSS – это просто. Часть 2

Мы с вами продолжаем знакомство с технологией CSS (начало см. в «МБ» №36'2006). Из этой статьи вы узнаете, как работать со шрифтом, а также научитесь создавать «живые» ссылки и цветную полосу прокрутки.

Настройки шрифта
Чтобы читать текст на вашей страничке было не только познавательно, но и удобно, вы можете воспользоваться настройками шрифта. Например, названия параграфов можно выделять другим цветом, особо важные вещи – подчёркивать, а заголовок статьи – написать крупным жирным шрифтом. Простор для фантазии весьма широк, главное – не переборщить.
Настроить можно: начертание шрифта (причём вы можете указать через запятую несколько шрифтов – если в системе пользователя не будет текущего шрифта, берётся следующий по списку), его стиль (полужирный, курсив и т.п.), размер (жёстко – в пикселях, или – в процентах от базового размера) и форму написания (все прописные или наоборот – строчные).

Кстати, размер шрифта можно задавать и таким способом: к значениям small и large («маленький», «большой») параметра font-size приписывать слева префиксы x‑ и xx‑, усиливающие влияние значения. Рассмотрим данное свойство на примере:
font-size: x-small; – уменьшение текста на одну ступень;
font-size: xx-large; – увеличение текста на две ступени (префикс «-xx»);
Можно также применять значения smaller и larger. Они обозначают сравнительную степень – шрифт на одну единицу меньше или больше.
Дабы сократить размер стилевого файла, вы можете использовать краткое описание свойств шрифта:

{font: italic bold 12pt Times}

При этом если какое-либо значение параметра пропущено, будет использовано значение по умолчанию. Этот же принцип вы можете использовать в любых других предопределяемых стилях.

И не только
Вы глубоко заблуждаетесь, если считаете, что возможности CSS на этом заканчиваются. Кроме всех вышеописанных манипуляций, вы можете использовать и возможности достаточно экзотические: создать цветную полосу прокрутки или сделать ссылки на страничке «живыми». Такие небольшие, но изящные дополнения, если использовать их грамотно, создают очень приятное впечатление у посетителей сайта.

Красивые ссылки
Чтобы ваши ссылки выглядели красиво, вы можете воспользоваться функциями CSS. Для этого необходимо описать в CSS-файле стили четырёх состояний ссылки: a.link (не посещённая ссылка), a.visited (посещённая ссылка), a.hover (ссылка, на которую наведён курсор), a.active (ссылка, на которой нажата кнопка мыши). При описании этих стилей вы можете оперировать размером шрифта, цветом текста и фона, а также некоторыми другими параметрами.

Цветная полоса прокрутки
Наверняка вы замечали, что при просмотре некоторых сайтов полосы прокрутки вашего браузера1 меняют цвет. Хотите, чтобы на вашем сайте было так же? Без проблем. Воспользуемся CSS. Цветную полосу прокрутки можно применить как ко всей странице (привязав к селектору body), так и к полям ввода текста (селектор textarea).

Рассмотрим несложный пример – создадим сине-голубую полосу прокрутки. Для этого пропишем следующие строки:
scrollbar-base-color: #99C0E6; – базовый цвет полосы прокрутки.
scrollbar-face-color: #99C0E6; – цвет лицевой стороны ползунка и кнопок; обычно он совпадает с базовым цветом, и «перекрывает» его значение в случае необходимости.
scrollbar-track-color: #DCEAF4; – цвет дорожки, по которой бегает ползунок; сделаем его немного светлее базового цвета.
scrollbar-arrow-color: #3300CC; – цвет стрелочек, которые расположены на кнопках вверху и внизу; пусть они выделяются на фоне других цветов – сделаем их синими;
scrollbar-3dlight-color: #003366; – цвет едва заметной обводки элементов полосы прокрутки, создающей небольшой 3D‑эффект; лучше выбирать для этого параметра градиенты серого цвета;
scrollbar-darkshadow-color: # AABFBB;
scrollbar-shadow-color: # CCE1E0; – внешняя и внутренняя тени; первый параметр добавляет тень на элементы слева сверху, второй – справа снизу. Внешнюю тень можно сделать темнее внутренней – так вы добьётесь объёмности элементов. У нас тень имеет мягкий голубовато-серый цвет;
scrollbar-highlight-color: #669999; – этот очень незначительный параметр задаёт цвет контуров подсветки, немного приглушая цвета краёв элементов.
Комбинируя цвета полосы прокрутки, можно добиться очень изящного эффекта объёмности. Не следует делать большой разброс в цветах, хотя это – уже дело вкуса.

Твори
На этом мы заканчиваем знакомство с каскадными таблицами стилей. Добавлю, что многие возможности технологии в наших статьях рассмотрены не были. Целью было ознакомление с азами. А эта технология умеет ещё очень многое: графические фильтры, блочная вёрстка, работа со звуком... Однако и та небольшая часть возможностей CSS, с которой мы познакомились, поможет вам создать изящный и гармоничный сайт.

1. Менять цвет полос прокрутки умеют не все браузеры. Изначально такая возможность была только в Inernet Explorer, однако недавно её поддержку добавили и в Opera.


Рекомендуем почитать: