Каскадные таблицы стилей (CSS)
Общие положения
До появления таблиц стилей, форматирование документов 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 - ID
Пример: 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> следующую строку:
<LINK rel=stylesheet href="/файл.css" type="text/css">
либо
<STYLE>
@import URL("файл.css");
</STYLE
Все содержимое будет впредь форматироваться с помощью стилей заданных в таблице файл.css. Метод очень удобен для создания узлов страниц посвященных родственным темам или принадлежащих одному владельцу, в едином хорошо продуманном и легко узнаваемом стиле.
Аппаратно-зависимые таблицы стилей
Одной из важнейших особенностей таблиц стилей является то, что они могут задавать способ представления документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, печатных устройств и т.д. Ниже представлен перечень типов устройств, определяемых в CSS:
- all
Для всех устройств. - aural
Для речевых синтезаторов. - braille
Для устройств чтения азбуки Брайля. - embossed
Для печати азбуки Брайля. - handheld
Для переносных небольших портативных устройств.
- print
Для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. - projection
Для настенных презентаций, например, для проекторов. - screen
Для цветных дисплеев. - tty
- Для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения.
- tv
Для телевизионных приставок (низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).
Существует несколько способов задания аппаратно-зависимых таблиц стилей:
- При помощи правила @import
<STYLE>
@import URL("файл.css") print;
</STYLE>
- При помощи правила @media
<STYLE>
@media print{...};
</STYLE>
- Задать аппаратно-зависимый стиль непосредственно в элементе <LINK>
<LINK rel="stylesheet" type="text/css" media="print, handheld" href="/file.css">
- Задать аппаратно-зависимый стиль непосредственно в элементе <STYLE>
<STYLE media=print>
селектор {атрибут: значение}
</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 Линия насквозь.
Синтаксис: селектор {text-decoration: line-through }
* text-indent
Атрибут определяет отступ текста.
Синтаксис: селектор {text-indent: число}
o Пункты.
Синтаксис: селектор {text-indent: 12pt}
o Дюймы.
Синтаксис: селектор {text-indent: 12in}
o Сантиметры.
Синтаксис: селектор {text-indent: 12cm}
o Пиксели.
Синтаксис: селектор {text-indent: 12px}
Браузер Internet Explorer поддерживает отрицательные значения атрибутов полей и отступа. Эта функциональная особенность позволяет добиваться интересных и необычных эффектов, что положительно сказывается на читабельности страницы.
* text-align
Атрибут позволяет изменить режим выравнивания текста.
Синтаксис: селектор {text-align: расположение}
o По правому краю.
Синтаксис: селектор {text-align: right }
o По левому краю.
Синтаксис: селектор {text-align: left }
o По центру.
Синтаксис: селектор {text-align: center }
* text-transform
Атрибут позволяет изменить регистр шрифта текста.
Синтаксис: селектор {text-transform: none}
так же может принимать значения:
o capitalize.
o uppercase.
o lowercase.
Выравнивание больших фрагментов по левому краю является единственно разумным решением с точки зрения читабельности. Выравнивание по правому краю логичнее всего назначать небольшим фрагментам текста, например, выноскам. Хотя с помощью атрибута BODY определяются значения полей для всей страницы, атрибут поля можно включать в любой элемент HTML, например, в заголовки или абзацы.
Свойства цвета и фона
* color
* background-color
Атрибут позволяет задать цвет фона абзаца, присвоив ему шестнадцатеричное значение, либо задать прозрачность transparent.
Синтаксис: селектор {background-color: #ffffff}
* background-image
Атрибут позволяет задать фоновый рисунок страницы, указав его URL.
Синтаксис: селектор {background-image: URL("URL");}
* background-position
Атрибут позволяет задать расположение фонового рисунка страницы, указав его отступы по осям x и y, кроме численных значений может задаваться как:
o left
o top
o center
o right
o bottom
Синтаксис: селектор {background-position: left 45pt;}
* background-attachment
Атрибут позволяет задать будет ли фоновый рисунок страницы фиксированным, указав scroll или fixed.
Синтаксис: селектор {background-attachment: scroll;}
* background-repeat
Атрибут позволяет задать будет ли фоновый рисунок страницы заполнять фон черепицей и как, указав:
o repeat - повторяется
o no-repeat - не повторяется
o repeat-x - повторяется по оси x
o repeat-y - повторяется по оси y
Синтаксис: селектор {background-repeat: no-repeat;}
* color
Атрибут позволяет задать цвет текста страницы, присвоив ему шестнадцатеричное значение.
Синтаксис: селектор {color: #000000}
Свойства обрамления
* margin-left
Атрибут определяет отступ от объекта слева.
Синтаксис: селектор {margin-left: auto}
o Пункты.
Синтаксис: селектор {margin-left: 12pt}
o Дюймы.
Синтаксис: селектор {margin-left: 12in}
o Сантиметры.
Синтаксис: селектор {margin-left: 12cm}
o Пиксели.
Синтаксис: селектор {margin-left: 12px}
* margin-right
Атрибут определяет отступ от объекта справа.
Синтаксис: селектор {margin-right: auto}
o Пункты.
Синтаксис: селектор {margin-right: 12pt}
o Дюймы.
Синтаксис: селектор {margin-right: 12in}
o Сантиметры.
Синтаксис: селектор {margin-right: 12cm}
o Пиксели.
Синтаксис: селектор {margin-right: 12px}
* margin-top
Атрибут определяет отступ от объекта сверху.
Синтаксис: селектор {margin-top: auto}
o Пункты.
Синтаксис: селектор {margin-top: 12pt}
o Дюймы.
Синтаксис: селектор {margin-top: 12in}
o Сантиметры.
Синтаксис: селектор {margin-top: 12cm}
o Пиксели.
Синтаксис: селектор {margin-top: 12px}
* margin-bottom
Атрибут определяет отступ от объекта снизу.
Синтаксис: селектор {margin-bottom: auto}
o Пункты.
Синтаксис: селектор {margin-bottom: 12pt}
o Дюймы.
Синтаксис: селектор {margin-bottom: 12in}
o Сантиметры.
Синтаксис: селектор {margin-bottom: 12cm}
o Пиксели.
Синтаксис: селектор {margin-bottom: 12px}
* padding-left
Атрибут определяет отступ от содержимого элемента до обрамления слева.
Синтаксис: селектор {padding-left: 0}
o Пункты.
Синтаксис: селектор {padding-left: 12pt}
o Дюймы.
Синтаксис: селектор {padding-left: 12in}
o Сантиметры.
Синтаксис: селектор {padding-left: 12cm}
o Пиксели.
Синтаксис: селектор {padding-left: 12px}
* padding-right
Атрибут определяет отступ от содержимого элемента до обрамления справа.
Синтаксис: селектор {padding-right: 0}
o Пункты.
Синтаксис: селектор {padding-right: 12pt}
o Дюймы.
Синтаксис: селектор {padding-right: 12in}
o Сантиметры.
Синтаксис: селектор {padding-right: 12cm}
o Пиксели.
Синтаксис: селектор {padding-right: 12px}
* padding-top
Атрибут определяет отступ от содержимого элемента до обрамления сверху.
Синтаксис: селектор {padding-top: 0}
o Пункты.
Синтаксис: селектор {padding-top: 12pt}
o Дюймы.
Синтаксис: селектор {padding-top: 12in}
o Сантиметры.
Синтаксис: селектор {padding-top: 12cm}
o Пиксели.
Синтаксис: селектор {padding-top: 12px}
* padding-bottom
Атрибут определяет отступ от содержимого элемента до обрамления снизу.
Синтаксис: селектор {padding-bottom: 0}
o Пункты.
Синтаксис: селектор {padding-bottom: 12pt}
o Дюймы.
Синтаксис: селектор {padding-bottom: 12in}
o Сантиметры.
Синтаксис: селектор {padding-bottom: 12cm}
o Пиксели.
Синтаксис: селектор {padding-bottom: 12px}
* border-style
Атрибут определяет оформление рамок вокруг объектов.
Синтаксис: селектор {border-style:тип}
o dotted.
Синтаксис: селектор {border-style: dotted}
o solid.
Синтаксис: селектор {border-style: solid}
o double.
Синтаксис: селектор {border-style: double}
o groove.
Синтаксис: селектор {border-style: groove}
o insert.
Синтаксис: селектор {border-style: insert }
o ridge.
Синтаксис: селектор {border-style: ridge}
o outset.
Синтаксис: селектор {border-style: outset}
o none.
Синтаксис: селектор {border-style: none }
* border-color
Атрибут определяет оформление цвета рамок вокруг объектов.
Синтаксис: селектор {border-color: цвет}
* border-width
Атрибут определяет оформление цвета рамок вокруг объектов.
Синтаксис: селектор {border-width: цвет}
* border-позиция
Атрибут определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон
Синтаксис: селектор {border-top: вид цвет}
может принимать значения:
o border-top
o border-bottom
o border-right
o border-left
Тогда, приведенные выше свойства примут вид:
для border-color:
o border-top-color
o border-bottom-color
o border-right-color
o border-left-color
для border-style:
o border-top-style
o border-bottom-style
o border-right-style
o border-left-style
для border-width:
o border-top-width
o border-bottom-width
o border-right-width
o border-left-width
Свойства позиционирования
* top
Атрибут позволяет задать y-координату элемента в окне браузера:
Синтаксис: селектор {top: значение}
задается:
o n px
o n %
o auto
* left
Атрибут позволяет задать x-координату элемента в окне браузера:
Синтаксис: селектор {left: значение}
задается:
o n px
o n %
o auto
* width
Атрибут позволяет задать ширину элемента в окне браузера:
Синтаксис: селектор {width: значение}
задается:
o n px
o n %
o auto
* height
Атрибут позволяет задать высоту элемента в окне браузера:
Синтаксис: селектор {height: значение}
задается:
o n px
o n %
o auto
* position
Атрибут позволяет задать позицию элемента в окне браузера:
Синтаксис: селектор {position: absolute}
o absolute - когда значения left и top задаются относительно левого верхнего угла контейнера или страницы.
o relative - когда значения left и top задаются относительно текста, за которым следует элемент.
o static - когда значения left и top задаются относительностраницы статично.
* z-index
Атрибут позволяет задать порядок перекрытия элементами друг друга при расположении их слоями, при этом элемент с более высоким индексом будет располагаться над элементом с низким индексом. В случае,если атрибут не задан специально,браузер присваивает более высокий индекс элементу, который в исходном коде описан позже:
Синтаксис: селектор {z-index: 2}
o auto
o порядковый номер
* clear
Атрибут позволяет задать обтекание текстом объекта, например картинки, выровненной по левому или правому краю, присвоив ему одно из значений:
Синтаксис: селектор {clear: none}
o left
o right
o both
* overflow
Атрибут позволяет задать, как выглядит текст, переполнивший границы элемента, присвоив ему одно из значений:
Синтаксис: селектор {overflow: none}
o none
o clip
o scroll
* float
Атрибут аналогичен атрибуту align.
Синтаксис: селектор {float: left}
Визуальные свойства
* cursor
Синтаксис: селектор {cursor: hand}
Атрибут позволяет задать вид курсора, присвоив ему одно из значений:
- crosshair
- hand
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- sw-resize
- se-resize
- s-resize
- w-resize
- text
- wait
- help
- auto
- default
* filter
Синтаксис: селектор {filter: fliph(параметры)}
Атрибут позволяет задать фильтр для текста или изображения, присвоив ему одно из значений:
o alpha
o blur
o chroma
o dropshadow
o flipv
o fliph
o glow
o gray
o invert
o light
o mask
o shadow
o wave
o xray
* visibility
Атрибут позволяет задать видимость фрагмента документа, присвоив ему одно из значений:
Синтаксис: селектор {visibility: inherit}
o inherit
o hidden
o visible
* display
Атрибут позволяет задать видимость фрагмента документа, визуально отличается от visibility тем, что сдвигает предыдущий и последующий элементы вместе:
Синтаксис: селектор {display: none}
o inline
o list-item
o none
o block
* list-style-position
Атрибут позволяет задать то, как будет отображаться текст внутри списка, если текст элемента списка по объему больше одной строки.
Синтаксис: селектор {list-style-position: outside}
o outside
o inside
* list-style-type
Атрибут определяет оформление маркеров в списках.
Синтаксис: селектор {list-style-type: тип}
o disc.
Синтаксис: селектор {list-style-type: disc}
o square.
Синтаксис: селектор {list-style-type: square}
o circle.
Синтаксис: селектор {list-style-type: circle}
o decimal.
Синтаксис: селектор {list-style-type: decimal}
o lower-roman.
Синтаксис: селектор {list-style-type:lower-roman }
o upper-roman.
Синтаксис: селектор {list-style-type: upper-roman}
o lower-alpha.
Синтаксис: селектор {list-style-type: lower-alpha}
o upper-alpha.
Синтаксис: селектор {list-style-type: upper-alpha}
o none.
Синтаксис: селектор {list-style-type: none }
* list-style-image
Атрибут определяет замену маркеров в списках на изображение.
Синтаксис: селектор {list-style-image: URL(file.gif ) }
Пример:
<UL STYLE="list-style-image:URL(file.gif)">
<LI> текст
<LI>текст
<LI> текст
</UL>
Прочие свойства
* page-break-after
* page-break-before
* :first-line
* :first-letter
* :after
* :before
* page-break-after
Атрибут определяет разрыв страницы перед атрибутом.
Синтаксис: селектор {page-break-after: значение}
может принимать значения:
o auto.
o right.
o left.
o always.
* page-break-before
Атрибут определяет разрыв страницы после атрибута.
Синтаксис: селектор {page-break-before: значение}
может принимать значения:
o auto.
o right.
o left.
o always.
* :first-line
Псевдоэлементопределяет стиль для первой строки блока текста
* :first-letter
Псевдоэлементопределяет стиль для первой буквы в строке.
Пример задания буквицы:
P:first-letter { font-size: 300%; font-style: italic; font-weight: bold; float: left }
* :after
Псевдоэлементдля вставки генерируемого содержимогопосле содержимого элемента
* :before
для вставки генерируемого содержимого досодержимого элемента
Например, следующее правило вставляет строку "Пояснение: " перед содержимым каждого элемента SPAN, значение атрибута class которого, равно note:
SPAN.note:before { content: "Пояснение: " }
Группирование стилей, назначение классов
и псевдоклассов
Группирование стилей
Существуют дополнительные методы, которые расширяют функциональные возможности таблиц стилей. Стили можно сгруппировать, что позволяет уменьшить количество необходимых атрибутов и аргументов, путем создания логических групп. Группирование таблиц стилей может происходить по одинаковым тэгам, или по атрибутам одного семейства. Порядок атрибутов играет важную роль: насыщенность шрифта и стиль начертания должны находиться перед остальными атрибутами - кегль должен быть задан до межстрочного интервала, и только потом в строку можно добавить дополнительную информацию. В случае группирования атрибутов - между ними запятые не ставятся, исключение составляет атрибут семейства шрифта, перед ним ставится запятая.
Пример группирования по тэгам:
До группирования:
H1 {font-family: arial;font-size: 14pt}
H2 {font-family: arial;font-size: 14pt}
H3 {font-family: arial;font-size: 14pt}
После группирования:
H1,H2,H3 {font-family: arial;font-size: 14pt}
Пример группирования по атрибутам одного семейства:
До группирования:
BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}
После группирования
BODY {margin: 12pt 10pt 15pt}
Назначение классов
Для того, чтобы сделать работу более универсальной, можно создать несколько вариантов - классов свойств стилей и применять их к элементам поочередно. Сгруппировав стили по свойствам, необходимо дать им названия ввиде расширения к элементу.
Синтаксис:
H1.left {text-align: left}
H1.right {text-align: right}
Далее в документе указывается либо <H1 class=left>, либо <H1 class=right>
Аналогично можно создать универсальный класс и применять его потом к различным элементам:
Синтаксис:
.left {text-align: left}
.right {text-align: right}
Далее в документе указывается либо <тэг class=left>, либо <тэг class=right> Назначение псевдоклассов
Псевдоклассы позволяют задавать стиль элемента по его характеристикам, которые не являются именем, атрибутом или содержимым. Элемент может приобрести псевдокласс или лишиться его во время работы пользователя с документом.
* A:link - не просмотренные ссылки
* A:visited - просмотренные ссылки
* A:hover - выбранная, но не активизированная ссылка
* A:active - активизированная ссылка
Адаптация интерфейса
Таблицы стилей CSS имеют возможность создания стилей, автоматически адаптирующихся к пользовательской системе. Для этого в них реализовано определение пользовательских системных установок цвета и шрифтов, а также применение этих значений к любому из элементов web-страницы, который может использовать значения color и font. Для определения пользовательских настроекиспользуется набор ключевых слов.
В этой таблице приведен список ключевых слов для определения пользовательских цветов и примеры их применения.
| Цвета | значение | описание |
|---|---|---|
| activeborder | Цвет границы активного окна. | |
| activecaption | Цвет заголовка активного окна. | |
| appworkspace | Цветмультидокументного фона. | |
| background | Цвет фона рабочего стола. | |
| buttonface | "Лицевая" сторона объемных элементов. | |
| buttonhighlight | Насыщенная тень объемных элементов. | |
| buttonshadow | Цвет тени объемных элементов. | |
| buttontext | Цвет текста на кнопках. | |
| captiontext | Цвет текста в заголовках. | |
| graytext | Отключенный (недоступный) текст. | |
| highlight | Выделение объекта элемента управления. | |
| highlighttext | Выделение текста элемента управления. | |
| inactiveborder | Цвет границы неактивного окна. | |
| inactivecaption | Цвет заголовка неактивного окна. | |
| inactivecaptiontext | Цвет текста в неактивном заголовке. | |
| infobackground | Цвет фона всплывающей подсказки. | |
| infotext | Цвет текста всплывающей подсказки. | |
| menu | Цвет фона меню. | |
| menutext | Цвет текста в меню. | |
| scrollbar | Цвет полосы прокрутки. | |
| threeddarkshadow | Темная тень объемных элементов. | |
| threedface | "Лицевая" сторона объемных элементов. | |
| threedhighlight | Цвет выделения объемных элементов. | |
| threedlightshadow | Светлый цвет тени объемных элементов. | |
| threedshadow | Насыщенная тень объемных элементов. | |
| window | Цвет фона окна. | |
| windowframe | Цвет рамки окна. | |
| windowtext | Цвет текста в окне. |
Синтаксис: селектор {color: background; }
Пример: текст имеет цвет фона Вашего рабочего стола
Применяяправила стилей, которые используют настройки пользователя, можно добиться следующих преимуществ: во-первых, это позволяет создавать страницы, с интерфейсом, отвечающим требованиям и вкусу пользователя, а во-вторых позволяет создавать более доступные страницы, т.к. настройки пользователя могут быть связаны с их физическими ограничениями. Значение, которое отсутствует в системе, при этом будет заменено ближайшим к нему атрибутом системы или цветом, используемым по умолчанию.
В этой таблице приведен список ключевых слов для определения пользовательских шрифтов и примеры их применения.
| Системные шрифты | значение | описание |
|---|---|---|
| Шрифт | caption | Шрифт, используемый в заголовках кнопок и т.д. |
| Шрифт | icon | Шрифт, используемый в иконках. |
| Шрифт | menu | Шрифт, используемый в меню. |
| Шрифт | messagebox | Шрифт, используемый в диалогах и т.д. |
| Шрифт | smallcaption | Шрифт, используемый в малых элементах. |
| Шрифт | statusbar | Шрифт, используемый в статусной строке. |
Синтаксис:селектор {font: icon; }
Фильтры
Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а такжегруппэлементов, заключенных в тэги <DIV>и </DIV>. Фильтр задается точно так, как задается любое свойство элемента при помощи стиля.
Синтаксис: {filter: имя(параметры)}
Фильтр alpha
Фильтр alpha задает уровень прозрачности элемента.
Синтаксис:{filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}
Используется с рядом параметров:
* opacity - уровень прозрачности от 0 до 100
* finish opacity - конечный уровень прозрачности от 0 до 100, параметр ограничивает использование прозрачности до заданного значения.
* style - форма прозрачной области: 0 - универсал, 1 - линия,2 - круг,3 - прямоугольник.
* startx - начало прозрачной области применяется только с style=1, задается в процентах.
* starty - начало прозрачной области применяется только с style=1, задается в процентах.
* finishx - конец прозрачной области применяется только с style=1, задается в процентах.
* finishy - конец прозрачной области применяется только с style=1, задается в процентах.
Фильтр blur
Фильтр blur задает элементу эффект размытости при движении.
Синтаксис:{filter:Blur(Add="1",Direction="270",Strength="15")}
Используется спараметрами:
* add - либо 0-false,либо 1-true
* direction - задает направление размытия в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
o 0 - Top
o 45 - Top right
o 90 - Right
o 135 - Bottom right
o 180 - Bottom
o 225 - Bottom left
o 270 - Default left
o 315 - Top left
* strength - величина смещения.
Фильтр chroma
Фильтр chroma задает прозрачность для одного цвета.
Синтаксис:{filter:Chroma(Color ="#fdfd03")}
Использует параметр:
* color - ввиде "#rrggbb"
Фильтр dropshadow
Фильтр dropshadow отбрасывает тень от объекта.
Синтаксис:{filter:DropShadow(Color="#6699CC",OffX="3",OffY="3",Positive="1")}
Использует параметры:
* color - задает цвет тени ввиде "#rrggbb"
* offx - задает смещение тени по оси X
* offy - задает смещение тени по оси Y
* positive - либо 0-верхний слой виден частично, либо 1- верхний слой виден весь.
Фильтр flipv
Фильтр flipv вертикально переворачивает объект:
Синтаксис:{filter:FlipV;}
Фильтр fliph
Фильтр fliph горизонтально переворачивает объект:
Синтаксис:{filter:FlipH;}
Фильтр glow
Фильтр glow задает ореол вокруг объекта:
Синтаксис:{filter:Glow(Strength=3, Color="#0000ff")}
Использует параметры:
* color - задает цвет сияния ввиде "#rrggbb"
* strength - задает интенсивность сияния от 0 до 100
Фильтр gray
Фильтр gray преобразует объект в черно-белые цвета.
Синтаксис:{filter:Gray;}
Фильтр invert
Фильтр invert инвертирует оттенки, цвета и яркость объекта
Синтаксис:{filter:Invert;}
Фильтр mask
Фильтр mask задает выделение объекта цветом:
Синтаксис:{filter:Mask(Color="#0000ff")}
Использует параметр:
* color - ввиде "#rrggbb"
Фильтр shadow
Фильтр shadow отбрасывает тень от объекта.
Синтаксис:{filter:Shadow(Color="#000000", Direction="150")}
Используется спараметрами:
* direction - задает направление тени в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
o 0 - Top
o 45 - Top right
o 90 - Right
o 135 - Bottom right
o 180 - Bottom
o 225 - Default bottom left
o 270 - Left
o 315 - Top left
* color - ввиде "#rrggbb"
Фильтр wave
Фильтр wave задает волнообразное отображение объекта
Синтаксис:{filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}
Использует параметры:
* add - либо 0-false,либо 1-true
* freq - задает количество волн
* phase - задает фазу волны
* lightstrength - задает изменение интенсивности освещенности на пиках волн
* strength - задает интенсивность волны
Фильтр xray
Фильтр xray показывает контур объекта, как если бы это был рентгеновский снимок:
Синтаксис:{filter:Xray;}
Слои
Концепция слоя или уровня была разработана и впервые предложена компанией Netscape, их тэги <LAYER и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако со временем им на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тэгах <SPAN> или <DIV> как слои, организовав управление ими при помощи их свойств.
Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.
Абсолютное позиционирование
Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения:
* position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
* position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
* position:static означает, что позиционирование слоя будет происходить относительно фона.
Горизонтальное позиционирование
Позиционирование по горизонтали задается свойством left,путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {left: значение}
задается:
* n px
* n %
* auto
Вертикальное позиционирование
Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается:
* n px
* n %
* auto
Задание высоты слоя
height, это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается:
* n px
* n %
* auto
Задание ширины слоя
width, это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается:
* n px
* n %
* auto
Позиционирование в глубину
z-index,это свойство позволяет задать порядок перекрытия слоями друг друга, при этом слой с более высоким индексом будет располагаться над слоем с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже:
Синтаксис: {z-index: 2}
* auto
* порядковый номер
Управление видимостью
visibility,это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}
* inherit
* hidden
* visible
display,это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}
* inline
* list-item
* none
* block
При кажущемся сходстве свойств слоя visibility и display работают они по разному.
overflow,это свойство позволяет задать, как выглядит текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}
* none
* clip
* scroll
Понятие прозрачности слоя
Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован, подобного можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя данное свойство легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.
Наложение слоев
Одно из самых интересных способов применений свойств слоя, является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.
