Расписание курсов

Дополнительные курсы CSS

• Дополнительная литература по CSS
• Введение в CSS
• Основные грамматические правила CSS
• Продвинутые грамматические правила CSS
• Деривированные селекторы CSS
• Селекторы id CSS
• Селекторы класса CSS
• Создание CSS
• Фон CSS
• Текст CSS
• Шрифты CSS
• Списки CSS

Модель рамки CSS

• Обзор модели рамки CSS
• Внутренние поля CSS
• Края CSS
• Внешние поля CSS
• Слияние внешних полей CSS

Позиционирование CSS

• Обзор позиционирования CSS
• Относительное позиционирование CSS
• Абсолютное позиционирование CSS
• Флoting CSS

Выборщик CSS

• Селекторы элементов CSS
• Группировка селекторов CSS
• Подробное описание селекторов класса CSS
• Подробное описание селекторов id CSS
• Подробное описание селекторов свойств CSS
• Селекторы потомков CSS
• Селекторы детей элементов CSS
• Селекторы соседних братьев CSS

Выборочный курс

Рекомендуемый курс:

• Кейс-бокс CodeW3C.com

Рамка элемента (border) представляет собой одну или несколько линий, окружающих содержимое элемента и внутренние отступы.

Свойство border CSS позволяет определить стиль, ширину и цвет рамки элемента.

Края CSS

В HTML мы используем таблицы для создания рамки вокруг текста, но с помощью свойств рамки CSS мы можем создавать великолепные рамки и применять их к любому элементу.

Рамка элемента находится внутри внешнего отступа элемента (border). Рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и внутренние отступы.

У каждой рамки есть три стороны: ширина, стиль и цвет. В следующих разделах мы подробно расскажем о этих三个方面.

Рамка и фоновое изображение

Свойство CSS указывает, что рамка рисуется «над фоновым изображением элемента». Это важно, потому что некоторые рамки «прерывистые» (например, пунктирные или штриховые рамки), и фоновое изображение элемента должно появляться между видимыми частями рамки.

CSS2 указывает, что фоновое изображение распространяется только на отступы, а не на рамку. Later CSS2.1 вносит исправление: фоновое изображение элемента включает контент, отступы и зону рамки. Большинство браузеров следуют определению CSS2.1, но некоторые старые браузеры могут вести себя по-разному.

Стиль рамки

Стиль — это один из最重要的 аспектов рамки, не только потому, что стиль контролирует отображение рамки (естественно, стиль действительно контролирует отображение рамки), но и потому, что без стиля просто не будет рамки.

Стиль CSS Свойство border-styleОпределены 10 различных стилей, включая none.

Например, вы можете определить рамку для изображения как outset, чтобы она выглядела как «выпуклая кнопка»:

a:link img {border-style: outset;}

Определение нескольких стилей

Вы можете определить несколько стилей для рамки, например:

p.aside {border-style: solid dotted dashed double;}

Следующее правило определяет четыре стиля рамки для абзацев с классом aside: сплошная верхняя рамка, пунктирная правая рамка, штриховая нижняя рамка и двойная левая рамка.

Мы снова видим, что значения здесь следуют順序 top-right-bottom-left, и также видели эту последовательность при обсуждении установки различных отступов с несколькими значениями.

Определение одностороннего стиля

Если вы хотите установить стиль рамки для одной из сторон рамки элемента, а не для всех четырех сторон, вы можете использовать следующие свойства односторонней рамки:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Therefore, these two methods are equivalent:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Note:If you want to use the second method, you must place the single side property after the shorthand property. Because if you place the single side property before border-style, the value of the shorthand property will overwrite the single side value none.

Border width

You can specify border-width propertySpecify the width of the border.

There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em; or use one of the 3 keywords, which are thin, medium (default value) and thick.

Примечание:CSS does not define the specific width of 3 keywords, so one user agent may set thin, medium and thick to be equal to 5px, 3px and 2px, while another user agent may set them to 3px, 2px and 1px.

Therefore, we can set the width of the border like this:

p {border-style: solid; border-width: 5px;}

Or:

p {border-style: solid; border-width: thick;}

Define the width of a single side

You can set the border of each side of the element in the order of top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

The above example can also be abbreviated as (this style of writing is calledValue copy）：

p {border-style: solid; border-width: 15px 5px;}

You can also set the width of each side of the border separately through the following properties:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Therefore, the following rules are equivalent to the above example:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Without border

In the previous example, you have already seen that in order to display some kind of border, you must set the border style, for example, solid or outset.

Что happens if you set border-style to none?

p {border-style: none; border-width: 50px;}

Хотя ширина рамки составляет 50px, стиль рамки установлен в none. В этом случае не только стиль рамки исчезает, но и ее ширина становится 0. Рамка исчезает, почему?

Это потому, что если стиль рамки равен none, т.е. рамка вообще не существует, то ширина рамки не может быть, поэтому ширина рамки автоматически устанавливается в 0, независимо от того, что вы изначально определили.

Запомните это очень важно. На самом деле, забывшееся заявление стиля рамки - это часто встречающаяся ошибка. Согласно следующим правилам, все элементы h1 не будут иметь рамки, не говоря уже о ширине 20 пикселей:

h1 {border-width: 20px;}

Поскольку по умолчанию значение border-style равно none, если стиль не был заявлен, это эквивалентно border-style: none.Таким образом, если вы хотите, чтобы рамка была видна, вам нужно声明 стиль рамки.

Цвет рамки

Установка цвета рамки очень проста. CSS использует простой Свойство border-color它 может принимать до 4 значений цвета.

Можно использовать любые типы значений цвета, например, это могут быть именованные цвета, шестнадцатеричные и RGB значения:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Если значение цвета меньше 4, то используется действие копирования значения. Например,下面的 правило объявляет верхнюю и нижнюю рамки абзаца синими, а левую и правую рамки красными:

p {
  border-style: solid;
  border-color: blue red;
  }

Примечание:По умолчанию цвет рамки соответствует фону элемента. Если для рамки не было указано цветное значение, то он будет соответствовать цвету текста элемента. С другой стороны, если у элемента нет текста, например, это таблица, которая содержит только изображения, то цвет рамки этой таблицы будет цветом текста родительского элемента (т.к. color можно наследовать). Этот родительский элемент может быть body, div или другим table.

Определение цвета одной стороны

Есть также свойства цвета для односторонних рамок. Принцип их работы аналогичен односторонним стилям и свойствам ширины:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Чтобы определить для элемента h1 сплошную черную рамку и красную рамку справа, можно сделать так:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Прозрачная рамка

Мы уже говорили, что если у рамки нет стиля, то нет и ширины. Но в некоторых случаях вы можете захотеть создать невидимую рамку.

CSS2 ввели значение цвета рамки transparent. Это значение используется для создания рамки с шириной, но не видимой. Вот пример:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Мы определили следующие стили для вышеуказанных ссылок:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Попробуйте сами

В некотором смысле, использование transparent делает рамку как бы дополнительной внутренней отступом; кроме того, есть и еще одно преимущество - возможность сделать ее видимой, когда это необходимо. Прозрачная рамка аналогична отступу, так как фон элемента extends до области рамки (если у элемента есть видимый фон).

Важно:До IE7, IE/WIN не поддерживали transparent. В более ранних версиях IE цвет рамки устанавливался на основе значения color элемента.

Свойства рамки CSS

Инструменты

Руководство по CSS

Примеры CSS

Тест CSS

Учебник по CSS

Ссылки спонсоров