| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #27, ФЕВРАЛЬ 2003 г. |
CSS - средство для создания лучших сайтов
Леха ББ aka Alexys
Спецвыпуск Xakep, номер #027, стр. 027-032-1
(alex-sun@mtu.ru)
Для создания хотя бы мало-мальски приличного сайта нужно подумать о виде страниц под разными броузерами. У каждого броузера стоят по дефолту какие-то шрифты и их размеры под различные тэги. Не будет приятно видеть всякие висящие или не умещающиеся в колонки таблиц строки при просмотре сайта. Тут понадобится средство для управления всякими font'ами - CSS.
Что есть CSS, или введение
CSS - аббревиатура Cascading Style Sheets. Только этот Sheets далеко не Shits, а даже наоборот. Переводится CSS как "Каскадные Таблицы Стилей". Только не надо думать, что на тебя рухнут всякие таблицы или еще какая нечисть - хотя это что-то типа маленькой базы данных. CSS создан для управления не только внешним и внутренним видами таблиц (как кажется из названия), а также туевой хучей других вещей, таких как шрифты, цвета, фоны.
Задачи CSS'а сходны с обычным html'ным кодом. Например, строка <font color="blue">CSS RULEZ</font> или <font style="color: blue;">CSS RULEZ</font> дадут в результате текст "CSS RULEZ" синего цвета. Спросишь, на хрена надо использовать какой-то CSS, раз все равно результат один? Не торопись с выводами, CSS имеет намного больше возможностей, да еще и помогает уменьшить объем html-страниц.
3 варианта записи CSS
Существует 3 вида использования CSS - внутренние, глобальные и связанные таблицы стилей. Каждый из видов имеет свои + и -, а выбор использования того или иного вида зависит от конкретных задач. Не жди, что добрый дядя будет советовать тебе каждый раз, когда надо будет использовать CSS. Это чем-то похоже на оптимизацию программы. Но чтобы знать, что из чего выбирать, ознакомься с тем, кто есть ху.
а) Глобальные таблицы
Допустим, надо тебе на странице сделать 20 подчеркнутых надписей красного цвета. Надо бы 20 раз писать <font color="red"><u>Текст 1<u></font> ... <font color="red">Текст 20</font>. Не до хрена ли писать? А размер странички как? Конечно, с появлением быстрого инета не так уж это и важно, но ведь не всем пока так хорошо живется. Лучше уж выигранное от кода место использовать под порнографику или чего там еще взбредет в голову. Но можно сделать проще, лучше и быстрее. Между тэгом <head> и </head> пишется следующее:
<style type="text/css">
<!--
font {color: red; text-decoration: underline;}
-->
</style>
В этих строчках был переопределен весь вид тэга <font>. На этой странице весь текст между тэгами <font></font> будет красным и подчеркнутым, причем будет выиграно в коде примерно 2 килобайта. Если потом захочется убрать подчеркивание и сделать наклонный шрифт, то надо будет лишь исправить одну строчку с описанием свойств font'а на font {color: red; font-style:Italic;}. Комментаторы (<!-- -->) нужны для того, чтобы какой-нибудь старенький броузер (ИЕ 3 или другой старичок) окончательно не двинул кони от невиданного ранее CSS'а. Если ты думаешь, что таких броузеров много, то ошибаешься. Примерно 99.9% броузеров нормально понимают CSS.