Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Основные правила CSS

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию девятый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы продолжим знакомство с каскадными таблицами стилей.


Содержание выпуска:
Основные правила

Правила каскадных таблиц стилей состоят из селектора и определения. Селектор задает элемент (например, таблица), а определение свойства этого элемента (например, цвет фона таблицы).

Синтаксис. В CSS в качестве селектора выступают теги HTML. Описание задается в фигурных скобках. Если у заданного свойства несколько значений, то они отделяются друг от друга пробелами. Описания отделяются друг от друга точкой с запятой:

Тег {свойство1: значение1 значение2; свойство2: значение;}

Ниже приводится простой пример CSS, встраиваемого в HTML страницу. Не забывайте, что этот код должен располагаться внутри элемента <HEAD>.

<STYLE TYPE="text/css">
<!--
BODY {
   color: gold;
   background: blue;
   font: bold 14px Comic Sans MS;
   text-align: justify;
   margin: 10px;
}
-->
</STYLE>
Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, жирный шрифт "Comic Sans MS" размером 14 пикселей и выровненный по обоим краям с отступами со всех сторон 10 пикселей.

Для совместимости со "старыми" браузерами, не понимающими CSS, содержимое элемента <STYLE> желательно заключать в комментарий <!-- -->, иначе содержимое будет отображено в окне браузера. Новые "умные" браузеры поймут, что в комментариях заключена таблица стилей и подключат ее. Для удобства чтения/правки в таблицу стилей можно вставить любое количество пробелов и переносов строк, браузер оставит столько, сколько нужно.

Группирование. Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они записываются через точку с запятой:

H1 {font-family: Arial}
H2 {font-family: Arial}
H1, H2 {font-family: Arial}
H1 {font-weight: bold}
H1 {font-size: 14pt}
H1 {font-weight: bold; font-size: 14pt;}

Наследование. При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе <P> задается красный цвет шрифта, то выделенный с помощью <EM> текст также будет красным.

<P>Внутри параграфа с красным цветом текста, <EM>выделенный текст</EM> наследует цвет головного тега.</P>

Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого необходимо описать стиль элемента, порождающего все остальные элементы HTML документа, т.е. тега <BODY>.

Анонс следующего выпуска

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

Полезные ссылки

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Хмурое утро, жена выгоняет интернетчика погулять с собакой. Он долго бродит с ней, потом поднимает палку, кидает ее и командует: - Э-э-э, Яндекс! То есть, Рамблер!! Тьфу, апорт!!!
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0081 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net