Приложение B. Cведения о CSS

Поддержка каскадированных таблиц стилей (CSS) в Internet Explorer 3 и Netscape 4 стала важным шагом в развитии стандартов веб. Вместо описания содержания и внешнего вида веб-страницы в HTML вы можете использовать CSS. При этом содержание и структура страницы описывается в HTML, а инструкции по отображению страницы пишутся с использованием таблицы стилей.

Огромное преимущество стилей в том, что если вам надо изменить вид какого-либо элемента на странице, вроде цвета заголовка или полей вокруг изображений, вам не придется вносить изменения в каждую строку HTML – вы просто меняете в одном месте стиль, и вся страница, использующая таблицу стилей, изменяется в соответствии с вашими установками. Многие разработчики страниц не пользуются CSS, поскольку не все броузеры их поддерживают. (См. раздел "Поддержка броузера для CSS".) Но сейчас, когда самые распространенные броузеры поддерживают CSS, можно начинать пользоваться их преимуществами.

Основы таблиц стилей

Правила формата стиля

Одним из правил каскадированной таблицы является селектор – тэг HTML, сопровождаемый параметрами CSS в скобках, отделенный точкой с запятой.

body {background-color:darkblue;}

Здесь описаны основные концепции и правила CSS. Более полную информацию вы сможете получить по адресу msdn.microsoft.com/workshop/author/css/reference/attributes.asp. А также www.w3.org/Style/CSS.

Каскадированость и наследственность

Стили называются каскадироваными потому, что многие из них применяются не только к указанному вами элементу, но и к под-элементам. Например, когда вы устанавливаете стиль шрифта для таблицы, ячейки и параграфы тоже приобретают этот стиль, вам не надо указывать для них стиль отдельно. (Впрочем, вы всегда можете использовать другие правила стиля для объектов внутри таблицы.)

table {font-size:smaller;}

Некоторые характеристики, такие как поля и задний фон, не наследуются.

table { margin:8px; }

Установка множественных стилей

Чтобы установить стиль для нескольких селекторов, используйте запятые.

h1,h2,h3,h4,h5,h6 {color:white;}

Установка стиля в контексте

Вы можете устанавливать стили, применяемые в конкретном контексте – стили объектов внутри других объектов.

table a {color:maroon;}

Единицы длины

В CSS используется несколько единиц длины, наиболее важные – это px (пиксели), pt (пункты), in (дюймы), mm (миллиметры), em (ширина заглавной "M" в данном шрифте) и ex (высота маленькой "x" в данном шрифте).

body,td {font-size:16px;}

body {margin:.5in;}

h1,h2,h3 
  {border:1mm solid gray;
  padding:.5em;}