Селекторы по тегам и по классам
Помните, на втором шаге мы познакомились с селекторами по тегам и по классам? И даже попробовали стилизовать один из тегов — nav . Наш проект растёт, количество стилей увеличивается, поэтому пришло время разобраться, как лучше использовать эти селекторы, чтобы избежать ошибок в будущем.
Представьте, что вам нужно застилизовать список, ul . Казалось бы, можно сделать вот так и дело с концом:
Но вот незадача, на странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.
Нашу проблему отлично решает использование селектора по классу. Добавив нужный класс к элементу разметки, мы будем уверены, что стили применятся именно к этому элементу и ни к какому больше.
Давайте проведём небольшое улучшение кода и в CSS-правиле для навигации заменим селектор по тегу на селектор по классу.
Сайт начинающего верстальщика
Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.
Моё первое задание — вести дневник и честно писать обо всех своих свершениях.
Классы в CSS
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Что ж, конспект мы снова раскрасили, но какой ценой. Давайте признаем, что добавлять внутрь абзацев дополнительные теги и раскрашивать текст с их помощью, не самое лучшее решение. Ну, а какое решение хорошее?
Такое решение есть и оно называется «классы»!
Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.
Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.
Класс — это всего лишь один из атрибутов HTML-тегов, например:
В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:
.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"Классы гибкие, их можно создавать много и называть понятными именами. Например, можно создать класс, который отмечает раздел курса, который сейчас изучается.
Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.
Конспект курса
Парные теги.
Одиночные теги.
Атрибуты тегов.
Инлайновые (встроенные) стили.
Внешние стили.
Стилизация по классам.
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Переделываем всё c нормальными классами:
- Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
- Первым четырём абзацам добавьте класс learned-ok .
- Пятому абзацу добавьте класс learning-in-progress .
- Шестому абзацу добавьте класс not-learned .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
Практикум
Профессии
- HTML и CSS.
Профессиональная вёрстка сайтов - HTML и CSS.
Адаптивная вёрстка и автоматизация - JavaScript.
Профессиональная разработка веб-интерфейсов - JavaScript.
Архитектура клиентских приложений - React.
Разработка сложных клиентских приложений - Node.js.
Профессиональная разработка REST API - Node.js и Nest.js.
Микросервисная архитектура - TypeScript. Теория типов
- Алгоритмы и структуры данных
- Паттерны проектирования
- Webpack
- Vue.js 3. Разработка клиентских приложений
- Git и GitHub
- Анимация для фронтендеров
Информация
Добавляем класс элементу с помощью classList.add
Мы отключили светлую тему, и страница сразу потускнела. Теперь нужно включить тёмную тему, добавив элементу page класс dark-theme . Для этого воспользуемся методом classList.add :
Этот метод добавляет элементу класс, указанный в скобках.
JavaScript выполняет инструкции последовательно, сверху вниз. Вот что произойдёт, когда мы добавим инструкции и запустим наш скрипт:
При этом, если вы заглянете в index.html , то увидите, что ничего не изменилось: класс light-theme по-прежнему на месте, а dark-theme отсутствует. Почему так? Дело в том, что скрипт не меняет исходный файл с разметкой, но, выполняя инструкции, меняет страницу прямо в браузере пользователя.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 18 сентября по 20 ноября 2023. Только 3 дня цена 19 900 ₽ 22 900 ₽
