Xwab
Форумыnavigate_nextHTML/CSS

Справочник по CSS
Сообщения
LegionDEAD

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


font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
--
font-style Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный.
P {font-style: italic;}
--
font-variant Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные).
P {font-variant: small-caps;}
--
font-weight Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
B {font-weight: bolder;}
--
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

01 Июн 2010, 14:23
LegionDEAD

Цвет элемента и цвет фона

color Определяет цвет элемента
I {color: green;}
--
background-color Устанавливает цвет фона для элемента В– именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator В– лишь ширину, занимаемую этим элементом.
H4 {background-color: yellow;}
В скриптовых языках используйте object.style.backgroundColor [ = sColor ]
--
background-image Устанавливает или получает фоновый рисунок для элемента
Может принимать значения
none - По умолчанию. Используется цвет родительского объекта
sUrl - Задается абсолютный или относительный путь к рисунку
H3 {background-image: yellow;}
В скриптовых языках используйте object.style.backgroundImage [ = sLocation ]
--
background-attachment Устанавливает или получает поведение фонового рисунка для элемента
Может принимать значения
scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом
fixed - Фоновый рисунок не прокручивается вместе с элементом
body {background-attachment: fixed;}
В скриптовых языках используйте object.style.backgroundAttachment [ = sAttachment ]

01 Июн 2010, 14:25
LegionDEAD

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

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст
--
H4 {text-decoration: underline;} - подчеркивание
A {text-decoration: none;} - стандартный текст
I {text-decoration: line-through;} - зачеркивание
B {text-decoration:overline;} - надчеркивание
--
text-transform Задает преобразование регистра текста при отображении
H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную
A {text-transform: uppercase;} - Все буквы преобразуются в заглавные
I {text-transform: lowercase;} - Все буквы преобразуются в строчные
B {text-decoration:none;} - Отменяет установленные преобразования
--
text-align Определяет выравнивание элемента. Возможные значения: left, right, center, justify
P {text-align:justify}
H5 {text-align: center}
--
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
--
line-height Управляет интервалами между строками текста.
P {line-height: 50 %}
--
word-spacing Устанавливает интервалам между словами. Можно использовать отрицательные значения
P {word-spacing: 50 %}
--
letter-spacing Устанавливает интервалам между буквами
P {letter-spacing: 50 pt}
--
vertical-align Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom
P {vertical-align: 50 pt}

01 Июн 2010, 14:28
LegionDEAD

Позиционирование

position Устанавливает или определяет позицию элемента. Может принимать значения:
static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left
relative - Позиция объекта определяется смещением от заданных свойств top и left
--
left/top Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения:
auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
length - число с заданной единицей измерения (10mm;5px;3em)
percentage - число процентов от ширины/высоты родительского объекта (10%)
Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются
--
z-index Устанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения:
строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам
Order - число, задающее позицию объекта в слоях.
С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position
Нельзя применять к объектам, имеющим окно (например, select)

01 Июн 2010, 14:29
LegionDEAD

Границы

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:
--
border-width Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая).
table {border-width: 2px;}
--
border-color Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
table {border-color: green;}
--
border-style Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset
table {border-style: dashed;}
table {border-style: groove;}
--
border-collapse Задает стиль рисования таблицы. Может принимать следующие значения:
separate (по умолчанию) - Ячейки отделены друг от друга
collapse - ячейки не имеют промежутков между собой
<TABLE STYLE="border-collapse:collapse">

01 Июн 2010, 14:38
LegionDEAD

Полоска прокрутки

Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.
--
scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
body {scrollbar-3dlight-color: green;}
--
scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками
body {scrollbar-arrow-color: red;}
--
scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color
body {scrollbar-base-color: green;}
--
scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками
body {scrollbar-darkshadow-color: red;}
--
scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки
body {scrollbar-face-color: green;}
--
scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Рто цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол
body {scrollbar-highlight-color: green;}
--
scrollbar-shadow-color Схоже с scrollbar-darkshadow-color
body {scrollbar-shadow-color: green;}
--
scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка
body {scrollbar-track-color: aqua;}

01 Июн 2010, 14:43
LegionDEAD

Псевдо-элементы

Псевдо-элементы являются особой группой, позволяющих объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдо-элемент first-letter, в котором устанавливаете различные стили:
p:first-letter { float:right;font-size:2em;color:red;}
--
:first-letter Устанавливает стили для первой буквы объекта
--
:first-line Устанавливает стили для первой строки объекта
--
:hover Устанавливает стили для элемента, когда пользователь подводит курсор мыши к ссылке. Данный псевдокласс часто используется вместе с псевдоклассами
:active, :link и :visited
--
:active Устанавливает стили для элемента, когда ссылка становится активной, но переход по ссылке еще не совершен. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :link и :visited
--
:link Устанавливает стили для элемента, когда ссылка не является часто посещаемой. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :visited
--
:visited Устанавливает стили для элемента, когда ссылка недавно посещалась. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :link. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение)

01 Июн 2010, 14:47
LegionDEAD

Отступы

margin Задает или получает ширину отступа от четырех сторон объекта
H4 {margin:1cm;}
body {margin:5mm;}
--
margin-top Задает или получает высоту верхнего отступа объекта
H5 {margin-top:3cm;}
--
margin-left Задает или получает ширину левого отступа объекта
img {margin-left:2cm;}
--
margin-right Задает или получает ширину правого отступа объекта
img {margin-right:2cm;}
--
margin-bottom Задает или получает высоту нижнего отступа объекта
img {margin-bottom:2cm;}
--
padding Задает или получает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей
td {padding:2cm;}
--
padding-bottom Задает или получает величину пространтства, вставляемого между объектом его нижней границей
td {padding-bottom:2cm;}
--
padding-left Задает или получает величину пространтства, вставляемого между объектом его левой границей
td {padding-left:2cm;}
--
padding-right Задает или получает величину пространтства, вставляемого между объектом его правой границей
td {padding-right:2cm;}
--
padding-top Задает или получает величину пространтства, вставляемого между объектом его верхней границей
td {padding-top:2cm;}

01 Июн 2010, 14:52
LegionDEAD

Как сделать текст ссылки одного цвета, а подчеркивание другого цвета?

В нижеследующем примере:
устанавливается свойство color: red для ссылки;
устанавливается свойство color: blue для элемента " <span>" вложенного в ссылку.

Таким образом, текст ссылки заключенный в тег span имеет своё свойство color: blue, которое переопределяет родительское свойство color: red, но так как у элемента span нет по умолчанию подчеркивания, то и его цвет не переопределяется и подчеркивание остается таким же как и определено для родителя (для ссылки, т.е. красным).

<html>
<head>
<style type="text/css">

A {color:red;}
A SPAN {color: blue;}

</style>
</head>

<body>

<a href="#"><span>Пример ссылки </span></a>

</body>
</html>

01 Июн 2010, 15:00
LegionDEAD

Ссылки, отталкивающие скобки: [ Link ]

<html>
<head>
<style type="text/css">

A.pushLink { padding: 0 3px; font-weight: bold; text-decoration: none; }
A:hover.pushLink { padding: 0; }
A:hover.pushLink span { margin: 0 3px; color: red; }

</style>
</head>

<body>

<a class="pushLink" href="">[ <span>CSS cсылки</span> ]</a>

</body>
</html>

01 Июн 2010, 15:14
Ответить на тему