Рамка в CSS. Основы CSS для начинающих. Урок №12

Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS создать рамку. Рамку можно создавать для картинок, для блоков, для текста, для ссылок.
А если есть рамка на каком-то элементе, то с помощью CSS ее можно вообще убрать.
В CSS можно задавать размер, цвет, вид рамки.

Размер рамки (толщина)

Свойство «BORDER-WIDTH»
Чтобы создать для картинок, блоков, текста, ссылок рамку, воспользуйтесь свойством «border-width».

Значение:
значение задается в px.

Для визуального понимания посмотрите на схему, где я указал размер рамок в px:

Пример:

H2
{
border-width:5px; /* рамка заголовка H2 */
}

Результат:
Результат пока что будет не виден, так как нужно еще создать стиль (вид) рамки 

Стиль рамки (вид)

Свойство «BORDER-STYLE»
Чтобы указать стиль (вид) рамки, укажите свойство «border-style».
Существует восемь разновидностей рамок. По крайне мере я знаю только восемь.

Разновидности рамок (значение):

• solid - сплошная рамка;
• dotted - точечная рамка;
• dashed - пунктирная рамка;
• double - из сплошной двойной линии;
• groove- рамка с объемной вдавленной линией;
• ridge - рамка с выпуклой линией;
• inset - рамка, похожая на вдавленный блок;
• outset - рамка делает как бы выпуклый блок

На схеме рамки выглядят так:

Пример:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
}

Цвет рамки

Свойство «BORDER-COLOR»
Если вам нужно поменять цвет рамки, воспользуйтесь правилом «border-color».

Значение:
значение задается по названию цвета, по шестнадцатеричному значению, с помощью RGB (если подзабыли, прочитаете вот эту статью):

border-color:red; /* цвет рамки */

Пример:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
border-color:red; /* цвет рамки */
}

Результат:

Сокращенная форма записи

Свойство «BORDER»
Если вам нужно перечислить, употребить все вышеупомянутые свойства, то можно не писать каждое по отдельности, а заменить правилом сокращенной формы. Это правило «border».

Синтаксис:

border: толщина_рамки вид_рамки цвет_рамки;

Простой способ:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
border-color:red; /* цвет рамки */
}

Сокращенная форма записи:

H2
{
border:2px dotted red; /* рамка заголовка H2, стиль рамки, цвет рамки */
}

Результат:

Как убрать рамку

Свойство «BORDER»
Если вам нужно убрать рамку, достаточно в правиле «border» указать свойство «0».

H2
{
border:0px; /* рамки не будет */
}

Сторона рамки

Свойство «BORDER-TOP» | «BORDER-BOTTOM»| «BORDER-LEFT»| «BORDER-RIGHT»
Если вам нужно указать только одну сторону рамки, укажите специально предназначенные правила «border-top» | «border-bottom» | «border-left» | «border-right»:

Правила:

• border-top – рамка сверху
• border-bottom – рамка внизу
• border-left – рамка слева
• border-right – рамка справа

Надеюсь, вы заметили, что просто к правилу «border» добавляется сторона «top», «bottom», «left», «right»:

Синтаксис:

border-сторона_рамки: толщина_рамки вид_рамки цвет_рамки;

Пример:

H2
{
border-top:2px dotted red; /* рамка сверху */
border-bottom:2px dotted #999911; /* рамка снизу */
}

Результат:

Вроде все сказал, даже больше чем планировал .
Учите CSS – это весело и занятно!
Не забудьте подписаться на обновление блога, если вы еще не подписаны.