Представляю Вашему вниманию девятый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы продолжим знакомство с каскадными таблицами стилей.
Правила каскадных таблиц стилей состоят из селектора и определения. Селектор задает элемент (например, таблица), а определение свойства этого элемента (например, цвет фона таблицы).
Синтаксис. В CSS в качестве селектора выступают теги HTML. Описание задается в фигурных скобках. Если у заданного свойства несколько значений, то они отделяются друг от друга пробелами. Описания отделяются друг от друга точкой с запятой:
Ниже приводится простой пример 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/Нет").