Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Рамка в css

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

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

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

В CSS можно задавать размер, цвет, вид рамки.

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

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

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

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

Пример:

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

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

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

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

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

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

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

Пример:

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

Цвет рамки

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

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

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

Пример:

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

Результат:

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

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

Синтаксис:

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

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

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

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

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

Результат:

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

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

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

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

Правила:

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

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

Синтаксис:

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

Пример:

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

Результат:

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

Не забудьте подписаться на обновление блога, если вы еще не подписаны.

2.3 - Рамки в CSS

В зависимости от дизайна, довольно часто бывает необходимо задать внешний вид рамки определенного блока на странице.Для указания рамки, в CSS есть свойство border. Благодаря этому свойству можно легко задать нужный стиль отображения рамки для блока.

За внешний вид рамки отвечают три параметра:

border-width (ширина рамки),
border-style (тип рамки)
border-color (цвет рамки)

Хотя для указания рамки хватит только одного свойства border-style, полностью задать внешний вид можно только с использование трех свойств.

Пример создаия рамки в CSS

Рамки в CSS p{ border-width: 1px; border-style: solid; border-color: #aaa; }

Заголовок

Текст, вокруг которого будет рамка

Результат

Маленькая хитрость: для указания все трех параметров не обязательно использовать разные свойства (border-width, border-style, border-color). Все это можно занести в одно свойство и указывать через пробел.

Пример

p{ border: 1px solid #aaa; }

Такая запись выгладит намного аккуратнее и главное меньше занимает места.

Задание рамки только с одной стороны

Бывают случаи, когда рамку нужно указать только с одной стороны. Для этих целей есть свойсва в CSS, которые указывают с какой стороны задавать стиль рамки.

Пример использования рамки с одной стороны

Рамки в CSS p{ border-bottom: 5px solid #aaa; }

Заголовок

Текст, вокруг которого будет рамка

Результат

В этом примере рамка отображается только снизу блока. Также можно задать внешний вид рамки с любой другой стороны.

border-top (сверху)
border-right (справа)
border-left (слева)
border-bottom (снизу)

Стиль отображения рамки

В примерах выше рамка отображалась сплошной линией. Но кроме этого можно указать другой стиль для рамки например пунктир

Рамки в CSS p{ border: 1px dashed #ccc; }

Заголовок

Текст, вокруг которого будет рамка

Результат

Благодаря этому уроку вы знаете как создать рамку в CSS.

Назад Список уроков

Рамки в CSS. CSS свойство border

Эта статья посвящена такому CSS свойству, как border. CSS свойство border позволяет задать рамку картинке, убрать рамку, изменить цвет рамки или сделать рамку закругленной, а в некоторых случаях использовать это свойство, как подчеркивание для текста или ссылок. Давайте подробнее поговорим о значениях свойства border и видах рамок в CSS.

Значения CSS свойства border

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

-border — width – задает ширину рамки;

-border — style – задает стиль рамки;

-border – color – задает цвет рамки;

-border – radius – скругление углов рамки.

Для того чтобы изменять эти значения для каждой из сторон необходимо данным значениям указать сторону.

-top – сверху;

-bottom – снизу;

-right – справа;

-left – слева.

Например:

p {border-width: 3px; border-style: solid; border-color: red;}

a {border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: green;}

Стили рамок в CSS

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

Сокращенная запись для задания стиля рамки в CSS

Для того, чтобы сделать код более удобным для чтения существует сокращенная запись, которая имеет вид:

border: | none (убирает рамку);

Значения можно указывать в любом удобном порядке, браузер сам определит какое из них соответствует заданному свойству. Красным выделены обязательные значение. Свойство none применятся самостоятельно.

Для того чтобы изменить стиль отдельной стороны, необходимо также добавить к CSS свойству border, одну из приставок: top, bottom, right или left.

Например:

a { text-decoration: none; border: 2px dotted blue; border-bottom: 3px dotted red; border-radius: 10px 0 0 10px; }

border-bottom: 3px dotted red; border-radius: 10px 0 0 10px;

Результат работы этого CSS кода можно посмотреть на скриншоте ниже:

Свойство text-decoration мы проходили в уроке по оформлению текста в css, оно убирает стандартное форматирование для ссылок, а два последующих свойства задают стиль рамки для нашей ссылки.

На этом обзор способов задания внешнего вида рамок для html элементов средствами CSS подошел к концу. Это была короткая, но очень познавательная статья, которая пригодится вам на практике. Искренне надеюсь, что статья вам понравилась, и вы не зря потратили время на ее изучение. До встречи, дорогие друзья, в следующих статьях и уроках по курсу CSS на страницах блога.

Отступы и рамки CSS

Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.

Отступы и рамки

У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?

Внешние отступы (margin) — нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
Внутренние отступы (padding) — это расстояние от рамки до содержания данного элемента.
Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:

Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер — это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.

Внешние отступы

Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:

margin-top: auto|величина|% — отступ сверху.
margin-right: auto|величина|% — отступ справа.
margin-bottom: auto|величина|% — отступ снизу.
margin-left: auto|величина|% — отступ слева.
margin: margin-top margin-right margin-bottom margin-left — сборное правило.

Значение «auto» — значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.

Правило «margin» — сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:

margin:10px 20px 20px 30px; margin:10px 20px 30px; - отступ слева справа одинаков margin:10px 20px; - отступ сверху-снизу и слева-справа одинаков margin:10px; - все отступы одинаковы

Внутренние отступы

Здесь не может быть отрицательных значений, т.к. невозможно контент выдвинуть за пределы рамки элемента. Проценты считаются от ширины контейнера.

padding-top: величина|%.
padding-right: величина|%.
padding-bottom: величина|%.
padding-left: величина|%.
padding: padding-top padding-right padding-bottom padding-left — сборное правило. По аналогии с «margin».

Рамки в CSS

У всех рамок есть следующие характеристики:

Толщина — border-width: величина (thin|medium|thick). По умолчанию — medium.
Цвет — border-color: цвет. По умолчанию — цвет шрифта в этом элементе.
Тип — border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.

Сами правила рамки: