Почему каскадные?

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

Способы внедрения стилей на странице:

• использование отдельного стилевого файла и вставка его при помощи тега <link>

• описание стиля в заголовке документа

• применения стиля как параметра в теге.

Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен шрифтом 12 пунктов - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль: <style type="text/css"> <!-- a.link { text-decoration: none; color:red; } --> </style> </head>

И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички указать ссылку на сайт автора странички, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки: <a href="http://www.pupkin.ru"><span style="color: #000000;">Вася Пупкин</span></a>

или так <a href="http://www.pupkin.ru" style="color: #000000;">Вася Пупкин</a>

Сделали мы это при помощи атрибута style, а он действует лишь в пределах того тега, в котором был определен.

Тег <span></span> определяет некую область, к которой мы можем применить стиль.

Наследование

Некоторые значения наследуются дочерними элементами (тегами).

Предположим, что имеется элемент H1, в котором расположен элемент выделения EM: <H1>Данный заголовок <EM>очень</EM> важен!</H1>

Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен, синим цветом.

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

Пример(ы):

Например, свойство 'color' является наследуемым, поэтому все потомки элемента BODY унаследуют цвет 'black': BODY { color: black; }

Значения, заданные в процентах, не наследуются, а вычисляемые значения наследуются. Пример(ы):

Пусть задана следующая таблица стиля: BODY { font-size: 10pt } H1 { font-size: 120% }

и фрагмент документа: <BODY> <H1>Некоторый <EM>крупный</EM> заголовок</H1> </BODY>

Свойство 'font-size' элемента H1 будет иметь вычисленное значение '12pt' (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства 'font-size' является наследуемым, то элемент EM также будет иметь вычисленное значение '12pt'.