Содержание
Рамка представляет собой обычную линию, которая отображается вокруг элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой стороны элемента. Например, если добавить рамку только с нижней стороны блочного элемента, то она будет производить тот же эффект, что и HTML тег , выступая в качестве разделителя.
Каждая рамка имеет три параметра, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:
- border-width — задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin , medium , thick .
- border-style — определяет стиль рамки с помощью одного из восьми возможных значений: solid , dotted , dashed , double , groove , ridge , inset и outset .
Вместо использования всех трех свойств, можно использовать всего одно — CSS свойство border, которое позволяет одновременно задать ширину, стиль и цвет для рамки в одном объявлении:
Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:
Эти свойства работают точно так же, как и CSS свойство border , с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.
До сих пор используя HTML просто создавали элементы и они создавались со стандартными значениями. Теперь же при помощи CSS мы можем полностью управлять элементами на странице как только захотим. И в этом уроке мы поработаем с размерами элементов и узнаем как создавать рамку вокруг них.
Рамки border
Рамки часто используются в дизайнерских решениях чтобы сделать красивые элементы под общую концепцию сайта. И там они тоже необходимы чтобы развить виденье блоковых структур.
Здесь всё очень просто, хочешь рамку — пиши border зачем передавай ширину рамки, тип и цвет. Примерно вот так:
Если Вы забыли как обращаться к элементам HTML через CSS, тогда посмотрите этот урок.
Итак, здесь мы задали ширину — 5 пикселей. Потом тип рамки — solid и, наконец, цвет — red. Именно так и задаются рамки.
Ещё бывают типы рамок: dotted — точечная рамка, dashed — пунктирная, double — двойная. Их конечно больше, но это самые часто встречающиеся.
Размеры элементов width и height
Теперь мы можем перейти к размерам. Начнём с ширины и высоты элементов. Эти параметры задаются очень просто, используйте свойства width или height. Здесь всё просто: width — ширина элемента, а height — высота.
Запишем в файле HTML в теге обычный элемент div:
Сейчас мы просто создали его и не поместили какое-либо содержимое внутрь. Это значит, что в нашей разметке его не будет т.к. он попросту пуст. Но мы теперь можем в файле CSS стилей задать ему размеры:
Рамка тоже влияет на размеры блока, в нашем случае можно посчитать ширину:
Общая ширина = ширина блока (100px) + ширина рамки (с двух сторон по 5px) = 100px + 2 * 5px = 110px
Размеры можно задавать и в процентах %, тогда они будут отсчитываться от ширины родительского элемента.
Минимальная и максимальная ширины/высота
Вы также можете задавать элементам минимальную и максимальную высоту. Для этого например к width надо добавить min- или max- и т.п.
Помогайте другим!
Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
- border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style — стиль выводимой рамки. Может принимать следующие значения
- none или hidden — отменяет границу
- dotted — рамка из точек
- dashed — рамка из тире
- solid — простая линия (применяется чаще всего)
- double — двойная рамка
- groove — рифленая 3D граница
- ridge , inset , outset — различные 3D эффекты рамки
- inherit — применяется значение родительского элемента
Примечание
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".