Урок 2. Основы

Как же описывать свойства некоторых элементов страницы? На самом деле, в этом нет ничего сложного, и самый примитивный случай присвоения стилей выглядит так:
имя элемента {свойство: значение;}
Здесь «имя элемента» - это название какого-либо HTML-тэга, чьи свойства мы желаем задать. Для простоты и наглядности я возьму элемент BODY и попытаюсь с помощью стилей сделать фон страницы зеленым. Конечно, такой шаг в Web-дизайне просто не допустим, но мы с вами только учимся.
Нижеследующий код заключен в шапке документа, то есть между тэгами <HEAD> и </HEAD>. Я не стал приводить полный листинг Web-страницы, чтобы вам легче было разобраться:

<STYLE TYPE=”text/css”>
BODY {background-color: green;}
</STYLE>

Попробуйте загрузить данный код в броузере и вы увидите, что фон действительно стал ядовито-зеленым. В качестве цвета не обязательно указывать полное название последнего. Как и в обычном HTML вы можете прибегнуть к таблице RGB.

Из примера видно, что, хотя мы описывали тэг <BODY>, в стилях он прописан без ограничителей < и >. И действительно, если вы поставите данные знаки, то броузер будет пребывать в замешательстве, воспринимая <BODY>, как элемент тела, а не описываемый тэг.
При работе со стилями необходимо помнить, что не все пользователи Сети имеют современные броузеры. Такие динозавры не смогут правильно интерпретировать CSS-код, и обязательно сделают какую-нибудь пакость, испортив тем самым ваше творение. Но не стоит отчаиваться и пускать на клавиатуру сопли, ведь от такого поведения есть лекарство, имя которому «комментарии». Перепишем нашу каскадную таблицу следующим образом:

<STYLE TYPE=”text/css”>
<!--
BODY {background-color: green;}
-->
</STYLE>

При таком раскладе, старые броузеры пропустят все содержимое стилей, а новые выполнят их, так как они понимают, что в данном случае комментарии несут иной смысл.

>>> Теперь вы знаете, как выглядит самая примитивная CSS-таблица. Первым свойством, с которым вы познакомились было background-color, дальше – труднее.

>>> Вопросы по урокам:
- Для чего служат CSS?
- В какой контейнер они заключаются?
- Зачем нужны комментарии?


РЕКЛАМА
Rambler's Top100 Каталог сайтов и ссылок. Каталог ресурсов на Promotion.SU
Hosted by uCoz