Принцип наследования

Для элементов HTML, описанных в файле CSS, справедлив принцип наследования. Что это означает?

Предположим, в используемом вами файле CSS заголовкам первого уровня составляющих сайт документов присвоен стиль, определяющий отображение элементов <Н1> зеленым цветом. Однако для элемента выделения текста жирным шрифтом <STRONG> никакой цветовой спецификации не было задано. Теперь представим себе, что в коде одной из использующих CSS web-страниц встречается следующая директива:

<Н1>Каскадные таблицы стилей это <STRONG>Kpyтo!</STRONG></Hl>

В окне броузера слово «круто» отобразится жирным шрифтом зеленого цвета. Иными словами, элемент <STRONG> унаследовал присвоенные тегу <Н1> свойства, поскольку в предложенной выше строке последний является «старшим» тегом, директивой более высокого уровня.

Приведу другой пример. Положим, в файле CSS вы установили для элемента<Р> выравнивание по левой границе экрана, не указав каких-либо дополнительных параметров для элемента <IMG>. Если в коде html-документа вы заключите директиву вызова изображения в тег разметки текстового абзаца, как показано в следующем примере, то изображение автоматически будет позиционировано по левому краю окна броузера:

<P><IMG SRC="image.gif" WIDTH="310" HEIGHT="219"></P>

Именно на принципе наследования свойств одного элемента другим строится простой метод описания единых параметров отображения для всех видимых элементов web-страниц. Это описание можно осуществить с помощью всего одной строки кода. Не верите? Напрасно. Включите в листинг вашего ess-файласледующую директиву:

BODY{

background: white:

color: black:

font-family: sans-:erif;

font-size: l0pt:

}

Догадались, в чем кроется секрет? Все элементы web-страниц по умолчанию являются дочерними директивами тега <BODY>, а значит, они будут автоматически

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

  Свойства элементов

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

  Свойства шрифта

Свойства шрифта могут описывать элементы, содержащие текст. Среди них можно перечислить такие, как А, В, BODY, CAPTION, DD, DL, DT, EM,H1-H6, I, LI, P, SMALL, STRIKE, STRONG, TD, TH, U и некоторые другие. Данные элементы могут включать в себя в качестве описаний свойства, перечисленные ниже. Свойство font-family используют для указания шрифта или семейства шрифтов, которыми будет отображаться обрабатываемый элементом текст. Применять данное свойство следует достаточно осторожно, поскольку возможна ситуация, при которой указанного шрифта не окажется на компьютере пользователя. Если вы не уверены в том, что требуемый шрифт установлен в системе всех потенциальных посетителей вашего сайта, поместите на сервер данный шрифт в формате TTF (True Type Font) без использования архиваторов и укажите в значении свойства font-family URL к этому файлу так, как показано в предложенном ниже примере. Если клиентский броузер не обнаружит требуемого шрифта на машине пользователя, он, воспользовавшись указанным вами URL, загрузит и установит шрифт в автоматическом режиме.

Пример:

P {font-family: Aria! Black URL(' . ./fonts/arialblack.ttf'):}

URL шрифта можно указывать в виде как абсолютного адреса (например, http://www.myserver.ru/fonts/font_name.ttf), так и относительного (например, / fonts / f ontjiame. ttf).

Свойство font-size управляет размером шрифта. Значение этого свойства может быть указано как в абсолютных, так и в относительных величинах. Под абсолютными величинами подразумевается размер шрифта в условных пунктах(pt), сантиметрах (cm), миллиметрах (mm) или пикселах (рх). Относительные величины содержат указание на размер шрифта в процентах от высоты символов, принятой по умолчанию, или в виде следующих определений: smaller — самый маленький шрифт по отношению к установленному по умолчанию, small — маленький шрифт, medium — средний, large — большой шрифт и, наконец, larger — самый большой шрифт. Необходимо помнить, что использование абсолютных значений более предпочтительно, поскольку относительные значения броузеры разных версий могут трактовать весьма различным образом.

Пример:

H1 {font-size: 30pt;}

Н2 {font-size: 100рх:}

H4 {font-size: 60%;}

Свойство font-weight оговаривает толщину символов используемого шрифта. Толщина может быть задана следующими определениями: normal — стандартное написание без каких-либо изменений, lighter — тонкий шрифт, bold —жирный шрифт и, наконец, bolder — очень жирный шрифт. Необходимо учитывать, что значения свойства font-weight обрабатываются интерпретаторами различных броузеров по-разному. Например, Microsoft Internet Explorer отображает текст, которому присвоен параметр bolder, так же, как текст, отмеченный значением bold, a Netscape Navigator отобразит его идентично тексту с параметром normal. К тому же Internet Explorer не умеет различать значения normal и lighter, поэтому эти отрывки текста отображаются в нем одинаковым образом.

Пример:

STRIKE {font-weight: bold:}

Свойство font-variant определяет регистр записи символов и может принимать одно из двух значений: normal — стандартное написание без каких-либо изменений и small-caps, когда все символы, описываемые данным элементом, превращаются в заглавные. Учтите, что свойство font-variant поддерживает только Microsoft Internet Explorer.

Пример:

CAPTION {font-variant: small-caps:}

Свойство font-style описывает правила начертания символов: normal — стандартное написание и italic — написание наклонным шрифтом.

Пример:

ЕМ {font-style: italic:}

На главную