Каскадные таблицы стилей

Размещено на http://www.allbest.ru/

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

Вопросы темы

1. Селекторы

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

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

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

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

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

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

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

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

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

11. Классы

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

13. Комментарии

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

15. Подключение к 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-дизайна. Осталось только выяснить, как применить все эти преимущества на практике.

1. Селекторы

Параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением .сss. Общий синтаксис записи стилей всех элементов HTML в таком файле выглядит следующим образом:

НАЗВАНИЕ ЭЛЕМЕНТА {свойство: значение}

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

H1 {color: blue: font-size: 20pt;}

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

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

Если в нескольких разных селекторах используются одни и те же определения, с помощью языка 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;}

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

Для элементов 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-страниц. Это описание можно осуществить с помощью всего одной строки кода.. Включите в листинг сss-файла следующую директиву:

BODY{

background: white:

color: black:

font-family: sans-:erif;

font-size: l0pt:

}

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

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

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

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

Свойства шрифта могут описывать элементы, содержащие текст. Среди них можно перечислить такие, как А, В, 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:}

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

Свойства текста применяются практически ко всем элементам 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;}

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

Свойство color определяет цвет любого элемента CSS.

Пример:

SMALL {color: red:}

Свойство background-color указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных браузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы.

Пример:

H1 { background-color: #f00000;}

Свойство background-image устанавливает фоновое изображение всего документа или ячейки таблицы. С ним можно использовать параметр попе, указывающий на то, что данная страница не содержит фоновых изображений.

Пример:

BODY {background-image: URL(/images/picture.gif):}

Свойство background-repeat определяет параметры повторения (копирования)фонового изображения в разных направлениях видимой части html-документа. Может принимать одно их следующих значений:

· no-repeat -- не повторять изображение;

· repeat -- повторять изображение во всех направлениях;

· repeat-x --только по горизонтали;

· repeat-y -- только по вертикали.

Пример:

BODY {background-repeat: no-repeat:}

Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует изображение на экране.

Пример:

BODY { background-attachment: scroll:}

Свойство background-position, в случае если значение свойства background-repeat установлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения. Оно может принимать следующие значения:

· top -- позиционирование по верхней границе экрана,

· middle -- по центру экрана,

· bottom -- по нижней границе,

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

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

· center -- выравнивание по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.

Пример использования:

BODY {background-position: 30cm 0cm;}

TD {background-position: middle:}

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

Свойства margin-left, margin-right, margin-top и margin-bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно слева, справа, сверху и снизу. Отступ представляет собой пустое пространство, не заполненное никакими другими элементами. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц, любых других компонентов, для которых вы хотите указать описанные здесь значения.

Пример:

Р {margin-left: 20px;}

IMG{

margin-top: 10mm:

margin-left: 15mm;

margin-bottom: 10mm:

}

Свойства padding-left, padding-right, padding-top и padding-bottom, аналогично рассмотренным выше, описывают значения отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах или миллиметрах. Они могут применяться как вместе, так и по отдельности.

Пример:

TABLE {

padding-left: 10рх:

padding-right:10px;

padding-top: 15px:

padding-bottom: 15px:

}

Свойства border-top-width, border-bottom-width, border-right-width и border-left-width определяют толщину видимого обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше.

Пример:

TD{

border-top-width: 2px:

border-bottom-width: 2px:

border-right-width: 1mm:

border-left-width: 1mm;

}

Свойство border-color описывает цвет видимого обрамления объектов -- рамок изображений и бордюров таблиц.

Пример:

TABLE (border-color: blue;}

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

Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом <LI>.В языке CSS данному элементу присваиваются следующие свойства. Свойство list-style-type определяет внешний вид маркера нумерованного или маркированного списка и может принимать одно из перечисленных далее значений:

· none -- маркер списка не отображается; для маркированного списка

· disc -- метка отображается в виде черного круга,

· circle -- в виде полой окружности,

· square -- в виде черного квадрата; для нумерованного списка

· decimal --метки отображаются в виде последовательности арабских чисел,

· lower-roman --в виде последовательности римских цифр, записанных в строчном регистре,

· upper-roman -- в виде последовательности римских цифр в заглавном регистре,

· lower-alpha -- в виде последовательности строчных букв, upper-alpha -- в виде последовательности заглавных букв.

Пример:

LI {list-style-type: square:}

Свойство list-style-image позволяет назначить в качестве метки маркированного списка произвольное изображение.

Пример:

LI {list-style-image: URL(/images/marker.gif);}

Свойство list-style-position описывает позиционирование элементов списка и может принимать следующие значения:

outside -- позиционирование осуществляется по умолчанию и

inside -- позиционирование без отступа от левой границы рабочего окна браузера. Пример:

LI { list-style-position: inside:}

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

Свойства width и height определяют соответственно ширину и высоту объекта в пикселах, миллиметрах, сантиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений различной величины в случаях, когда их необходимо выровнять по вертикали или горизонтали. Данные свойства можно использовать как вместе, так и по отдельности.

Пример:

IMG {

height: 80%;

width: 120px:

}

Свойство float указывает на расположение какого-либо объекта в окне браузера относительно других объектов, размещенных рядом. Оно может принимать одно из следующих значений:

none -- расположение объекта по умолчанию,

left -- расположение объекта слева или

right -- расположение объекта справа.

Пример:

TD {float: left:}

Свойство clear описывает правила расположения других объектов вокруг данного элемента web-страницы. Принимает одно из следующих значений: none --расположение объектов по умолчанию, left -- расположение слева, right --справа и, наконец, both -- расположение с двух сторон.

Пример:

IMG {clear: both;}

Свойство white-space применяется для управления отображением пробелов и переносов между элементами html-документа или словами текста. Свойство может использовать одно из следующих значений:

normal -- стандартное отображение текста, при котором несколько следующих подряд пробелов преобразуются в один,

рге -- допускается отображение нескольких символов пробела подряд и, наконец,

nowrap -- запрещен перенос строки в пределах действия элемента.

Пример:

Р {white-space: рге;}

Свойство display применяется для управления взаимным расположением текстовых строк и объектов на экране монитора. Может принимать одно из следующих значений:

· block -- отображает перенос строки до и после объекта;

· list-item -- переносит строку до и после объекта, а кроме того, добавляет в начало строки маркер, как в случае использования маркированного списка;

· inline --допускается отображение объекта на одной строке с другими элементами;

· none -- объект не отображается.

Пример:

IMG {display: block;}

11. Классы

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

Существуют два метода использования классов.

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

НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;}

Простым примером использования данной функции CSS может служить следующий отрывок текста ess-файла:

P.myclass {text-align: justify;}

В этом случае именем класса у вас служит символьный определитель «myclass». Теперь, если вы вызовете в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <Р>:

<BODY>

<Р CLASS="myclass">Teкст, отформатированный согласно директивам CSS</P>

<Р>Текст. отформатированный по умолчанию</Р>

</BODY>

Очевидно, что теперь текст, заключенный в первую пару тегов <Р> и </Р>, будет растянут по всей ширине окна браузера, а текст, заключенный во вторую пару этих тегов, останется отформатированным по умолчанию. Таким образом, вы можете придавать одним и тем же элементам разметки гипертекста различные свойства в пределах одного документа.

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

.имя класса{свойство: значение;}

В качестве примера такого представления класса можно предложить следующий вариант описания свойств элементов web-страниц:

,myclass{color: green;}

Записав предложенную выше строку в файл CSS, вы можете вызывать класс с именем «myclass» из кода html-документа, присваивая его свойства любому тегу. Например, указав в html-коде директиву

<Р CLASS="myclass">TeKCT, отображаемый зеленым цветом </Р>

вы сделаете так, что выводимый в окне браузера текст будет отображаться зеленым шрифтом. В этом же документе вы можете применить такую команду:

<Н3 CLASS="myclass ">текстовый заголовок</Н3>

Заголовок третьего уровня также будет представлен на экране зеленым цветом. Очевидно, что каждый класс можно вызывать в пределах одной web-страницы неограниченное количество раз, равно как каждый файл CSS может содержать неограниченное количество классов.

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

A.class-l.c1ass-2{text-decoration: none;}

является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.

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

В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В файле CSS идентификатор обозначается знаком <#», а в документе HTML -- атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно представить в следующем виде:

НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}

Простым примером использования идентификатора может служить такой отрывок файла CSS:

P#qwerty{text-align: left:}

В html-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID:

<Р ID="qwerty">Teкст. позиционированный по левой границе экрана</Р>

Очевидно, что тег <Р>, включающий атрибут ID, в качестве значения которого использовано имя идентификатора, наследует свойства последнего. Если же в записи этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию либо согласно другим директивам HTML или CSS. Идентификаторы также можно записывать без указания имени элемента, которому они соответствуют. Так, строка

#qwerty{color: #00FF00:}

создает идентификатор, который может использовать любой элемент HTML, например:

<Н1 ID="qwerty">Teкст заголовка</Н1>

13. Комментарии

Файл CSS может содержать введенные пользователем комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом:

/* текст комментария */

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

Поскольку стандарт CSS окончательно сложился значительно позже стандарта HTML, в полной мере его поддерживают далеко не все версии браузеров, а именно -- Microsoft Internet Explorer начиная с версии 4.0 и Netscape Navigator старше четвертой версии. Более того, интерпретаторы данных браузеров работают, как известно, с некоторыми отличиями, а потому одни и те же элементы, специфицированные согласно стандарту CSS, могут отображаться в них совершенно по-разному.

Поэтому с объективной точки зрения нецелесообразно использование для представления содержимого web-страниц каскадных таблиц стилей в полном объеме. Наоборот, рекомендуется применять лишь ограниченный набор элементов, заведомо поддерживаемый браузерами большинства версий. Такой набор директив CSS условно называется «безопасным». В него входят, прежде всего, свойства текста font-family, font-weight и font-size, свойства цвета color и background-color, свойства текста text-align, text-indent, text-decoration и line-height и, наконец, свойства границ margin-left, margin-right и margin-top. Это отнюдь не означает, что другие свойства CSS использовать категорически нельзя, просто делать это следует с осторожностью. Подробные таблицы совместимости стандарта CSS с различными версиями браузеров можно найти на сервере http://style.webreview.com.

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

Широкие возможности каскадных таблиц стилей можно использовать совместно с html-документом различными способами. Первый из них подразумевает использование нотаций CSS непосредственно в тегах кода web-страницы, помещаемых в тело документа, ограниченное директивами <BODY> и </BODY>. В этом случае общий вид записи тега HTML будет иметь следующий вид:

<ТЕГ STYLE="свойство: значение">Содержимое тега</ТЕГ>

Например, для того чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета, можно использовать следующую запись команды форматирования абзаца:

<Р STYLE="color: геd">Текст, отображаемый красным цветом</Р>

Подобная форма представления элементов каскадных таблиц стилей не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.

Второй способ подразумевает включение в html-код web-страницы инструкций CSS наподобие подпрограммы. Он также не требует подключения к странице отдельного ess-файла и применяется в основном в тех случаях, когда создание такого файла представляется нецелесообразным, например, если стали используются в пределах лишь одного документа HTML.

Интеграция инструкций CSS в web-страницу осуществляется записью необходимых нотаций CSS в пределах тегов <STYLE TYPE="text/css"> и </STYLE>, которые, в свою очередь, являются составляющими заголовка документа <НЕАD>. Вот простой пример такого использования директив каскадных таблиц стилей:

каскадная таблица стиль

<HTML>

<HEAD>

<TITLE>3a головок страницы</ТIТLЕ>

<STYLE TYPE="text/css">

P{text-align: justify:}

Hl{color: green:}

</STYLE>

</HEAD>

<BODY>

Тело html документа

</BODY>

</HTML>

Третий метод использования в документе HTML элементов стилей подразумевает подключение к данному документу отдельного файла с расширением .css, содержащего описания всех элементов стилей и их свойств, который хранится на сервере отдельно от web-страниц. Для этого в заголовок <HEAD> htrol-файла необходимо включить тег <STYLE>, внутри которого следует записать команду вызова файла CSS. В общем виде процедура подключения ess-файла к web-странице будет выглядеть следующим образом:

<HEAD>

<TITLE>3aголовок страницы</TITLE>

<STYLE TYPE="text/css">

@import url(http://www.myserver.ru/css/fne.ess):

</STYLE>

</HEAD>

Свойства стилей, описанных в файле с именем file.css, импортируются в данном примере с применением нотации@ ^import, использующей аргумент url, значение которого, заключаемое в круглые скобки, и является полным или сокращенным адресом, указывающим на целевой ess-файл. Если файл CSS хранится в той же серверной директории, что и использующий его документ HTML, в качестве URL этого файла можно просто указать его имя.

И наконец, четвертый способ подключения файла CSS к web-странице, наиболее традиционный и часто используемый, подразумевает добавление в заголовок <HEAD> html-документа специального тега <LINK>. Синтаксис записи при этом выглядит следующим образом:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Вместо параметра URL атрибута HREF тега <LINK> подставляется полный или сокращенный адрес, указывающий на расположение необходимого ess-файла.Примером использования данной директивы может служить такой отрывок HTML-кода:

<НЕАD>

<ТIТLE>Заголовок страницы</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" HREF=". ../css/file.css">

</HEAD>

CSS можно применять на всех без исключения типах http-серверов без ограничений. Те или иные ограничения на использование каскадных таблиц стилей может накладывать только клиентское программное обеспечение. Не требуется также никаких надстроек и дополнительных программных модулей для того, чтобы браузеры пользователей могли обрабатывать директивы CSS. Файлы CSS просто загружаются на сервер совместно с web-страницами, а при открытии в браузере посетителя вашего сайта они будут автоматически считаны с удаленного узла и запущены на исполнение.

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

Маленькие хитрости CSS

Как известно, HTML -- язык не компилируемый, а интерпретируемый. Причем интерпретируется он весьма любопытным образом: если браузер обнаруживает неточность в записи какого-либо тега HTML, он не выводит на экран сообщение об ошибке, а просто игнорирует всю ошибочную строку, продолжая обработку кода дальше.

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

Метод борьбы с этим досадным недостатком старого программного обеспечения чрезвычайно прост. Нужно всего-навсего «спрятать» встроенные в html-документ директивы CSS внутрь комментария. Современные браузеры проигнорируют синтаксис комментария и станут транслировать содержащиеся в них инструкции CSS по обычному алгоритму, старые же браузеры, наоборот, проигнорируют весь комментарий целиком. Вот пример использования этого незамысловатого приема на практике:

<HEAD>

<TITLE>3aголовок страницы</TITLE>

<STYLE TYPE="text/css">

<!--

P{text-align: justify;}

H1{color: green;}

-->

</STYLE>

</HEAD>

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

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

/* File type: CSS; file name: style.css: file location: */

H1{font-family:Arial; font-size: 70pt: font-weight: bold;}

.abc{color: gray; margin-top: l00px: margin-left: 60px:}

.deffcolor: black; margin-top: -118px; margin-left: 58px:}

/* End of file */

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

<Н1 CLASS="аbс">Заголовок</Н1>

<Н1 CLASS="def">3aголовок</Hl>

Варьируя значения свойств margin-top и margin-left классов «abc» и «def», можно добиться ряда интересных и достаточно красивых эффектов.

Пример файла CSS

Приведем простой и наглядный пример файла CSS, описывающего стили отображения элементов web-страницы. Данный файл представляет собой обычный текстовый документ, набранный в редакторе Notepad и сохраненный на диске под именем style.css.

/* File type: CSS;

File name: style.сss:

File location: '

Autor: Ivan Ivanov */

BODY{

background-color: №FFFFFF;

font-size: l0pt;

font-family: Arial;

}

P{

font-size: l0pt:

text-align: justify;

}

Hl{

font-size: 40pt;

font-weight: bold;

color: blue;

}

H2{

font-size: 30pt;

font-weight: bold:

color: red;

}

TD{

font-size: llpt;

font-weight: bold;

border-top-width: 0px;

border-bottom-width: 0px;

border-right-width: 0px;

border-left-width: 0px;

}

LI{

list-style-image: URL(/images/marker.gif);

list-style-position: inside:

}

.form{font-size: l0pt: color: black:}

P.comment {

font-family: Courier New: FONT-SIZE: 8pt:

}

#news{

font-family: Arial: .

font-size: 12pt:

font-weight: bold:

}

/* End of file */

Как становится очевидным из изученного нами материала, в этом файле мы описали свойства всего документа в целом (элемент BODY), свойства форматирования абзацев (элемент Р), свойства заголовков (элементы HI и Н2), свойства таблиц (элемент TD) и списков (элемент LI), создали классы с именами «form» и «comment», а также описали идентификатор с именем «news».

Вопросы для повторения:

1. Как принято переводить сокращения CSS?

a. Каскадные таблицы стилей;

b. Стилевые каскады полотен;

c. Каскадные стилевые слоим

2. Является ли правильным следующее обращение к внешнему документу?

<STYLE TYPE-“text/css”>

@import url(http://domen.ru/basic);

H1 {color: blue}

</STYLE>

a. Да это обращение правильное

b. Нет, это обращение неправильное

c. Внешний файл можно загрузить только через элемент разметки LINK

3. Что является селектором, а что определением в следующем примере

P {color:blue;}?

a. P - селектор

b. Blue - определение

c. {color: blue;} - определение;

d. {color: blue;} - селектор

4. Является ли следующая запись группированием селекторов и определений H1, H2, H3 (font-weight:bold;}?

a. Не является;

b. Это контекстное объявление стиля;

c. Является;

5. Что называют блочным элементом разметки?

a. P

b. OL

c. DIV

d. TABLE

e. UL

6. Что означает запись float: left?

a. Блочный элемент будет прижат к левой границе окна браузера. Справа его будут обтекать другие элементы разметки, которые следуют на странице вслед за ним;

b. Блочный элемент будет прижат к правой границе окна браузера. Слева его будут обтекать другие элементы разметки, которые следуют вслед за ним.

c. Данный атрибут имеет смысл только в контексте описания элемента разметки IMG.

7. Каким атрибутом определяется внешний отступ от границы блочного элемента?

a. Padding

b. Border

c. Margin

d. Shift

8. можно ли отдельно задать внутренний отступ от левой границы блочного элемента до его содержания?

a. Padding-left

b. Left-padding

c. Float:left

9. Чем управляет атрибут clear?

a. Возможностью появления «плавающих элементов разметки

b. Возможностью обтекания элемента разметки другими элементами разметки

c. Возможностью «очистки» содержания элементов разметки внутри формы

10. Какой атрибут CSS соответствует атрибуту BGCOLOR элемента разметки?

a. Background

b. Background-color

c. Bgcolor

d. Bg-color

11. Чем управляет атрибут стиля white-space?

a. Способом интерпретации пробелов

b. Позволяет работать с пробелами как в элементе разметки PRE

c. Позволяет запретить перенос с одной строки на другую в месте появления пробела (аналогично элементу разметки NOBR)

d. Это величина отступа между словами

12. Можно ли получить при помощи таблицы стилей красную строку?

a. Можно, при помощи атрибута text-indent

b. Можно, путем вставки несжимаемых пробелов

c. Можно, применив к части текста display:pre

d. Нельзя

13. Можно ли при помощи CSS наложить текст на картинку?

a. Нельзя, т. к. в одном элементе разметки не может находиться и текст и картинка

b. Можно, при помощи блочных атрибутов CSS

c. Можно, используя атрибуты позиционирования

14. В чем отличие свойств описания шрифта от свойств описания текста?

a. Отличий нет

b. Свойства текста относятся ко всему элементу, а свойства шрифта - только к его части

c. Свойства шрифта определяют начертание букв, а свойства текста их взаимное расположение внутри элемента разметки

Размещено на Allbest.ru