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

Опубликовано в Все для сайта - Автор VARIATECHnik В Вторник, 7 августа, 2018 Нет комментариев

Рамки в 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: <border-width> <border-style> <border-color> | none (убирает рамку);

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

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

Например:

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

 

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

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

Об - Всем привет! На данном ТехноСайте мы постараемся выкладывать только полезные и занимательные статьи, с пошаговыми иллюстрациями и видео уроками. По всем вопросам пишите в комментариях. Обещаем будет интересно!

Оставить комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

в