Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 11 из 53 · 11 мин
Маркеры списков, ::marker и состояния ссылок: :link, :visited, :hover, :focus, :active.
Ссылка при наведении темнеет, а маркеры в списке — маленькие ромбики.
И фокус с клавиатуры обязательно видимый. Я хожу Tab-ом.
list-style-typedisc, decimal, none или строка: "☕ ".<style>
ul { list-style-type: "☕ "; }
</style>
<ul><li>Пенал</li><li>Ручка</li></ul>list-style-positionoutside (по умолчанию) или inside — внутри блока пункта.<style>
li { list-style-position: inside; border: 1px solid #c8763a; }
</style>
<ul><li>Внутри</li></ul>list-stylelist-style: none — убрать маркеры совсем.<style>
nav ul { list-style: none; padding: 0; }
</style>
<nav><ul><li>Меню</li><li>Бронь</li></ul></nav>::marker<style>
li::marker { color: #c8763a; }
</style>
<ul><li>Пенал</li><li>Ручка</li></ul>:link<style>
a:link { color: #6b3e26; }
</style>
<a href="#unvisited-xyz">Ссылка</a>:visited<style>
a:visited { color: #8e44ad; }
</style>
<a href="#">Уже посещали</a>:hover<style>
a:hover { color: #c8763a; }
</style>
<a href="#">Наведи на меня</a>:focus<style>
input:focus { outline: 3px solid #c8763a; }
</style>
<input placeholder="Кликни">:active<style>
button:active { transform: translateY(2px); }
</style>
<button>Нажми</button>Порядок для ссылок: :link, :visited, :hover, :focus, :active — иначе правила перебивают друг друга.
Убери у nav ul маркеры (list-style: none), а ссылкам при наведении (nav a:hover) задай цвет #c8763a.
Выберите один ответ.
Какой псевдокласс срабатывает при наведении мыши?
Выберите один ответ.
Почему нельзя убирать видимый фокус без замены?
Проверяем состояние обучения…