Для управления границей элемента применяется универсальное свойство border
. Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Границы в CSS
Блок div с рамкой 3px красного цвета.
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top
(верхняя граница), border-right
(правая граница), border-bottom
(нижняя граница), border-left
(левая граница).
Границы в CSS
Блок div с разными границами.
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.
- border-style
- стиль границы.
- border-width
- ширина границы.
- border-color
- цвет границы.
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style
устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
- none
- граница отсутствует (по умолчанию).
- solid
- сплошная граница.
- double
- двойная граница.
- dashed
- пунктирная граница.
- dotted
- граница из ряда точек.
- ridge
- граница "гребень".
- groove
- граница "бороздка".
- inset
- вдавленная граница.
- outset
- выдавленная граница.
Примеры того, как они выглядят.
граница отсутствует (none)
сплошная граница (solid)
двойная граница (double)
граница из ряда точек (dotted)
пунктирная граница (dashed)
граница "бороздка" (groove)
граница "гребень" (ridge)
вдавленная граница (inset)
выдавленная граница (outset)
Кстати, если для рамки ridge
задать цвет границы чёрный, то получится вот такой результат.
Блок div с рамкой чёрного цвета и стиля ridge.
Рамка выглядит как solid
, но это потому что стиль ridge
создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style
стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style
, в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Одно значение (solid) - стиль границы установлен для всех сторон блока.
Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.
Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Свойство border-width. Толщина границы.
Для установки толщины границы элемента используется свойство border-width
. Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style
, для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Код примера:
Толщина границы в CSS
Одно значение (2px) - толщина границы установлен для всех сторон блока.
Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Также для свойства border-width
существуют значения в виде ключевых слов. Всего их три:
- thin
- тонкая граница;
- medium
- средняя толщина;
- thick
- толстая граница;
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Свойство border-color. Цвет границы.
Для управления цветом границы используется средство border-color
. Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:
- Шестнадцатеричная запись (#ff00aa
) цвета.
- Формат RGB - rgb(255,12,110)
. Формат RGBA для CSS3.
- Форматы HSL и HSLA для CSS3.
- Название цвета, например black
(чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .
Свойство border-color
также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Одно значение (red).
Два значения (red black).
Три значения (red black yellow).
Четыре значения (red black yellow blue).
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Толщина границы в CSS
Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
- border-top
(верхняя граница)
- border-right
(правая граница)
- border-bottom
(нижняя граница)
- border-left
(левая граница)
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы (border-top
).
- border-top-color
- задаёт цвет верхней границы элемента.
- border-top-width
- задаёт толщину верхней границы элемента.
- border-top-style
- задаёт стиль верхней границы элемента.
Параметры правой границы (border-right
).
- border-right-color
- задаёт цвет правой границы элемента.
- border-right-width
- задаёт толщину правой границы элемента.
- border-right-style
- задаёт стиль правой границы элемента.
Параметры нижней границы (border-bottom
).
- border-bottom-color
- задаёт цвет нижней границы элемента.
- border-bottom-width
- задаёт толщину нижней границы элемента.
- border-bottom-style
- задаёт стиль нижней границы элемента.
Параметры левой границы (border-left
).
- border-left-color
- задаёт цвет левой границы элемента.
- border-left-width
- задаёт толщину левой границы элемента.
- border-left-style
- задаёт стиль левой границы элемента.
Пример использования этих свойств:
Толщина границы в CSS
В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
- переопределён цвет верхней границы при помощи свойства border-top-color в красный,
- при помощи свойства border-right-width установлена толщина правой границы 10px,
- при помощи свойства border-bottom-style стиль нижней границы переопределён как double,
- при помощи свойства border-left-color левой границе установлен синий цвет.
Свойство border-radius. Округление углов границы.
Свойство border-radius
предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Свойство border-radius: 15px.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Свойство border-radius: 15px.
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
Border-top-left-radius: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
Свойство border-radius: 15px.
Хотя этот код можно записать одним объявлением: border-radius
: 15px 0 15px 0
. Дело в том, что для свойства border-radius
можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius
: 15px 0
. Всего два значения.
Немного практики
Рисуем лимон средствами CSS.
Вот код такого блока:
Margin: 0 auto; /* Размещаем блок по центру */
width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
Margin: 0 auto; /* Размещаем блок по центру */
padding: 0px;
width: 0px; height: 0;
border: 30px solid white;
border-bottom-color: red;
В
теге <ТАВLЕ> часто определяют, как
будут выглядеть рамки, то есть линии,
окружающие ячейки таблицы и саму таблицу.
Если вы не зададите рамку, то получите
таблицу без линий, но пространство под
них будет отведено. Того же результата
можно добиться, задав <ТАВLЕ ВОRDER=0>.
Иногда хочется сделать границу потолще,
чтобы она лучше выделялась. Можно для
привлечения внимания к рисунку или
тексту задать исключительно жирные
границы. При создании вложенных таблиц
приходится делать для разных таблиц
границы различной толщины, чтобы их
легче было различать.
Атрибут cellspacing
Атрибут
СЕLLSPACING определяет ширину промежутков
между ячейками в пикселах. Если этот
атрибут не указан, по умолчанию задается
величина, равная двум пикселам. С помощью
атрибута СЕLLSPACING= можно размещать текст
и графику там, где вам нужно. Если вы
хотите оставить пустое место, можно
вписать в ячейку пробел.
| Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Текст
или данные | Атрибут bgcolor
Данный
атрибут позволяет установить цвет фона.
В зависимости от того, с каким тегом
(TABLE, TR, TD) он применяется, цвет фона может
быть установлен для всей таблицы, для
строки или для отдельной ячейки. Значением
данного атрибута является RGB-код или
стандартное название цвета.
| Текст
или данные | Текст или данные | Текст
или данные |
| Текст
или данные | Текст
или данные | Текст или данныеАтрибут backgroundДанный
атрибут задает фоновое изображение для
таблиц. Применим к тегам TABLE и TD. Его
значением является URL файла с фоновым
изображением. Применение этого атрибута
рассматривается ниже. Использование таблиц в дизайне страницыТаблицы
хороши тем, что при желании можно сделать
их границы невидимыми. Это позволяет с
помощью тега <ТАВLЕ> красиво размещать
на странице текст и графику. Пока тег
<ТАВLЕ> остается единственным мощным
средством форматирования в HTML. Дизайнеры
Web-страниц сейчас обладают практически
той же свободой в отношении использования
"пустого пространства", что и
создатели печатных страниц. Таблицы
лучше всего помогают отойти от
иерархического размещения текста на
Web-страницах. Если
браузер поддерживает таблицы, он обычно
правильно отображает наиболее интересные
эффекты, полученные с их помощью (открыть
) Интернет-УниверситетИнформационных
Технологий Добро
пожаловать!| Учебный
курс "Основы
Web-технологий" | Рис.
4.2.
Использование таблиц в дизайне
Материал из Справочник Web-языков
Возможные значения
sStyle
Строка
, которая может определять и принимать одно из следующих значений:
| none
| Значение по умолчанию. Линия не отображается, и значение ее толщины обнуляется. Значение borderWidth не принимается во внимание.
|
| dotted
| Граница представляет собой линию, состоящую из набора точек. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии.
|
| dashed
| Граница представляет собой пунктирную линию, состоящую из серии коротких отрезков. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии.
|
| solid
| Граница представляет собой сплошную линию.
|
| double
| Граница представляет собой двойную линию. Суммарная толщина двух отдельных линий и расстояние между ними зависит от значения параметра borderWidth . Оно должно быть равно по крайней мере 3 пикселям, чтобы граница могла быть отображена в виде двойной линии.
|
| groove
| Граница отображается в виде вдавленной линии.
|
| ridge
| Граница отображается в виде рельефной линии.
|
| inset
| Граница отображается в виде вдавленной псевдотрехмерной линии.
|
| outset
| Граница отображается в виде выпуклой псевдотрехмерной линии.
|
| window-inset
| Граница отображается также как при значении inset
, но добавляется дополнительная тонкая выпуклая рамка. Доступно в браузере Internet Explorer, начиная с версии 6.
|
| hidden
| Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще. Границы со значением none имеют меньший приоритет. Доступно в браузере Internet Explorer, начиная с версии 8.
|
Свойство borderStyle
не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является none. Одновременно может быть определено до четырех значений для данного свойства:
Замечания
Если свойство borderWidth
больше нуля, то чтобы оно применялось, его необходимо задать для атрибута border-style
. В Internet Explorer 5.5 borderStyle
применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute
, чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width .
Примеры
Следующие примеры иллюстрируют применение свойства borderStyle
и атрибута border-style
для задания стиля границ объекта. В первом примере используется атрибут border-style
для задания стиля groove границам элемента при наведении на него курсора мыши.
Во втором примере для изменения стиля границ элемента на groove применяется свойство borderStyle
.
CSS-рамка
элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль
, цвет
и ширина
.
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
 По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
|
|---|
| Значения:
|
|
| none
|
Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
|
| hidden
|
Эквивалентно none .
|
| dotted
|
dotted
|
| dashed
|
dashed
|
| solid
|
solid
|
| double
|
double
|
| groove
|
groove
|
| ridge
|
ridge
|
| inset
|
inset
|
| outset
|
outset
|
| {1,4}
|
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}
|
| initial
|
|
| inherit
|
|
Синтаксис
P {border-style: solid;}
p {border-top-style: solid;}
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
|
|---|
| Значения:
|
|
| transparent
|
Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
|
| цвет
|
Цвет рамок задается при помощи значений свойства .
{border-color: #cacd58;}
|
| {1,4}
|
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
|
| initial
|
Устанавливает значение свойства в значение по умолчанию.
|
| inherit
|
Наследует значение свойства от родительского элемента.
|
Синтаксис
P {border-color: #cacd58;}
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
Синтаксис
P {border-width: 2px;}
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например: Div {
width: 100px;
height: 100px;
border: 2px solid grey;
}
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .
Синтаксис
P {border-top: 2px solid grey;}
6. Внешний контур outline
Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.
Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.
Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .
Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию. Div {
width: 100px;
height: 100px;
outline: #cacd58 solid 2px;
}
6.1. Стиль внешнего контура outline-style
Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.
Синтаксис
P {outline-style: ridge;}
6.2. Цвет внешнего контура outline-color
Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.
Синтаксис
P {
outline-style: ridge;
outline-color: silver;
}
6.3. Толщина внешнего контура outline-width
Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.
Синтаксис
P {
outline-style: dotted;
outline-width: 5px;
}
HTML-таблицы используются на веб-страницах по своему прямому назначению - для отображения структурированной информации. Как говорилось еще в первом уроке учебника, таблицы уже давно не используются с целью компоновки других элементов на странице, ведь их место заняла блочная верстка.
HTML-таблица состоит из ячеек, строк и столбцов, у нее может быть заголовок, подпись, шапка, тело и футер. Через CSS ее можно стилизовать, используя в качестве селекторов как внутренние теги таблицы, так и собственные классы и идентификаторы.
Для придания таблицам красивого внешнего вида можно использовать многие CSS-свойства, с которыми вы уже хорошо знакомы: padding , border , width , height , color , display и прочие.
Давайте вспомним стандартный стиль HTML-таблицы:
Согласитесь, на данном этапе вид совсем не привлекательный. Но путем несложных манипуляций со стилями CSS можно сделать эту таблицу очень симпатичной. Ниже показан наш вариант оформления, а также приведен готовый код, который вы при желании можете дополнить либо изменить:
th {
text-align: left;
color: #fff;
background-color: #706d97;
}
td {
min-width: 250px;
color: #696969;
border-bottom: 1px solid #eee;
}
th, td {
padding: 10px;
height: 20px;
}
td:first-child {
width: 150px;
min-width: 0;
}
th:last-child {
text-align: right;
}
td:last-child {
width: 80px;
min-width: 0;
text-align: right;
}
tr:nth-child(odd) {
background-color: #eee;
}
Как видите, все свойства нам уже знакомы. К самому тегу мы применили атрибут cellspacing со значением 0 , который убрал пробелы между ячейками. Но того же эффекта можно добиться и без атрибута, используя только CSS. Таким же образом можно заменять и другие табличные атрибуты. Об этом мы и поговорим далее.
Замена атрибутов таблиц на стили CSS
Как вы знаете, в HTML существуют специальные атрибуты для настройки базового стиля таблиц: cellpadding , cellspacing , border , bordercolor и другие. Но намного удобнее настраивать внешний вид элементов через CSS. Мы расскажем, какие свойства являются аналогами табличных атрибутов.
Атрибут align
С помощью этого атрибута можно выровнять всю таблицу относительно края окна браузера, выбрав одно из трех значений - left , center либо right . Обратите внимание, атрибут выравнивает не текст, а сам блок таблицы. Аналогом CSS в данном случае является комбинация свойств:
/* аналог align="left" */
table {
display: table;
margin-right: auto;
}
/* аналог align="center" */
table {
display: table;
margin-left: auto;
margin-right: auto;
}
/* аналог align="right" */
table {
display: table;
margin-left: auto;
}
Также таблицу можно выровнять, задав ее родительскому элементу свойство text-align с соответствующим значением. Но это сработает только при условии, что для таблицы установлено свойство display со значением inline либо inline-block .
Атрибут background
Данный атрибут позволяет задать фоновое изображение для всей таблицы, указав его URL-адрес в качестве значения. Контролировать поведение такого фона нет возможности, в отличие от аналога CSS - свойства background-image и других свойств для настройки фона.
/* аналог background="img/bg.png" */
table {
background-image: url(img/bg.png);
}
Атрибут bgcolor
Устанавливает цвет фона для всей таблицы. Вы наверняка уже догадались, каким CSS-свойством можно успешно заменить атрибут bgcolor:
/* аналог bgcolor="#eaeaea" */
table {
background-color: #eaeaea;
}
Атрибуты border, bordercolor и frame
Атрибуты таблицы border , bordercolor и frame задают толщину рамки, ее цвет и расположение соответственно. Рекомендуем забыть о них и пользоваться CSS-свойством border (и его производными), которое объединяет эти атрибуты и дает даже больше.
/* аналоги border="1" и bordercolor="#eee" */
table {
border: 1px solid #eee;
}
Если в CSS задано свойство border , оно перекроет значение атрибута. Такое же поведение будет и в случае с другими атрибутами, имеющими точный аналог в CSS.
Атрибут rules
Атрибут, который определяет, где отображать границы (вокруг ячеек, между колонками, между строками и т. д.), опять-таки можно заменить CSS-свойством border , применяя его к соответствующим тегам таблицы.
/* аналог rules="cols" */
td {
border-right: 1px solid black;
}
Атрибут cellpadding
Устанавливать отступы между внутренними сторонами ячейки и ее содержимым можно не только через атрибут, но и с помощью CSS-свойства padding , примененного к тегу .
/* аналог cellpadding="10" */
td {
padding: 10px;
}
Дополнительное преимущество CSS в данном случае заключается в том, что вы можете задать разные размеры отступов по вертикали и горизонтали, тогда как через HTML-атрибут устанавливается один размер отступа для всех сторон.
Атрибут cellspacing
Этот атрибут устанавливает расстояние между самими ячейками таблицы. В качестве аналога существует CSS-свойство border-spacing , при помощи которого тоже можно создать промежутки между ячейками. Кроме того, это свойство может принимать два значения одновременно (разделяются пробелом): одно для промежутков по горизонтали, второе - по вертикали.
/* аналог cellspacing="10" */
table {
border-spacing: 10px;
}
Атрибуты width и height
Разумеется, эти атрибуты можно легко заменить на CSS width и height:
/* аналоги width="500" и height="500" */
table {
width: 500px;
height: 500px;
}
Завершение
Как вы уже знаете, в современной веб-разработке принято отделять структуру документа от его визуального оформления. Именно поэтому рекомендуется использовать CSS и не обращаться к HTML-атрибутам, которые предназначены для изменения внешнего вида. Это обеспечивает более удобную разработку, редактирование и дальнейшую поддержку стилей на сайте.
Возможно вас заинтересует
| |
|
|
