WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 |
Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках В. В. ЗАХАРКИНА Каскадные таблицы стилей CSS Санкт-Петербург 2007 1 Технология каскадных таблиц стилей CSS (Cascading Style Sheets) Рекомендовано к изданию предложена W3C Консорциумом как средство задания параметров Кафедрой информационных систем в искусстве и гуманитарных науках Факультета филологии оформления элементов HTML и XML документов. В 1996 году была и искусств Санкт-Петербургского государственного университета опубликована Спецификация CSS1 (Каскадные таблицы стилей первого уровня).

Уже в спецификации HTML 4.0 от 1997 года целый ряд привычных ранее элементов и атрибутов, связанных с оформлением вебдокументов, был объявлен "нежелательным". Одна из основных концепций HTML 4 состоит в том, что следует разделять описание структуры и внешнего представления. Именно, язык разметки HTML Захаркина В. В.

следует использовать для описания структуры документа, в то Каскадные таблицы стилей CSS: Учебное пособие. — СПб.:

время как параметры внешнего отображения следует задавать с Ф-т филологии и искусств СПбГУ, 2007. — 44 с.

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

специальность» в рамках учебной программы специальности «Прикладная Спецификация CSS2 (Каскадные таблицы стилей второго уровня) от информатика в искусстве и гуманитарных науках». Курс рассчитан на четыре семестра и призван сформировать представление о базовых 12 мая 1998 года предоставила разработчикам дополнительные клиентских и серверных веб-технологиях и дать навык их использования.

возможности. Удобство разработки и модификации оформления сайта с использованием CSS трудно переоценить.

Учебное пособие посвящено языку описания стилей внешнего отображения веб-документов CSS. Строгое изложение разделов Спецификация CSS3 (Каскадные таблицы стилей третьего уровня) на официальной спецификации языка сопровождается конкретными примерами момент написания данного пособия все еще не получила статус использования технологии.

стандарта, хотя уже достаточно давно ряд предложенных в ней новых возможностей реализован в браузере Mozilla.

Подготовка и издание учебного пособия осуществлено в рамках проекта СПбГУ «Инновационная образовательная По существу, применение CSS позволяет переопределить стилевые среда в классическом университете» (Приоритетный таблицы браузера, применяемые по умолчанию, и задать свои национальный проект «Образование»).

параметры отображения для любого элемента документа.

Применение CSS позволяет задать почти все желаемые параметры внешнего отображения для всех структурных элементов HTML:

© В. В. Захаркина, 2007 разделов, абзацев, заголовков, списков, гиперссылок, графических объектов, таблиц, элементов форм и т.д. Набор этих параметров © Факультет филологии и искусств Санкт-Петербургского государственного весьма широк. Например, это свойства шрифта: цвет, гарнитура и университета, размер (в любых единицах измерения от пиксела до дюйма); рамки любых цветов и стилей; поля и отступы; позиционирование с Отпечатано с готового оригинал-макета в секторе цифровой печати точностью до пиксела; параметры видимости и прозрачности. Можно Института искусств Факультета филологии и искусств СПбГУ 199178 Санкт-Петербург, 10 линия В.О., д. 49. определять и универсальные правила стиля, не связанные с Подписано в печать 10.11.2007. Заказ № 45. Формат 60х84/16. Усл. печ. л. 2,75. Тираж 100 экз.

2 конкретным элементом HTML, применяя их к неким структурным О последовательности изложения единицам, которые определяет сам разработчик.

материала Но самое главное – набор правил стиля можно объявить в отдельном файле и применять к документам всего сайта. Такой подход является Говоря о технологии описания параметров внешнего вида элементов наиболее конструктивным с точки зрения разработки и дальнейшего веб-документа, необходимо рассмотреть три аспекта:

сопровождения веб-ресурса. Ведь достаточно изменить в этом файле • Способы объявления стилевых описаний в HTML-документе.

некое правило стиля, и изменения сразу отразятся во всех документах сайта.

• Синтаксис объявления стилей.

Современные браузеры поддерживают основные возможности CSS, • Собственно свойства стилей, определенные в спецификации CSS.

но, к сожалению, с некоторыми нюансами, не позволяющими в полной Я предлагаю именно такой порядок рассмотрения, хотя примеры мере использовать CSS для описания внешнего представления, способов объявления стилей и синтаксических конструкций оставив HTML лишь описание структуры. Скажем, при всем желании предполагают упоминания конкретных свойств, которые будут следовать правильной концепции и использовать пресловутую подробно описаны позже. Надеюсь, это не вызовет затруднений, «верстку с помощью div-ов», многие до сих пор (впрочем, вполне поскольку названия свойств стиля, приводимые в примерах, эффективно) используют для компоновки страницы таблицы HTML. И интуитивно понятны.

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

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

Некоторые подобные возможности стилевых описаний в HTML- документе представляются весьма актуальными, например, предложенные Microsoft и поддерживаемые только Internet Explorer фильтры и переходы. Так или иначе, зачастую возникает проблема совместимости с разными браузерами, и приходится идти на Внутренние стили компромисс, не в полной мере используя возможности CSS.



В начальном теге большинства HTML-элементов, может быть Еще один важный момент. Стили можно изменять и динамически.

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

в модели DOM2 (Document Object Model 2). Таким образом, использование CSS можно считать одним из ключевых моментов в

создании рационально организованных, привлекательно оформленных - данный заголовок будет выведен шрифтом размера 24 пиксела.

интерактивных веб-ресурсов.

- текст данного выделенного курсивом фрагмента будет красного цвета.

4 NB! Подобных объявлений стиля следует избегать, поскольку они либо с помощью команды @import. Сразу скажем, что формат противоречат концепции разделения описания структуры и элемента link более универсален, привычен и удобен.

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

дальнейшего сопровождения веб-ресурса.

h1 { font-size: 24px } h2 { font-size: 18px } Стили уровня документа сохранен в файле mystyle.css. Для простоты предположим, что этот В разделе head в контейнере style (не путайте с атрибутом файл находится в том же каталоге, что и документ, к которому он присоединяется (в противном случае, как обычно, надо будет указать style, о котором говорилось выше!) может быть описан набор правил стиля в соответствии с синтаксисом CSS. Эти правила будут путь к файлу относительно документа). Ниже показано, как сообщить браузеру о необходимости использования этого описания при применены к соответствующим элементам данного документа.

Например: отображении документа.

в элементе link Этот метод используется в подавляющем большинстве случаев.

При наличии такого описания все заголовки 1-го уровня данного Внешняя таблица стилей, сохраненная в файле mystyle.css, может документа будут выведены шрифтом размера 24 пиксела.

быть присоединена к документу с помощью элемента link, Такое объявление стилей применяется, если данный документ определенного в разделе head следующим образом:

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

Атрибуты элемента link:

Внешние таблицы стилей • type – определяет тип содержимого присоединяемого файла. В нашем случае это текстовый файл с описаниями CSS, ему Наиболее рационально с точки зрения разработки сайта и его соответствует тип text/css сопровождения сохранять стилевые описания, актуальные для всех (или ряда) документов в отдельных файлах. При необходимости • rel – определяет отношение (relation) присоединяемого файла к можно будет внести нужные изменения в файлы описаний, и внешний данному документу. В нашем случае присоединяемый файл вид документов сайта соответственно будет изменен при отображении является для документа таблицей стилей (stylesheet), что и браузером. Адрес внешнего файла с описанием стилей указывается в отражено в значении атрибута.

разделе head по крайней мере двумя способами: в элементе link, 6 • href – задает адрес присоединяемого файла. В нашем примере Аппаратно-зависимые таблицы предполагается, что файл с описанием стилей находится в том же стилей каталоге, что и документ, к которому он присоединяется.

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

командой @import all все типы воспроизведения информации Импорт, хотя и определен в спецификации, используется редко.

Однако для полноты изложения приведем и эту возможность. В aural синтезаторы речи разделе head следует задать такую конструкцию:

braille устройства чтения символов Брайля handheld карманные портативные компьютеры print печать на принтере и отображение в режиме предварительного просмотра Каскадирование projection проекционные устройства Допускается одновременное применение всех способов описания стилей в HTML-документе. При этом в случае конфликта определений screen экран монитора стилей соблюдаются следующие приоритеты:

tty устройства с ограниченными возможностями Наивысший приоритет имеют объявления свойств стилей с помощью отображения: телетайпы, терминалы и т.п.

указания директивы !important, например p { font-size: 24px !important } tv экран телевизора Прочие способы объявления свойств стилей в порядке убывания приоритета:





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

ситуацией. При выводе на экран естественно все размеры задавать в • Стили уровня документа.

пикселах, а ширина содержимого диктуется разрешением монитора.

• Внешние таблицы стилей. Их может быть несколько; наибольший Что произойдет при попытке пользователя распечатать веб-страницу приоритет имеет последняя из указанных.

Наверняка, вы не раз замечали, что при печати некоторые документы «обрезаются» справа, поскольку их содержимое выходит за пределы стандартного формата A4. Размер шрифта при печати также часто бывает неудобен для чтения. Я уже не говорю о том, что при печати 8 элементы интерфейса. Можно, конечно, для каждого документа

media="print,projection"> Все проблемы с печатью веб-документа могут быть эффективно решены заданием специальной таблицы стилей, предназначенной только для вывода на принтер. В этой таблице логично задавать размер шрифта в пунктах, ширину страницы – в сантиметрах или Указание устройства вывода в элементе миллиметрах. Возможно, следует отказаться от цветов, т.к. при печати style в черно-белом режиме яркие на экране монитора цвета будут выведены оттенками серого. Более того, в таблице стилей для печати В тех случаях (не столь уж частых), когда оформление веб-документа можно задать навигационным элементам и баннерам такие свойства уникально, задаются свойства стиля уровня документа (см.

стиля, что они не будут отображены (см. раздел «ID селекторы».

предыдущий раздел). При этом можно задать и особые параметры для Итак, крайне полезно иметь возможность указать устройство вывода, печати. Они будут применены только к текущему документу.

для которого используется та или иная внешняя таблица стилей.

Целевые устройства могут быть заданы в разделе head несколькими Указание устройства вывода в элементе link Вне всякого сомнения, это наиболее рациональный способ. Уже Указание устройства вывода с помощью знакомый по предыдущему разделу элемент link имеет еще один команды @import атрибут – media, определяющий, на каком устройстве вывода должна быть использована присоединяемая таблица стилей. Если этот Альтернативный вариант указания устройств вывода для атрибут отсутствует, то таблица стилей используется для любых присоединяемых внешних таблиц стилей.

устройств.

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

10 Здесь селектором является имя HTML-элемента h1, а блок Указание устройства вывода с помощью объявлений указывается в фигурных скобках и представляет команды @media собой описания в синтаксисе CSS. Уточнения приведены далее.

Еще один альтернативный вариант указания устройств вывода для • Селектор указывает, к каким объектам применяется правило стиля.

присоединяемых внешних таблиц стилей.

Самый простой вид селектора – это просто указание элемента HTML, к которому должно быть применено указанное правило стиля. В предыдущем примере это заголовок 1-го уровня.

• Блок объявлений может быть пуст, либо содержит одно объявление, либо представляет собой последовательность объявлений, разделенных символом "точка с запятой".

• Объявление представляет собой конструкцию Синтаксис CSS свойство стиля: список значений • Список значений может представлять собой одно значение, либо Синтаксис CSS настолько прост, так основные его моменты можно (для стенографических свойств) список значений, изложить в нескольких пунктах. Я рискну привести строгое описание разделенных пробелами, например:

основных синтаксических моментов, сопровождая их интуитивно color: red;

понятными примерами.

font-size: 12px;

border: red 1px solid;

• Таблицы стилей CSS нечувствительны к регистру, за исключением возможно входящих в них элементов, которые не являются • стенографические свойства (shorthand properties) позволяют объектами CSS (например, адресов файлов).

одновременно задать несколько свойств; значения свойств в списке разделяются пробелами. Например, следующее описание • Комментарии в таблицах стилей заключаются в символы /* и */, задает пунктирную рамку красного цвета шириной 2 пиксела:

например border: dotted red 2px;

Pages:     || 2 | 3 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.