Таблица стилей CSS
Текст | |||||||||||||||||
color | Цвет текста. b {color: red;} i {color: #ff0000;} a {color: rgb(255, 0, 0);} |
||||||||||||||||
font | Определяет сразу несколько параметров шрифта: [font-style||font-variant||font-weight] font-size [/line-height] font-family body {font: 14px sans-serif;} /* обязательные параметры */ span {font: italic normal bold 12px/1.2em Tahoma, Arial, sans-serif;} /* все параметры */ |
||||||||||||||||
font-family | Задает шрифт или шрифтовое семейство, которым будет отображаться элемент. Если перечислены несколько шрифтов, то браузер сначала пытается отобразить текст первым из шрифтов, если же его нет на компьютере конечного пользователя, то - следующим, а если нет ни одного их перечисленных, то любым шрифтом из указанного семейства: "serif" (с засечками) или "sans-serif" (без засечек). th {font-family: Georgia, Times New Roman, serif;} td {font-family: Micra, Helvetica, Arial, sans-serif;} |
||||||||||||||||
@font-face | Внедрение в документ шрифта из внешнего файла. @font-face { font-family: CyrillicOld; src: url("/fonts/CYRILLIC_OLD.eot"); src: url("/fonts/CYRILLIC_OLD.eot?#iefix") format("embedded-opentype"), url("/fonts/CYRILLIC_OLD.woff") format("woff"), url("/fonts/CYRILLIC_OLD.ttf") format("truetype"), url("/fonts/CYRILLIC_OLD.svg#JournalRegular") format("svg"); } |
||||||||||||||||
font-size | Размер шрифта. Значение может указываться как в относительной (em, %), так и в абсолютной величине (pt, px). h1 {font-size: 200%;} h2 {font-size: 1.5em;} h3 {font-size: 20pt;} h4 {font-size: 30px;} |
||||||||||||||||
font-style | Способ начертания шрифта. Возможные значения:
Объектная модель: Object.style.fontStyle = "italic"; document.getElementById("elementID").style.fontStyle = "italic"; |
||||||||||||||||
font-variant | Варианты начертания шрифта. Возможные значения:
|
||||||||||||||||
font-weight | Степень жирности шрифта. Возможные значения: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 i {font-weight: bolder;} |
||||||||||||||||
letter-spacing | Интервал между буквами текста. p {letter-spacing: 50px} p {letter-spacing:-.4pt} /* интервал, уменьшенный на 0.4 пункта */ |
||||||||||||||||
line-height | Интервал между строками текста. Возможные значения: line-height: normal | множитель | значение | проценты (от высоты шрифта) p {line-height: 1.5em} |
||||||||||||||||
quotes | Вид кавычек в теге q. Например: q {quotes: "\00AB" "\00BB";} /* Кавычки "ёлочки" */ q {quotes: "\201E" "\201C";} /* Кавычки "лапки" */ q {quotes: "\2039" "\203A";} /* Одинарные угловые кавычки */ |
||||||||||||||||
text-align | Определяет выравнивание элемента. Возможные значения: center | justify | left | right p {text-align:justify} H5 {text-align: center} |
||||||||||||||||
text-decoration | Устанавливает эффекты оформления шрифта. Возможные значения:
|
||||||||||||||||
text-transform | Задает преобразование регистра текста при отображении. Возможные значения:
|
||||||||||||||||
text-indent | Отступ первой строки. Чаще всего используется для создания абзацев с красной строкой. text-indent: значение | проценты (от ширины блока) p {text-indent: 50px;} |
||||||||||||||||
vertical-align | Вертикальное выравнивание элемента (не только текста). Применяется к ячейкам таблицы, элементам table-cell, inline и inline-block. Возможные значения:
div {vertical-align: middle} /* бесполезно, т.к. div - блок */ input {vertical-align: 100px;} span {vertical-align: 50%;} img {vertical-align: -300px;} |
||||||||||||||||
white-space | Устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на Web-странице как один.
Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Возможные значения:
Браузер IE6 и младше не поддерживает аргумент pre. IE7 понимает значение pre только в "строгом" режиме (<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). |
||||||||||||||||
word-spacing | Интервал между словами. Можно использовать отрицательные значения. p {word-spacing: 10px;} |
||||||||||||||||
Фон | |||||||||||||||||
background-attachment | Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Возможные значения:
|
||||||||||||||||
background-clip IE ≥ 9 FF ≥ 4 Opera ≥ 12 Safari ≥ 5 Chrome ≥ 1 |
Устанавливает, где будет отображаться фон. Возможные значения:
Для более старых версий:
|
||||||||||||||||
background-color | Цвет фона элемента. body {background-color:yellow;} th {background-color:#ffff00;} td {background-color:rgba(255, 255, 0, 0.5);} Объектная модель: Object.style.backgroundColor = "#ffff00"; [window.]document.getElementById("elementID").style.backgroundColor = "#ffff00"; Пример |
||||||||||||||||
background-image | Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, то
он будет виден, если фоновая картинка меньше, чем сам элемент, или
пока фоновая картинка не загрузится полностью. background-image: url(/images/bg.gif); |
||||||||||||||||
background-origin
IE ≥ 9 FF ≥ 4 Opera ≥ 10.5 Safari ≥ 5 Chrome ≥ 1 |
Устанавливает, где будет начинаться фоновое изображение. Возможные значения:
Для более старых версий:
|
||||||||||||||||
background-position | Задает начальное положение фонового изображения. По умолчанию - в левом верхнем углу. У этого параметра два значения: положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее: top left = left top = 0% 0% (в левом верхнем углу) top = top center = center top = 50% 0% (по центру вверху) right top = top right = 100% 0% (в правом верхнем углу) left = left center = center left = 0% 50% (слева по центру) center = center center = 50% 50% (по центру) right = right center = center right = 100% 50% (справа по центру) bottom left = left bottom = 0% 100% (в левом нижнем углу) bottom = bottom center = center bottom = 50% 100% (по центру внизу) bottom right = right bottom = 100% 100% (в правом нижнем углу) В скобках указано, где располагается фоновый рисунок относительно контейнера. |
||||||||||||||||
background-repeat | Определяет, как будет повторяться фоновое изображение. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Возможные значения:
|
||||||||||||||||
background-size IE ≥ 9 FF ≥ 4 Opera ≥ 10.5 Safari ≥ 5 Chrome ≥ 4 |
Определяет ширину и высоту фонового изображения. Возможные значения:
Для более старых версий:
|
||||||||||||||||
background |
Позволяет установить до пяти атрибутов стиля фона одновременно. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. div {background:url(images/bg.png) no-repeat 100% 0 #e56623;} |
||||||||||||||||
opacity | Определяет уровень прозрачности элемента. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1 - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6. |
||||||||||||||||
Поля и отступы | |||||||||||||||||
margin | Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.
|
||||||||||||||||
margin-bottom, margin-left, margin-right, margin-top |
Отступы соответственно снизу, слева, справа, сверху элемента. Объектная модель: [window.]document.getElementById("elementID").style.marginRight |
||||||||||||||||
padding | Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
![]()
|
||||||||||||||||
padding-bottom, padding-left, padding-right, padding-top |
Поля соответственно снизу, слева, справа, сверху. | ||||||||||||||||
Границы | |||||||||||||||||
border-color | Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно table {border-color: green;} |
||||||||||||||||
border-bottom-color, border-left-color, border-right-color, border-top-color |
Цвет границы соответственно снизу, слева, справа, сверху элемента. div {border-right-color: red; border-left-color: green;} |
||||||||||||||||
border-style | Задает стиль границы. Может принимать следующие значения: none (по умолчанию), , dotted, dashed, solid, double, groove, ridge, inset, outset. table {border-style: dashed;} table {border-style: groove;} |
||||||||||||||||
border-bottom-style, border-left-style, border-right-style, border-top-style |
Стиль границы соответственно снизу, слева, справа, сверху элемента. div {border-right-style: dashed; border-left-style: solid;} |
||||||||||||||||
border-width | Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов: thin | medium | thick table {border-width: 2px;} |
||||||||||||||||
border-bottom-width, border-left-width, border-right-width, border-top-width |
Ширина границы соответственно снизу, слева, справа, сверху элемента. div {border-right-width: 1px; border-left-width: 2px;} |
||||||||||||||||
border | Ширина, стиль и цвет границы вокруг элемента. border: [border-width || border-style || border-color] div {border: 4px double #990;} |
||||||||||||||||
border-bottom, border-left, border-right, border-top |
Ширина, стиль и цвет границы соответственно снизу, слева, справа, сверху элемента. div {border-right: 2px solid red;} |
||||||||||||||||
border-radius IE ≥ 9 FF ≥ 4 Opera ≥ 10.5 Safari ≥ 5 Chrome ≥ 4 |
Pадиус скругления углов рамки и фона элемента. Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Для более старых версий:
|
||||||||||||||||
Горизонтальная разделительная линия | |||||||||||||||||
width | Длина линии. Может быть задана значением в пикселях или процентах. hr {width: 200px;} hr {width: 50%;} |
||||||||||||||||
background-color | Цвет линии hr {background-color: #green;} |
||||||||||||||||
border: none; | Убирает тень от линии | ||||||||||||||||
height | Толщина линии для браузеров hr {height: 1px;} |
||||||||||||||||
Отображение | |||||||||||||||||
visibility | Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует
использовать абсолютное позиционирование или воспользоваться свойством display.
[window.]document.getElementById("elementID").style.visibility = "visible"; [window.]document.all["elementID"].style.visibility = "visible"; |
||||||||||||||||
display |
|
||||||||||||||||
overflow | Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
[window.]document.getElementById("elementID").style.overflowX [window.]document.all["elementID"].style.overflowX="scroll"; |
||||||||||||||||
clear | Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
|
||||||||||||||||
clip | Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области – прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.
clip: rect(Y1, X1, Y2, X2) | auto В качестве аргументов используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке: |
||||||||||||||||
| |||||||||||||||||
float | Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент.
[window.]document.getElementById("elementID").style.styleFloat [window.]document.getElementById("elementID").style.cssFloat |
||||||||||||||||
height | Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). значение | проценты | auto По умолчанию высота не включает значения границ (border), полей (padding) и отступов (margin). Изменить метод расчета высоты можно с помощью свойства box-sizing. | ||||||||||||||||
max-height | Устанавливает максимальную высоту элемента div.block {max-height: 200px;} |
||||||||||||||||
min-height | Устанавливает минимальную высоту элемента div.block {min-height: 100px;} |
||||||||||||||||
width | Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). значение | проценты | auto По умолчанию ширина не включает значения границ (border), полей (padding) и отступов (margin). Изменить метод расчета ширины можно с помощью свойства box-sizing. |
||||||||||||||||
max-width | Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. | ||||||||||||||||
min-width | Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки. | ||||||||||||||||
box-sizing | Устанавливает метод расчета ширины и высоты элемента.
|
||||||||||||||||
Позиционирование |
|||||||||||||||||
bottom | Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном - относительно нижнего края окна документа. |
||||||||||||||||
left | Устанавливает расстояние от левого края родительского элемента (не включая границу, поле и отступ) до левого края дочернего элемента. Отсчет зависит от значения параметра position. Если position: absolute, и нет родительского элемента, то положение элемента определяется от левого края окна браузера. Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от левого края родительского элемента. Если position: relative, то left отсчитывается от левого края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым. |
||||||||||||||||
position | Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на Web-странице.
|
||||||||||||||||
right | Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента. | ||||||||||||||||
top | Устанавливает расстояние от верхнего края родительского элемента (не включая границу, поле и отступ)
до верхнего края дочернего элемента. Отсчет зависит от значения параметра position. Если position: absolute, и нет родительского элемента, то положение элемента определяется от верхнего края окна браузера. Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от верхнего края родительского элемента. Если position: relative, то left отсчитывается от верхнего края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым. |
||||||||||||||||
z-index | Любые позиционированные элементы на Web-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану.
Каждый элемент может находиться как ниже, так и выше других объектов Web-страницы, их размещением по z-оси и управляет атрибут z-index. Обращение из javascript: this.style.zIndex=100 |
||||||||||||||||
Таблицы |
|||||||||||||||||
border-collapse | Способ отображения границы вокруг ячеек таблицы. Ячейка таблицы может иметь общую рамку с соседними ячейками или свою собственную
(в месте стыка получится линия двойной толщины, если для таблицы установлено свойство border-spacing со значением 0).
Возможные значения:
|
||||||||||||||||
border-spacing | Расстояние между границами ячеек в таблице. Можно использовать одно или два значения, разделяя их пробелом.
|
||||||||||||||||
table-layout | Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
|
||||||||||||||||
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;} |
РОТАТОР ОБЪЯВЛЕНИЙСистема обмена визитами
Система обмена визитами Tut-obmen.ruСервис предназначен для обмена интернет-трафиком, бесплатного продвижения интернет-ресурсов, а также возможности получения потенциальных клиентов и/или пользователей на сайты, участвующие в этом проекте. Выбрав подходящий план просмотра, пользователь посещает веб-сайты других участников и просматривает их в течение определенного времени, после просмотра всех сайтов его ссылка добавляется в список серфинга и в дальнейшем ее просматривают другие участники проекта.
|