Несвоевременные мысли о CSS
Раздел: Каскадные таблицы стилей 04-12-2004 FAQ оптимизатору на форуме ZenBroker
Да простит меня Максим Горький за плагиат
названия статьи (первой его части, конечно
же :).
Цель данной публикации - на практике
показать полезность каскадных таблиц
стилей.
Не пугайтесь. Не смотря на такое страшное
название, все не так уж и сложно. Данная
статья ни в коем случае не претендует на
звание инструкции по CSS. Всего лишь пара
хитростей / уловок / "фишек" при работе
с этой технологией.
Что это за зверь такой?
CSS - это набор команд, которые говорят
браузеру как именно должна выглядеть
отображаемая страница. Все современные
браузеры этих команд "слушаются".
Выглядит стандартная CSS-команда примерно
так:
Идентификатор { его свойство: значение
свойства; свойство 2: его значение } и т.д.
Набор таких команд помещается между <head></head>
в html файле.
<STYLE type=text/css>
<!--
тут css-команды
-->
</STYLE>
Или же команды пишутся в отдельный файл с
расширением CSS и вызываются из html файла
примерно такой командой:
<link rel=StyleSheet href="style.css" TYPE="text/css"
MEDIA=all>
"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 это выглядело примерно так:
<p><font face="Verdana, Arial,
Helvetica, sans-serif" size="-1"> Это
первый абзац. Эх, тяжело, наверное,
приходилось древним без CSS :)</font></p>
<p><font face="Verdana, Arial,
Helvetica, sans-serif" size="-1">Это
второй абзац и опять тот же самый html код.
Жуть как не эстетично! Да, кстати, в любом
случае НЕ советую задавать только один
шрифт (написав в коде только Verdana, например),
это может привести к "крякозябрам"
вместо текста, если данного шрифта не будет
на компьютере посетителя. Всегда лучше
прописать несколько похожих между собой
шрифтов.</font></p>
А если таких абзацев много и на целом
сайте нет ни одной строчки Times"ом? Все это
выливается в неоправданное увеличение
размера страницы.
Проблема решается элементарно! Как вы уже
догадались - с помощью CSS.
P { font: 10pt Verdana, Arial, Helvetica, sans-serif }
Теперь каждый абзац, помещенный
стандартным для него тегов <p>
будет отображаться так, как вам надо.
Также можно задавать и стили заголовков.
Вот как я сделал на http://www.LIST.ee
H1 { font: 14pt Verdana, Arial, Helvetica, sans-serif; COLOR: #FFCC00;
font-weight: bold }
Вообще, с помощью CSS можно задать уйму
параметров для шрифтов, ссылок, таблиц...
Использование CSS очень удобно, а иногда и
просто необходимо.
Автор статьи: Земсков
Юрий - веб-мастер LIST.ee.
Заходите на сайт "Web...
Просто Web", чтобы прочесть еще
множество интересных статей о веб-строительстве.
Предлагаю также обсудить интересующие вас
вопросы на Форуме обо Всем!
