Главная :: Архив рассылки :: Основные правила CSS

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

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

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

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

Основные правила CSS
Анонс следующего выпуска.
Полезные ссылки.

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

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

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

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

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

Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, жирный шрифт "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/Нет").