This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках
В.В.ЗАХАРКИНА
Каскадные таблицы стилей CSS
Санкт-Петербург 2007
1
Рекомендовано к изданию Кафедрой информационных систем в искусстве и гуманитарных науках Факультета филологии и искусств Санкт-Петербургского государственного университета
Захаркина В. В. Каскадные таблицы стилей CSS: Учебное пособие. — СПб.: Ф-т филологии и искусств СПбГУ, 2007. — 44 с. Учебное пособие соответствует второй части курса «Введение в специальность» в рамках учебной программы специальности «Прикладная информатика в искусстве и гуманитарных науках». Курс рассчитан на четыре семестра и призван сформировать представление о базовых клиентских и серверных веб-технологиях и дать навык их использования. Учебное пособие посвящено языку описания стилей внешнего отображения веб-документов CSS. Строгое изложение разделов официальной спецификации языка сопровождается конкретными примерами использования технологии.
Подготовка и издание учебного пособия осуществлено в рамках проекта СПбГУ «Инновационная образовательная среда в классическом университете» (Приоритетный национальный проект «Образование»).
Технология каскадных таблиц стилей CSS (Cascading Style Sheets) предложена W3C Консорциумом как средство задания параметров оформления элементов HTML и XML документов. В 1996 году была опубликована Спецификация CSS1 (Каскадные таблицы стилей первого уровня). Уже в спецификации HTML 4.0 от 1997 года целый ряд привычных ранее элементов и атрибутов, связанных с оформлением вебдокументов, был объявлен "нежелательным". Одна из основных концепций HTML 4 состоит в том, что следует разделять описание структуры и внешнего представления. Именно, язык разметки HTML следует использовать для описания стру кту ры документа, в то время как параметры внешнего отображения следует задавать с помощью каскадных таблиц стилей CSS. Таким образом, сфера применения CSS была четко определена, что привело к дальнейшему продуктивному развитию этой технологии. Спецификация CSS2 (Каскадные таблицы стилей второго уровня) от 12 мая 1998 года предоставила разработчикам дополнительные возможности. Удобство разработки и модификации оформления сайта с использованием CSS трудно переоценить. Спецификация CSS3 (Каскадные таблицы стилей третьего уровня) на момент написания данного пособия все еще не получила статус стандарта, хотя уже достаточно давно ряд предложенных в ней новых возможностей реализован в браузере Mozilla. По существу, применение CSS позволяет переопределить стилевые таблицы браузера, применяемые по умолчанию, и задать свои параметры отображения для любого элемента документа. Применение CSS позволяет задать почти все желаемые параметры внешнего отображения для всех структурных элементов HTML: разделов, абзацев, заголовков, списков, гиперссылок, графических объектов, таблиц, элементов форм и т.д. Набор этих параметров весьма широк. Например, это свойства шрифта: цвет, гарнитура и размер (в любых единицах измерения от пиксела до дюйма); рамки любых цветов и стилей; поля и отступы; позиционирование с точностью до пиксела; параметры видимости и прозрачности. Можно определять и универсальные правила стиля, не связанные с
Подписано в печать 10.11.2007. Заказ № 45. Формат 60х84/16. Усл. печ. л. 2,75. Тираж 100 экз.
2
3
конкретным элементом HTML, применяя их к неким структурным единицам, которые определяет сам разработчик. Но самое главное – набор правил стиля можно объявить в отдельном файле и применять к документам всего сайта. Такой подход является наиболее конструктивным с точки зрения разработки и дальнейшего сопровождения веб-ресурса. Ведь достаточно изменить в этом файле некое правило стиля, и изменения сразу отразятся во всех документах сайта. Современные браузеры поддерживают основные возможности CSS, но, к сожалению, с некоторыми нюансами, не позволяющими в полной мере использовать CSS для описания внешнего представления, оставив HTML лишь описание структуры. Скажем, при всем желании следовать правильной концепции и использовать пресловутую «верстку с помощью div-ов», многие до сих пор (впрочем, вполне эффективно) используют для компоновки страницы таблицы HTML. И основная причина, на мой взгляд, лишь в том, что определенные свойства стиля по-разному трактуются основными современными браузерами. С другой стороны, браузеры разных компаний-разработчиков могут предлагать свои, находящиеся вне стандарта, свойства стиля. Некоторые подобные возможности стилевых описаний представляются весьма актуальными, например, предложенные Microsoft и поддерживаемые только Internet Explorer фильтры и переходы. Так или иначе, зачастую возникает проблема совместимости с разными браузерами, и приходится идти на компромисс, не в полной мере используя возможности CSS. Еще один важный момент. Стили можно изменять и динамически. Доступ к свойствам стиля с возможностью их изменения сценариями языка JavaScript в полной мере реализован современными браузерами в модели DOM2 (Document Object Model 2). Таким образом, использование CSS можно считать одним из ключевых моментов в создании рационально организованных, привлекательно оформленных интерактивных веб-ресурсов.
4
О последовательности изложения материала Говоря о технологии описания параметров внешнего вида элементов веб-документа, необходимо рассмотреть три аспекта: •
Способы объявления стилевых описаний в HTML-документе.
•
Синтаксис объявления стилей.
•
Собственно свойства стилей, определенные в спецификации CSS.
Я предлагаю именно такой порядок рассмотрения, хотя примеры способов объявления стилей и синтаксических конструкций предполагают упоминания конкретных свойств, которые будут подробно описаны позже. Надеюсь, это не вызовет затруднений, поскольку названия свойств стиля, приводимые в примерах, интуитивно понятны.
Способы объявления стилей в HTML-документе Внутренние стили В начальном теге большинства HTML-элементов, может быть использован атрибут style, значением которого является набор правил в синтаксисе CSS. Эти правила будут применены только к тому элементу, в котором объявлены. Например:
- данный заголовок будет выведен шрифтом размера 24 пиксела. <em style="color:red"> - текст данного выделенного курсивом фрагмента будет красного цвета.
5
NB! Подобных объявлений стиля следует избегать, поскольку они противоречат концепции разделения описания структуры и параметров внешнего отображения. К тому же, это нерационально с точки зрения рациональности разработки и дальнейшего сопровождения веб-ресурса.
Стили уровня документа В разделе head в контейнере style (не путайте с атрибутом style, о котором говорилось выше!) может быть описан набор правил стиля в соответствии с синтаксисом CSS. Эти правила будут применены к соответствующим элементам данного документа. Например: <style type="text/css"> h1 {font-size:24px} При наличии такого описания все заголовки 1-го уровня данного документа будут выведены шрифтом размера 24 пиксела. Такое объявление стилей применяется, если данный документ содержит элементы с уникальным внешним оформлением, которое не повторяется в других документах сайта. В том же случае, когда одинаковое оформление структурных элементов используется в ряде документов, следует применять внешние таблицы стилей.
Внешние таблицы стилей Наиболее рационально с точки зрения разработки сайта и его сопровождения сохранять стилевые описания, актуальные для всех (или ряда) документов в отдельных файлах. При необходимости можно будет внести нужные изменения в файлы описаний, и внешний вид документов сайта соответственно будет изменен при отображении браузером. Адрес внешнего файла с описанием стилей указывается в разделе head по крайней мере двумя способами: в элементе link, 6
либо с помощью команды @import. Сразу скажем, что формат элемента link более универсален, привычен и удобен. Пусть, например, некий условный набор правил стиля, заданный в синтаксисе CSS, например такой: h1 { font-size: 24px } h2 { font-size: 18px } сохранен в файле mystyle.css. Для простоты предположим, что этот файл находится в том же каталоге, что и документ, к которому он присоединяется (в противном случае, как обычно, надо будет указать путь к файлу относительно документа). Ниже показано, как сообщить браузеру о необходимости использования этого описания при отображении документа.
Присоединение внешней таблицы стилей в элементе link Этот метод используется в подавляющем большинстве случаев. Внешняя таблица стилей, сохраненная в файле mystyle.css, может быть присоединена к документу с помощью элемента link, определенного в разделе head следующим образом: Атрибуты элемента link: •
type – определяет тип содержимого присоединяемого файла. В нашем случае это текстовый файл с описаниями CSS, ему соответствует тип text/css
•
rel – определяет отношение (relation) присоединяемого файла к данному документу. В нашем случае присоединяемый файл является для документа таблицей стилей (stylesheet), что и отражено в значении атрибута. 7
•
href – задает адрес присоединяемого файла. В нашем примере предполагается, что файл с описанием стилей находится в том же каталоге, что и документ, к которому он присоединяется.
Импорт внешней таблицы стилей командой @import Импорт, хотя и определен в спецификации, используется редко. Однако для полноты изложения приведем и эту возможность. В разделе head следует задать такую конструкцию: <style type="text/css"> @import url(mystyle.css);
Аппаратно-зависимые таблицы стилей В CSS level2 специфицированы модели представления информации, соответствующие определенным типам устройств, для каждого из которых можно при желании задавать свою таблицу стилей. all
все типы воспроизведения информации
aural
синтезаторы речи
braille
устройства чтения символов Брайля
embossed
устройства печати символов Брайля
handheld
карманные портативные компьютеры
print
печать на принтере и отображение в режиме предварительного просмотра
projection
проекционные устройства
screen
экран монитора
tty
устройства с ограниченными возможностями отображения: телетайпы, терминалы и т.п.
tv
экран телевизора
Каскадирование Допускается одновременное применение всех способов описания стилей в HTML-документе. При этом в случае конфликта определений стилей соблюдаются следующие приоритеты: Наивысший приоритет имеют объявления свойств стилей с помощью указания директивы !important, например p { font-size: 24px !important } Прочие способы объявления свойств стилей в порядке убывания приоритета: • • •
8
Внутренние стили. Стили уровня документа. Внешние таблицы стилей. Их может быть несколько; наибольший приоритет имеет последняя из указанных.
Важность определения устройств, на которые ориентированы таблицы стилей, на первый взгляд неочевидна. Но задумаемся над тривиальной ситуацией. При выводе на экран естественно все размеры задавать в пикселах, а ширина содержимого диктуется разрешением монитора. Что произойдет при попытке пользователя распечатать веб-страницу? Наверняка, вы не раз замечали, что при печати некоторые документы «обрезаются» справа, поскольку их содержимое выходит за пределы стандартного формата A4. Размер шрифта при печати также часто бывает неудобен для чтения. Я уже не говорю о том, что при печати 9
абсолютно не нужны навигационные панели, баннеры и прочие элементы интерфейса. Можно, конечно, для каждого документа подготовить «версию для печати» и задать соответствующую гиперссылку, но такой подход вряд ли можно назвать технологичным. Все проблемы с печатью веб-документа могут быть эффективно решены заданием специальной таблицы стилей, предназначенной только для вывода на принтер. В этой таблице логично задавать размер шрифта в пунктах, ширину страницы – в сантиметрах или миллиметрах. Возможно, следует отказаться от цветов, т.к. при печати в черно-белом режиме яркие на экране монитора цвета будут выведены оттенками серого. Более того, в таблице стилей для печати можно задать навигационным элементам и баннерам такие свойства стиля, что они не будут отображены (см. раздел «ID селекторы». Итак, крайне полезно иметь возможность указать устройство вывода, для которого используется та или иная внешняя таблица стилей. Целевые устройства могут быть заданы в разделе head несколькими способами.
Указание устройства вывода в элементе link Вне всякого сомнения, это наиболее рациональный способ. Уже знакомый по предыдущему разделу элемент link имеет еще один атрибут – media, определяющий, на каком устройстве вывода должна быть использована присоединяемая таблица стилей. Если этот атрибут отсутствует, то таблица стилей используется для любых устройств. В приведенном ниже примере присоединяются два файла со стилевыми описаниями: main.css и printstyle.css. Первая из них ориентирована на любые устройства вывода (в частности, на экран монитора), а вторая предназначена для вывода на печать. Поскольку для второй таблицы явным образом указано устройство вывода print, именно ее описания будут использованы при распечатке вебдокумента.
Указание устройства вывода в элементе style В тех случаях (не столь уж частых), когда оформление веб-документа уникально, задаются свойства стиля уровня документа (см. предыдущий раздел). При этом можно задать и особые параметры для печати. Они будут применены только к текущему документу. <style type="text/css" media="print"> body {width: 21cm; font-size: 10pt} h1 {font-size: 36pt; font-weight: bold}
Указание устройства вывода с помощью команды @import Альтернативный вариант указания устройств присоединяемых внешних таблиц стилей.
Здесь селектором является имя HTML-элемента h1, а блок объявлений указывается в фигурных скобках и представляет собой описания в синтаксисе CSS. Уточнения приведены далее.
Указание устройства вывода с помощью команды @media Еще один альтернативный вариант указания устройств вывода для присоединяемых внешних таблиц стилей. <style type="text/css"> @media print{body {color:black}}; @media screen{body {color:navy}};
Синтаксис CSS Синтаксис CSS настолько прост, так основные его моменты можно изложить в нескольких пунктах. Я рискну привести строгое описание основных синтаксических моментов, сопровождая их интуитивно понятными примерами. •
•
•
Таблицы стилей CSS нечувствительны к регистру, за исключением возможно входящих в них элементов, которые не являются объектами CSS (например, адресов файлов).
•
Селектор указывает, к каким объектам применяется правило стиля. Самый простой вид селектора – это просто указание элемента HTML, к которому должно быть применено указанное правило стиля. В предыдущем примере это заголовок 1-го уровня. Наиболее существенные виды селекторов описаны в следующем разделе.
•
Блок объявлений может быть пуст, либо содержит одно объявление, либо представляет собой последовательность объявлений, разделенных символом "точка с запятой".
•
Объявление представляет собой конструкцию свойство стиля: список значений
•
Список значений может представлять собой одно значение, либо свойств) список значений, (для стенографических разделенных пробелами, например: color: red; font-size: 12px; border: red 1px solid;
•
Комментарии в таблицах стилей заключаются в символы /* и */ , например
стенографические свойства (shorthand properties) позволяют одновременно задать несколько свойств; значения свойств в списке разделяются пробелами. Например, следующее описание задает пунктирную рамку красного цвета шириной 2 пиксела:
/* это комментарий */
border: dotted red 2px;
Правило стиля представляет собой конструкцию селектор { блок объявлений } Приведем в качестве примера простое правило стиля, задающее заголовкам 1-го уровня шрифт размера 24 пиксела и розовый (почему бы и нет) цвет:
Исходя из изложенных выше синтаксических правил, приведем еще один пример двух описаний стиля: body { font-size: 12px } h1 { font-size: 24px; color: red; border: black 1px dotted }
h1 { font-size: 24px; color: pink } Правила стиля для одного селектора можно (и нужно ради рациональности) объединять. Следующий набор правил 12
13
h1 { font-size: 24px } h1 { color: red } h1 { border: black thin dotted } равносилен одному: h1 { font-size: 24px; color: red; border: black thin dotted }
Селекторы Простой селектор представляет собой либо селектор типа, либо селектор класса , за которым могут следовать селекторы псевдоклассов, id-селекторы и селекторы атрибутов (о них в данном кратком описании умолчим). Селектор - это последовательность простых селекторов, разделенных пробелами, либо символами + и < . Селекторы можно группировать, разделяя запятыми. Например, следующая последовательность одинаковых объявлений h1 { color: navy } h2 { color: navy } h3 { color: navy } Равносильна h1, h2, h3 { color: navy }
body { font-size: 12px } h1 { font-size: 24px; color: red; border: black thin dotted } На примере селекторов типа рассмотрим более возможности, связанные с использованием контекста.
изощренные
Селекторы потомков Можно применять к HTML-элементу определенный стиль в зависимости от того, вложен ли этот элемент в другой. Для этого названия элементов перечисляются в порядке их предполагаемой вложенности и разделяются пробелами. В следующем примере описывается селектор, согласно которому содержимое элемента strong будет выведено красным цветом только внутри ячеек таблиц: td strong { color: red }
Дочерние селекторы В следующем примере правила стиля будут применены только к элементам em, являющимися дочерними для div. div > em { font-size: 12px }
Сестринские селекторы В следующем примере правила стиля будут применены только к тем элементам h1 и h2, которые являются дочерними дочерними одного и того же родительского элемента в дереве документа, и h1 непосредственно предшествует h2. h1 + h2 { text-indent: 0 }
Селекторы типа Селектор типа представляет собой название типа элемента документа, в котором используются каскадные таблицы стилей. Для HTMLдокумента селектор типа - это имя HTML-элемента.
14
15
Селекторы класса Обычные классы Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой. div.red { color: #ff0000 } div.blue { color: #0000ff } div.fantasy { color: pink; font-size: 24px }
Универсальный селектор класса При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами, для которых объявленные стилевые свойства имеют смысл. Формально, в таком описании вместо имени элемента следует ставить символ * , например, *.spring { color: mediumspringgreen }, однако на практике допустима следующая запись без * : .spring { color: mediumspringgreen }
Применение классов стилей Определенный в таблице стилей класс связывается с HTML-элементм при помощи атрибута CLASS. Для объявленных выше классов это можно сделать, например, так:
16
ID селекторы Атрибут id задает HTML элементу уникальный в пределах документа идентификатор, который может быть использован в различных целях, в частности, для задания стиля этому элементу. Значение атрибута ID отделяется от имени HTML-элемента знаком #. Символ * вместо конкретного имени HTML-элемента сопоставляет правило стиля любому элементу, у которого значение атрибута id равно указанному. Как уже отмечалось в предыдущем разделе, символ * можно опускать, т.е. следующие определения равносильны: *#comment {color:red} #comment {color:red} Например, пусть описаны следующие правила стиля: h1#special {color:green} #comment {color:red} Первое правило (зеленый цвет символов) будет сопоставлено элементу H1, у которого значение атрибута id равно special:
Второе правило (красный цвет символов) будет сопоставлено любому элементу, у которого значение атрибута id равно comment. Зачем может понадобиться Id-селектор? Ведь он сопоставляет указанное правило стиля тому HTML-элементу, у которого атрибут id равен заданному, а такой элемент должен быть у никальным в пределах документа. То есть для каждого документа такой элемент только один, стоит ли копья ломать? А теперь представим себе ряд документов, оформленных согласно одному шаблону. Например, в моем сайте все учебные материалы по HTML и CSS оформлены одинаково: в верхнем ряду таблицы ссылка на стартовую страницу и заголовок; в левой ячейке нижнего ряда таблицы список рубрик, а в правой - основное содержание. Если кто-то решит эти материалы 17
распечатать, то, на мой взгляд, никому не нужен левый столбец со словами "на главную" в верхней ячейке и списком рубрик в нижней. Поступим, например, следующим образом (желающие могут посмотреть на HTML-источник этого документа и внешнюю таблицу стилей для печати). Задаем в каждом документе сайта атрибуты id двум ячейкам таблицы, которые на печать выводить не стоит:
... [тут идет вывод названий рубрик] ... Да, разумеется, в каждом документе сайта эти id уникальны, но подобных документов несколько десятков, поэтому, задав в каждом из них внешнюю таблицу стилей для печати, мы можем отключить вывод HTML-элементов с id "start" и "menu". Пусть файл этой таблицы называется lessons_print.css и лежит (как в реальной ситуации) во внешнем каталоге (поэтому путь прописывается как "../../lessons_print.css"). Тогда в разделе head задаем присоединяемую таблицу стилей: Вот фрагмент этой таблицы, ответственный за скрытие ненужных при печати элементов (см. свойство стиля display): ... #menu { display: none } #start { display: none } ...
18
Псевдоклассы и псевдоэлементы Применение псевдоклассов и псевдоэлементов позволяет задать особые стили, связанные с элементами a (гиперссылка) и p (абзац). При записи правил стиля названия псевдоклассов и псеводстилей от названия элемента отделяются двоеточием.
Псевдоклассы ссылок Для непосещенных и посещенных ссылок можно задать особые параметры отображения, например: a:link { color: navy } a:visited { color: steelblue }
Динамические псевдоклассы Возможности определения динамических псевдоклассов, согласно спецификации, применимы не только к элементу a (гиперссылка), но и к прочим визуально отображаемым элементам документа HTML. Смысл термина «псевдокласс» может быть объяснен следующим образом. Определение универсальных селекторов класса позволяет применять одинаковые наборы правил стиля к любому элементу документа, но эти определения относятся к «спокойному» состоянию элемента. Крайне актуальной представляется возможность задать особые правила отображения для элемента, на который наведен курсор, в зоне которого выполнен щелчок мышью и т.д. Хотелось бы задавать особые параметры отображения при выполнении определенных событий. То есть, задать аналог классов, описания которых активизировались бы лишь в заданных ситуациях. Такая возможность определена уже в CSS 2 для всех элементов документа, однако браузеры поддерживают ее не в полной мере. Во всяком случае, можно с уверенность считать, что современные браузеры по крайней мере понимают определения псевдоклассов для гиперссылок. Поэтому далее будем говорить именно о псевдоклассов гиперссылок (надеюсь, что через пару лет эту оговорку можно будет убрать). 19
Итак, для ссылок, на которые наведен курсор мыши, активизированных и получивших фокус можно задать особые параметры отображения следующим образом: a:hover
Значения типа "ключевое слово" У большинства свойств стиля есть (возможно, наряду с прочими) значения типа "ключевое слово". Некоторые ключевые слова уникальны, например, значение underline свойства textdecoration. Другие ключевые слова используются в качестве значений целого ряда свойств стиля, например, значение normal есть у большинства свойств текста.
Псевдоэлементы
Значение типа "число"
Так называемые «псевдоэлементы» однозначно связаны с абзацем. Действительно, абзац – это основной структурный элемент документа. Особую роль, если говорить о внешнем отображении, могут играть первая буква и первая строка абзаца. Эти два аспекта, не выделенные в качестве структурных элемента документа HTML, и названы «псевдоэлементами». Для первой буквы и первой строки абзаца можно определить особые стили следующим образом:
Из возможных типов значений свойств стилей, специфицированных в CSS level2, отметим следующие:
20
21
Значения типа "процентная величина"
цвет #00FFFF равносилен cyan цвет #87CEEB равносилен skyblue
Задают размер относительно какого-либо другого свойства стиля. Например:
Значения типа "область"
line-height: 90%
Пока определено одно значение этого типа - прямоугольник, задаваемый парой координат левого верхнего угла и парой координат правого нижнего угла, например,
задает межстрочный интервал, равный 90% высоты текущей строки.
rect( 20px, 30px, 420px, 330px )
Значения типа "url / uri" Адрес ресурса. Например:
Свойства стиля CSS
url(http://vvz.nw.ru/ Images/butterfly.gif)
Значения типа "цвет" Цвет задается одним из способов: • Традиционная шестнадцатиричная RGB-триада - две позиции на интенсивность каждой составляющей (16 777 216 оттенков). Например: #00FFFF #87CEEB •
Сокращенная шестнадцатиричная RGB-триада - одна позиция на интенсивность каждой составляющей. Применима для простых цветов (4096 оттенков). Например: цвет #00FFFF равносилен #0FF в сокращенной для #87CEEB сокращенного эквивалента нет
•
Десятичное обозначение - либо целыми числами от 0 до 255, либо в процентной записи. Например: цвет rgb(0,255,255) равносилен #00FFFF
• 22
записи
равносилен
rgb(0%,100%,100%)
и
Ниже описано большинство предлагаемых в спецификации CSS level2 свойств стиля. Группировка свойств несколько вольная и не вполне совпадает со спецификацией. Описаны те свойства, которые, по моему мнению, находят непосредственное применение при разработке HTML-документов. Практически нигде в данном изложении не упоминается о поддержке описываемых свойств теми или иными браузерами. Изучение сравнительных характеристик браузеров разных производителей и разных версий, несомненно, представляет интерес, но лучше всего это исследования проводить, тестируя свой сайт в процессе его разработки. При практической работе, наверное, не надо впадать в крайности. Уже давно, мягко говоря, не стоит стараться, чтобы сайт хорошо выглядел в Explorer 3.0 (невероятно, что у кого-нибудь сохранился этот архаичный браузер). Да и Explorer 4.0 со своими особенностями давно стал достоянием истории. С другой стороны, строить сайт исключительно на применении эффектов, поддерживаемых лишь последними версиями популярных браузеров, тоже нерационально. Пусть в избранном браузере сайт будет выглядеть идеально, но в остальных он должен быть хотя бы приемлемым и понятным.
Имя цвета. Например: 23
Обратите внимание на то, что каждому свойству стиля соответствуют вполне конкретные значения. В дальнейшем изложении всегда указывается либо общий тип возможного значения (например, значения типа цвет, размер и т.д.), либо конкретный набор значений типа «ключевое слово». Подавляющее большинство свойств стиля имеют значения по умолчанию. Кстати, именно эти значения по умолчанию и должны использоваться браузерами Порядок дальнейшего изложения следующий. В каждой группе сначала приводятся основные свойства стиля с кратким описанием, затем (в таблице) для каждого свойства указывается спектр возможных значений и значение по умолчанию.
Свойство стиля цвет
background-color
цвет, transparent
background-image
URL / URI
background-position
размер, процент, left, top, center, right, bottom
0% 0% (верхний левый угол окна)
background-attachment
scroll, fixed – не прокручивается вместе с содержимым
scroll
background-repeat
repeat повторяется no-repeat - не повторяется repeat-x повторяется по оси x repeat-y повторяется по оси y
repeat
background
список свойств backgroundcolor, backgroundimage, backgroundposition, backgroundattachment, backgroundrepeat, разделенных пробелами, в любом порядке
сolor – Цвет текста background-color – Цвет фона элемента background-position – Исходное положение фонового изображения. При использовании значений типа размер и процент указываются отступы по горизонтали и вертикали от левого верхнего угла окна. background-attachment – Указывает, будет ли фоновое изображение стационарным или прокручиваемым background-repeat изображением
–
Тип заполнения элемента фоновым
background – Стенографическое свойство для задания всех свойств фона. Позволяет в любых сочетаниях и в любом порядке указывать свойства стиля группы background, приведенные выше.
24
Значение по умолчанию
сolor
Свойства цвета и фона
background-image – Фоновое изображение
Значения
transparent
25
Пример задания свойства стенографического свойства background:
список свойств шрифта, разделенных пробелами, в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family
{ background: url(Images/bg.gif) blue fixed no-repeat }
Свойства шрифта font-family – Гарнитура шрифта font-size – Размер шрифта font-style – Начертание шрифта font-weight – Насыщенность шрифта font-variant – Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте font-stretch – Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта font – Стенографическое свойство для одновременного задания нескольких свойств шрифта
Свойство стиля
font-family
26
Значения
список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек, "рубленый"), cursive (курсив), fantasy (аллегорический), monospace (моноширинный)
Знач. по умолчанию
Пример задания свойства font-family: { font-family: Arial, Helvetica, sans-serif } Пример задания стенографического свойства font: { font: italic normal bold 20px Arial; } Св ойств а те к с та text-indent – Отступ первой строки текста в блоке text-align – Выравнивание текста text-decoration – Декорирование текста text-shadow – Эффекты затенения текста letter-spacing – Межсимвольное расстояние 27
word-spacing – Расстояние между словами text-transform – Преобразование текста line-height – Межстрочный интервал white-space – Способ обработки символов пустого пространства внутри блока Свойство стиля
text-indent
Значения
размер, normal
normal
text-transform
none, capitalize (первая буква каждого слова заглавная), uppercase (все буквы заглавные), lowercase (все буквы строчные)
none, список эффектов затенения, перечисляемых через запятую; каждый эффект представлет собой набор из максимум четырех разделенных пробелами элементов, любой из которых можно опустить: цвет размер1 размер2 размер3 цвет - цвет тени; размер1 - смещение тени по горизонтали; размер2 - смещение тени по вертикали; размер3 - радиус размытия тени
none
letter-spacing
размер, normal
normal
28
word-spacing
center,
29
Свойства блока В CSS принята модель представления элемента документа в виде блока, которому можно задать определенные параметры отображения: ширину и высоту, границы (border), внутренние (padding) и внешние (margin) отступы. Границы и отступы могут быть заданы различным образом для верхней, правой, нижней и левой сторон прямоугольного блока (top, right, bottom, left). Приведем сначала формальную иллюстрацию блочной модели, а потом отметим зоны блока на скриншоте.
Размеры блока width – ширина содержимого блока height – высота содержимого блока Свойство стиля
Значения
Значение по умолчанию
width
auto, размер, процент (относительно ширины контейнера)
auto
height
auto, размер, процент (относительно высоты контейнера)
auto
Границы и отступы
30
margin-top margin-right margin-bottom margin-left
Размер зоны полей вокруг блока (сверху, справа, снизу, слева)
список значений стиля линий, разделенных пробелами
border-top border-right border-bottom border-left
список значений ширины, стиля и цвета линий, разделенных пробелами
border
список значений ширины, стиля и цвета линий, разделенных пробелами; применяется сразу ко всем границам
position – алгоритм позиционирования top – вертикальное смещение блока относительно верха контейнера right – горизонтальное смещение блока относительно правой границы контейнера bottom – контейнера
Указание значений по умолчанию в приведенной выше таблице сделало бы ее слишком громоздкой. Проще привести резюме по многочисленным свойствам блока: •
Для всех свойств, связанных с полями (margin) и отступами (padding), значением по умолчанию является 0.
•
Размер границы (width) для всех свойств группы border по умолчанию имеет значение medium.
•
NB! Стиль границы (style) для всех свойств группы border по умолчанию имеет значение none. Итак, по умолчанию граница не отображается, значит без задания этому свойствe значения, отличного от умолчания (none) все прочие свойства границы (цвет, размер) не повлияют на отображение блока
Пример задания стенографического свойства border. Описывается двойное обрамление розового цвета толщиной 2 пиксела. { border: pink double 2px } Пример задания стенографического свойства margin. Описываются поля размера 10px сверху, 20px справа, 10px снизу и 30px слева. { margin: 10px 20px 10px 30px; } 34
Позиционирование
вертикальное смещение блока относительно низа
left – горизонтальное смещение блока относительно левой границы контейнера float – задает смещение блока, вследствие чего блок будет обтекаться текстом контейнера clear – задает управление потоком после смещенного блока z-index – позиционный уровень блока; блок с большим свойством z-index располагается над блоком с меньшим свойством z-index display – тип структурного блока, порождаемого HTMLэлементом, которому приписано данное свойство стиля; говоря чуть более человеческим языком, это свойство указывает на поведение и, следовательно, отображение данного HTML-элемента. Например, значение display:inline заставляет элемент (насколько это возможно) встраиваться в строку данных; значение display:block выводит его с новой строки и позволяет задать элементу свойства блока; значение display:none исключает элемент из потока и вообще не показывает его и т.д. Свойство стиля
Значения
position
static - обычный блок, заданные свойства top и left игнорируются; relative - свойства top и left смещают блок относительно его нормального положения в общем потоке данных;
Знач. по умолчанию static
35
absolute - блок изымается из потока данных и позиционируется в соответствии со свойствами top, left, right или bottom относительно ближайшего по вложенности вмещающего его позиционированного контейнера; fixed - блок позиционируется как и в случае значения absolute, а потом фиксируется относительно некоторого объекта (например, области просмотра - для устройств без разбивки - в этом случае не смещается при прокрутке) top
Для большинства значений свойства display трудно придумать живой пример, не вдаваясь в тонкости модели визуального форматирования. Вот, например, вариант описания стиля, запрещающий показ графики: img { display: none }
auto, размер, процент (относительно высоты контейнера)
auto
auto, размер, процент (относительно ширины контейнера)
auto
auto, размер, процент (относительно высоты контейнера)
auto
auto, размер, процент (относительно ширины контейнера)
auto
float
none, left, right
none
clear
none, left, right, both
none
z-index
auto - свойство z-index присваивается в порядке описания элементов в исходном коде, число
Визуальные свойства overflow – Тип усечения содержимого, выходящего за пределы блока. clip – Область содержимого блока
усечения,
определяющая
видимую
часть
visibility – Видимость блока Отметим существенную разницу между свойством visibility со значением hidden и свойством display со значением none (см. позиционирование). Казалось бы, оба свойства с указанными значениями делают соответствующий HTML-элемент невидимым, и это действительно так. Но при применении свойства visibility со значением hidden HTML-элемент действительно не показывается, но остается "пустое пространство", которое он бы занял, а задание свойства display со значением none вообще исключет элемент из общего потока, как будто он вообще не определен. cursor – Тип курсора
36
37
Свойство стиля overflow
clip
visibility
cursor
Значения
Знач. по умолчанию
visible (все равно видно), hidden (скрыто), scroll (скрыто, но есть возможность прокрутки), auto
visible
auto, область
auto
visible - видимый, hidden - невидимый, collapse - связано с динамическим преобразованием строк и столбцов таблиц
filter: shadow(color=black, Direction=50) NB! Для того, чтобы применение фильтра дало результат, для блока надо задать либо позиционирование, либо ширину. Название фильтра alpha
Фильтры Хотя фильтры поддерживает пока только Internet Explorer, почему бы не воспользоваться этими чисто декоративными возможностями. Explorer покажет все красиво, а остальные браузеры - обыкновенно; во всяком случае, никакого ущерба не будет. Фильтры могут применяться к изображениям и блокам текста. Синтаксис задания фильтров: filter: название фильтра(список атрибутов)
38
Список атрибутов фильтра либо пуст, либо представляет собой пары название атрибута = значение атрибута, разделенные запятыми. Например
Описание фильтра
Атрибуты
Значения атрибутов
прозрачность, одинаковые значения opacity и finishOpacity задают равномерную прозрачность, а разные - градиентную
opacity - степень прозрачности в начале градиента
число от 0 до 100
finishOpacity степень прозрачности в конце градиента
число от 0 до 100
style - тип градиента прозрачности
числа 0,1,2,3 соотв. типы: равномерный линейный радиальный прямоуг-ный
chroma
абсолютная прозрачность для одного заданного цвета
color - цвет, объявляемый прозрачным
цвет
dropshadow
эффект тени
color - цвет тени либо маски (в зависимости от значения positive)
цвет
offx - смещение тени по горизонтали
число
39
flipv
зеркальное отображение по вертикали
fliph
зеркальное отображение по горизонтали
glow
ореол
offy - смещение тени по вертикали
число
positive применение атрибута color:
0 - как цвет маски 1 - как цвет тени
xray
color
цвет
strength интенсивность
число от 1 до 100
gray
преобразование цветов объекта в оттенки серого
invert
инверсия цветов объекта
mask
выделяет фон текстового объекта указанным цветом, цвет шрифта - белый
color - цвет выделения
цвет
shadow
тень
color - цвет тени
цвет
direction направление тени в градусах
число от 0 до 360
add
0 либо 1
freq - частота
число
wave
40
волнообразное искажение
волны phase - фаза волны
число
lightstrength освещенность
число
strength интенсивность волны
число
негативное изображение
41
Литература • Спейнаур С., Экштейн Р. Справочник вебмастера. СанктПетербург: O'Reilly, 2001, 604 c. • Cascading Style Sheets, level 2. CSS2 Specification. W3C Recommendation 12-May-1998 http://www.w3.org/TR/REC-CSS2 Сведения из первоисточника (на английском языке). Каскадные таблицы стилей второго уровня. Спецификация CSS2. Рекомендация W3C от 12 мая 1998 г. • Каскадные таблицы стилей второго уровня. Спецификация CSS2. Рекомендация W3C от 12 мая 1998 г. http://loc.stack.ru/projects/CSS2/cover.html Перевод официальной спецификации Юлии Поданевой. • Раздел HTML, CSS на eManual.ru http://www.emanual.ru Техническая документация, статьи, учебники, переводы • Раздел HTML, CSS на citforum.ru http://www.citforum.ru http://www.citforum.ru Техническая документация, статьи, учебники, переводы
Содержание О последовательности изложения материала ....................................... 5 Способы объявления стилей в HTML-документе.................................... 5 Внутренние стили ........................................................................................ 5 Стили уровня документа ............................................................................. 6 Внешние таблицы стилей............................................................................ 6 Присоединение внешней таблицы стилей в элементе link .................. 7 Импорт внешней таблицы стилей командой @import ......................... 8 Каскадирование............................................................................................ 8 Аппаратно-зависимые таблицы стилей ..................................................... 9 Указание устройства вывода в элементе link...................................... 10 Указание устройства вывода в элементе style..................................... 11 Указание устройства вывода с помощью команды @import............. 11 Указание устройства вывода с помощью команды @media.............. 12 Синтаксис CSS .............................................................................................. 12 Селекторы...................................................................................................... 14 Селекторы типа...................................................................................... 14 Селекторы класса....................................................................................... 16 Обычные классы .................................................................................... 16 Универсальный селектор класса .......................................................... 16 Применение классов стилей ................................................................. 16 ID селекторы............................................................................................... 17 Псевдоклассы и псевдоэлементы ............................................................. 19 Псевдоклассы ссылок............................................................................ 19 Динамические псевдоклассы................................................................ 19 Псевдоэлементы .................................................................................... 20 Типы значений свойств стилей ................................................................. 20 Значения типа "ключевое слово" ......................................................... 21 Значение типа "число" .......................................................................... 21 Значения типа "размер" (в оригинале length)...................................... 21 Значения типа "процентная величина" ................................................ 22 Значения типа "url / uri" ........................................................................ 22 Значения типа "цвет"............................................................................. 22 Значения типа "область" ....................................................................... 23
42
43
Свойства стиля CSS ..................................................................................... 23 Свойства цвета и фона............................................................................... 24 Свойства шрифта ....................................................................................... 26 Свойства текста.......................................................................................... 27 Свойства блока........................................................................................... 30 Размеры блока........................................................................................ 31 Границы и отступы................................................................................ 31 Позиционирование..................................................................................... 35 Визуальные свойства ................................................................................. 37 Фильтры...................................................................................................... 38 Литература .................................................................................................... 42
