На страницах нашего онлайн портала alivahotel.ru мы расскажем много самого интересного и познавательного, полезного и увлекательного для наших постоянных читателей.
В этой статье учебника речь пойдет о работе с границами элементов, будут рассмотрены примеры в которых мы научимся управлять шириной границ, цветом и даже стилем границ. Кроме того, научимся стилизовать отдельные границы элементов и рассмотрим примеры в которых мы будем скруглять углы элементов.
Что представляет из себя граница элемента? Граница это обычная линия, которая располагается между внутренним (padding) и внешним (margin) отступом вокруг содержимого элемента.
Рис. 82 Границы элемента в CSS.
Использование границ элемента имеет очень широкое применение, например, при смысловом разделении частей страницы, добавлении к элементам списков границ снизу, создание рамки изображения, выделении информационного блока и тому подобное.
Для придания особого вида границ элемента в CSS используются следующие универсальные свойства:
CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.
Определить цвет границы вы можете в любой системе задания цвета (HEX, RGB, RGBA, HSL, HSLA, «предопределённые цвета»). Если вы пропустили тему «Цветовое оформление в CSS», то вы можете вернуться для её изучения.
Для простоты и понимания принципа указания цвета границ рассмотрим пример с использованием предопределённых цветов:
Результат нашего примера:
Рис. 83 Пример указания цвета границ элемента.
Как вы могли заметить, в данном примере мы также использовали универсальные свойства, которые отвечают за ширину (border-width) и стиль границы (border-style).
Свойство border-width устанавливает ширину для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений. За исключением процентных значений вы можете использовать любые единицы измерения CSS, либо ключевые слова:
Давайте рассмотрим следующий пример:
Результат нашего примера:
Рис. 84 Пример установки ширины границ.
Мы уже не раз с Вами сталкивались с применением стиля границы (border-style) элементов, но при этом все время использовали сплошную границу (значение solid ), давайте рассмотрим все возможные значения, которые допускается использовать:
Значение
Описание
none
Отображает границы с 3d эффектом (противоположно значению ridge ).
ridge
Отображает границы с 3d эффектом (противоположно значению groove ).
inset
Давайте рассмотрим пример использования:
Результат нашего примера:
Рис. 85 Пример указания стиля границ элемента.
Универсальное свойство border
В CSS существует множество вариантов стилизации границ, используя различные свойства, мы постараемся с вами в этой статье охватить все необходимые, а сейчас рассмотрим свойство, которое применяется чаще всего и позволит нам в одном объявлении указать значения ширины, цвета и стиля границы – свойство border:
Рис. 86 Универсальное свойство border.
CSS свойство border позволяет установить все свойства границ в одном объявлении. На вышеуказанном изображении мы задаем сплошную границу шириной 10 пикселей черного цвета. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию:
Давайте рассмотрим следующий пример:
В данном примере для первого блока мы указали сплошную границу шириной 4px оранжевого цвета, а для второго пунктирную границу шириной 0.2em красного цвета:
Результат нашего примера:
Рис. 87 Пример использования свойства border.
Использование свойств для одиночных границ
Мы с Вами рассмотрели универсальное свойство border, которое позволяет установить все свойства границ в одном объявлении, но что нам делать, если нам необходимо стилизовать каждую границу элемента по-разному? Для этого в CSS существует четыре универсальных свойства для каждой стороны по отдельности:
Эти свойства работают аналогично свойству border, разница заключается лишь в том, что используя свойство border-* вы стилизуете выбранную сторону, а не все стороны сразу. Разрешается использовать объявление, в котором одно из значений отсутствует. Если вы опускаете какое-то значение, то значение получает значение по умолчанию. Принцип работы свойства изображен ниже:
Рис. 88. Пример работы универсального свойства border-top.
В данном примере мы задаем сплошную границу шириной 10 пикселей черного цвета для верхней границы.
Как вы уже поняли, эти свойства тоже являются универсальными и отвечают за указание ширины, стиля и цвета для конкретной стороны в одном объявлении. Случаются ситуации, в которых вам необходимы минимальные манипуляции с конкретной границей элемента, для этих целей в CSS существуют свойства, которые позволяют работать со стилем, с цветом и шириной границы необходимой нам стороны по отдельности:
Давайте рассмотрим пример, чтобы закрепить полученные знания:
В данном примере для абзаца с классом primer1 мы указали универсальным свойством border-left сплошную границу с левой стороны шириной 4 пикселя фиолетового цвета, а для нижней границы указали, что она будет сплошная шириной 0.1em (по умолчанию черного цвета).
Результат нашего примера:
Рис. 89 Пример использования свойств для одиночных границ.
Скругление углов элемента.
CSS 3 подарил нам такое универсальное свойство, как border-radius, оно позволяет нам определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:
Радиус скругления применяется ко всему заднему фону, либо фоновому изображению (даже если у элемента отсутствуют границы).
Рис. 90 Принцип работы свойства border-radius.
Рис. 91 Порядок указания значений для свойства border-radius (при скруглении углов по типу дуги эллипса).
Для демонстрации свойства border-radius создали 3 различных класса:
Результат нашего примера:
Рис. 92. Пример округления углов элемента в CSS.
Что касается скругления отдельных углов, то принцип работы тот же, что и при указании значений для всех углов, за тем исключением, что если скругление происходит по типу дуги эллипса, то второе значение указывается через пробел, а не косую черту.
На примере border-bottom-left-radius (определяет форму нижнего левого угла):
Рис. 93 Принцип работы свойства border-bottom-left-radius.
Давайте рассмотрим пример, в котором укажем различные значения для свойства border-bottom-left-radius и посмотрим, что из этого выйдет:
Результат нашего примера:
Рис. 94 Пример скругления границы левого нижнего угла элемента в CSS.
Мы с Вами рассмотрели 25 базовых свойств, которые вам будут необходимы в повседневной работе с границами элементов. При дальнейшем изучении CSS мы с Вами неоднократно будем возвращаться к этим свойствам.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Практическое задание № 22.
Продвинутое задание (составление меню пагинации с закругленными границами у стрелочек):
Практическое задание № 23.
Продвинутое задание (составление меню пагинации с закругленными границами у элементов с различными стилями при наведении):
Практическое задание № 24.
Подсказка: внимательно изучите пример перед выполнением, обратите внимание, что стрелочки при наведении имеют отличный от других элементов стиль.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят.
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Свойство border-width. Толщина границы.
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Свойство border-color. Цвет границы.
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы ( border-top ).
Параметры правой границы ( border-right ).
Параметры нижней границы ( border-bottom ).
Параметры левой границы ( border-left ).
Пример использования этих свойств:
Свойство border-radius. Округление углов границы.
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
Табл. Свойство border-radius
Число значений
Результат
1
Радиус указывается для всех углов блока.
2
Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
3
Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
4
По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.
Так как элемент HTML отображается в виде прямоугольника, у элемента может быть до четырёх границ: сверху, снизу, слева и справа. Вы можете установить границу со всех сторон сразу или на каждой стороне отдельно.
Типы границ и их положение
Граница в CSS состоит из трёх свойств:
Также граница может быть задана на четырёх возможных сторонах:
Сокращённое свойство border позволяет определить все три свойства сразу:
Единственная граница
Если вы хотите установить границу только на одной из четырёх сторон, вам необходимо включить положение границы в свойство CSS. К примеру, для нижней границы вы можете написать:
Что делать, если мне надо три границы? Должен ли я установить их отдельно?
Как вы уже догадались, самый быстрый способ получить три границы — это установить все четыре из них, а затем удалить ту, которую вы не хотите:
Сокращённые комбинации
Поскольку существуют три свойства границы и четыре положения границ, получается 12 возможных комбинаций:
border
border-color
border-style
border-width
border-top
border-top-color
border-top-style
border-top-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
Доступно довольно много свойств. В конечном итоге вы будете обычно использовать только пять сокращённых версий:
Рис. 83 Пример указания цвета границ элемента.
Рис. 84 Пример установки ширины границ.
Рис. 85 Пример указания стиля границ элемента.
Рис. 87 Пример использования свойства border.
Рис. 89 Пример использования свойств для одиночных границ.
, оно позволяет нам определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:
Рис. 92. Пример округления углов элемента в CSS.
Рис. 94 Пример скругления границы левого нижнего угла элемента в CSS.
Практическое задание № 22.
Практическое задание № 23.
Практическое задание № 24.