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

Автор работы: Пользователь скрыл имя, 08 Июня 2013 в 17:09, курсовая работа

Краткое описание

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

Скачать в ZIP архиве (40.17 Кб) Сколько стоит заказать работу?

Вложенные файлы: 1 файл

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

— 42.57 Кб (Скачать файл)

Общие положения

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

<B><FONT color="red" size="5">текст</FONT></B>

Естественно, что при создании документов большого объема, такое форматирование требовало огромного количества времени и сил, поскольку такую конструкцию необходимо было вставлять всякий раз, когда было необходимо выделить текст, особенно если, по прошествии какого-то времени возникала необходимость смены дизайна страницы. А если возникала необходимость применить декоративное оформление текста, ничего другого не оставалось, как только вставлять графику, что увеличивало "вес" документа, и без того сильно раздутого обилием форматирующих тэгов, а следовательно увеличивало длительность загрузки документа.

В этом смысле, использование таблиц стилей стало самым, что ни есть оригинальным выходом из положения, который позволяет учесть все эти минусы. Суть метода заключается в предварительном задании стиля для любого из элементов документа. Например, назначив один раз, приведенный в примере стиль для тэга <B>, ничего не надо больше предпринимать, т.е. везде в документе, где встретится тэг <B>, он будет представлен в заданном виде. Налицо простота и оригинальность решения, когда сокращается размер кода, а смена дизайна сводится к изменению только параметров стиля.

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

Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:

Синтаксис: селектор {атрибут: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=". Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:

H2 {color: red}

Селекторы могут описывать следующие элементы:

тэги

Пример: P {color: red} стиль применяется к тэгу <P>

тэги потомков

Пример: H1 B {color: red} стиль применяется к тэгу <B>, находящемуся внутри заголовка первого уровня, т.е. являющимся его потомком

дочерние тэги

Пример: OL>LI {color: red} стиль применяется к тэгу <LI>, который является дочерним элементом для тэга <OL>, т.е. на тэги <LI>, которые являются дочерними элементами для тэга <UL> стиль не распространяется

сестринские тэги

Пример: H1+H2 {margin-top: -5mm} стиль применяется к сестринским тэгам <H1> и <H2>, которые являются дочерними по отношению к одному и тому же родительскому тэгу, например <BODY>, в данном случае уменьшает разрыв между ними

атрибуты тэгов

Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в <DIV>, у которых атрибут class равен red

Пример: P#12 {color: red } стиль применяется к тэгу <P>, у которого идентификатор ID равен 12

классы

Пример: .red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red

псевдоклассы

Пример: A:visited {color: red } стиль применяется к посещенному тэгу <A>.

В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой:

H2 {color: red; font-size: 15pt}

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

H3 B {color: green}

Здесь назначается зеленый цвет для текста выделенного тэгами <B> и </B>, если он является заголовком третьего уровня.

Включенные таблицы стилей

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

Пример: <P style="color:blue;"> стиль применяется к тэгу <P>, данный единичный абзац будет иметь синий текст.

Внедренные таблицы стилей

Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов <STYLE> и </STYLE>. Эта пара со всем её содержимым помещается между тэгами <HTML> и <BODY>. При написании кода внедренной таблицы выбираются тэги, которые будут являться контейнерами текста. Действие таблицы стилей будет распространяться только на те фрагменты текста, которые будут заключены именно в эти тэги. Точно также, как и скрипты, таблицы стилей могут быть спрятаны от старых браузеров в комментарии <!- - и //- ->. Внедренные таблицы используют наиболее часто.

Пример:

<HTML>

<HEAD>

</HEAD>

<STYLE>

BODY {color: #000000;}

H3 {color: #0000ff;}

A {color: #ff0000;}

</STYLE>

<BODY>

содержимое

</BODY>

</HTML>

Внешние таблицы стилей

Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.css. Затем необходимо связать нужные документы с данной таблицей. Нужно поместить в связываемом документе где-нибудь между тэгами <HEAD> и </HEAD> следующую строку:

либо

<STYLE>

@import URL("файл.css");

</STYLE

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

Аппаратно-зависимые таблицы стилей

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

all

Для всех устройств.

aural

Для речевых синтезаторов.

braille

Для устройств чтения азбуки Брайля.

embossed

Для печати азбуки Брайля.

handheld

Для переносных небольших портативных устройств.

Для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати.

projection

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

screen

Для цветных дисплеев.

tty

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

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

Существует несколько способов задания аппаратно-зависимых таблиц стилей:

При помощи правила @import

<STYLE>

@import URL("файл.css") print;

</STYLE>

При помощи правила @media

<STYLE>

@media print{...};

</STYLE>

Задать аппаратно-зависимый стиль непосредственно в элементе <LINK>

Задать аппаратно-зависимый стиль непосредственно в элементе <STYLE>

селектор {атрибут: значение}

</STYLE>

Относительные размеры

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

К относительным единицам измерения относятся:

* em - размер, относительно размера буквы "m"

* ex - размер, относительно вертикального размера букв, соответствующего шрифта

* px - размер, использующий пиксели, относительно устройства вывода

* % - размер, использующий процентные значения, относительно основного размера

Пример:

H1 { margin-left: 1.5em }

H3 { margin-left: 2ex }

span { font-size: 16px }

P { font-size: 150% }

Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.

Абсолютные размеры

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

К ним относятся:

* in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.

* cm - размер, в сантиметрах

* mm - размер, в миллиметрах

* pt - размер, в точках, 1 точка равна 1/72 дюйма.

* pc - размер, в пиках, 1 пика равна 12 точкам.

Пример:

H1 { margin: 1.5in }

H2 { line-height: 5cm }

H3 { word-spacing: 3mm }

H4 { font-size: 16pt }

H4 { font-size: 2pc }

Если указанное значение длины не поддерживается, то браузеры автоматически замещают его поддерживаемым значением. Кроме рассмотренных абсолютных единиц измерения, существуют еще несколько, предназначенных для голосовых и прочих браузеров. К ним относятся: deg, rad, grad, ms, s, Hz, kHz.

Единицы определения цвета

* ключевое слово - цвет задается, используя пользовательские настройки

* литерал - цвет задается, используя стандартные названия

* шестнадцатеричное - цвет задается, используя значения RGB

* процентное - цвет задается, используя значения

* десятичное - цвет задается, используя значения

Пример:

H1 { color: background }

H2 { color: red }

H3 { color: #ff0033mm }

H4 { color: rgb(100%, 0%, 0%)}

H4 { color: rgb(255, 0, 125)}

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

* font-family

Атрибут определяет тип шрифта по следующим элементам:

o Название шрифта.

Синтаксис: селектор {font-family: Times}

o Дополнительные шрифты. На случай, если какой-нибудь из шрифтов не установлен.

Синтаксис: селектор {font-family: times,garamond,arial,hevletica}

o Название семейства шрифтов.

Serif-с засечками, Sans Serif- без засечек, Cursive- курсивные, Fantasy- декоративные, Monospace- моноширинные.

Синтаксис: селектор {font-family: Serif}

* font-size

Атрибут определяет размер шрифта при помощи одной из размерностей:

o Пункты.

Синтаксис: селектор {font-size: 12pt}

o Дюймы.

Синтаксис: селектор {font-size: 12in}

o Сантиметры.

Синтаксис: селектор {font-size: 12cm}

o Пиксели.

Синтаксис: селектор {font-size: 12px}

o Проценты.

Синтаксис: селектор {font-size: 50%}

o Абсолют.

Синтаксис: селектор {font-size: small}

Может принимать значения:

+ xx-small

+ x-small

+ small

+ medium

+ large

+ x-large

+ xx-large

* font-style

Атрибут определяет стиль начертания шрифта.

Синтаксис: селектор {font-style: italic}

Может принимать значения:

o italic

o normal

o oblique

* font-variant

Атрибут определяет размер начертания шрифта.

Синтаксис: селектор {font-variant: normal}

Может принимать значения:

o small-caps

o normal

* font-weight

Атрибут определяет насыщенность начертания шрифта.

Синтаксис: селектор {font-weight: насыщенность}

Может принимать значения:

o normal.

Синтаксис: селектор {font-weight:normal}

o bold.

Синтаксис: селектор {font-weight:bold}

o число. Задается в пределах от 100 до 900.

Синтаксис: селектор {font-weight:700}

o Очень светлый.

Синтаксис: селектор {font-weight:extra-light}

o Средне-светлый.

Синтаксис: селектор {font-weight:demi-light}

o Светлый.

Синтаксис: селектор {font-weight: light}

o Средний.

Синтаксис: селектор {font-weight: medium}

o Очень жирный.

Синтаксис: селектор {font-weight: extra-bold}

o Средн-жирный.

Синтаксис: селектор {font-weight: demi-bold}

o Жирный.

Синтаксис: селектор {font-weight: bold}

* font-face

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

@font-face { font-family: имя; src: URL(http://domen.ru/путь/file.eot)}

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

* word-spacing

Атрибут определяет оформление интервала между слов.

Синтаксис: селектор {word-spacing: тип}

o normal.

Синтаксис: селектор {word-spacing:normal }

o em.

К обычному пробелу прибавляется ширина одной буквы m или нескольких

Синтаксис: селектор {word-spacing:3em }

* letter-spacing

Атрибут определяет оформление интервала между символами.

Синтаксис: селектор {letter-spacing: значение} либо normal.

Синтаксис: селектор {letter-spacing:normal }

* white-space

Атрибут определяет оформление пробелов в тексте.

Синтаксис: селектор {white-space: значение}

может принимать значения:

o normal.

o pre.

o nowrap.

* line-height

Атрибут определяет межстрочный интервал при помощи одной из пяти размерностей:

o Пункты.

Синтаксис: селектор {line-height: 12pt}

o Дюймы.

Синтаксис: селектор {line-height: 12in}

o Сантиметры.

Синтаксис: селектор {line-height: 12cm}

o Пиксели.

Синтаксис: селектор {line-height: 12px}

o Проценты.

Синтаксис: селектор {line-height: 50%}

* text-decoration

Атрибут определяет оформление начертания шрифта.

Синтаксис: селектор {text-decoration: тип}

o Упрощённый.

Синтаксис: селектор {text-decoration: none }

o Подчеркнутый.

Синтаксис: селектор {text-decoration: underline }

o Надчеркнутый.

Синтаксис: селектор {text-decoration: overline }

o Наклонный.

Синтаксис: селектор {text-decoration: italic }

o Линия насквозь.

Информация о работе Каскадные таблицы стилей