Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках
В.В.ЗАХАРКИНА
Каскадные таблицы стилей CSS
Санкт-Петербург 2007
1
Рекомендовано к изданию Кафедрой информационных систем в искусстве и гуманитарных науках Факультета филологии и искусств Санкт-Петербургского государственного университета
Захаркина В. В. Каскадные таблицы стилей CSS: Учебное пособие. — СПб.: Ф-т филологии и искусств СПбГУ, 2007. — 44 с. Учебное пособие соответствует второй части курса «Введение в специальность» в рамках учебной программы специальности «Прикладная информатика в искусстве и гуманитарных науках». Курс рассчитан на четыре семестра и призван сформировать представление о базовых клиентских и серверных веб-технологиях и дать навык их использования. Учебное пособие посвящено языку описания стилей внешнего отображения веб-документов CSS. Строгое изложение разделов официальной спецификации языка сопровождается конкретными примерами использования технологии.
Подготовка и издание учебного пособия осуществлено в рамках проекта СПбГУ «Инновационная образовательная среда в классическом университете» (Приоритетный национальный проект «Образование»).
© В. В. Захаркина, 2007 © Факультет филологии и искусств Санкт-Петербургского государственного университета, 2007 Отпечатано с готового оригинал-макета в секторе цифровой печати Института искусств Факультета филологии и искусств СПбГУ 199178 Санкт-Петербург, 10 линия В.О., д. 49.
Технология каскадных таблиц стилей 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 Альтернативный вариант указания устройств присоединяемых внешних таблиц стилей.
вывода
для
<style type="text/css"> @import url(forprint.css) print; @import url(forvoice.css) aural;
10
11
Здесь селектором является имя 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 двум ячейкам таблицы, которые на печать выводить не стоит: | ... на главную ... | ...
