CSS-селекторы: освойте базовые техники стилизации

Введение

Добро пожаловать в лабораторию основ CSS-селекторов! Cascading Style Sheets (CSS) — это краеугольная технология Всемирной паутины, используемая для описания представления документа, написанного на языке разметки, таком как HTML.

CSS-селекторы — это шаблоны, используемые для выбора и стилизации HTML-элементов, которые вы хотите. Освоение селекторов — фундаментальный навык для любого веб-разработчика. В этой лаборатории вы научитесь использовать наиболее распространенные типы CSS-селекторов для стилизации простой веб-страницы.

Вы будете практиковаться в использовании:

Селектор по элементу (Element Selector): Выбирает элементы по их имени тега.
Классовый селектор (Class Selector): Выбирает элементы с определенным атрибутом class.
Селектор по ID (ID Selector): Выбирает один элемент с определенным атрибутом id.
Группирующий селектор (Grouping Selector): Применяет одинаковые стили к нескольким селекторам.
Селектор потомка (Descendant Selector): Выбирает элементы, которые являются потомками другого элемента.

Среда лаборатории предварительно настроена с файлом index.html. Ваша задача — написать CSS-код в файле styles.css для стилизации страницы. Вы можете просматривать изменения в реальном времени, переключившись на вкладку Web 8080 в верхнем левом углу интерфейса.

Используйте селектор элементов для тега p

На этом шаге вы будете использовать селектор по элементу для применения стиля ко всем элементам <p> (параграф) на странице. Селекторы по элементу — это самый базовый тип селекторов; они выбирают HTML-элементы на основе их имени тега.

Сначала найдите файл styles.css в файловом проводнике слева от вашего WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Теперь добавьте следующий CSS-код в файл styles.css. Это правило выберет все элементы <p> и изменит цвет их текста на синий.

p {
  color: blue;
}

После добавления кода сохраните файл (можно использовать Ctrl+S или Cmd+S). Чтобы увидеть эффект, щелкните по вкладке Web 8080. Вы должны увидеть, что текст всех трех параграфов на странице стал синим.

p tag

Примените селектор класса с .classname

На этом шаге вы научитесь использовать классовый селектор. Классовые селекторы более специфичны, чем селекторы по элементу. Они выбирают элементы на основе значения их атрибута class. Классовый селектор пишется с точкой (.), за которой следует имя класса.

В вашем файле index.html один из параграфов имеет атрибут class="highlight". Мы будем нацеливаться на этот конкретный параграф.

Добавьте следующее правило CSS в ваш файл styles.css. Оно выберет любой элемент с классом highlight и задаст ему желтый фон.

.highlight {
  background-color: yellow;
}

Сохраните файл styles.css и переключитесь на вкладку Web 8080, чтобы увидеть ваши изменения. Вы заметите, что только параграф с текстом "This is a special paragraph with a class" теперь имеет желтый фон, в то время как другие параграфы остаются без изменений.

highlight tag

Реализуйте селектор ID с #idname

На этом шаге мы будем использовать селектор по ID. Селекторы по ID еще более специфичны, чем классовые селекторы. Они используются для выбора одного уникального элемента с определенным атрибутом id. Селектор по ID пишется с символом решетки (#), за которым следует ID элемента. Помните, что ID должен быть уникальным в пределах одной HTML-страницы.

Элемент <h1> в index.html имеет id="main-title". Давайте стилизуем его.

Добавьте следующее правило CSS в ваш файл styles.css. Это правило увеличит размер шрифта основного заголовка и добавит под ним сплошную черную линию.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

Сохраните файл и проверьте вкладку Web 8080. Вы должны увидеть, что основной заголовок "Welcome to Our Page" теперь больше и под ним есть линия. Этот стиль применяется только к элементу с ID main-title.

main title

Объедините селекторы с помощью запятой для группировки

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

Предположим, мы хотим применить одинаковый шрифт как к элементам <h1>, так и к <h2> на нашей странице. Вместо написания двух отдельных правил, мы можем сгруппировать их.

Добавьте следующее правило CSS в ваш файл styles.css.

h1,
h2 {
  font-family: Arial, sans-serif;
}

Это правило указывает браузеру применить указанный font-family ко всем элементам <h1> И ко всем элементам <h2>.

Сохраните файл и обновите вкладку Web 8080. Посмотрите, как изменился шрифт как для "Welcome to Our Page", так и для "About CSS".

Добавьте селектор потомка, например div p

На этом шаге вы будете использовать селектор потомка. Этот селектор соответствует всем элементам, которые являются потомками указанного элемента. Селектор потомка создается путем перечисления двух или более селекторов, разделенных пробелом.

В нашем файле index.html есть элемент <p> внутри <div>. Мы хотим стилизовать только этот конкретный параграф, а не другие параграфы на странице.

Добавьте следующее правило CSS в ваш файл styles.css. Селектор div p выберет любой элемент <p>, который находится где-либо внутри элемента <div>.

div p {
  font-style: italic;
}

После сохранения файла перейдите на вкладку Web 8080. Вы увидите, что только параграф "This paragraph is inside a div..." теперь написан курсивом. Два других параграфа остались без изменений, потому что они не являются потомками <div>.

div p tag

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно изучили и применили основные CSS-селекторы для стилизации веб-страницы.

В этой лабораторной работе вы практиковались в использовании:

Селектора элементов (p): для стилизации всех элементов определенного типа.
Селектора классов (.highlight): для стилизации конкретных элементов, имеющих общий класс.
Селектора ID (#main-title): для стилизации одного уникального элемента.
Группирующего селектора (h1, h2): для эффективного применения одинаковых стилей к нескольким элементам.
Селектора потомка (div p): для стилизации элементов на основе их положения внутри другого элемента.

Эти селекторы являются основой для создания сложных и красивых макетов веб-страниц. Теперь вы можете использовать их для точного контроля внешнего вида ваших HTML-документов.

Основы CSS-селекторов