Основы работы с CSS
Предназначение стилей
Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" (, ,
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
Синтаксис CSS
Синтаксис CSS состоит из трех частей: селектора, свойства и значения:селектор {свойство: значение}
Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.
h2 { font-family: arial; margin-right: 20pt; color:#ffffff }
p,table,li { font-family: "sans serif"; }
Параметр 'background-attachment'
Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.Наследование: нет.
Может принимать следующие значения:
| Scroll | Фоновое изображение перемещается, когда перемещается страница |
| Fixed | Фоновое изображение не перемещается, когда перемещается страница |
Пример:
body { background-attachment: fixed; background-repeat: repeat }
Параметр 'background-color'
Этот параметр задает фоновый цвет элемента.Наследование: нет.
Может принимать следующие значения:
| color | Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000) |
| transparent | Фоновый цвет является прозрачным |
Пример:
h1 { background-color: gray; font-family: arial }
Параметр 'background-image'
Данный параметр задает изображение в качестве фона.Наследование: нет.
Может принимать следующие значения:
| url | Путь доступа к изображению |
| none | Фонового изображения нет |
Пример:
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: repeat; background-attachment: fixed }
В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.
Параметр 'background-position'
Этот параметр задает начальное положение фонового изображения.Наследование: нет.
Может принимать следующие значения:
top left top center top right center left center center center right bottom left bottom center bottom right | Если определить только одно ключевое слово, то вторым значением подразумевается "center" |
| x-% y-% | Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%. |
| x-pos y-pos | Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты. |
Пример:
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-position: right top; background-attachment: fixed }
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed }
Параметр 'background-repeat'
Этот параметр определяет, каким образом будет повторяться фоновое изображение.Наследование: нет.
Может принимать следующие значения:
| repeat | Фоновое изображение будет повторяться по вертикали и по горизонтали | |
| repeat-x | Фоновое изображение будет повторяться по горизонтали | |
| repeat-y | Фоновое изображение будет повторяться по вертикали | |
| no-repeat | Фоновое изображение будет выведено только один раз |
Пример:
body { background-image: url(http://www.intuit.ru/departament/image.gif); background-repeat: repeat; background-attachment: fixed }
Параметр 'background'
Этот параметр предназначен для задания всех свойств фона в одном объявлении.Наследование: нет.
Примеры:
body { background: url(picture.gif) }
body { background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll }
body { background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom }
Может принимать следующие значения:
background-color background-image background-repeat background-attachment background-position | В этом объявлении можно задать от одного до пяти свойств фона |
Рассмотрим их подробнее.
Параметры фона в CSS: подробное рассмотрение
Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).
| background | Служит для задания всех параметров фона в одном объявлении | background-color background-image background-repeat background-attachment background-position | 4 | 1 | 6 | 1* | |
| background-attachment | Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей | scroll fixed | 4 | 1 | 6 | 1 | |
| background-color | Задает цвет фона элемента | color-rgb color-hex color-name transparent | 4 | 1 | 4 | 1 | |
| background-image | Задает в качестве фона изображение | url none | 4 | 1 | 4 | 1 | |
| background-position | Задает начальное положение фонового изображения | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos | 4 | 1 | 6 | 1 | |
| background-repeat | Определяет, будет ли и каким образом будет повторяться фоновое изображение | repeat repeat-x repeat-y no-repeat | 4 | 1 | 4 | 1 |
(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).
Данный пример показывает, как задать
В документе в качестве фона использовано изображение
В документе в качестве фона использовано повторяющееся изображение
В документе в качестве фона использовано повторяющееся изображение, которое размножается только вертикально
В документе в качестве фона использовано повторяющееся изображение, которое размножается только горизонтально.
Определено фиксированное фоновое изображение
Определено фиксированное фоновое изображение
Определено фиксированное фоновое изображение
Определено прокручивающееся фоновое изображение
Определено прокручивающееся фоновое изображение
Определено прокручивающееся фоновое изображение
Это документ, для которого свойства фона заданы в одном объявлении
Это документ, для которого свойства фона заданы в одном объявлении
Это документ, для которого свойства фона заданы в одном объявлении
Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
Параметр 'color'
Этот параметр задает цвет текста.Наследование: да.
Может принимать следующие значения:
| color | Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или шестнадцатеричное значение (#ff0000). |
Пример:
h1 { color: green }
Параметр 'direction'
Параметр задает направление текста.Наследование: да.
Может принимать следующие значения:
| ltr | Направление текста слева направо |
| rtl | Направление текста справа налево |
Пример:
p { direction: rtl }
Параметр 'letter-spacing'
Данный параметр увеличивает или уменьшает интервал между символами.Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| normal | Определяет обычный пробел между символами |
| Length | Определяет фиксированный пробел между символами |
Примеры:
pre { letter-spacing: -2px }
pre { letter-spacing: 20px }
Параметр 'text-align'
Этот параметр задает выравнивaние текста в элементе.Наследование: да.
Может принимать следующие значения:
| left | Выравнивает текст слева |
| right | Выравнивает текст справа |
| center | Центрирует текст |
| justify |
Пример:
h1 { text-align: right }
Параметр 'text-decoration'
Данный параметр задает дополнительное оформление текста.Наследование: нет.
Примечание: цвет оформления должен быть задан свойством "color".
Может принимать следующие значения:
| None | Определяет обычный текст |
| Underline | Определяет линию под текстом |
| Overline | Определяет линию над текстом |
| line-through | Определяет линию через текст |
| Blink | Определяет мигающий текст |
Пример:
h1 { text-decoration: overline }
Параметр 'text-indent'
Данный параметр создает отступ для первой строки текста элемента.Наследование: да.
Примечание: допускаются отрицательные значения, для которых первая строка будет сдвинута влево.
Может принимать следующие значения:
| Length | Определяет фиксированный отступ |
| % | Определяет отступ в % от ширины родительского элемента |
Примеры:
pre { text-indent: -10px }
p { text-indent: 10px }
Параметр 'text-transform'
Этот параметр управляет регистром символов в элементе.Наследование: да.
Может принимать следующие значения:
| None | Определяет обычный текст с символами нижнего регистра и заглавными буквами |
| Capitalize | Каждое слово в тексте начинается с заглавной буквы |
| Uppercase | Определяет только заглавные буквы |
| Lowercase | Определяет только символы нижнего регистра |
Примеры:
h1 { text-transform: capitalize }
pre { text-transform: lowercase }
Параметр 'white-space'
Параметр задает способ обработки пробелов внутри элемента.Наследование: да.
Может принимать следующие значения:
| normal | Браузер игнорирует пробел |
| pre | Браузер сохраняет пробел. Действует как тег в HTML |
| nowrap | Текст не будет переноситься на другую строку, пока не встретится тег |
Пример:
pre { white-space: pre }
Параметр 'word-spacing'
Данный параметр увеличивает или уменьшает пробел между словами.Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| normal | Определяет обычный пробел между словами |
| length | Определяет фиксированный пробел между словами |
Примеры:
pre { word-spacing: -10px }
h1 { word-spacing: 35px }
Этот пример показывает, как задать
Данный текст содержит определение, фон которого выделен. Это определение.
Данный пример показывает, как увеличить или уменьшить интервал между символами.
параграф
- список
- dl dl dl
- список
- dl dl dl
- список
- dl dl dl
параграф
параграф
параграф
Верхний регистр
Нижний регистр
первые буквы в словах заглавные
Параметр 'font-family'
Данное свойство определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то браузер будет использовать первое распознанное значение.Существует два типа значений font-family:
В качестве разделителя используется запятая. Для последнего варианта желательно определять имя порождающего семейства. Если же имя семейства содержит пробел, то его необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются одиночные кавычки.
Наследование: да.
Может принимать следующие значения:
| family-name | Определяет для элемента имен семейств шрифтов и/или имен |
| generic-family | порождающих семейств в порядке их приоритета. |
Примеры:
h1 { font-family: Garamond, serif }
Параметр 'font-size-adjust'
Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size" называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58, т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта, тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет читаться лучше, чем Times New Roman.Свойство font-size-adjust определяет значение аспекта для элемента, которое будет сохранять высоту буквы x нижнего регистра выбранного шрифта.
Наследование: да.
Возможные значения:
| none | Не сохранять высоту буквы x шрифта, если шрифт недоступен |
| number | Определяет значение аспекта для шрифта Используемая формула: размер выбранного шрифта * (font-size-adjust/значение аспекта доступного шрифта) = размер шрифта для доступного шрифта Пример: Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт имеет значение аспекта 0.46, то размер шрифт для подстановки будет 14 * (0.58/0.46) = 17.65px. |
Пример:
p { font-size-adjust: none }
p { font-size-adjust: 0.50 }
Параметр 'font-size'
Параметр задает размер шрифта.Наследование: да.
Может принимат следующие значения:
| xx-small | Задает размер шрифта от xx-small до xx-large |
| x-small | |
| small | |
| medium | |
| large | |
| x-large | |
| xx-large | |
| smaller | Задает размер шрифта меньше, чем у порождающего элемента |
| larger | Задает размер шрифта больше, чем у порождающего элемента |
| length | Задает фиксированный размер шрифта |
| % | Задает размер шрифта в % от порождающего элемента |
Примеры:
p { font-size: small }
pre { font-size: 5pt }
i { font-size: 3em }
p { font-size: 120% }
Параметр 'font-stretch'
Данный параметр сжимает или расширяет текущее семейство шрифтов.Необходимо отметить, что семейство шрифтов сжимается или расширяется только горизонтально.
Наследование: да.
Возможные значения:
| normal | Задает масштаб сжатия или расширения как обычный |
| wider | Задает масштаб расширения как следующее расширенное значение |
| narrower | Задает масштаб сжатия как следующее сжатое значение |
| ultra-condensed | Задает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed" является самым сжатым значением, а " ultra-expanded" — самым широким |
| extra-condensed | |
| condensed | |
| semi-condensed | |
| semi-expanded | |
| expanded | |
| extra-expanded | |
| ultra-expanded |
Пример:
colspan="2" p { font-stretch: extra-expanded }
Параметр 'font-style'
Данный параметр задает стиль шрифта.Наследование: да.
Возможные значения:
| normal | Браузер выводит обычный шрифт |
| italic | Браузер выводит шрифт курсивом |
| oblique | Браузер выводит наклонный шрифт |
Пример:
p { font-style: oblique }
h1 { font-style: italic }
Параметр 'font-variant'
Этот параметр используется для вывода текста капителью: все символы нижнего регистра преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют меньший размер по сравнению с остальным текстом.Наследование: да.
Может принимат следующие значения:
| normal | Браузер выводит обычный шрифт |
| small-caps | Браузер выводит шрифт капитель |
Пример:
pre { font-variant: small-caps }
p { font-variant: normal }
Параметр 'font-weight'
Данный параметр определяет степень жирности символов в тексте при выводе.Наследование: да.
Возможные значения:
| normal | Определяет обычные символы |
| bold | Определяет жирные символы |
| bolder | Определяет более жирные символы |
| lighter | Определяет более тонкие символы |
| 100 | Определяет степень жирности символов. 400 соответствует normal, 700 соответствует bold |
| 200 | |
| 300 | |
| 400 | |
| 500 | |
| 600 | |
| 700 | |
| 800 | |
| 900 |
Пример:
h1 { font-weight: 200 }
h2 { font-weight: bold }
Параметр 'font'
Параметр font предназначен для сокращенной записи, позволяющей задать все свойства шрифта в одном объявлении (за исключением некоторых системных шрифтов).Наследование: да.
Может принимать следующие значения:
| font-style | Задает свойства шрифта. Значение line-height задает расстояние между строками. Это значение может быть числом, % или размером шрифта |
| font-variant | |
| font-weight | |
| font-size* /line-height | |
| font-family | |
| Caption | Определяет шрифт для элементов управления с заголовком (таких, как кнопки, раскрывающиеся меню и т.д.) |
| icon | Определяет шрифты, которые используются метками пиктограмм приложений |
| menu | Определяет шрифты, которые используются для раскрывающихся меню. |
| message-box | Определяет шрифты, которые используются в диалоговых окнах. |
| small-caption | |
| status-bar | Определяет шрифты, которые используются в строке состояния окна |
(*это свойство имеет также шестое значение: "line-height", которое задает расстояние между строками)
Примеры:
pre { font: oblique arial }
h1 { font: italic 200 arial }
p { font: italic small-caps 10px/12px serif }
p { font: status-bar }
Параметры шрифта в CSS
Параметры шрифта в CSS позволяют изменить семейство шрифта, степень жирности, размер, и стиль текста. Обратите внимание на то, что в CSS1 шрифты идентифицируются названием шрифта. В случае, если браузер не поддерживает данный шрифт, будет использоваться шрифт по умолчанию.Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| font | Параметр для задания всех свойств шрифта в одном объявлении | font-style | 4 | 1 | 4 | 1 |
| font-variant | ||||||
| font-weight | ||||||
| font-size/line-height | ||||||
| font-family | ||||||
| caption | ||||||
| icon | ||||||
| menu | ||||||
| message-box | ||||||
| small-caption | ||||||
| status-bar | ||||||
| font-family | Определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета | family-name | 3 | 1 | 4 | 1 |
| generic-family | ||||||
| font-size | Задает размер шрифта | xx-small | 3 | 1 | 4 | 1 |
| x-small | ||||||
| small | ||||||
| medium | ||||||
| large | ||||||
| x-large | ||||||
| xx-large | ||||||
| smaller | ||||||
| larger | ||||||
| length | ||||||
| % | ||||||
| font-size-adjust | Определяет значение аспекта для элемента, которое будет сохранять x-height выбранного шрифта | none | - | - | - | 2 |
| number | ||||||
| font-stretch | Делает текущее семейство шрифтов более узким или более широким | normal | - | - | - | 2 |
| wider | ||||||
| narrower | ||||||
| ultra-condensed | ||||||
| extra-condensed | ||||||
| condensed | ||||||
| semi-condensed | ||||||
| semi-expanded | ||||||
| expanded | ||||||
| extra-expanded | ||||||
| ultra-expanded | ||||||
| font-style | Задает стиль шрифта | normal | 4 | 1 | 4 | 1 |
| italic | ||||||
| oblique | ||||||
| font-variant | Выводит текст малыми прописными буквами или обычным текстом | normal | 4 | 1 | 6 | 1 |
| small-caps | ||||||
| font-weight | Задает степень жирности шрифта | normal | 4 | 1 | 4 | 1 |
| bold | ||||||
| bolder | ||||||
| lighter | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 |
Этот пример показывает, как задать
применяется шрифт "times"
заголовок h1
заголовок h2
- first
- second
- first
- second
текст параграфа
Текст параграфа. Текст параграфа. Текст параграфа.
Заголовок h1
Заголовок h2
заголовок h1
заголовок h2 заголовок h3
параграф параграф параграф параграф параграф параграф
Параметр 'border-bottom-color'
Данный параметр задает цвет нижней границы элемента.Наследование: нет.
Может принимать следующие значения:
| Color | Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p { border-bottom-color: rgb(20,200,250) }
span { border-bottom-color: blue }
Параметр 'border-bottom-style'
Этот параметр задает стиль нижней границы элемента.Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-bottom-style: dotted }
Параметр 'border-bottom-width'
Данный параметр задает толщину нижней границы элемента.Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую нижнюю границу |
| medium | Определяет нижнюю границу средней толщины |
| thick | Определяет толстую нижнюю границу |
| length | Позволяет определить толщину нижней границы |
Примеры:
p { border-bottom-width: 1px }
p { border-bottom-width: thick }
Параметр 'border-bottom'
Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.Наследование: нет.
Возможные значения:
| border-bottom-width | Задает свойства для нижней стороны границы |
| border-style | |
| border-color |
Примеры:
span { border-bottom: thick solid #800080 }
li { border-bottom: dotted #800000 }
Параметр 'border-color'
Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.Наследование: нет.
Возможные значения:
| Color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
| Transparent | Граница является прозрачной |
Примеры:
p {border-color: blue} все четыре стороны границы будут синие.
p {border-color: blue yellow} верхняя и нижняя стороны границы будут синие, левая и правая стороны границы будут желтые.
p {border-color: blue yellow green} верхняя стороны граница будет синей, левая и правая стороны границы будут желтые, нижняя сторона границы будет зеленая.
p {border-color: blue yellow green red} верхняя сторона границы будет синей, правая сторона границы будет желтой, нижняя сторона границы будет зеленой, левая сторона границы будет красной.
Параметр 'border-left-color'
Данный параметр задает цвет левой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| Color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1 { border-left-color: green }
h2 { border-left-color: #00FF00 }
Параметр 'border-left-style'
Данный параметр задает стиль левой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-left-style: dotted }
Параметр 'border-left-width'
Данный параметр задает толщину левой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую левую сторону границы |
| medium | Определяет левую сторону границы средней толщины |
| thick | Определяет толстую левую сторону границы |
| length | Позволяет определить толщину левой стороны границы |
Примеры:
p { border-left-width: 7px }
p { border-left-width: thick }
Параметр 'border-left'
Данный параметр позволяет определить все свойства левой стороны границы в одном объявлении.Наследование: нет.
Может принимать следующие значения:
| border-left-width | Задает свойства левой стороны границы |
| border-style | |
| border-color |
Примеры:
p { border-left: medium dashed green }
p { border-left: thin dotted #FF00FF }
Параметр 'border-right-color'
Данный параметр задает цвет правой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
p { border-right-color: rgb(250,200,250) }
p { border-right-color: blue }
Параметр 'border-right-style'
Данный параметр задает стиль правой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Пример:
p { border-right-style: dashed }
Параметр 'border-right-width'
Данный параметр задает толщину правой стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| thin | Определяет тонкую правую сторону границы |
| medium | Определяет правую сторону границы средней толщины |
| thick | Определяет толстую правую сторону границы |
| length | Позволяет определить толщину правой стороны границы |
Примеры:
h1 { border-right-width: 2cm }
h2 { border-right-width: medium }
Параметр 'border-right'
Этот параметр используется для определения всех свойств правой стороны границы в одном объявлении.Наследование: нет.
Может принимать следующие значения:
| border-right-width | Задает свойства правой стороны границы |
| border-style | |
| border-color |
Примеры:
h1 { border-right: medium dotted #FFFF00 }
h2 { border-right: thin dashed green }
Параметр 'border-style'
Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.Наследование: нет.
Может принимать следующие значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p {border-style: dashed} все четыре стороны границы будут штрих-пунктирными.
p {border-style: solid double} верхняя и нижняя стороны границы будут сплошными, левая и правая сторона граница будут двойными.
p {border-style: solid double dotted} верхняя сторона границы будет сплошной, левая и правая сторона границы будут двойными, нижняя сторона границы будет пунктирной.
p {border-style: dashed double dotted solid} верхняя сторона граница будет штрих-пунктирной, правая сторона границы будет двойной, нижняя сторона границы будет пунктирной, левая сторона границы будет сплошной.
Параметр 'border-top-color'
Этот параметр задает цвет верхней стороны границы элемента.Наследование: нет.
Может принимать следующие значения:
| color | Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000) |
Примеры:
h1 { border-top-color: blue }
h2 { border-top-color: rgb(200,10,250) }
Параметр 'border-top-style'
Параметр задает стиль верхней стороны границы элемента.Наследование: нет.
Возможные значения:
| None | Определяет отсутствие границы |
| Hidden | То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы |
| Dotted | Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| Dashed | Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width |
| groove | Определяет 3D-границу (groove). Результат зависит от значения цвета границы |
| ridge | Определяет 3D-границу (ridge). Результат зависит от значения цвета границы |
| inset | Определяет 3D-границу (inset). Результат зависит от значения цвета границы |
| outset | Определяет 3D-границу (outset). Результат зависит от значения цвета границы |
Примеры:
p { border-top-style: dotted }
Параметр 'border-top-width'
Данный параметр задает толщину верхней стороны границы элемента.Наследование: нет.
Возможные значения:
| thin | Определяет тонкую верхнюю сторону границы |
| medium | Определяет верхнюю сторону границы средней толщины |
| thick | Определяет толстую верхнюю сторону границы |
| length | Позволяет определить толщину верхней стороны границы |
Примеры:
p { border-top-width: medium }
p { border-top-width: 1cm }
Параметр 'border-top'
Данный параметр определяет все свойства верхней стороны границы в одном объявлении.Наследование: нет.
Может принимать следующие значения:
| border-top-width | Задает свойства верхней стороны границы |
| border-style | |
| border-color |
Примеры:
p { border-top: thick dashed green }
p { border-top: dotted #FF0000 }
Параметр 'border-width'
Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.Наследование: нет.
Возможные значения:
| thin | Определяет тонкую границу |
| medium | Определяет границы средней толщины |
| thick | Определяет толстую границу |
| length | Позволяет определить толщину границ |
Примеры:
p {border-width: thick} все четыре стороны границы будут толстыми.
p {border-width: thick thin} верхняя и нижняя стороны границы будут толстыми, левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin} верхняя сторона границы будет иметь среднее значение, левая и правая стороны границы будут толстыми, нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium} верхняя сторона границы будет толстой, правая сторона границы будет тонкой, нижняя сторона границы будет тонкой, левая сторона границы будет иметь среднее значение.
Параметр 'border'
Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".Наследование: нет.
Может принимать следующие значения:
| border-width | Задает свойства для четырех сторон границы |
| border-style | |
| border-color |
Примеры:
h1 { border: medium solid #FFFF00 }
h2 { border: dotted green }
Параметры границы в CSS
Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.
| border | Параметр для задания свойств всех четырех сторон границы в одном объявлении | border-width | 4 | 1 | 4 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-bottom | Параметр для задания всех свойств нижней стороны границы в одном объявлении | border-bottom-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-bottom-color | Задает цвет нижней стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-bottom-style | Задает стиль нижней стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-bottom-width | Задает толщину нижней стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-color | Задает цвета четырех сторон границы, может иметь от одного до четырех значений | color | 4 | 1 | 6 | 1 |
| border-left | Параметр для задания всех свойств левой стороны границы в одном объявлении | border-left-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-left-color | Задает цвет левой стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-left-style | Задает стиль левой стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-left-width | Задает толщину левой стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-right | Параметр для задания всех свойств правой стороны границы в одном объявлении | border-right-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-right-color | Задает цвет правой стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-right-style | Задает стиль правой стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-right-width | Задает толщину правой стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-style | Задает стили четырех сторон границы, может иметь от одного до четырех стилей | none | 4 | 1 | 6 | 1 |
| hidden | ||||||
| dotted | ||||||
| dashed | ||||||
| solid | ||||||
| double | ||||||
| groove | ||||||
| ridge | ||||||
| inset | ||||||
| outset | ||||||
| border-top | Параметр для задания всех свойств верхней стороны границы в одном объявлении | border-top-width | 4 | 1 | 6 | 1 |
| border-style | ||||||
| border-color | ||||||
| border-top-color | Задает цвет верхней стороны границы | border-color | 4 | 1 | 6 | 2 |
| border-top-style | Задает стиль верхней стороны границы | border-style | 4 | 1 | 6 | 2 |
| border-top-width | Задает толщину верхней стороны границы | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length | ||||||
| border-width | Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений | thin | 4 | 1 | 4 | 1 |
| medium | ||||||
| thick | ||||||
| length |
Отступы в CSS
Они определяют пространство вокруг элементов. Допускают использование отрицательных значений для того, чтобы создавать наложение содержимого. Все отступы (верхний, правый, нижний и левый) можно изменять независимо, используя отдельные параметры, а можно использовать параметр margin для изменения всех отступов одновременно.Отступы заданные по умолчанию в браузерах:
Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.
Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
| margin | Параметр для задания отступов в одном объявлении | margin-top | 4 | 1 | 4 | 1 |
| margin-right | ||||||
| margin-bottom | ||||||
| margin-left | ||||||
| margin-bottom | Задает нижний отступ элемента | auto | 4 | 1 | 4 | 1 |
| length | ||||||
| % | ||||||
| margin-left | Задает левый отступ элемента | auto | 3 | 1 | 4 | 1 |
| length | ||||||
| % | ||||||
| margin-right | Задает правый отступ элемента | auto | 3 | 1 | 4 | 1 |
| length | ||||||
| % | ||||||
| margin-top | Задает верхний отступ элемента | auto | 3 | 1 | 4 | 1 |
| length | ||||||
| % |
Параметр 'margin-bottom'
Данный параметр задает нижний отступ элемента. Позволяет определять отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Auto | Нижний отступ задает браузер |
| Length | Определяет фиксированный нижний отступ |
| % | Определяет нижний отступ в % от общей высоты документа |
Примеры:
p { margin-bottom: 5% }
p { margin-bottom: auto }
Параметр 'margin-left'
Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Auto | Левый отступ задает браузер |
| Length | Определяет левый отступ фиксированной ширины |
| % | Определяет левый отступ в % общей ширины документа |
Примеры:
p { margin-left: 2% }
p { margin-left: -5px }
Параметр 'margin-right'
Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Auto | Правый отступ задает браузер |
| Length | Определяет правый отступ фиксированной величины |
| % | Определяет правый отступ в % общей ширины документа |
Примеры:
p { margin-right: 2px }
p { margin-right: 10% }
Параметр 'margin-top'
Данный параметр задает верхний отступ элемента. Позволяет определять отрицательные значения.Наследование: нет.
Возможные значения:
| Auto | Верхний отступ задает браузер |
| Length | Определяет верхний отступ фиксированной ширины |
| % | Определяет верхний отступ в % от общей высоты документа |
Примеры:
p { margin-top: auto }
p { margin-top: -5px }
Параметр 'margin'
Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| margin-top | Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер) |
| margin-right | |
| margin-bottom | |
| margin-left |
Примеры:
p {margin: 2px} все четыре отступа будут иметь отступ, равный 2px.
p {margin: 5px 10%} верхний и нижний отступ будут по 5px, левый и правый отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10% -2px} верхний отступ будет равен 5px, левый и правый отступ будут составлять 10% общей ширины документа, нижний отступ будет равен 2px.
p {margin: 5px 10% -2px auto} верхний отступ будет 5px, правый отступ будет составлять 10% общей ширины документа, нижний отступ будет 2px, левый отступ будет задан браузером.
Этот пример показывает, как задать
Заголовок h1 без отступов
Заголовок h1 с отступами
Заголовок h2 без отступов
Заголовок h2 с с заданным правым отступом
Заголовок h1 без отступов
Заголовок h1 с заданным верхним отступом
Заголовок h2 без отступов
Заголовок h2 с заданным нижним отступом Заголовок h2 без отступов
Заголовок h1 без отступов
Заголовок h1 с заданными отступами
Заголовок h1 без отступов
Параметр 'padding-bottom'
Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное нижнее поле |
| % | Определяет нижнее поле в % от высоты ближайшего элемента |
Пример:
li { padding-bottom: 5% }
Параметр 'padding-left'
Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное левое поле |
| % | Определяет левое поле в % от высоты ближайшего элемента |
Пример:
li { padding-left: 2px }
li { padding-left: 5% }
Параметр 'padding-right'
Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное правое поле |
| % | Определяет правое поле в % от высоты ближайшего элемента |
Пример:
li { padding-right: 2px }
Параметр 'padding-top'
Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| Length | Определяет фиксированное верхнее поле |
| % | Определяет верхнее поле в % от высоты ближайшего элемента |
Пример:
li { padding-top: 2px }
Параметр 'padding'
Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.Наследование: нет.
Может принимать следующие значения:
| padding-top | Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле) |
| padding-right | |
| padding-bottom | |
| padding-left |
Примеры:
p {padding: 2px}
для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%}
верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.
Параметры полей в CSS
Определяют пространство между границей элемента и содержимым элемента, для которого не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно изменять независимо друг от друга. Существует также параметр padding, который позволяет определять нескольких полей в одном объявлении.Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
| padding | Параметр для задания всех полей в одном объявлении | padding-top | 4 | 1 | 4 | 1 |
| padding-right | ||||||
| padding-bottom | ||||||
| padding-left | ||||||
| padding-bottom | Задает нижнее поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-left | Задает левое поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-right | Задает правое поле элемента | length | 4 | 1 | 4 | 1 |
| % | ||||||
| padding-top | Задает верхнее поле элемента | length | 4 | 1 | 4 | 1 |
| % |
Этот пример показывает, как задать
Параметр 'list-style-image'
Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.Наследование:да.
Может принимать следующие значения:
| url | Путь доступа к изображению |
| None | Изображение не выводится |
Пример:
ul { list-style-image: url("www.intuit.ru/speciality/image.gif"); list-style-type: square }
Параметр 'list-style-position'
Параметр определяет способ размещения маркера элемента списка.Наследование:да.
Может принимать следующие значения:
| inside | Маркер смещен внутрь текста |
| outside | Маркер располагается слева от текста |
Пример:
ul { list-style-position: outside }
Параметр 'list-style-type'
Данный параметр задает тип маркера элемента списка.Наследование:да.
Может принимать следующие значения:
| none | Без маркера |
| disc | Маркер — закрашенный круг |
| circle | Маркер — окружность |
| square | Маркер — закрашенный квадрат |
| decimal | Маркер — число |
| decimal-leading-zero | Маркер — число с добавленным ведущим нулем (01, 02, 03 b и т.д.) |
| lower-roman | Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. ) |
| upper-roman | Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.) |
| lower-alpha | Маркер — латинские строчные буквы (a, b, c, d, e и т.д.) |
| upper-alpha | Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.) |
| lower-greek | Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.) |
| lower-latin | Маркер — латинские строчные буквы (a, b, c, d, e и т.д.) |
| upper-latin | Маркер — латинские прописные буквы (A, B, C, D, E и т.д.) |
| hebrew | Традиционная еврейская нумерация |
| armenian | Традиционная армянская нумерация |
| georgian | Традиционная грузинская нумерация (an, ban, gan, и т.д.) |
| cjk-ideographic | Маркер — простые идеографические числа |
| hiragana | Маркер — a, i, u, e, o, ka, ki, и т.д. |
| katakana | Маркер — A, I, U, E, O, KA, KI и т.д. |
| hiragana-iroha | Маркер — i, ro, ha, ni, ho, he, to и т.д. |
| katakana-iroha | Маркер — I, RO, HA, NI, HO, HE, TO и т.д. |
Примеры:
ol { list-style-type: circle }
ul { list-style-type: decimal }
Параметр 'list-style'
Данный параметр определяет все характеристики списка в одном объявлении.Наследование:да.
Может принимать следующие значения:
| list-style | Задает характеристики списка |
| list-style-type | |
| list-style-position | |
| list-style-image |
Примеры:
ol { list-style: square inside url("www.intuit.ru/departament/image.gif") }
ul { list-style: circle inside }
Параметры списков в CSS
Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| list-style | Параметр для задания всех характеристик списка в одном объявлении | list-style-type | 4 | 1 | 6 | 1 |
| list-style-position | ||||||
| list-style-image | ||||||
| list-style-image | Задает изображение в качестве маркера элемента списка | none | 4 | 1 | 6 | 1 |
| url | ||||||
| list-style-position | Задает размещение в списке маркера элемента списка | inside | 4 | 1 | 6 | 1 |
| outside | ||||||
| list-style-type | Задает тип маркера элемента списка | none | 4 | 1 | 4 | 1 |
| disc | ||||||
| circle | ||||||
| square | ||||||
| decimal | ||||||
| decimal-leading-zero | ||||||
| lower-roman | ||||||
| upper-roman | ||||||
| lower-alpha | ||||||
| upper-alpha | ||||||
| lower-greek | ||||||
| lower-latin | ||||||
| upper-latin | ||||||
| hebrew | ||||||
| armenian | ||||||
| georgian | ||||||
| cjk-ideographic | ||||||
| hiragana | ||||||
| katakana | ||||||
| hiragana-iroha | ||||||
| katakana-iroha | ||||||
| marker-offset | auto | 1 | 7 | 2 | ||
| length |
Этот пример показывает, как задать
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Чай
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- В примере показано, как вывести элемент.
Эта информация не будет отображена
Между этими двумя элементами
нет интервала
- Пример показывает, как создать смещение изображения в параграфе вправо.
В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.
- Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.
Изображение смещено вправо, имеет границу из сплошной линии и отступы.
- Пример показывает, как можно сместить изображение с заголовком вправо.
Изучайте CSS!
В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, смещается вправо. Для дистанцирования текста от div, к последнему добавлены отступы, а для выделения картинки и заголовока - границы и поля.
- Пример показывает, как можно сместить первую букву параграфа влево.
В параграфе элемент b имеет ширину - 1. 2 размера текущего шрифта, размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS.
- Пример показывает, как создать горизонтальное меню.
- Ссылка 1
- Ссылка 2
- Ссылка 3
- Ссылка 4
Форматирование в CSS
Данные параметры позволяют определить, как и в каком месте вывести элемент.Примеры:
В примере элементы ol и a смещены влево. У элементов li отсутствует разрыв строки перед или после элемента.
Это заголовок в обычном положении
Параграф имеет смещение относитильно своего обычного положения
Параграф имеет смещение относитильно своего обычного положения
Параграф имеет смещение относитильно своего обычного положения
Параграф имеет смещение относитильно своего обычного положения
Параграф позиционируется с абсолютным значением
С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 50px от левого края страницы и на 50px от верхнего края страницы.
Параграф виден
Параграф не виден
Курсоры:
Auto
Crosshair
Default
Pointer
Move
text
wait
help
Курсоры типа resize:
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
| © 2003-2007 INTUIT.ru. Все права защищены. |
Параметр 'height'
Используется для задания высоты элемента.Наследование: нет.
Пример:
p { height: 50px }
Может принимать следующие значения:
| auto | Браузер вычисляет реальную высоту |
| length | Определяет высоту в px, см, и т.д. |
| % | Определяет высоту в % от объемлющего блока |
Параметр 'line-height'
Используется для задания интервала между строками.Наследование: Да.
Примечание: Отрицательные значения не допускаются.
Примеры:
div { line-height: 2.1 }
div { line-height: 10pt }
div { line-height: 120% }
Может принимать следующие значения:
| normal | Задает приемлемый интервал между строками |
| number | Задает число, которое при умножении на размер текущего шрифта задает интервал между строками |
| length | Задает фиксированный интервал между строками |
| % | Задает интервал между строками в % от размера текущего шрифта |
Параметр 'max-height'
Используется для задания максимальной высоты элемента.Наследование: нет.
Пример:
div { max-height: 200% }
Может принимать следующие значения:
| none | Отсутствие ограничений на максимальную высоту элемента |
| length | Определяет максимальную высоту элемента |
| % | Определяет максимальную высоту элемента в % от объемлющего блока |
Параметр 'max-width'
Используется для задания максимальной ширины элемента.Наследование: нет.
Пример:
h6 { max-width: 75% }
Может принимать следующие значения:
| none | Отсутствие ограничений на максимальную ширину элемента |
| length | Определяет максимальную ширину элемента |
| % | Определяет максимальную ширину элемента в % от объемлющего блока |
Параметр 'min-height'
Используется для задания минимальной высоты элемента.Наследование: нет.
Пример:
div { min-height: 20% }
Может принимать следующие значения:
| length | Определяет минимальную высоту элемента |
| % | Определяет минимальную высоту элемента в % от объемлющего блока |
Параметр 'min-width'
Используется для задания минимальной ширины элемента.Наследование: нет.
Пример:
h6 { min-width: 20% }
Может принимать следующие значения:
| length | Определяет минимальную ширину элемента |
| % | Определяет минимальную ширину элемента в % от объемлющего блока |
Параметр 'width'
Используется для задания ширины элемента.Наследование: нет.
Пример:
hr { width: 20% }
Может принимать следующие значения:
| auto | Браузер вычисляет реальную ширину |
| % | Определяет ширину в % от ширины родительского элемента |
| length | Определяет ширину в px, см, и т.д. |
Параметры размеров элементов CSS
Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах парметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).
| height | Задает высоту элемента | auto | 4 | 1 | 6 | 1* |
| length | ||||||
| % | ||||||
| line-height | Задает интервал между строками | normal | 4 | 1 | 4 | 1 |
| number | ||||||
| length | ||||||
| % | ||||||
| max-height | Задает максимальную высоту элемента | none | - | 1 | 6 | 2 |
| length | ||||||
| % | ||||||
| max-width | Задает максимальную ширину элемента | none | - | 1 | 5 | 2 |
| length | ||||||
| % | ||||||
| min-height | Задает минимальную высоту элемента | length | - | 1 | 6 | 2 |
| % | ||||||
| min-width | Задает минимальную ширину элемента | length | - | 1 | 6 | 2 |
| % | ||||||
| width | Задает ширину элемента | auto | 4 | 1 | 4 | 1 |
| % | ||||||
| length |
(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).
В примере показано, как увеличить
В примере показано, как увеличить интервал между строками. Стандартный интервал между строками.
Стандартный интервал между строками.
Стандартный интервал между строками.
Уменьшенный интервал между строками.
Уменьшенный интервал между строками.
Уменьшенный интервал между строками.
Увеличенный интервал между строками.
Увеличенный интервал между строками.
Увеличенный интервал между строками.
Параметр 'clear'
Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.Примечание: При использовании с параметром "float" не всегда работает как ожидается.
Наследование: нет.
Пример:
div { clear: both }
div { clear: left }
Может принимать следующие значения:
| left | Плавающие элементы не допускаются слева |
| right | Плавающие элементы не допускаются справа |
| both | Плавающие элементы не допускаются ни справа, ни слева |
| none | Плавающие элементы допускаются с любой стороны |
Параметр 'cursor'
Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.Наследование: да.
Примеры:
pre { cursor: pointer }
div { cursor : url("general.cur"), url("other.cur"), text; }
Может принимать следующие значения:
| url | url специального курсора, который будет использоваться Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать. | |
| default | Курсор по умолчанию (часто стрелка) | |
| auto | Курсор задает браузер | |
| crosshair | Курсор изображается как перекрестие | |
| pointer | Курсор изображается как указатель (рука), который обозначает ссылку | |
| move | Курсор указывает объект, который можно переместить | |
| e-resize | Курсор, определяющий перемещение края бокса вправо (east) | |
| ne-resize | Курсор, определяющий перемещение края бокса вверх и вправо (north/east) | |
| nw-resize | Курсор, определяющий перемещение края бокса вверх и влево (north/west) | |
| n-resize | Курсор, определяющий перемещение края бокса вверх (north) | |
| se-resize | Курсор, определяющий перемещение края бокса вниз и вправо (south/east) | |
| sw-resize | Курсор, определяющий перемещение края бокса вниз и влево (south/west) | |
| s-resize | Курсор, определяющий перемещение края бокса вниз (south) | |
| w-resize | Курсор, определяющий перемещение края бокса влево (west) | |
| text | Курсор используемый для текста | |
| wait | Курсор, указывающий на занятость программы (часто песочные часы) | |
| help | Курсор, указывающий, что имеется справочная информация (часто знак вопроса) |
Примечания для браузеров:
Internet Explorer:
Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}
Параметр 'display'
Данный параметр определяет, как в документе будет показан элемент.Наследование: нет.
Примеры:
pre { display: block }
strong { display: inline }
img { display: none }
h1, h3 { display: no }
Может принимать следующие значения:
| none | Элемент не будет выводиться | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| inline | Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| block | Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| list-item | Элемент будет выводиться как список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| run-in | Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| compact | Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| marker | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table | Элемент будет выведен как таблица блока (как
|
