- •Синтаксис
- •Селектор класса (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'
Параметр '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'
Данный параметр определяет все свойства верхней стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
border-top-width |
Задает свойства верхней стороны границы |
border-style |
|
border-color |
Примеры:
p
{
border-top: thick dashed green
}
p
{
border-top: dotted #FF0000
}
Параметр '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
}