Автор: Земсков
Юрий
Источник: LIST.ee
Да простит меня
Максим Горький за плагиат
названия статьи (первой его
части, конечно же :).
Цель данной публикации - на
практике показать
полезность каскадных таблиц
стилей.
Не пугайтесь. Не смотря на
такое страшное название, все
не так уж и сложно. Данная
статья ни в коем случае не
претендует на звание
инструкции по 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 очень
удобно, а иногда и просто
необходимо.
Заходите на сайт "Web...
Просто Web", чтобы
прочесть еще множество
интересных статей о веб-строительстве.
Предлагаю также обсудить
интересующие вас вопросы на Форуме
обо Всем!