SE@RCHER
SE@RCHER
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT ЛУЧШИЕ JAVASCRIPT
Золотая библиотека JAVASCRIPT
1997

лучшие сказки мира
сказки


Правила написания каскадных таблиц стилей (CSS). Каскадность CSS

. Единицы измерения. Свойства текста. Свойства цвета и фона. Свойства блока. Списки. Позиционирование. Псевдоклассы и псевдоэлементы.

Объединение

Несколько селекторов через запятую. Объединение позволяет применить одинаковый стиль сразу нескольким элементам (селекторам). Всем четырем тегам заголовков определен красный цвет шрифта.

h1, h2, h3, h5 {color: red;}
Селекторы по контексту

Несколько селекторов через пробел. В примере ниже текст внутри элемента <b>...</b> будет красным только если он будут внутри элемента <h1>...</h1>.

h1 b {color: red;}
<h1>Здесь <b>красный</b>.</h1>
<p>Здесь <b>нет</b>.</p>
Class
(атрибут тега class="")

Селекторы классов могут быть использованы как атрибуты тегов. Селектор класса — строка, начинающаяся с точки. Не нужно использовать точку ссылаясь на класс. Название класса (значение атрибута class="") не должно начинаться с цифры.

.example {color: red;}
<p class="example">Этот текст красный.</p>
ID
(атрибут тега id="")

Селекторы ID могут быть использованы как атрибуты тегов. Селектор ID — строка, начинающаяся с символа #. Не нужно использовать # ссылаясь на селектор ID. Значение атрибута id="" не должно начинаться с цифры и должно быть уникальным в пределах документа.

#i5 {color: red;}
<p id="i5">Этот текст с ID 'i5'.</p>
Комментарии

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

/* Это комментарии. */
Тэги <div> и <span>

Эти два HTML-тэга, для которых поддержка стилей особенно актуальна.

<div>...</div> используется для формирования структуры документа в виде блоков текста.

<div style="color:green; font-weight:bold"><h1>Это заголовок</h1></div>

<span>...</span> используется для оформления внутри строк.

<p>Это <span style="color:red;">красный текст</span> внутри параграфа</p>
Упрощенный синтаксис

Многие свойства можно описать кратко. Их значения читаются: сверху-справа-снизу-слева (top-right-bottom-left).

Например:

div { padding: 5px 10% 0 3%; }

означает то же самое, что и:

div { padding-top:5px; padding-right:10%;
padding-bottom:0; padding-left:3%; }

Значения
Единицы измерения

Единицы измерения обозначаются аббревиатурой из двух букв без пробела между цифрами и обозначением.
Они делятся на две категории:

Абсолютные:

  • in: дюйм - 1 дюйм равен 2.54 сантиметрам.
  • cm: сантиметр
  • mm: миллиметр
  • pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма.
  • pc: пика - 1 пика равна 12 точкам.

Относительные:

  • em: свойство 'font-size' соответствующего шрифта
  • ex: свойство 'x-height' соответствующего шрифта
  • px: пиксели, относительно устройства просмотра

Например:
width: 50px;
margin-left: 2em;

Процентные соотношения

Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. Например, размер шрифта элемента <h2> будет 75% от размера шрифта по умолчанию.

h2 {font-size: 75% }

Ключевые слова

В CSS используются ключевые слова как значения для различных свойств.
Например: bolder, lighter, larger, x-large, xx-large, x-small.
Значения цвета

Шестнадцатиричное значение; в процентах; по названию.

color: #FF00FF; /* такое значение может быть сокращено до #F0F */
color: rgb(100%,0%,100%);
color: chocolate

URLs (ссылки)

Используются в различных свойствах для обозначения местоположения изображения. Относительные ссылки указывают размещение файлов относительно CSS, а не HTML документа.

url(picture.gif)
url(http://www.xhtml.ru/lib1/pic278.gif)
list-style-image: url(bullet3.gif)


Каскадность
!important

Свойство стиля объявлено как !important. Это свойство перекроет все другие свойства: исходные или переопределенные.

h1 {color: maroon !important;}

Наследование

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

Внешние таблицы стилей используются для управления внешним видом нескольких страниц с помощью одного файла CSS. Используйте тэг <link> в секции <head> HTML документа.

Например: <link rel="stylesheet" type="text/css" href="style.css" />
Каскадный порядок и синтаксис

Наибольший приоритет имеет свойство, определенное в атрибуте style у элементов. Внутри таблицы стилей последнее определение имеет наивысший приоритет. Ниже приведен порядок применения таблиц стилей к документу. Первый способ в списке имеет наивысший приоритет:

  1. style="что-то там" свойства стилей задано в атрибуте тэга
    Например: <p style="color: red; font-family: 'Times New Roman', serif">строка текста</p>
  2. Тэг <style> в секции <head> HTML документа
    Например:
    <style>
    .title { font-family: 'Snap ITC', cursive; font-size: 60pt;}
    </style>
  3. Тэг <link> для привязки внешней таблицы стилей в секции <head> HTML документа
    Например: <link rel="stylesheet" type="text/css" href="style.css">
  4. Стили браузера по умолчанию
Media

CSS2 позволяет определять различные таблицы стилей для отображения страниц на разных устройствах.

/* css для печати, элементы с атрибутом class="noprint" не будут напечатаны */
<style media="print">
.noprint {display: none;}
</style>

/* css для экрана, элементы с атрибутом class="noshow" будут скрыты */
<style media="screen">
.noshow {display:none;}
</style>

Шрифты
font-family

Используется для объявления шрифта или семейства шрифтов. Семейства шрифтов: serif, sans-serif, monospace, cursive и fantasy. Если название шрифта состоит из нескольких слов - его следует заключить в кавычки.

P {font-family: "Times New Roman", serif;}

font-style

Два значения: курсив (italic) или обычный (normal).

EM {font-style: italic;}

font-variant

В настоящее время два значения: small-caps и normal. В будущем, вероятно, добавятся еще значения.

H3 {font-variant: small-caps;}

font-weight

Значения: bold, normal, lighter, bolder и числовое (100-900).

B {font-weight: 700;}

font-size

Устанавливает размер шрифта: абсолютный (pt, in, cm, px), относительный (em, ex), в процентах.
Значением могут быть и ключевые слова: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller

H2 {font-size: 200%;}
H3 {font-size: 36pt;}

font

Краткое описание свойств шрифта. Порядок следования значений важно соблюдать:
font {font-style font-variant font-weight font-size/line-height font-family;}. Можно не указывать любое из значений, не нарушая порядок их следования.

P {font: bold 12pt/14pt Helvetica,sans-serif;}


Цвет и фон
color

Устанавливает цвет элемента. Для текста это будет цвет текста, для других элементов,например HR, это будет цвет линии.

H6 {color: green;}

background-color

Устанавливает цвет фона элемента. Значение по умолчанию: transparent.

P { background-color: #CCCC00; }

background-image

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

BODY {background-image: url(bg.gif);}

background-repeat

Указывает как повторять фоновое изображение. Возможные значения: repeat (повторять по вертикали и по горизонтали), no-repeat (не повторять), repeat-x (по горизонтали), repeat-y (по вертикали). По умолчанию: repeat.

BODY { background-repeat: repeat-y; }

background-attachment

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение "fixed") или будет перемещаться вместе с документом (значение "scroll") в процессе его прокрутки.

BODY {background-attachment: fixed;}

background-position

Устанавливает начальную позицию для фонового изображения или цвета. Значения: Position (x y) or (x% y%); top, center, bottom, left, right.

BODY {background-position: top center;}

background

Краткое описание свойств фона элемента. Значения могут быть написаны в произвольном порядке.

BODY {background: white url(bg.gif) fixed center;}


Свойства текста
letter-spacing

Устанавливает расстояние между символами.

P {letter-spacing: 0.5em;}

line-height

Устанавливает расстояние между линиями в элементе (высоту строк). Значение не может быть отрицательным.

P {line-height: 18pt;}
H2 {line-height: 200%;}

text-decoration

Значения: none (нет), underline (подчеркнутый текст), overline (черта над текстом), line-through (текст перечеркнут), blink (мерцающий). Значения можно комбинировать.

U {text-decoration: underline;}
.old {text-decoration: line-through;}

text-transform

Изменяет регистр символов в элементе. Значения: capitalize (Первый Символ Каждого Слова Прописной), uppercase (ВСЕ БУКВЫ ПРОПИСНЫЕ), lowercase (все буквы строчные).

H1 {text-transform: uppercase;}

text-align

Устанавливает горизонтальное положение текста. Может быть применено только к блочным элементам.

P {text-align: justify;}
H4 {text-align: center;}

text-indent

Устанавливает начальный отступ первой строки элемента. Применяется только к блочным элементам. Не может быть отрицательным.

P {text-indent: 5em;}
H2 {text-indent: -25px;}

vertical-align

Изменяет вертикальное выравнивание текста в строке или ячейке таблицы. Ключевые слова: baseline; middle; sub; super; top; text-top; bottom; text-bottom.

.super {vertical-align: super;}

word-spacing

Устанавливает расстояние между словами, которые определены как строки символов, разделенные пробелами.

P {word-spacing: 0.5em;}


Блочная модель, контейнеры, блоки...
Блочная модель

Самый простой путь к пониманию блочной модели это рассматривать каждый элемент (<P>, <H1>, и т.д.) как блок. С помощью CSS можно изменять: длину (width), ширину (height), отступы внутри (padding) и снаружи (margin), ширину границ (border); а также позиционировать блок относительно документа или другого блока.

Замечание относительно IE6.0: этот браузер в Standards mode рассматривает ширину блока не прибавляя к ней значения padding и border. Т.е. использует блочную модель W3C.

Свойства блока
margin-top

Устанавливает размер отступа сверху от элемента. Возможны отрицательные значения.

UL {margin-top: 0.5in;}

margin-right

Устанавливает размер отступа справа от элемента. Возможны отрицательные значения.

IMG {margin-right: 30px;}

margin-bottom

Устанавливает размер отступа снизу от элемента. Возможны отрицательные значения.

UL {margin-bottom: 0.5in;}

margin-left

Устанавливает размер отступа слева от элемента. Возможны отрицательные значения.

P {margin-left: 3em;}

margin

Краткая форма. Устанавливает размеры отступов снаружи элемента. Возможны отрицательные значения. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left.

H1 {margin: 2em;}
P {margin: 0% 5% 0% 5%;}

padding-top

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

UL {padding-top: 0.5in;}

padding-right

Устанавливает размер отступа справа внутри элемента, который наследует фон элемента. Отрицательные значения не возможны.

DIV {padding-right: 30px;}

padding-bottom

Устанавливает размер отступа снизу внутри элемента, который наследует фон элемента. Отрицательные значения не возможны.

UL {padding-bottom: 0.5in;}

padding-left

Устанавливает размер отступа слева внутри элемента, который наследует фон элемента. Отрицательные значения не возможны.

P {padding-left: 3em;}

padding

Краткая форма. Устанавливает размеры отступов внутри элемента. Отрицательные значения не возможны. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left.

H1 {padding: 2ex;}


border-top-width

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

UL {border-top-width: 0.5in;}

border-right-width

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

IMG {border-right-width: 30px;}

border-bottom-width

Устанавливает ширину нижней границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны.

UL {border-bottom-width: 0.5in;}

border-left-width

Устанавливает ширину левой границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны.

P {border-left-width: 3em;}

border-width

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

H1 {border-width: 2ex;}

border-color

Устанавливает цвет границ элемента. Все четыре границы могут иметь различные значения.

H1 {border-color: silver black;}

border-style

Устанавливает стиль отображения границ элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (границы не показываются, ширина равна 0).

H1 {border-style: solid; border-color: purple;}

border-top

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) верхней границы элемента.

UL {border-top: 0.5in solid black;}

border-right

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) правой границы элемента.

IMG {border-right: 30px dotted blue;}

border-bottom

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) нижней границы элемента.

UL {border-bottom: 0.5in grooved green;}

border-left

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) левой границы элемента.

P {border-left: 3em solid gray;}

border

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) границ элемента по периметру.

H1 {border: 2px dashed tan;}

width

Устанавливает ширину элемента. Не может иметь отрицательные значения.

TABLE {width: 80%;}

height

Устанавливает высоту элемента. Не может иметь отрицательные значения.

IMG.icon {height: 50px;}

float

Свойство "плавающего" элемента. Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Значения: left; right; none.

IMG {float: left;}

clear

Это свойство определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. Значения: both (обе стороны); left; right; none. По умолчанию: none.

H1 {clear: both;}


Свойства классификации
display

Используется для изменения заданной по умолчанию формы представления HTML элементов. Некоторые значения: block; inline; list-item; none. Когда display="none" - элемент не отображается совсем и место для него не резервируется.

.hide {display: none;}

white-space

Определяет поведение пробелов и переноса текста на новую строку внутри элемента. Значения: normal, pre, nowrap.

TD {white-space: nowrap;}
TT {white-space: pre;}

list-style-type

Используется для объявления типа маркеров или нумерации, используемых в неупорядоченных и упорядоченных списках. Значения: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

UL {list-style-type: square;}
OL {list-style-type: lower-roman;}

list-style-image

Используется для объявления изображения, используемого в качестве маркера неупорядоченных и упорядоченных списков. Применяется к элементам, у которых свойство display="list-item".

UL {list-style-image: url(bullet3.gif);}

list-style-position

Используется для позиционирования маркеров или нумерации списков внутри или снаружи элементов списка. Значения: inside; outside. По умолчанию: outside.

LI {list-style-position: inside;}

list-style

Краткая форма записи, собирающая все возможные свойства list-style. Применяется к элементам, у которых свойство display="list-item".

UL {list-style: square url(bullet3.gif) outer;}


Псевдо-классы и Псевдо-элементы
anchor

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

A:link {color: #900}
A:link IMG { border: solid blue }
A:hover { background:#ffff00; }
A:visited {}
A:active {} /* стиль, видимый только в момент клика по ссылке */

Комбинирование: обычные имена классов размещаются до псевдо-классов.

A.external:link { color: magenta }
<A CLASS="external" HREF="http://out.side/">внешняя ссылка</A>

first-line

Применяется к первой линии текста в элементе и только к блочным элементам.

P:first-line {color: red;}
<P>Первая строка параграфа
красная. Далее что-то там там там...</P>

first-letter

Применяется к первой букве в элементе и только к блочным элементам.

P:first-letter {color: red;}
<P>Эта заглавная 'Э' в начале параграфа красная.</P>


Свойства печати
page-break-after

Значения:
auto начинать с новой страницы после элемента только если на текущей не остается места;
always всегда начинать с новой страницы после элемента;
left начинать с новой страницы после элемента только на странице, которая будет слева;
right начинать с новой страницы после элемента только на странице, которая будет справа;

Пример:

<STYLE>
.page {page-break-after: always}
</STYLE>

...
<P CLASS="page">
...

page-break-before

Значения: те же, что и вышеописанные. Замечание: эти свойства не работают внутри таблиц. Также, могут быть глюки при использовании с тегом <br />. Лучше всего использовать разрыв страниц в структурных тегах (H1, P, DIV, и т.п.).

Курсор
cursor

Определяет внешний вид курсора при наведении указателя мыши на элемент.

Значения: auto (браузер сам определяет по контексту); crosshair; default (обычно стрелка - определено операционной системой); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize.
Использование 'hand' возможно для отображения курсора в виде руки для IE4, IE5, и Opera 3.5, хотя и не рекомендуется W3C. Лучше использовать, 'pointer', это понимают современные браузеры.

P { cursor: help }

Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER