Отступы. Полоса прокрутки. Псевдоэлементы. Позиционирование. Размер элемента. Ссылки.
Отступы
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;} |
Полоса прокрутки
Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент 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;} |
Примеры:
<STYLE type="text/css">
.SBColor { scrollbar-3dlight-color:blue;scrollbar-arrow-color: white;
scrollbar-base-color:green;scrollbar-face-color:pink;
scrollbar-track-color: aqua;}
</STYLE>
<TEXTAREA CLASS="SBColor" rows=5>Верх и левый край ползунка и кнопок
со стрелками в этом текстовом поле должны быть синего цвета, стрелки
белого цвета. А дорожка для ползунка небесного цвета.</TEXTAREA>
Псевдоэлементы
Псевдоэлементы являются особой группой, позволяющих объединять несколько стилей для какого-либо объекта. Например, можно задать свойства для первой буквы параграфа. Для этого назначается для тега 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. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение) |
Примеры:
//Все первые буквы БОЛЬШИЕ
<STYLE type="text/css">
A.pr:visited { color:blue }
A.pr:active { font-weight:bold; color:brown }
A.pr:link { color:#00FF00 }
A.pr:hover { color:red; text-decoration: none}
p:first-letter { float:right;font-size:2em;color:red;}
p:first-line {color:green;}
</STYLE>
<P>Справочник по HTML - хороший справочник</p>
<P>Как видите, первая буква и первая строка каждого параграфа имеет особый вид,
<br>заданный при помощи различных стилей.</p>
<p>Данный прием вам хорошо известен по книгам, использующим подобный прием
в глубокой древности</p>
<p>Подведите курсор к <a class="pr" href="http://www.yandex.ru/">ссылке</a>,
и она станет красного цвета и исчезнет подчеркивание ссылки
Позиционирование
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) |
Примеры:
Свойство relative: поднимем слово относительно базовой линии строки на 5 пикселей, причем, можно изменять позицию динамически, с помощью скриптов:
<SPAN
id=oSpan STYLE="position: relative; top:-5px">поднимем</SPAN>
<SCRIPT>
function fnDown(){
oSpan.style.position="relative";
oSpan.style.top="5px";
oSpan.innerText="опустим";}
function fnRelative(){
oSpan.style.position="relative";
oSpan.style.top="-5px";
oSpan.innerText="поднимем";}
function fnStatic(){
oSpan.style.position="static";
oSpan.innerText="выравним";}
</SCRIPT>
<INPUT onclick="fnRelative()" TYPE=button VALUE="Поднять">
<INPUT onclick="fnDown()" TYPE=button VALUE="Опустить">
<INPUT onclick="fnStatic()" TYPE=button VALUE="Выровнять">
Пример, Демонстрирующий Z-index в скрипте
Результатом является двигающийся квадрат с надписью «Любовь!», при этом при движении он проходит под квадратом с надписью «Саша +» и над квадратом с надписью «Таня =».
<INPUT
onclick="start_z()"
TYPE=button
VALUE="Запустить
пример">
<table border width=500><tr><td>
<DIV Id=CloseDiv STYLE="position:relative; top: 4; left:30; height: 130;
width:190; background: red; font-size:40; color: white;z-index: 4">
САША +
</DIV>
<DIV Id=FarDiv STYLE="position:relative; top: -100; left:240; height: 90;
width:150; background: blue; font-size:30; color:white; z-index: 2">
ТАНЯ =
</DIV>
<DIV ID=MovingMessage STYLE="position:relative; top: -155; left:0;
height: 30; width:80; background: yellow; font-size:15; z-index: 3">
Любовь!
</DIV>
</td></tr></table>
<SCRIPT LANGUAGE=VBSCRIPT>
Sub start_z
MovingMessage.style.posLeft = 0
setTimeout "MoveLeft",5,"VBScript"
End Sub
Sub MoveLeft
MovingMessage.style.posLeft = MovingMessage.style.posLeft + 1
If MovingMessage.style.posLeft < 400 Then setTimeout"MoveLeft",10,"VBScript"
End Sub
</SCRIPT>
http://css.find-info.ru/css/003/css.htm - ogl
3.13 Размер элемента
min-height |
Устанавливает или получает минимальную высоту элемента TR {min-height: 10px;} Данный атрибут применим к TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed |
Width |
Устанавливает ширину элемента |
<table border="1" style="table-layout:fixed; width:450px">
<tr>
<td style="height:35px;background-color:#FFCC00">Высота данной ячейки равна 35 пикселям.
Так что содержимое в ячейку не влезает и обрезается
<tr>
<td style="min-height: 150px; background-color:#09F">Минимальная Высота данной ячейки
равна 150 пикселям. Так что текст в нее влезает и не обрезается
</td>
</tr>
</table>
Ссылки
Таблица
A:link |
Определяет стиль для обычной непосещенной ссылки. |
A:visited |
Определяет стиль для посещенной ссылки. |
A:active |
Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
A:hover |
Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии. |
Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.
Пример использования параметра HOVER
<style type="text/css"> A:link {text-decoration: none} // убирает подчеркивание для ссылок A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора </style>
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в A:hover.
Пример использования подчеркивания в ссылках
<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета </style>
Пример изменения размера ссылки
<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size: 24; font-weight: bold; color: red;} // ссылка изменит свой размер на больший </style>