| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Селекторы Итак, параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением .ess. Общий синтаксис записи стилей всех элементов
HTML в таком файле выглядит следующим образом: НАЗВАНИЕ ЭЛЕМЕНТА (свойство: значение:} В качестве названий элементов принимаются, как правило, теги HTML. Например,
если вы хотите, чтобы все заголовки первого уровня в вашем html-доку-менте отображались синим цветом и имели размер в двадцать пикселов, присоединенный к web-страничке файл CSS должен включать следующую
запись: H1 {color: blue: font-size: 20pt;} Такая директива CSS называется селектором. Все, что содержится в фигурных скобках справа от названия элемента, принято
называть для простоты определением селектора. Каждое определение содержит перечисление свойств и значений. Описания всех свойств и значений заключаются в фигурные скобки и разделяются точкой с запятой.
Очевидно, что селектор управляет внешней формой отображения объектов HTML и может содержать только те свойства и значения, которые характерны для того или иного элемента языка разметки гипертекста.
Группировка селекторов Если в нескольких разных селекторах используются одни и те же определения, с помощью языка CSS их можно сгруппировать между собой. Группировка
селекторов в единую директиву осуществляется следующим образом: сначала идет перечисление через запятую всех элементов, использующих одинаковое определение, затем в фигурных скобках указываются их свойства
и значения. Ниже приведены синтаксис записи и пример использования такой комбинированной директивы. НАЗВАНИЕ ЭЛЕМЕНТА-1. НАЗВАНИЕ ЭЛЕМЕНТА-2. ... НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение:}
Пример: H1. Н2. НЗ. Н4 {font-family: Helvetica: color: red: font-size: 30pt:} Аналогичным образом можно группировать между собой определения,
описывая их наподобие некой подпрограммы: НАЗВАНИЕ ЭЛЕМЕНТА {Определение-1:Определение-2: Определение-N;} На самом деле подобная запись идентична перечислению списка
определений подряд, в одну строку, расположенную правее названия элемента и ограниченную фигурными скобками, однако в развернутом варианте читать листинг файла CSS гораздо проще и удобнее. Вот пример такого
оформления определений: Н1{ font-family: Helvetica; font-style: italic: font-Size: 30pt; color:
black:} Принцип наследования Для элементов 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:}
Свойства текста Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом
отдельном случае. Свойство text-align задает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока.
Соответственно, оно применяется совместно с так называемыми блоковыми элементами, то есть элементами, поддерживающими отображение текстовых массивов: P, H1-H6, TD, TR и некоторыми другими.
Можно использовать одно из четырех значений данного свойства: left — выравнивание по левой границе экрана или ячейки таблицы, right — по правой границе, center — выравнивание по центру и justify — растягивание
текста по всей ширине экрана или табличной ячейки. Пример: Р {text-align: justify;} Свойство text-decoration. Управляет начертанием символов:
с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста. Данное свойство может принимать одно из следующих значений: попе — отсутствие всяких эффектов, 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;} 1>>>2>>>3 Обсудить в форуме...>>>>
| 
