|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Border
Свойство CSS border
Свойство CSS border позволяет вам оформлять стиль и цвет границы вокруг элемента.
Свойство border-style
Свойство border-style определяет тип рамки вокруг элемента.
Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!
Значения border-style:
none: без рамки
dotted: рамка из точек
dashed: пунктирная рамка
solid: сплошная рамка
double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)
groove: трехмерная рамка
ridge: трехмерная рамка
inset: трехмерная рамка
outset: трехмерная рамка
Ширина рамки
Свойство border-width задает ширину рамки.
Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).
Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.
Пример
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Цвет рамки (границы)
Свойство border-color используется для настройки цвета рамки элемента. Цвет можно указать с помощью:
- названия — название цвета на английском, например, "red"
- код RGB, например, "rgb(255,0,0)"
- шестнадцатиричный код, например, "#ff0000"
Кроме того, можно задать цвет границы прозрачным ("transparent").
Заметка: свойство "border-color" не оказывает эффекта на рамку элемента, если не указано свойство "border-style".
Разные цвета границ
С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:
Пример
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Свойство border-style может иметь от одного, до четырех значений.
- border-style:dotted solid double dashed;
- верхняя граница из точек
- правая граница сплошная
- нижняя граница двойная
- левая граница пунктирная
- border-style:dotted solid double;
- верхняя граница из точек
- левая и правая граница сплошные
- нижняя граница двойная
- border-style:dotted solid;
- верхняя и нижняя границы из точек
- правая и левая граница сплошные
- border-style:dotted;
- все границы из точек
Указанные значения точно так же применяются к свойствам border-color и border-width.
Совет: чтобы запомнить, как применяются значения свойства, надо запомнить простое правило — значения свойства применяются по часовой стрелке, начиная с верхней границы. Вертикальные границы имеют приоритет перед горизонтальными.
Краткая запись свойств рамки
Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.
Для уменьшения лишнего кода, свойства границы можно записать одной записью.
Краткая запись свойств границы называется "border":
При использовании свойства border соблюдайте следующий порядок свойств:
- border-width
- border-style
- border-color
Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).
Все свойства границ — справка CSS
Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| border | Все свойства границы одной записью | border-width border-style border-color |
1 |
| border-bottom | Все свойства нижней границы одной записью | border-bottom-width border-bottom-style border-bottom-color |
1 |
| border-bottom-color | Цвет нижней границы | border-color | 2 |
| border-bottom-style | Стиль нижней границы | border-style | 2 |
| border-bottom-width | Ширина нижней границы | border-width | 1 |
| border-color | Цвет всех границ | название-цвета hex-код rgb- код transparent inherit |
1 |
| border-left | Все свойства левой границы | border-left-width border-left-style border-left-color |
1 |
| border-left-color | Цвет левой границы | border-color | 2 |
| border-left-style | Стиль левой границы | border-style | 2 |
| border-left-width | Ширина левой границы | border-width | 1 |
| border-right | Все свойства правой границы | border-right-width border-right-style border-right-color |
1 |
| border-right-color | Цвет правой границы | border-color | 2 |
| border-right-style | Стиль правой границы | border-style | 2 |
| border-right-width | Ширина правой границы | border-width | 1 |
| border-style | Стиль всех границ | none hidden dotted dashed solid double groove ridge inset outset inherit |
1 |
| border-top | Все свойства верхней границы | border-top-width border-top-style border-top-color |
1 |
| border-top-color | Цвет верхней границы | border-color | 2 |
| border-top-style | Стиль верхней границы | border-style | 2 |
| border-top-width | Ширина верхней границы | border-width | 1 |
| border-width | Ширина всех границ | thin medium thick ширина inherit |
1 |
