ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
Правила написания каскадных таблиц стилей (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 у элементов. Внутри таблицы стилей последнее определение имеет наивысший приоритет. Ниже приведен порядок применения таблиц стилей к документу. Первый способ в списке имеет наивысший приоритет:
- style="что-то там" свойства стилей задано в атрибуте тэга
Например: <p style="color: red; font-family: 'Times New Roman', serif">строка текста</p>
- Тэг <style> в секции <head> HTML документа
Например:
<style>
.title { font-family: 'Snap ITC', cursive; font-size: 60pt;}
</style>
- Тэг <link> для привязки внешней таблицы стилей в секции <head> HTML документа
Например: <link rel="stylesheet" type="text/css" href="style.css">
- Стили браузера по умолчанию
|
| 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 }
|
