Git. CSS. Селектор, классы, стили. | Основы Frontend-разработки

Презентация тык.

Подключение

Встроенный стиль (Inline CSS) Стили прописываются через атрибут style в каждом элементе. Пример: <h1 style="сolor: yellow; margin: 10px 20px">Заголовок</h1>
Внутренний стиль (Internal CSS) - наиболее правильный и удобный Стили прописываются через тег <style> в теге <head>.Пример:

<head>
    <style>
        header {
            font-family: 'Roboto';
        }
    </style>
</head>
<body>
    <header>Шапка сайта</header>
    <main>
        Основная часть
    </main>
    <footer>Подвал сайта</footer>
</body>

Через импорт CSS файлов. Пример:

<head>
    <link rel="stylesheet" href="main.css"/>
</head>
<body>
    <header>TEXT</header>
</body>

//main.css
header{
    color:green;
}

Анатомия и селекторы

Весь CSS состоит из однотипных блоков — CSS-правил. Каждое CSS-правило состоит из нескольких обязательных элементов: селектор, свойство, значение.

    селектор {
        свойство: значение;
    }

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

Есть разные типы селекторов:

по тегу

    header {
        font-family: 'Roboto';
    }

по классу

    .menu {
        font-family: 'Roboto';
    }

по идентификатору

    #menu {
        font-family: 'Roboto';
    }

Свойства и значения

Размеры

Ширина: width: 200px;

Высота: height: 200px;

Отступы

Внутренний отступ: padding: 20px; - значит, что отступ со всех сторон (верх, право, низ, лево) отступ по 20px. Можно задать отступ точечно через padding-top, padding-bottom, padding-left, padding-right.

Внешний отступ: margin: 20px;

Рамка: border: 1px solid black; - три значения в порядке ширина рамки, стиль, цвет.

Шрифты: подключение и форматирование

Подключение через GoogleFonts

Алгоритм:

Находим нужный шрифт и нажимаем
Копируем строки и вставляем корневой файл .html
Далее название шрифта, например, “Roboto” прописываем для нужного элемента в свойстве font-family: ‘Roboto’, sans-serif;

Другие свойства:

font-size: 56px; - размер

font-weight: 900; - жирность

font-style: italic; - стиль

text-transform: uppercase; - преобразование

Декоративные элементы

Фон:

background-color: #fff; - цвет фона

background-image: url('адрес'); - картинка в качестве фона

background-repeat: no-repeat; - повтор фона

background-size: contain; - расположение фона в блоке по размеру

background-position: center; - позиция фона

Рамка и тени:

border: 1px solid black; — ширина, стиль и цвет рамки

border-radius: 16px; - скругления для рамки. Можно указывать в %, например, для квадратных рамок 50% - круг

box-shadow: 12px 12px 6px 4px #fff; - (x y размытие распространение цвет) тень блока

text-shadow: 12px 12px 6px 4px #fff; - (x y размытие распространение цвет) тень текста

Позиционирование

Свойство position задает способ позиционирования элемента в документе. Совместно со свойствами left, right, top, bottom или inset элементу задаётся его местоположение на странице.

position: static по умолчанию, элемент находится в нормальном потоке, свойства left, right, top, bottom игнорируются
position: relative элемент остается так же статическим, но мы можем менять его положение относительно начального с помощью left, right, top, bottom.
position: absolute элемент позиционируется относительно ближайшего родительского элемента с position: relative
position: fixed элемент позиционируется относительно окна браузера, фиксируется и остается в таком положении, не влияет на расположение других элементов
position: sticky похоже на fixed, но применяется, когда нам нужно зафиксировать какой-либо элемент не сразу, а при прокрутке родителя до какого-то известного положения

Сброс стилей

Используем для этого любой файл reset.css из интернета.

Алгоритм

Скопировать файл reset.css
Создать отдельный файл в проекте (где) с названием reset.css
Вставить в файл скопированный ранее код
Подключить файл (куда) через тег <link>

Единицы измерения

px - универсальные единицы измерения, но не удобные для адаптивной верстки

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

em - задаёт величину относительно вычисленного размера шрифта родительского блока. Если для элемента font-size: 20px, то для дочернего блока 2em будут эквивалентны 40px

rem- рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это <html>. По умолчанию размер шрифта для <html> равен 16px. При таких условиях 2rem эквивалентны 32px

vh - задаёт размер в процентах от высоты вьюпорта (область страницы, которая видна пользователю). 1vh составляет 1% от высоты

vw - задаёт размер в процентах от ширины вьюпорта. 1vh составляет 1% от ширины

deg — градусы угла

CSS про flex и gridflex

Технология Flexbox используется для разработки гибких систем раскладки (сетки). Позволяет регулировать расположение элементов по одной оси.

Основные понятия:

Флекс-контейнер: элемент, к которому применяется свойство display: flex. Вложенные в него элементы подчиняются правилам раскладки флексов
Флекс-элемент: элемент, вложенный во флекс-контейнер
Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы
Поперечная ось: ось, идущая перпендикулярно основной

Свойства для флекс-контейнера:

display: flex - объявление флекс-контейнера. Теперь элементы внутри будут флекс-элементами

flex-direction:- управление направлением основной оси

flex-wrap: - перенос элементов на другую строку

justify-content: - распределение свободного пространства между элементами по основной оси

align-items: - выравнивание элементов по поперечной оси

align-content: - распределение свободного пространства между элементами по поперечной оси

gap: - отступы между элементами. Могут задаваться отдельно для колонок и строк через column-gap и row-gap соответственно

Подробный гайд про флексбокс

grid

Технология Grid используется так же как и flexbox для разработки гибких систем раскладки (сетки). Позволяет регулировать расположение элементов по двум осям, поэтому считается более удобным чем flex.

Основные понятия:

Грид-контейнер: элемент, к которому применяется свойство display: grid
Грид-элемент: элемент, вложенный в грид-контейнер
Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда)
Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

Свойства для флекс-контейнера:

display: grid - объявление грид-контейнера. Теперь элементы внутри будут грид-элементами

grid-template-columns, grid-template-rows - свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно. Пример: grid-template-columns: 150px auto 40%;

grid-auto-columns, grid-auto-rows - управление неявными рядами и колонками, то есть, если элементов внутри грид-контейнера больше, чем может поместиться в заданные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки.

justify-items: - выравнивание элементов по горизонтали

align-items: - выравнивание элементов по вертикали

grid-area: - указывает элементу какую область он должен занимать в грид-сетке: конкретную область или место между конкретными линиями

Подробный гайд по гридам

Псевдоклассы и элементы

Псевдоэлементы — это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS. Чаще всего используются для создания различных декоративных элементов (которые не несут содержательного смысла). Самый частый сценарий использования псевдоэлемента — наложение оверлея, полупрозрачной заливки поверх картинки. Рассмотрим 2 наиболее используемых:

::before - псевдоэлемент, который идёт до внутреннего содержимого своего родителя. Пример:

<p class="warning">Внимание! Этот абзац является важным предупреждением!</p>

<style>
  .warning::before {
  content: "⚠";
  margin-right: 0.5em;
}
</style>

::after - аналогично before, но идет после элемента

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

Псевдоклассы

Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.

:hover - cостояние элемента, когда на него навели курсор
:not() - находит элемент, который не соответствует селектору, переданному в качестве аргумента
:root - используется для создания переменных в css, которые удобны для переиспользования цветовой палитры на сайте

Адаптивность

При вёрстке адаптивных сайтов часто нужно, чтобы какой-то набор стилей применился только при соблюдении определённых условий. Например, текст должен стать зелёным только при горизонтальной ориентации смартфона. Или блок займёт всю ширину родителя, если ширина экрана больше или равна 1500 пикселям. Для подобных случаев и существуют медиавыражения. Они помогают адаптировать вёрстку под разные экраны и устройства и при этом не писать лишний код.

@media - cайт может подстраиваться под обстоятельства благодаря этой директиве. Например, сделаем элемент с классом block флекс-контейнером, когда ширина экрана 900 пикселей или больше:

@media (min-width: 900px) {
  .block {
    display: flex;
  }
}

Полезные ссылки

CSS

doka - дружелюбная документация-референс о веб-технологиях
MDN - CSS - подробная документация по CSS от Mozilla
CSS Tricks - статьи, советы и руководства по CSS и практикам фронтенд-разработки
Flexbox Froggy - игра, обучающая работе с Flexbox layout
Grid Garden - игра, обучающая работе с Grid layout

Шрифты и иконки

Google Fonts - крупнейшая библиотека бесплатных шрифтов
Google Icons - подраздел Google Fonts, посвящённый иконкам
Phosphor Icons - коллекция бесплатных иконок, сделанных в одном стиле

К списку уроков

Урок 2. Git. CSS. Селектор, классы, стили.