| Шрифт | Цвет и фон | Текст | | Поля и отступы | Границы | Горизонтальная разделительная линия | | Форматирование | Позиционирование | Таблицы | | Списки | Эффекты | | |||||||||||
Шрифт | |||||||||||
font-family | Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;} | ||||||||||
font-style | Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный. P {font-style: italic;} Объектная модель: [window.]document.getElementById("elementID").style.fontStyle [window.]document.all["elementID"].style.fontStyle='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;} | ||||||||||
Цвет и фон | |||||||||||
color | Определяет цвет элемента I {color: green;} | ||||||||||
background | Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. | ||||||||||
background-color | Устанавливает цвет фона для элемента - именно для элемента, а не для странички.
Разные броузеры отображают это свойство по-разному:
Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator - лишь ширину,
занимаемую этим элементом. H4 {background-color: yellow;} В скриптовых языках используйте object.style.backgroundColor [ = sColor ] | ||||||||||
background-attachment | Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
| ||||||||||
background-image | Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. background-image: url('bg.gif'); | ||||||||||
background-position | Задает начальное положение фонового изображения, установленного с помощью параметра background-image.
У этого параметра два значения, положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
top left = left top = 0% 0% (в левом верхнем углу) В скобках указано, где располагается фоновый рисунок относительно контейнера | ||||||||||
background-repeat | Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
| ||||||||||
opacity | Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6. | ||||||||||
width | Ширина поля, предоставленного элементу. Возможные значения: 100pt, 5cm. | ||||||||||
Текст | |||||||||||
text-decoration | Устанавливает эффекты оформления шрифта
| ||||||||||
text-transform | Задает преобразование регистра текста при отображении.
| ||||||||||
text-align | Определяет выравнивание элемента. Возможные значения: left, right, center, justify P {text-align:justify} H5 {text-align: center} | ||||||||||
text-indent | Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;} | ||||||||||
line-height | Управляет интервалами между строками текста. line-height: normal | множитель | значение | проценты P {line-height: 50 %} | ||||||||||
word-spacing | Устанавливает интервалам между словами. Можно использовать отрицательные значения P {word-spacing: 50 %} | ||||||||||
white-space | Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.
Исключением является тег <PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем.
Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.
Браузер Internet Explorer 6 и младше не поддерживает аргумент pre. Internet Explorer 7 понимает значение pre только в "строгом" режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). Браузер Opera 9 и Firefox 3 также работают со значением pre-wrap, при котором сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. | ||||||||||
letter-spacing | Устанавливает интервалам между буквами P {letter-spacing: 50 pt} P {letter-spacing:-.4pt} интервал, уменьшенный на 0.4 пункта. | ||||||||||
vertical-align | Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom P {vertical-align: 50 pt} | ||||||||||
first-letter | Задает стиль для буквицы, т.е. для первой буквы в тексте #b:first-letter{color:blue; font-size:26px;} | ||||||||||
Поля и отступы | |||||||||||
margin | Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл.
| ||||||||||
margin-bottom, margin-left, margin-right, margin-top | Отступы соответственно снизу, слева, справа, сверху элемента. Возможные значения: 150pt, 0.5in. Объектная модель: [window.]document.getElementById("elementID").style.marginRight | ||||||||||
padding | Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл.
| ||||||||||
padding-bottom, padding-left, padding-right, padding-top | Отступы от рамки соответственно снизу, слева, справа, сверху. | ||||||||||
Границы | |||||||||||
border, border-width | Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). table {border-width: 2px;} table {border:2px;} | ||||||||||
border-color | Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно table {border-color: green;} | ||||||||||
border-style | Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), , dotted, dashed, solid, double, groove, ridge, inset, outset. table {border-style: dashed;} table {border-style: groove;} | ||||||||||
Горизонтальная разделительная линия | |||||||||||
width | Длина линии. Может быть задана значением в пикселях или процентах. hr {width: 200px;} hr {width: 50%;} Примечание. В браузерах Firefox и Opera линия по умолчанию выровнена по центру, в Internet Explorer - по левому краю. | ||||||||||
color | Цвет линии для браузера Internet Explorer hr {color: green;} | ||||||||||
background-color | Цвет линии для браузеров Firefox и Opera hr {background-color: #999;} | ||||||||||
border: none; | Убирает тень для браузеров Firefox и Opera | ||||||||||
height | Толщина линии для браузеров Firefox и Internet Explorer hr {height: 1px;} | ||||||||||
size | Толщина линии для браузера Opera hr {size: 1px;} | ||||||||||
Форматирование | |||||||||||
visibility | Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента,
хотя он и становится не виден, место, которое элемент занимает, остается за ним.
Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует
использовать абсолютное позиционирование или воспользоваться свойством display.
[window.]document.getElementById("elementID").style.visibility [window.]document.all["elementID"].style.visibility = "visible"; | ||||||||||
overflow | Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
| ||||||||||
clear | Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
| ||||||||||
clip | Параметр clip определяет область позиционированного элемента, в которой
будет показано его содержимое. Все, что не помещается в эту область, будет
обрезано и становится невидимым. На данный момент единственно доступная
форма области - прямоугольник. Все остальное остается только в мечтах. Параметр
clip работает только для абсолютно позиционированных элементов.
clip: rect(Y1, X1, Y2, X2) | auto В качестве аргументов используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto
| ||||||||||
<style type="text/css"> #layer { position: absolute; /* Абсолютное позиционирование */ clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */ width: 200px; /* Ширина блока */ color: white; /* Цвет текста */ background: #7f4c3e; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } </style> <div id="layer"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> | |||||||||||
float | Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент.
[window.]document.getElementById("elementID").style.styleFloat [window.]document.getElementById("elementID").style.cssFloat | ||||||||||
height | Устанавливает высоту блочных или заменяемых элементов. Высота не включает толщину границ вокруг элемента, значение отступов и полей. значение | проценты | auto | ||||||||||
width | Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей. значение | проценты | auto | ||||||||||
max-width | Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. | ||||||||||
min-width | Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки. | ||||||||||
Позиционирование | |||||||||||
bottom | Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном - относительно нижнего края окна документа. | ||||||||||
left | Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, аргумент left отсчитывается от левого края исходного положения элемента. | ||||||||||
position | Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
| ||||||||||
right | Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента. | ||||||||||
top | Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, аргумент top отсчитывается от верхнего края исходного положения элемента. | ||||||||||
z-index | Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index. | ||||||||||
Таблицы | |||||||||||
border-collapse | Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка,
тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать
подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница,
одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
| ||||||||||
table-layout | Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
| ||||||||||
border-spacing | Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse. | ||||||||||
caption-side | Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
| ||||||||||
Списки | |||||||||||
list-style | Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. | ||||||||||
list-style-image | Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется,
поэтому для отдельных элементов списка для восстановления маркера используется значение none. list-style-image: none | url('путь к файлу') | ||||||||||
list-style-position | Определяет, как будет размещаться маркер относительно текста.
| ||||||||||
list-style-type | Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).
| ||||||||||
Эффекты | |||||||||||
cursor | Может принимать значения (Наведите курсор на соответствующее описание!)
| ||||||||||
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;} | ||||||||||
min-height | Устанавливает или получает минимальную высоту элемента TR {min-height: 10px;} Данный атрибут применим к TR, TD, TH в таблице, у которой table-layout:fixed | ||||||||||
display |
|
По материалам сайта http://htmlweb.ru/
✔Поддержка динамических свойств CSS Как обратиться к свойствам CSS-стилей из JavaScript
Библиотека JAVASCRIPT 1997 -
© SE@RCHER