Упражнение — селекторы

  • 6 мин

В предыдущем упражнении вы применили стиль к таким элементам, как html и h1. Часто вам нужно быть немного более узким в стиле нанесения.

В этом упражнении вы зададите стиль для разделов и ссылок социальных сетей и опыта на странице.

Применение стиля к классам и идентификаторам

Вы начинаете с определения стиля для разделов социальных сетей и впечатлений.

  1. Вернитесь к окну vscode.dev, используемому в предыдущем упражнении.

  2. Внутри index.htmlобратите внимание на section элемент с идентификатором социальной сети в строке 10; вы применяете стиль к этому разделу, чтобы установить цвет на синий.

  3. В конце style.css добавьте следующий CSS, чтобы задать цвет элемента социальных сетей :

    #social-media {
    color: blue;
}

  4. Страница обновится, в результате чего контент в разделе социальных сетей станет синим.

  5. Внутри index.htmlобратите внимание на два раздела в строках 28 и 32 с опытом класса; Стиль применяется к этим разделам, чтобы выделить шрифт курсивом.

  6. В конце style.css добавьте следующий CSS для изменения шрифта элементов с классом интерфейса :

    .experience {
    font-style: italic;
}

  7. Страница обновится, и интерфейс шрифта внутри будет выделен курсивом.

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

  1. В конце style.css добавьте следующий CSS-код, чтобы задать ссылки всегда зелеными:

    a:visited {
    color: green;
}

a:link {
    color: green;
}

  2. Страница обновляется для отображения ссылок зеленым цветом.

  3. Добавьте следующий CSS в конец style.css , чтобы выделить ссылки при наведении указателя мыши:

    a:hover {
    background-color: yellow;
}

  4. Наведите указатель мыши на ссылки на страницу и обратите внимание, что ссылки выделены.

Отзыв

На следующем снимка экрана показаны результаты примененного CSS. Вы использовали классы, идентификаторы и псевдоклассы для применения стилей к определенным элементам и логическим группам элементов.

Снимок экрана отрисовки в браузере CSS, примененного к коду HTML.