Ссылки и бордюры
Ты уже знаком с тем, как создавать ссылки — это тэг 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.
Бордюры
Бордюры очень часто используются в дизайне блоков, поэтому рассмотрим как с ними можно работать.
В целом за это отвечает свойство 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.
Первый чекпоинт
В целом мы пока занимались теорией, для того чтобы создать минимальную базу знаний. Дальше мы сможем верстать блоки на следующих занятиях. Задание к этому уроку достаточно простое: просмотреть ещё раз предыдущие уроки и, если что-то непонятно, постараться разобраться.