Сделаю один большой тест по CSS, если наберется больше 10 голосов за)
Если вам нужно задать один стиль для всех элементов страницы, используйте селектор *
* { Описание правил стиля }
Кроме селекторов для задания стилей используют псевдоклассы.
Псевдоклассы определяют внешний вид элемента в зависимости от действий пользователя или расположения элемента в DOM.
Например псевдокласс :hover обозначает элемент, на который навели мышью. В примере ниже указано, что при наведении на ссылку ее текст становится красным.
a:hover {
color: red;
}
При помощи CSS можно добавить к тегам элементы, которых нет в html-разметке. Такие элементы называются псевдоэлементами. Их удобно использовать для задания маркеров списка. В примере ниже в качестве маркера элементов списка задан символ ₪ с Юникодом "\20aa ".
li:before {
content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
Если один html-элемент вложен в другой и ему не заданы стили, то для него действуют стили родительского элемента. Это правило называется наследованием.
Как видите способов задания селекторов немало, чтобы не запутаться в них разработчики браузеров придумали правила, по которым браузер определяет приоритет стиля.
Пройдите по ссылкам, в конце каждой статьи есть вопросы для самопроверки😉
#фронтенд_css_урок3
* { Описание правил стиля }
Кроме селекторов для задания стилей используют псевдоклассы.
Псевдоклассы определяют внешний вид элемента в зависимости от действий пользователя или расположения элемента в DOM.
Например псевдокласс :hover обозначает элемент, на который навели мышью. В примере ниже указано, что при наведении на ссылку ее текст становится красным.
a:hover {
color: red;
}
При помощи CSS можно добавить к тегам элементы, которых нет в html-разметке. Такие элементы называются псевдоэлементами. Их удобно использовать для задания маркеров списка. В примере ниже в качестве маркера элементов списка задан символ ₪ с Юникодом "\20aa ".
li:before {
content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
Если один html-элемент вложен в другой и ему не заданы стили, то для него действуют стили родительского элемента. Это правило называется наследованием.
Как видите способов задания селекторов немало, чтобы не запутаться в них разработчики браузеров придумали правила, по которым браузер определяет приоритет стиля.
Пройдите по ссылкам, в конце каждой статьи есть вопросы для самопроверки😉
#фронтенд_css_урок3
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке.
Как вы поняли из предыдущего урока, существует большое разнообразие селекторов.
Чтобы упростить разработчикам жизнь в Яндексе придумали компонентный подход к веб-разработке. В его основе лежит идея разделения интерфейса на независимые блоки.
Каждый из блоков верстается отдельно и его стили не зависят от общих стилей и стилей других блоков.
Для этого каждому блоку и элементам, которые он содержит, задают специальные классы. Эти классы служат селекторами, которые используют для задания стилей в CSS.
БЭМ используют в большинстве современных проектов, поэтому мы будем разбираться с этой методологией на марафоне по верстке.
Рекомендую заранее ознакомиться с теорией БЭМ и разобраться с примерами.
Понятное видео о том зачем нужен БЭМ.
#фронтенд_css_урок4
Как вы поняли из предыдущего урока, существует большое разнообразие селекторов.
Чтобы упростить разработчикам жизнь в Яндексе придумали компонентный подход к веб-разработке. В его основе лежит идея разделения интерфейса на независимые блоки.
Каждый из блоков верстается отдельно и его стили не зависят от общих стилей и стилей других блоков.
Для этого каждому блоку и элементам, которые он содержит, задают специальные классы. Эти классы служат селекторами, которые используют для задания стилей в CSS.
БЭМ используют в большинстве современных проектов, поэтому мы будем разбираться с этой методологией на марафоне по верстке.
Рекомендую заранее ознакомиться с теорией БЭМ и разобраться с примерами.
Понятное видео о том зачем нужен БЭМ.
#фронтенд_css_урок4
Верстка текста и работа со шрифтами в CSS.
Текст один из самых важных источников информации на сайте. От того насколько правильно выбраны шрифты и сверстана типографика будет зависеть сколько времени проведет пользователь на странице.
CSS свойства, которые стилизуют шрифты, делятся на 2 типа:
Font styles - свойства, которые влияют на внешний вид шрифта. Например, размер и жирность, курсив.
Text layout styles - свойства, которые влияют на выравнивание шрифта в блоке, в котором расположен текст. Например, межстрочный интервал, пространство между буквами, выравнивание по левому краю.
Часто используемые font styles:
color - задает цвет текста.
font-family - задает тип шрифта и семейство шрифтов.
В примере ниже параграфу задан красный цвет и шрифт Helvetica. В случае если Helvetica будет недоступен у пользователя, отобразится шрифт Arial, елси и он будет недоступен, отобразится доступный шрифт из семейства sans-serif.
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
font-size - задает размер шрифта в px - пикселях, em - единица измерения равная размеру шрифта родительского элемента.
font-style - задает начертание шрифта, обычный или курсив.
font-weight - жирность, может быть обозначена словом или числом от 100 до 900
text-transform - используют если нужно написать весь текст большими или маленькими буквами.
text-decoration - используют если нужно подчеркнуть или зачеркнуть текст или убрать подчеркивание у ссылки.
text-shadow - задает тень для текста.
Часто используемые layout styles:
text-align - выравнивание текста внутри контейнера.
line-height - интерлиньяж, высота одной строки текста.
letter-spacing - расстояние между буквами.
word-spacing - расстояние между словами.
Примеры работы и полный перечень свойств для стилизации шрифтов.
Веб-безопасные шрифты можно использовать сразу, так как они поддерживаются всеми ОС и браузерами. Остальные нужно подключать на страницу самостоятельно.
Чтобы подключить шрифты используют @правило - @font-face. В примере ниже указано, что наш шрифт будет называться myFont, а символы шрифта будем брать из файла myFont.woff
@font-face {
font-family: "myFont";
src: url("myFont.woff");
}
Пошаговое руководство по подключению шрифтов. #фронтенд_css_урок5
Текст один из самых важных источников информации на сайте. От того насколько правильно выбраны шрифты и сверстана типографика будет зависеть сколько времени проведет пользователь на странице.
CSS свойства, которые стилизуют шрифты, делятся на 2 типа:
Font styles - свойства, которые влияют на внешний вид шрифта. Например, размер и жирность, курсив.
Text layout styles - свойства, которые влияют на выравнивание шрифта в блоке, в котором расположен текст. Например, межстрочный интервал, пространство между буквами, выравнивание по левому краю.
Часто используемые font styles:
color - задает цвет текста.
font-family - задает тип шрифта и семейство шрифтов.
В примере ниже параграфу задан красный цвет и шрифт Helvetica. В случае если Helvetica будет недоступен у пользователя, отобразится шрифт Arial, елси и он будет недоступен, отобразится доступный шрифт из семейства sans-serif.
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
font-size - задает размер шрифта в px - пикселях, em - единица измерения равная размеру шрифта родительского элемента.
font-style - задает начертание шрифта, обычный или курсив.
font-weight - жирность, может быть обозначена словом или числом от 100 до 900
text-transform - используют если нужно написать весь текст большими или маленькими буквами.
text-decoration - используют если нужно подчеркнуть или зачеркнуть текст или убрать подчеркивание у ссылки.
text-shadow - задает тень для текста.
Часто используемые layout styles:
text-align - выравнивание текста внутри контейнера.
line-height - интерлиньяж, высота одной строки текста.
letter-spacing - расстояние между буквами.
word-spacing - расстояние между словами.
Примеры работы и полный перечень свойств для стилизации шрифтов.
Веб-безопасные шрифты можно использовать сразу, так как они поддерживаются всеми ОС и браузерами. Остальные нужно подключать на страницу самостоятельно.
Чтобы подключить шрифты используют @правило - @font-face. В примере ниже указано, что наш шрифт будет называться myFont, а символы шрифта будем брать из файла myFont.woff
@font-face {
font-family: "myFont";
src: url("myFont.woff");
}
Пошаговое руководство по подключению шрифтов. #фронтенд_css_урок5
Стилизация ссылок.
Ссылка это интерактивный элемент, поэтому ее внешний вид зависит от действий пользователя.
Для стилизации состояний используют псевдоклассы:
Псевдокласс :link - состояние по умолчанию.
: visited - посещенная ссылка.
:hover - ссылка, на которую навели курсор мыши.
:focus - ссылка в фокусе, например когда пользователь перешел на ссылку клавишей Tab.
:active - активная ссылка, на которую нажимает пользователь.
По умолчанию все ссылки на сайте подчеркнуты. Непосещенные ссылки синего цвета, посещенные фиолетового и активные красные.
Не обязательно оставлять такие стили на сайте, но рекомендуется делать ссылки подчеркнутыми и стилизовать состояния при помощи псевдоклассов.
Чтобы изменить стили, заданные по умолчанию, используйте свойства color, cursor, outline.
Иногда к ссылкам добавляют иконки. Это можно сделать при помощи псевдоэлемента :before или свойства background.
Иногда ссылки стилизуют, чтоб они выглядели как кнопки, например в меню.
Подробнее о стилизации ссылок с примерами и задачами.
#фронтенд_css_урок6
Ссылка это интерактивный элемент, поэтому ее внешний вид зависит от действий пользователя.
Для стилизации состояний используют псевдоклассы:
Псевдокласс :link - состояние по умолчанию.
: visited - посещенная ссылка.
:hover - ссылка, на которую навели курсор мыши.
:focus - ссылка в фокусе, например когда пользователь перешел на ссылку клавишей Tab.
:active - активная ссылка, на которую нажимает пользователь.
По умолчанию все ссылки на сайте подчеркнуты. Непосещенные ссылки синего цвета, посещенные фиолетового и активные красные.
Не обязательно оставлять такие стили на сайте, но рекомендуется делать ссылки подчеркнутыми и стилизовать состояния при помощи псевдоклассов.
Чтобы изменить стили, заданные по умолчанию, используйте свойства color, cursor, outline.
Иногда к ссылкам добавляют иконки. Это можно сделать при помощи псевдоэлемента :before или свойства background.
Иногда ссылки стилизуют, чтоб они выглядели как кнопки, например в меню.
Подробнее о стилизации ссылок с примерами и задачами.
#фронтенд_css_урок6
👍1
Всем привет!
Сегодня открывается регистрация на марафон по верстке для начинающих веб-разработчиков.
В ходе марафона разберем верстку учебного лендинга и вы сверстаете свой проект для портфолио.
Я буду давать обратную связь и проверять работы.
Мест мало, чтобы все получили максимум пользы.
Программа и варианты участия на сайте http://webinsidepro.tilda.ws/
Сегодня открывается регистрация на марафон по верстке для начинающих веб-разработчиков.
В ходе марафона разберем верстку учебного лендинга и вы сверстаете свой проект для портфолио.
Я буду давать обратную связь и проверять работы.
Мест мало, чтобы все получили максимум пользы.
Программа и варианты участия на сайте http://webinsidepro.tilda.ws/
Если есть вопросы пишите в личные сообщения😉
Всем привет! Сегодня поняла, что сейчас конец месяца и возможно не всем удобно оплачивать участие в марафоне. Если хотите забронировать место, пишите в личку.
Ну а сегодня вечером выложу сюда новый материал по 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
Каскад - расположение правил в файле стилей, которое влияет на то какое правило будет применено к элементу. Для правил с одинаковой специфичностью применится то, которое расположено ниже в файле стилей. В примере ниже, заголовок будет красного цвета.
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
MDN Web Docs
Каскад и наследование - Изучение веб-разработки | MDN
Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.
Раз уж у нас был перерыв давайте сразу 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
Элементы в 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
MDN Web Docs
Блочная модель - Изучение веб-разработки | MDN
В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.
Работа с фоном и границами.
Свойства, которые задают фон начинаются со слова 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
Свойства, которые задают фон начинаются со слова 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
MDN Web Docs
Значения свойств CSS - Изучение веб-разработки | MDN
Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее…
Стилизация изображений, видео и форм.
Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.
Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство 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
Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.
Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство 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
MDN Web Docs
Элементы изображений, медиа и форм - Изучение веб-разработки | MDN
В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований…
Всем привет! Новые материалы на канале будут после 20 сентября. Нам осталось разобрать несколько важных моментов по CSS и я сделаю большое тестирование.
Нужна запись трансляции? Рассказывала про верстку лендинга и сверстала 1 блок.
Запись эфира с разбором верстки лендинга, один блок верстаю онлайн https://youtu.be/f0hxFQTCFNY
YouTube
- YouTube
Всем привет! Я ушла в работу и не выложила ссылки на самые интересные темы по CSS. Исправляюсь.
Большая статья по CSS свойствам display и position.
В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.
А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.
Подробная статья по Flexbox.
Подробная статья по Grid Layout.
Большая статья по CSS свойствам display и position.
В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.
А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.
Подробная статья по Flexbox.
Подробная статья по Grid Layout.
MDN Web Docs
Введение в CSS вёрстку - Изучение веб-разработки | MDN
В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства display, и разберём некоторые концепции, которые будут рассмотрены в этой статье.
А еще я нашла анимированные тренажеры, которые помогут вам научиться работать с Flexbox и Grid Layout.
Тренажер по Flexbox.
Тренажер по Grid Layout.
Тренажер по Flexbox.
Тренажер по Grid Layout.
Codepip
Flexbox Froggy - A game for learning CSS flexbox
Help Froggy and friends by writing CSS code! In this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module that makes layout a breeze. With it you can control alignment, spacing, and wrapping of elements on…