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

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

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

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

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

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

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

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

Включите в листинг сss-файла следующую директиву:

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 / fontname. 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:}

Свойства текста

Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае.

Свойство text-align задает расположение текста относительно границ рабочего окна браузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми «блоковыми элементами», то есть элементами, поддерживающими отображение текстовых массивов: P, H1-H6, TD, TR и некоторыми другими.

Можно использовать одно из четырех значений данного свойства:

· left — выравнивание по левой границе экрана или ячейки таблицы,

· right — по правой границе,

· center — выравнивание по центру и

· justify — растягивание текста по всей ширине экрана или табличной ячейки.

Пример:

Р {text-align: justify;}

Свойство text-decoration. Управляет начертанием символов: с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста. Данное свойство может принимать одно из следующих значений:

· none — отсутствие всяких эффектов,

· underline — подчеркнутый текст,

· line-through — перечеркнутый текст,

· overline — надстрочный текст и

· blink — мерцающий текст.

Обратите внимание на то, что значение overline данного свойства не поддерживается броузером Netscape Navigator, а значение blink — наоборот, программой Microsoft Internet Explorer.

Пример:

A {text-decoration: none:}

ПРИМЕЧАНИЕ Включение в файл CSS элемента А в совокупности с определением «text-decoration: none» отменяет подчеркивание гиперссылок в документах HTML.

Элемент А может быть представлен в тексте файла CSS с использованием четырех определений:

· link — просто размещенная на web-странице ссылка,

· active описывает состояние ссылки, нажимаемой пользователем в данный момент времени,

· hover — состояние ссылки в момент, когда пользователь навел на нее курсор мыши и visited отображает посещенную ссылку.

Определения состояний записываются через двоеточие после названия элемента, например, A: visited{color:2F4F4F;}.

Свойство text-indent, применяемое, как правило, совместно с элементом Р, указывает на отступ первой строки текстового блока в пикселах, сантиметрах, миллиметрах или в процентах от общей длины строки. Например, его используют для организации табулированных абзацных отступов, так называемых «красных строк».

Пример:

Р {text-indent: 30pt;}

Свойство line-height устанавливает межстрочный интервал текста web-страницы в пикселах, сантиметрах, миллиметрах или процентах от интервала, определенного по умолчанию. К этому свойству можно применить значение normal, оставляющее определенный в настройках клиентского браузера межстрочный интервал без изменений.

Пример:

Р { line-height: 5px;}

Свойство letter-spacing устанавливает расстояние между символами текста в пикселах, сантиметрах или миллиметрах, но распознается оно только браузером Microsoft Internet Explorer. Возможно использование атрибута normal, оставляющего межсимвольный интервал, принятый по умолчанию.

Пример:

Р { letter-spacing: Зрх:}

Свойство vertical-align определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке и также не распознается браузером Netscape Navigator. Оно может принимать одно из следующих значений:

· top — позиционирование по верхней границе ячейки,

· middle — по центру ячейки,

· bottom — по нижней границе ячейки,

· baseline — по условной базовой линии,

· top-text — по верхней точке текстовой строки,

· bottom-text по нижней точке текстовой строки.

Пример:

ТО {vertical-align: top:}

IMG {vertical-align: top-text;}

Свойство text-transform задает трансформацию определяемого элементом текстового блока: normal — стандартное отображение текста без каких-либо изменений, capitalize — каждое слово абзаца начинается с заглавной буквы, при этом регистр символов, определенный в коде HTML, игнорируется; uppercase — все символы текста становятся заглавными и, наконец, lowercase — все символы становятся строчными. Это свойство поддерживается только броузером Microsoft Internet Explorer.

Пример:

CAPTION {text-transform: capitalize;}

Дата добавления: 2020-04-12; просмотров: 199;