Несвоевременные мысли о CSS

Да простит меня Максим Горький за плагиат названия статьи (первой его части, конечно же :) .

Цель данной публикации — на практике показать полезность каскадных таблиц стилей.

Не пугайтесь. Не смотря на такое страшное название, все не так уж и сложно. Данная статья ни в коем случае не претендует на звание инструкции по CSS. Всего лишь пара хитростей / уловок / «фишек» при работе с этой технологией.

Что это за зверь такой?

CSS — это набор команд, которые говорят браузеру как именно должна выглядеть отображаемая страница. Все современные браузеры этих команд «слушаются».

Выглядит стандартная CSS-команда примерно так:

Идентификатор { его свойство: значение свойства; свойство 2: его значение } и т.д.

Набор таких команд помещается между в html файле.

<!--<br /> тут css-команды<br /> -->

Или же команды пишутся в отдельный файл с расширением CSS и вызываются из html файла примерно такой командой:

«style.css» — это произвольное название файла с CSS-командами. В данном случае css файл находится в корне сайта. Можно задать положение файла и с помощью относительного url — /cssfolder/style.css например.

А теперь несколько полезных примеров применения CSS.

«Цветастый» скролл

Насчет полезности данной функции что-либо сказать сложно. Но выглядит красиво, жалко, что отображается только в IE 5.5 и выше.

Задается примерно так:

BODY { scrollbar-face-color:#FFCC00;
scrollbar-highlight-color:#FFCC00;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-shadow-color:#FFCC00;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#E0E0E0; }

Свойства «SCROLLBAR — что-то там» отвечают за цвет каждого из элементов полосы прокрутки, их значение (собственно сам цвет) задается цветовым кодом #…… . Узнать код необходимого вам цвета можно с помощью пипетки в любом графическом редакторе. Также цвет можно задать и обычными red, blue…

Собственно разобраться какой параметр отвечает за цвет какой части скролла не очень сложно. Посмотрите на их названия и поэкспериментируйте.

Стили абзацев и заголовков

Предыстория: у меня, по неизвестным причинам, сложилось стойкое отвращение к шрифту Times и использовать его при оформлении сайтов очень не хотелось. Зато нравился шрифт Verdana.

Раньше, без CSS это выглядело примерно так:

Это первый абзац. Эх, тяжело, наверное, приходилось древним без CSS :)

Это второй абзац и опять тот же самый html код. Жуть как не эстетично! Да, кстати, в любом случае НЕ советую задавать только один шрифт (написав в коде только Verdana, например), это может привести к «крякозябрам» вместо текста, если данного шрифта не будет на компьютере посетителя. Всегда лучше прописать несколько похожих между собой шрифтов.

А если таких абзацев много и на целом сайте нет ни одной строчки Times'ом? Все это выливается в неоправданное увеличение размера страницы.

Проблема решается элементарно! Как вы уже догадались — с помощью CSS.

P { font: 10pt Verdana, Arial, Helvetica, sans-serif }

Теперь каждый абзац, помещенный стандартным для него тегов

будет отображаться так, как вам надо.

Также можно задавать и стили заголовков. Например:

H1 { font: 14pt Verdana, Arial, Helvetica, sans-serif; COLOR: #FFCC00; font-weight: bold }

Вообще, с помощью CSS можно задать уйму параметров для шрифтов, ссылок, таблиц...

Использование CSS очень удобно, а иногда и просто необходимо.

Юрий Земсков

Рекомендуем почитать:
Такие разные ссылки
Добавление CSS
Стильные ссылки


Оставить комментарий: