Ну а сегодня вечером выложу сюда новый материал по CSS)

Каскад, специфичность и наследование в CSS.

Каскад - расположение правил в файле стилей, которое влияет на то какое правило будет применено к элементу. Для правил с одинаковой специфичностью применится то, которое расположено ниже в файле стилей. В примере ниже, заголовок будет красного цвета.

h1 {
color: blue;
}

h1 {
color: red;
}

Специфичность - количество элементов страницы, которые охватывает селектор. Например, специфичность селектора h2 меньше чем h2.blue.
Правило h2 {} применится ко всем заголовкам h2 на странице, а h2.blue только к заголовкам h2 с классом blue.

Более специфичные правила перекрывают менее специфичные даже если они расположены выше в файле стилей. В примере ниже h1 будет синего цвета.

h1.blue {
color: blue;
}

h1 {
color: red;
}

Наследование - когда дочерний элемент наследует стили родительского. Не все CSS-правила наследуются.

Изучите эти понятия подробнее на примерах.
#фронтенд_css_урок7

Раз уж у нас был перерыв давайте сразу 2 поста) Тем более, что следующая тема очень важная.

Блоки в CSS.

Элементы в CSS заключены в блоки. Понимание того как блоки располагаются и ведут себя на странице ключ к созданию качественной верстки.

По умолчанию элементы страницы ведут себя как блочные либо как строчные. Такое поведение называется обычным порядком или normal flow.

Блочные элементы, например div и p:
Заполняют всю ширину родительского контейнера.
Располагаются один под другим.
К ним применяются свойства width и height.
Отступы блоков margin и padding отодвигают соседние блоки.

Строчные элементы, например a, strong:
Имеют ширину равную ширине содержимого.
Располагаются друг за другом.
К ним не применяются свойства width и height.
Отступы не отодвигают соседние блоки.

Обычный порядок порядок можно изменить, если изменить свойство display элемента, например на flex или grid.

Сетка страницы строится на блочных элементах. Ниже свойства, которые влияют на расположение блочного элемента:

width, height - ширина и высота;
border - рамка;
padding - внутренние отступы, расстояние между границей блока и его содержимым;
margin - внешние отступы, расстояние между блоками;

В стандартной блочной модели итоговая ширина блока равна width + border + padding.

Разработчикам удобно задать итоговую ширину, а не высчитывать сумму, поэтому существует альтернативная блочная модель. В ней ширина блока постоянна, а ширина содержимого равна width - border - padding.

Чтобы использовать альтернативную блочную модель задайте блоку свойство box-sizing: border-box.

Если вы хотите использовать альтернативную блочную модель для всех элементов добавьте правило:

html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
Подробнее о блочной модели на примерах.
#фронтенд_css_урок8

Работа с фоном и границами.

Свойства, которые задают фон начинаются со слова background, они включают:

background-color - цвет фона.
background-image - фоновое изображение.
Если добавлены оба эти свойства, то фоновое изображение всегда будет над цветом.

background-repeat - задает повторение фона. Если фоновое изображение меньше своего блока, то по-умолчанию оно будет повторяться пока не заполнит весь блок.

background-size - размер фонового изображения. Может быть в процентах, пикселях, значение cover - заполняет блок с сохранением пропорций изображения, contain - заполняет блок без сохранения пропорций.

background-position - расположение фонового изображения. Может быть в процентах, пикселях или обозначено словом, top, center, left, right, bottom.

В качестве фона можно задать линейный или радиальный градиент, указав свойство background-image: linear-gradient() или background-image: radial-gradient().

Чтобы задать элементу границу (рамку) используют свойство border.

border-width - толщина границы.
border-style - тип линии, например solid - сплошная.
border-radius - радиус скругления углов блока.

Примеры работы с фоновыми изображениями и границами.
#фронтенд_css_урок9

Чтобы лучше понимать какие значения бывают у разных свойств читайте статью https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units

Стилизация изображений, видео и форм.

Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.

Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство max-width: 100%.

Чтобы изображение заполнило весь блок можно задать ему свойство object-fit: cover. Тогда части, которые не влезли в блок обрезаются.

Если изображение или видео находятся в grid или flex блоке оно не растягивается на весь родительский блок в отличие от других элементов.
Чтобы их растянуть нужно задать width: 100% и height: 100%.

Элементы форм самая сложная для стилизации часть страниц.

С простыми формами, состоящими только из полей <input type=”text”> и кнопки проблем не возникает, но другие типы полей ввода определяются операционной системой и не доступны для стилизации.

Еще одна проблема в том, что браузеры не имеют стандарта относительно стилей форм, а базовые стили страниц не применяются к ним по умолчанию. Поэтому стили для форм лучше задать отдельно.

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

button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0; margin: 0;
}

textarea {
overflow: auto;
}

Примеры стилизации изображений, видео и форм.
Подробная статья о стилизации форм на английском. Думаю перевести ее в свободное время)
#фронтенд_css_урок10

Всем привет! Новые материалы на канале будут после 20 сентября. Нам осталось разобрать несколько важных моментов по CSS и я сделаю большое тестирование.

Нужна запись трансляции? Рассказывала про верстку лендинга и сверстала 1 блок.

Запись эфира с разбором верстки лендинга, один блок верстаю онлайн https://youtu.be/f0hxFQTCFNY

Всем привет! Я ушла в работу и не выложила ссылки на самые интересные темы по CSS. Исправляюсь.

Большая статья по CSS свойствам display и position.

В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.

А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.

Подробная статья по Flexbox.

Подробная статья по Grid Layout.

А еще MDN любезно собрал посты по HTML, CSS и JS в бесплатный курс по фронтенд разработке.

А еще я нашла анимированные тренажеры, которые помогут вам научиться работать с Flexbox и Grid Layout.

Тренажер по Flexbox.

Тренажер по Grid Layout.

Ребята всем привет! Я наконец-то выложила первое видео на Ютуб😱 Скро будет много годного контента, приходите смотреть😉https://youtu.be/_Ji4TsuOeIc

Ребята, всех с наступающим Новым Годом! Желаю вам профессиональных успехов😉

Новый видосик на канале😉 Буду рада получить фидбек) https://youtu.be/JRXEkmLBKuQ

Всем привет! По Инету ходят новости, что AppStore может удалить ТГ. Если у вас Айфон, проверьте чтоб было отключено автоудаление.

Apple возможно опять удалит Телеграм из appstore, не забудьте убрать автоудаление приложений!

Инструкция:

1. Настройки
2. Экранное время
3. Контент и конфиденциальность
4. Покупки iTunes Store и App Store
5. Удаление приложений
6. Нажать “нет”.

Android не умеет удалять принудительно приложения.

@matrixofdata

Статья для тех кто еще раздумывает стоит ли изучать веб-разработку в 2021) https://vc.ru/hr/189368-kakie-problemy-s-naymom-v-it-zhdut-v-2021-godu

Всем привет! Выложила новое видео о трендах в вебе на 2021 https://youtu.be/Wwv8ic5cDvM