Задания: CSS селекторы

Задания: CSS селекторы

Ягоды: малина

Ягоды: малина

Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id.

Задания: CSS селекторы

  1. Используйте селекторы по атрибуту, чтобы покрасить все гиперссылки, которые ведут на ведущие социальные сети
  2. Задание по верстке альтернативное предыдущему: Сверстайте фрагмент HTML-страницы, содержащий текст с гиперссылками, часть из которых ведет на социальные сети. У каждой ссылки на соцсеть, нарисуйте пиктограмму.
  3. Используйте селекторы псевдокласов, чтобы раскрасить ненумерованый список «зеброй»
  4. Используйте селектор псевдокласса для окраски всех пустых HTML-элементов div на странице
  5. Используйте псевдокласс, для окраски HTML-элемента на странице, атрибут id которого совпадает с хэшем адреса страницы.
  6. * Реализуйте эффект галереи, без использования JavaScript. Примечание: для работы пригодится псевдокласс из предыдущего задания и умение работать с позиционированием.
  7. ** Создайте эффект лайтбокса, не используя JavaScript. Примечание: Задание не простое. Лучше пропустите и вернитесь к нему позже, после изучения / повторения работы с позиционированием и анимацией
  8. Покрасьте при помощи контекстных селекторов все дочерние элементы других элементов. Примечание: помните о разнице в работе селекторов дочерних элементов и элементов потомков
  9. Создайте небольшие изображения рядом со всеми ссылками на странице. Используйте для этого спрайтовое изображение.
  10. Применительно CSS стили к тем HTML-элементам текста, которые содержат слово «htmllab». Примечание: сначала нужно создать разметку и разместить в произвольный элемент это слово.
  11. Используя псевдокласс, реализуйте реакцию на наведение мыши на HTML-элементы.
  12.  Напишите стили оформления страницы перед печатью
  13. При помощи псевдокласса :hover создайте тень у гиперссылки

Все задания по HTML


Об авторе

@altarasov administrator

Вы должны быть авторизованы, чтобы оставить комментарий.