Напишите, пожалуйста, как вам такой формат?👆 Краткое описание в посте со ссылками на подробную информацию.
Сегодня поговорим о гиперссылках, главной фишке, благодаря которой работает Интернет.
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
YouTube
Ссылки вокруг блоков — HTML Шорты
Рассказываем, можно ли оборачивать ссылкой блочные элементы и как правильно писать код по Спецификации.
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Структура сайта. Валидация html-документов.
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
MDN Web Docs
Структура документа и веб-сайта - Изучение веб-разработки | MDN
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка…
Inside Pro | Елизавета К pinned «Привет ребята! Нас собралось уже больше 100 человек и пришло время наполнить этот канал смыслом😀 Я создала карту развития фронтенд-разработчика и буду выкладывать по ней бесплатные материалы для самообучения. Я придерживаюсь структурного и поэтапного подхода…»
Сегодня поговорим о важной составляющей сайтов, изображениях и работе с ними.
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Сегодня поговорим о самом важном элементе взаимодействия пользователя с сайтом, HTML-формах.
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
В зависимости от того какой тип вы зададите в атрибуте type тега <input> элемент управления будет выглядеть по разному. В примере выше type=”text” обозначает поле для ввода текста.
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Сегодня готовлю первый пост по CSS. А пока ловите дополнительный полезный материал по работе с изображениями👇
Векторная графика.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
Отзывчивые (responsive) изображения - изображения, которые хорошо отображаются на любых устройствах, компьютер, планшет, мобильный.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.
Знакомство с CSS.
CSS - каскадные таблицы стилей. С их помощью веб-разработчики задают внешний вид страницы.
Файл таблицы стилей имеет разрешение .css и состоит из набора правил, описывающих как будут выглядеть части страницы. Давайте рассмотрим простое правило на картинке в начале поста.
Для того, чтобы задать css-правило укажите селектор - тег или идентификатор тега (class или id).
В нашем случае в качестве селектора указан тег заголовка h1.
Дальше в фигурных скобках указывают “свойство тега: значение тега;”
Для одного тега можно указать сколько угодно свойств, в нашем случае 2, цвет шрифта - красный и размер шрифта 5em.
Разработкой правил CSS занимается Рабочая группа CSS в соответствие стандартам W3C.
Разработчики браузеров стараются поддерживать корректную работу всех CSS правил, но на это нужно время. Проверить какие браузеры поддерживают нужное правило можно в Руководстве по CSS.
#фронтенд_css_урок1
CSS - каскадные таблицы стилей. С их помощью веб-разработчики задают внешний вид страницы.
Файл таблицы стилей имеет разрешение .css и состоит из набора правил, описывающих как будут выглядеть части страницы. Давайте рассмотрим простое правило на картинке в начале поста.
Для того, чтобы задать css-правило укажите селектор - тег или идентификатор тега (class или id).
В нашем случае в качестве селектора указан тег заголовка h1.
Дальше в фигурных скобках указывают “свойство тега: значение тега;”
Для одного тега можно указать сколько угодно свойств, в нашем случае 2, цвет шрифта - красный и размер шрифта 5em.
Разработкой правил CSS занимается Рабочая группа CSS в соответствие стандартам W3C.
Разработчики браузеров стараются поддерживать корректную работу всех CSS правил, но на это нужно время. Проверить какие браузеры поддерживают нужное правило можно в Руководстве по CSS.
#фронтенд_css_урок1
Чтоб добавить файл стилей на страницу, укажите ссылку на него в теге <head>
Вы можете задать одинаковое правило нескольким элементам страницы, для этого перечислите их через запятую, а дальше укажите правило в фигурных скобках. Например, правило ниже задает размер шрифта 14 пикселей для параграфов и списков.
p, ul {
font-size: 14px;
}
Если вы хотите стилизовать конкретный элемент, задайте ему атрибут class в html, тогда стили будут выглядеть как показано в примере ниже. Здесь задаем элементу с классом section верхний и нижний внутренние отступы 100 пикселей и боковые отступы 0.
.section {
padding: 100px 0;
}
Подробнее о стилизации элементов.
Браузеры по-умолчанию задают базовые стили для страницы. Если они вам не подходят, замените своими. С этой проблемой разработчики сталкиваются давно и придумали универсальные методы сброса браузерных стилей. #фронтенд_css_урок1
Вы можете задать одинаковое правило нескольким элементам страницы, для этого перечислите их через запятую, а дальше укажите правило в фигурных скобках. Например, правило ниже задает размер шрифта 14 пикселей для параграфов и списков.
p, ul {
font-size: 14px;
}
Если вы хотите стилизовать конкретный элемент, задайте ему атрибут class в html, тогда стили будут выглядеть как показано в примере ниже. Здесь задаем элементу с классом section верхний и нижний внутренние отступы 100 пикселей и боковые отступы 0.
.section {
padding: 100px 0;
}
Подробнее о стилизации элементов.
Браузеры по-умолчанию задают базовые стили для страницы. Если они вам не подходят, замените своими. С этой проблемой разработчики сталкиваются давно и придумали универсальные методы сброса браузерных стилей. #фронтенд_css_урок1
Структура CSS.
Стили, которые вы задаете в файле .css имеют приоритет, который зависит от места расположения и типа селектора.
Например, в примере ниже, содержимое параграфа <p class=”blue”> будет красного цвета. Так как правило, которое задает красный цвет расположено ниже.
p {
color: blue;
}
p {
color: red;
}
В следующем примере содержимое параграфа <p class=”blue”> будет синим, так как приоритет стиля, с селектором-классом выше чем стиля с селектором-тегом.
.blue {
color: blue;
}
p {
color: red;
}
Все css-правила состоят из набора пар “свойство: значение;”. Свойства и значения всегда пишутся с маленькой буквы. Значения чаще всего бывают в форме числа или слова, но CSS также позволяет задавать простые математические выражения в качестве значений, как в примере ниже.
.box {
width: calc(90% - 30px);
}
Помимо стилей, которые мы задаем селекторам в CSS есть @правила. Например, ниже задано медиа-выражение, которое делает синий цвет фона для страниц с минимальной шириной окна 30em.
@media (min-width: 30em) {
body { background-color: blue; }
}
Подробнее о том, как правильно оформлять файлы стилей.
Прежде чем применить CSS-стили к HTML-разметке браузер преобразует разметку в DOM-дерево, объектную модель документа.
Подробнее о том, как браузер применяет стили.
В прошлом посте я упоминала о том, что новые css-свойства поддерживают не все браузеры. Поэтому некоторым свойствам нужно добавлять браузерные префиксы:
-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer, Microsoft Edge.
Ниже пример использования.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Современные редакторы, например VSCode поддерживают автоматическую установку префиксов.
#фронтенд_css_урок2
Стили, которые вы задаете в файле .css имеют приоритет, который зависит от места расположения и типа селектора.
Например, в примере ниже, содержимое параграфа <p class=”blue”> будет красного цвета. Так как правило, которое задает красный цвет расположено ниже.
p {
color: blue;
}
p {
color: red;
}
В следующем примере содержимое параграфа <p class=”blue”> будет синим, так как приоритет стиля, с селектором-классом выше чем стиля с селектором-тегом.
.blue {
color: blue;
}
p {
color: red;
}
Все css-правила состоят из набора пар “свойство: значение;”. Свойства и значения всегда пишутся с маленькой буквы. Значения чаще всего бывают в форме числа или слова, но CSS также позволяет задавать простые математические выражения в качестве значений, как в примере ниже.
.box {
width: calc(90% - 30px);
}
Помимо стилей, которые мы задаем селекторам в CSS есть @правила. Например, ниже задано медиа-выражение, которое делает синий цвет фона для страниц с минимальной шириной окна 30em.
@media (min-width: 30em) {
body { background-color: blue; }
}
Подробнее о том, как правильно оформлять файлы стилей.
Прежде чем применить CSS-стили к HTML-разметке браузер преобразует разметку в DOM-дерево, объектную модель документа.
Подробнее о том, как браузер применяет стили.
В прошлом посте я упоминала о том, что новые css-свойства поддерживают не все браузеры. Поэтому некоторым свойствам нужно добавлять браузерные префиксы:
-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer, Microsoft Edge.
Ниже пример использования.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Современные редакторы, например VSCode поддерживают автоматическую установку префиксов.
#фронтенд_css_урок2
И на десерт видео о том, что один сайт может выглядеть по разному в разных браузерах и это нормально.
После изучения этого и предыдущего поста, потренируйтесь стилизовать страницы на практике.
После изучения этого и предыдущего поста, потренируйтесь стилизовать страницы на практике.
В предыдущем посте я рассказывала о том, что все стили записывают в формате:
селектор {свойство: значение;}
В качестве селекторов выступают теги, классы и идентификаторы.
Эти селекторы можно сочетать друг с другом, чтобы задать специфические правила.
Такие сочетания делятся на:
Контекстные селекторы используют для того чтобы задать стиль тегу, который находится внутри другого тега.
Тег1 Тег2 { ... }
Соседние селекторы используют для задания стилей тегам, которые идут друг за другом.
Селектор 1 + Селектор 2 { Описание правил стиля }
Дочерние селекторы используют для задания стилей тегу, который находится на первом уровне вложенности у родителя.
<div><p><b></b></p></div> - <p> дочерний для <div>, <b> дочерний для <p>.
Селектор 1 > Селектор 2 { Описание правил стиля }
Селекторы атрибутов используют для задания стилей тегу с определенным атрибутом.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
#фронтенд_css_урок3
селектор {свойство: значение;}
В качестве селекторов выступают теги, классы и идентификаторы.
Эти селекторы можно сочетать друг с другом, чтобы задать специфические правила.
Такие сочетания делятся на:
Контекстные селекторы используют для того чтобы задать стиль тегу, который находится внутри другого тега.
Тег1 Тег2 { ... }
Соседние селекторы используют для задания стилей тегам, которые идут друг за другом.
Селектор 1 + Селектор 2 { Описание правил стиля }
Дочерние селекторы используют для задания стилей тегу, который находится на первом уровне вложенности у родителя.
<div><p><b></b></p></div> - <p> дочерний для <div>, <b> дочерний для <p>.
Селектор 1 > Селектор 2 { Описание правил стиля }
Селекторы атрибутов используют для задания стилей тегу с определенным атрибутом.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
#фронтенд_css_урок3
Сделаю один большой тест по 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