Группировка селекторов

Лекция №10

Тема: «Каскадные таблицы стилей»

Вопросы темы:

Селекторы

Группировка селекторов

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

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

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

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

Свойства цвета и фона

Свойства границ

Свойства списков

Вспомогательные свойства элементов

Классы

Идентификаторы

Комментарии

Безопасность

Подключение к web-странице

Уже изученных нами основ HTML вполне достаточно, чтобы понять простую истину: описание необходимых элементов языка разметки гипертекста — чрезвычайно сложное и утомительное занятие. Представьте себе, что разрабатываемая вами web-страничка содержит десять абзацев текста, которые необходимо расположить по всей ширине окна браузера, и двадцать иллюстраций, которые нужно выровнять по центру экрана. Это означает, что вы должны будете десять раз записать в коде html-документа теги <Р ALIGN="JUSTIFY"></P> и двадцать раз употребить теги <CENTER> </CENTER> либо столько же раз указывать атрибут ALIGN="CENTER" в директиве <IMG>. А если вы формируете на экране сложную таблицу, каждая из пятидесяти ячеек которой должна иметь высоту ровно 20 пикселов? Представляете, сколько раз вам придется специфицировать атрибут HEIGHT, чтобы получить требуемую высоту ячеек в браузерах всех типов? Копирование команд через буфер обмена и использование WYSIWYG-редакторов в данной ситуации обычно не облегчает задачу, поскольку в первом случае вам, скорее всего, надоест щелкать мышью прежде, чем все необходимые директивы будут помещены в соответствующие строки кода, а во втором случае сгенерированный программой код все равно потребует длительного и тщательного редактирования.

Проблема заключается даже не в том, что при подготовке сложных страниц составление html-кода превращается в рутинную работу — это еще можно стерпеть. Хуже то, что по мере увеличения количества вставляемых вами в документ тегов растет и объем результирующего файла, что сказывается отнюдь неположительным образом на скорости его загрузки с сервера.

Выход нашелся достаточно быстро. Программисты компании-разработчика стандарта HTML, консорциума W3C, задумались: а нельзя ли описать все параметры используемых в коде web-страниц тегов один раз, да так, чтобы больше такой необходимости до момента окончания разработки каждого нового ресурса Интернета не возникало? Оказалось, что можно. Для этого и был создан новый стандарт CSS (Cascading Style Sheets — Каскадные таблицы стилей).

CSS в отличие от HTML использует несколько иной алгоритм описания элементов web-страниц. Один раз, указав свойства каждого элемента в текстовом файле с расширением. сss и назначив им свойства стиля, вы можете затем подключить этот файл к html-документу, заставив клиентский браузер считывать значения параметров каждого компонента web-страницы уже оттуда. Более того, поскольку стили описываются вами в отдельном файле, вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту. Чрезвычайно удобно, не так ли? Есть и еще одно неоспоримое преимущество использования CSS перед традиционным способом подготовки web-страниц, которое кажется неочевидным на первый взгляд: для того чтобы изменить стиль оформления какого-либо элемента всех web-страниц вашего сайта, достаточно немного подправить всего одну строку кода в одном файле. Теперь, полагаю, вы убедились в том, что метод описания стилей с помощью CSS является оптимальным для web-дизайна. Осталось только выяснить, как применить все эти преимущества на практике.

 

Селекторы

Параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением. сss. Общий синтаксис записи стилей всех элементов 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" HEIGHT="219"></P>

Именно на принципе наследования свойств одного элемента другим строится простой метод описания единых параметров отображения для всех видимых элементов 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;}