- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Параметры списков в css
Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
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: подробное рассмотрение Параметр '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
}
Параметр '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 и т.д.) |
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
}
Лекция 10. Размеры элементов в CSS
Данные параметры CSS позволяют управлять высотой и шириной элемента, увеличением интервала между двумя строками.