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

1

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

3 Принципиальная задача XML – отделение содержания от внешнего вида документа. XML - это язык разметки, который описывает содержание, независимо от того, как оно будет представлено в окне браузера, на напечатанной странице или после использования любым другим агентом пользователя. Агент пользователя – любое ПО, которое преобразует символы документа в данные и размечает их в соответствии с определенными правилами. Вы можете создавать собственные типы элементов в XML, поэтому агент пользователя не содержит встроенного набора инструкций, позволяющего определять каким образом отображать данные этих элементов. Вам необходимо предоставить браузеру соответствующие инструкции отображения самим. С помощью CSS или XSL.

4 Каскадные таблицы стилей - метод предоставления HTML-страниц с определенным форматированием без добавления в дескрипторы дополнительной информации. Их можно создать с помощью обычного текстового редактора и сохранить с расширением.css. Одно из фундаментальных средств CSS – каскад стилей. Стили могут быть указаны в рамках документа, элемента и внешнего документа. Подобная гибкость по отношению к расположению стиля обеспечивает модульность и гибкость проектирования документов. Например, некий файл определяет применение к содержанию элемента курсивного начертания, а в рамках документа глобальный стиль может определять применение к содержанию элемента полужирного начертания. В данном каскаде полужирное начертание подавит курсивное. Стиль, определенный на уровне элемента, подавляет стиль, определенный на уровне всего документа, а тот в свою очередь подавляет любые стили, определенные во внешних файлах. Каскадные таблицы стилей для XML ничем не отличаются. Они позволяют задать стили, определяющие, как агент пользователя должен обрабатывать документ.

5 Таблицы стилей для отображения элементов используются на стороне клиента. Не удивительно, что в различных браузерах для разных платформ реализация поддержки каскадных таблиц стилей выполнена по-разному. Подробные сведения можно найти по адресу Поскольку поддержка CSS достаточно распространена, целый ряд браузеров способен сразу открывать документы XML с соответствующей таблицей стилей. Такому прямому методу открытия не нужна HTML-страница для обработки данных. Но! Этот подход реализуется без поддержки со стороны браузера, - вы не можете гарантировать, что пользователь увидит данные именно в том виде, в котором вы предполагали.

6 При использовании XML отделение стиля от содержания обеспечивает гибкость представления данных, упрощает их поддержание. Вам не потребуется вносить изменения в источник данных XML, если необходимо изменить их представление, вы можете просто откорректировать соответствующую каскадную таблицу стилей. Также после создания каскадной таблицы стилей CSS для представления данных должным способом, вы можете связать с ней другой документ, обеспечив единый подход к представлению различных данных на своем Web-узле. Создав несколько таблиц стилей, вы можете разработать систему, которая будет доставлять одни и те же данные различным агентам пользователя (различные браузеры). В сценарии нужно проверять браузер пользователя для обеспечения наилучшего предоставления информации – это browser sniffing подход. Проще всего определить агент пользователя через свойство navigator.appName языка JavaScript.

7 На экране отобразится строка (метод document.write), которая состоит из названия браузера (определенного с помощью свойства navigator.appName), а также поясняющей части. Предполагается, что браузер поддерживает JavaScript. Концепция нескольких таблиц стилей, используемых для представления данных в разных Web-браузерах, очень важна при разработке Web-страниц. Используя эти подходы, вы сможете: Избирательно управлять браузерами. Получать данные различными способами в зависимости отконтекстнозависимых средств управления (например, из одного исходного документа XML можно выбрать одни данные для мультимедийной презентации, другие – для представления в виде таблиц). Контролировать потоки данных из документа XML в различные приложения. Форматировать данные для использования определенных устройств (например, настройка представления данных для беспроводных устройств с поддержкой Web).

8 Итак… Каскадная таблица стилей – текстовый файл, сохраняемый с расширением.css. Создается в текстовом редакторе или с помощью редактора со встроенной поддержкой каскадных таблиц стилей CSS. Файл содержит правила для синтаксического анализатора агента пользователя по отображению данных. Эти правила состоят из селекторов и объявлений, определяющих представление данных пользователю. Селекторы обычно ссылаются на отдельные элементы XML, а объявления определяют, каким образом отображается выбранный элемент. Объявления содержат парысвойство – значение. Каждое свойство назначает определенное значение (bold, 10pt). Селектор {свойство: значение; свойство: значение; …}

9 m1 Kathy message1 m2 Stenly message2 m3 Perry message3

10 Пусть содержание элемента id будет изображено курсивом, элемента from – полужирным, элемента message - синим цветом. Создадим правила CSS с помощью объявлений, содержащих свойство-значение: /*комментарии*/ id {font-style: italic} from {font-weight: bold} message {color: blue}

11 Можно просто добавить соответствующую инструкцию обработки, которая включает в себя зарезервированное ключевое слово xml-stylesheet и 2 обязательных атрибута: Атрибут type обязателен, поскольку идентифицирует тип таблицы стилей (это MIME-тип). Все таблицы стилей будут текстовыми, в них не используются такие типы, как application, multipart, message. css – подтип таблицы (может быть XSL). href с действительным URL указывает на файл CSS. Инструкцию добавляют в XML документ перед корневым элементом.

12 Алфавитный список свойств можно найти по адресу Список свойств с указанием совместимости с различными браузерами

13 Свойство НазначениеЗначения letter-spacing Расстояние между буквами normal (по умолчанию) количество пикселей line-height Расстояние между буквами normal (по умолчанию) количество пикселей text-align Выравниваниевыбирает браузер (по умолчанию) left right center text-decoration Внешний вид текстаnone (по умолчанию) underline overline line-through blink text-indent Отступ первой строки 0 (по умолчанию) количество пикселей или процент text-transform Регистр символовnone (по умолчанию) uppercase lowercase capitalize vertical-alignment Выравнивание по вертикали baseline (по умолчанию) sub super top text-top middle bottom text-bottom word-spacing Расстояние между словами normal (по умолчанию) количество пикселей

14 Свойство НазначениеЗначения font-family Тип шрифта Выбирает браузер (по умолчанию) Семейство шрифта, например Arial font-size Размер шрифтаmedium (по умолчанию) количество пикселей или процент font-style Начертание шрифтаnormal (по умолчанию) italic oblique font-variant Вид шрифтаnormal (по умолчанию) small-caps fonе-weight Толщина шрифтаnormal (по умолчанию) lighter bold bolder

15 Свойства НазначениеЗначения background-attachment Прокрутка фонаscroll(по умолчанию) fixed background-color Цвет фонаtransparent (по умолчанию) название цвета background-image Изображение фонаnone (по умолчанию) адрес URL изображения background-position Положение фона на странице 0% 0% (по умолчанию) значение в пикселях или процентах background-repeat Узоры в качестве фонаrepeat (по умолчанию) repeat-x repeat-y no-repeat color Цвет текста Решение принимает браузер (по умолчанию) название цвета

16 Свойство НазначениеЗначения white-space Использование пробелов в разделеnormal (по умолчанию) pre nowrap display Отображение разделаblock (по умолчанию) inline list-item Нет visibility Видимость элементаinherit (по умолчанию) visible hidden z-index Расположение в определенном слоеauto (по умолчанию) число

17 Свойство НазначениеЗначения border-bottom-width Ширина нижней стороны рамки medium (по умолчанию) thin thick количество пикселей border-color Цвет рамкистандартный цвет текста (по умолчанию) название цвета border-left -width Ширина левой стороны рамки medium (по умолчанию) thin thick количество пикселей border-right -width Ширина правой стороны рамки medium (по умолчанию) thin thick количество пикселей border-style Стиль рамкиnone (по умолчанию) solid double border-top-width Ширина верхней стороны рамки medium (по умолчанию) thin thick количество пикселей

18 Свойство НазначениеЗначения border-width Ширина рамки Не определено (по умолчанию) medium thin thick количество пикселей clear Наличие других разделов по бокам текущего Нет (по умолчанию) left right float Возможность плавающего состояния раздела Нет (по умолчанию) left right height Высота разделаauto (по умолчанию) количество пикселей или процент margin-bottom Ширина нижнего поля 0(по умолчанию) количество пикселей или процент margin-left Ширина левого поля 0 (по умолчанию) количество пикселей или процент margin-right Ширина правого поля 0 (по умолчанию) количество пикселей или процент margin-top Ширина верхнего поля(по умолчанию)

19 Свойство НазначениеЗначения padding-bottom Ширина заполняющих элементов с указанной стороны 0(по умолчанию) количество пикселей или процент padding-left Ширина заполняющих элементов с указанной стороны 0(по умолчанию) количество пикселей или процент padding-right Ширина заполняющих элементов с указанной стороны 0(по умолчанию) количество пикселей или процент padding-top Ширина заполняющих элементов с указанной стороны 0(по умолчанию) количество пикселей или процент width Ширина разделаauto (по умолчанию) количество пикселей или процент

20 Если вы хотите применить одинаковый стиль к нескольким элементам, перечислите все элементы, разделяя их запятыми. Например, вы хотите, чтобы содержание элементов id и from отображалось красным цветом, тогда правило CSS будет выглядеть следующим образом: id, from {color: red}

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

22 Какова роль проверки документов XML при использовании каскадных таблиц стилей CSS? Каскадные таблицы стилей CSS предназначены для стилевого оформления документов XML, которые, как минимум, правильны. Если экземпляр документа содержит схему, он также должен быть действительным. Это требование не каскадной таблицы стилей CSS, а обработчика XML или браузера, который обязательно попытается проверить документ на действительность, если тот содержит схему. Таким образом, проверка документов XML с каскадными таблицами стилей CSS явным образом никак не связана. Каким образом использование каскадных таблиц стилей CSS позволяет сократить время, требуемое для управления Web-узлом? Если вы имеете дело с Web-узлом, который содержит большое количество документов, значительная часть которых должна выглядеть подобным образом, используйте каскадную таблицу стилей CSS для придания документам абсолютно одинакового внешнего вида. Когда придет время изменять внешний вид узла, вам достаточно внести необходимые изменения в каскадные таблицы стилей CSS. Даже не затрагивая при этом документы с данными стилей CSS для сохранения общего стиля Web-узла.

23 ВСЁ