CSS-стилизация | Управление ссылками | Разработка веб-сайтов

Введение

В этом практическом занятии мы изучим программирование CSS и научимся стилизовать ссылки без текста. В частности, мы будем использовать псевдо-классы :empty и :not, а также свойство content и функцию attr(), чтобы отобразить URL-адрес ссылки в псевдо-элементе ::before. В конце этого практического занятия вы будете лучше понимать, как управлять внешним видом ссылок на ваших веб-страницах.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35190{{"Стилизация ссылок без текста"}} css/pseudo_classes -.-> lab-35190{{"Стилизация ссылок без текста"}} css/pseudo_elements -.-> lab-35190{{"Стилизация ссылок без текста"}} end

Стилизация ссылок без текста

В ВМ уже предоставлены index.html и style.css.

Для отображения URL-адреса для ссылок, которые не содержат текст, вы можете использовать псевдо-класс :empty для выбора таких ссылок, псевдо-класс :not для исключения ссылок с текстом и свойство content в сочетании с функцией attr(), чтобы отобразить URL-адрес ссылки в псевдо-элементе ::before. Вот пример фрагмента кода:

<a href="https://30secondsofcode.org"></a>

a[href^="http"]:empty::before {
  content: attr(href);
}

Пожалуйста, нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие "Стилизация ссылок без текста". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.