Бесплатный HTML-курс
© MaxSite.org, 2006-2021

Ссылки и бордюры

Ты уже знаком с тем, как создавать ссылки — это тэг A. C помощью CSS можно отслеживать разные события и отображать разные состояния ссылок.

Делается это с помощью т.н. псевдоселекторов. Они в свою очередь псевдоклассы и псевдоэлементы, но различие больше теоретическое. Суть их в том, что псевдоселекторы применяются к обычным селекторам для разных задач.

Псевдокласс :hover используется для элемента, когда на него наведен курсор мыши.

a:hover { 
	color: green; 
	text-decoration: underline;
}

Этот пример приведёт к тому, что все ссылки при наведении будут отображаться зелёным цветом и подчёркнутыми.

В Berry CSS для этого используются классы с префиксом hover- и желаемым цветом.

ссылка

ссылка

ссылка

<p><a href="#">ссылка</a></p>
<p><a class="t-red hover-t-green" href="#">ссылка</a></p>
<p><a class="t-blue hover-t-red hover-no-underline" href="#">ссылка</a></p>

Если же нужно убрать подчёркивание, то используется класс hover-no-underline.

Котик
Автор котика: Lisa Zins

Бордюры

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

В целом за это отвечает свойство border. Оно составное, то есть по факту состоит из нескольких других. В CSS много таких свойств — так можно сократить код.

.border-red {
	border: red 1px solid;
}

В этом примере для бордюра указывается цвет (red), толщина линии (1px) и тип обводки (solid - сплошной). В Berry CSS используются классы, которые описывают каждое свойство отдельно. Поэтому для бордюра нужно указать сразу три класса.

<div class="pad20 bor1 bor-solid bor-red"></div>

Стиль линии может быть:

  • solid - сплошная
  • dotted - точками
  • dashed - чёрточками
  • double - двойная

Что касается цвета, то в Berry CSS можно использовать все основные цвета и все оттенки серого. Если делать классы для всех оттенков цветов, то это сильно увеличит css-код. Поэтому, если тебе нужно будет сделать бордюр каким-то особым цветом (размером, стилем), то указывай это в style блока.

<div class="pad20" style="border: #69C238 4px ridge;"></div>

В Berry также есть классы, которые позволяют менять цвет бордюра при наведении ( :hover).

<div class="pad20 bor1 bor-solid bor-red hover-bor-blue"></div>

Если нужно задать бордюр только одной стороны, то используются суффиксы -t, -r, -b, -l к классам типа линии.

<div class="pad20 bor4 bor-solid-l bor-dotted-r bor-double-t bor-dashed-b bor-green"></div>

В некоторых случаях, особенно на этапе разработки, вместо классов бордюров, можно использовать bordered — он создает серую тонкую рамку.

Скругления

Скругление углов указывается в виде свойства border-radius:

.rounded { border-radius: 10px; }
скругление
<div class="pad20 rounded bordered">скругление</div>

Если нужно скругление с одной стороны, то можно использовать суффиксы -r, -l, -t, -b.

rounded
rounded20
rounded20-r
rounded20-l
rounded20-t
rounded20-b
rounded-circle

Первый чекпоинт

В целом мы пока занимались теорией, для того чтобы создать минимальную базу знаний. Дальше мы сможем верстать блоки на следующих занятиях. Задание к этому уроку достаточно простое: просмотреть ещё раз предыдущие уроки и, если что-то непонятно, постараться разобраться.