Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id.
Задания: CSS селекторы
- Используйте селекторы по атрибуту, чтобы покрасить все гиперссылки, которые ведут на ведущие социальные сети
- Задание по верстке альтернативное предыдущему: Сверстайте фрагмент HTML-страницы, содержащий текст с гиперссылками, часть из которых ведет на социальные сети. У каждой ссылки на соцсеть, нарисуйте пиктограмму.
- Используйте селекторы псевдокласов, чтобы раскрасить ненумерованый список «зеброй»
- Используйте селектор псевдокласса для окраски всех пустых HTML-элементов div на странице
- Используйте псевдокласс, для окраски HTML-элемента на странице, атрибут id которого совпадает с хэшем адреса страницы.
- * Реализуйте эффект галереи, без использования JavaScript. Примечание: для работы пригодится псевдокласс из предыдущего задания и умение работать с позиционированием.
- ** Создайте эффект лайтбокса, не используя JavaScript. Примечание: Задание не простое. Лучше пропустите и вернитесь к нему позже, после изучения / повторения работы с позиционированием и анимацией
- Покрасьте при помощи контекстных селекторов все дочерние элементы других элементов. Примечание: помните о разнице в работе селекторов дочерних элементов и элементов потомков
- Создайте небольшие изображения рядом со всеми ссылками на странице. Используйте для этого спрайтовое изображение.
- Применительно CSS стили к тем HTML-элементам текста, которые содержат слово «htmllab». Примечание: сначала нужно создать разметку и разместить в произвольный элемент это слово.
- Используя псевдокласс, реализуйте реакцию на наведение мыши на HTML-элементы.
- Напишите стили оформления страницы перед печатью
- При помощи псевдокласса :hover создайте тень у гиперссылки
Все задания по HTML