Назад Вперед Зміст

ПРАКТИЧНА РОБОТА № 5

Обов’язково збережіть файл myIndexVar_N.html і файл талиці для стилів my.css

Вони знадобляться ще у кількох практичних роботах!!!

📖 Про цю практику

Ця сторінка містить 6 практичних завдань на використання CSS селекторів, класів та псевдокласів. Кожне завдання демонструє різні підходи до стилізації елементів.

💡 Порада: Спочатку спробуйте самостійно написати CSS код, а потім перевірте себе за допомогою кнопки "Показати підказку".

Варіант 1

📝 Завдання:

Створити різні стилі для заголовків h2 залежно від їх класу та налаштувати стани посилань з використанням псевдокласів.

⚡ Вимоги:

  • Заголовки h2 двох класів: для посилань - ліворуч, інші - по центру
  • Невідвідані посилання: коричневі, без підкреслення (:link)
  • Відвідані посилання: сині (:visited)
  • При наведенні: червоні, з підкресленням (:hover)
  • Абзаци двох класів: перший та третій - курсив, 12пт

Посилання

Невідвідане посилання 1

Відвідане посилання

Звичайний заголовок

Перший абзац - курсив, 12пт

Другий абзац - звичайний стиль

Третій абзац - курсив, 12пт

Четвертий абзац - звичайний стиль

styles.css ✓ Робочий код 
/* Заголовки h2 з різними класами */
h2.links-title {
    text-align: left;
    color: #8B4513;
}

h2.other-title {
    text-align: center;
    color: #2c3e50;
}

/* Стани посилань */
a:link {
    color: brown;
    text-decoration: none;
}

a:visited {
    color: blue;
}

a:hover {
    color: red;
    text-decoration: underline;
}

/* Абзаци з різними класами */
p.odd {
    font-style: italic;
    font-size: 12pt;
}

p.even {
    font-weight: normal;
    font-size: 14pt;
}

Варіант 2

📝 Завдання:

Налаштувати стилі заголовків та посилань з використанням специфічних кольорів та різних класів для абзаців.

⚡ Вимоги:

  • Заголовки h2: для посилань - ліворуч, інші - по центру
  • Невідвідані посилання: gold, без підкреслення
  • Відвідані посилання: coral
  • При наведенні: сині, з підкресленням
  • Абзаци: другий та четвертий - жирний, 12пт

Посилання

Невідвідане посилання 1

Відвідане посилання

Звичайний заголовок

Перший абзац - звичайний стиль

Другий абзац - жирний, 12пт

Третій абзац - звичайний стиль

Четвертий абзац - жирний, 12пт

styles.css ✓ Робочий код 
/* Заголовки h2 */
h2.links-title {
    text-align: left;
    color: #8B4513;
}

h2.other-title {
    text-align: center;
    color: #2c3e50;
}

/* Стани посилань */
a:link {
    color: gold;
    text-decoration: none;
}

a:visited {
    color: coral;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

/* Абзаци */
p.even {
    font-weight: bold;
    font-size: 12pt;
}

p.odd {
    font-weight: normal;
    font-size: 14pt;
}

Варіант 3

📝 Завдання:

Створити стилі для центрованих заголовків, посилань у вигляді заголовків та непарних абзаців.

⚡ Вимоги:

  • Заголовки h2: по центру (через клас)
  • Посилання: як заголовки h2, вирівняні ліворуч
  • Невідвідані посилання: коричневі, без підкреслення
  • При наведенні: червоні, з підкресленням
  • Відвідані: сині, без підкреслення
  • Абзаци 1 та 3: курсив, 12пт

Основний заголовок

Корисні посилання

Невідвідане посилання

Відвідане посилання

Перший абзац (непарний) - курсив, 12пт

Другий абзац (парний) - звичайний стиль

Третій абзац (непарний) - курсив, 12пт

styles.css ✓ Робочий код 
/* Заголовки */
h2.center-title {
    text-align: center;
    color: #2c3e50;
}

h2.links-title {
    text-align: left;
    color: #8B4513;
}

/* Стани посилань */
a:link {
    color: brown;
    text-decoration: none;
}

a:visited {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

/* Непарні абзаци */
p.odd {
    font-style: italic;
    font-size: 12pt;
}

Варіант 4

📝 Завдання:

Налаштувати стилі з використанням жовтого кольору при наведенні та коралового для відвіданих посилань.

⚡ Вимоги:

  • Заголовки h2: по центру
  • Посилання: як заголовки h2, ліворуч
  • Невідвідані: коричневі, без підкреслення
  • При наведенні: жовті, з підкресленням
  • Відвідані: коралові, без підкреслення
  • Абзаци 1 та 3: не курсив, 12пт

Головний заголовок

Навігація

Невідвідане посилання

Відвідане посилання

Перший абзац - не курсив, 12пт

Другий абзац - звичайний стиль

Третій абзац - не курсив, 12пт

styles.css ✓ Робочий код 
/* Заголовки */
h2.center-title {
    text-align: center;
    color: #2c3e50;
}

h2.links-title {
    text-align: left;
    color: #8B4513;
}

/* Стани посилань */
a:link {
    color: brown;
    text-decoration: none;
}

a:visited {
    color: coral;
    text-decoration: none;
}

a:hover {
    color: yellow;
    text-decoration: underline;
}

/* Непарні абзаци */
p.odd {
    font-style: normal;
    font-size: 12pt;
}

Варіант 5

📝 Завдання:

Створити ефект збільшення тексту посилань при наведенні та використати рожевий колір для відвіданих посилань.

⚡ Вимоги:

  • Заголовки h2: по центру
  • Посилання: як заголовки h2, ліворуч
  • Невідвідані: коричневі, без підкреслення
  • При наведенні: червоні, збільшуються до 36пт
  • Відвідані: рожеві, без підкреслення
  • Абзаци 1 та 3: курсив, 12пт

Інтерактивні елементи

Спробуйте навести

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

Відвідане посилання

Перший абзац - курсив, 12пт

Другий абзац - звичайний стиль

Третій абзац - курсив, 12пт

styles.css ✓ Робочий код 
/* Заголовки */
h2.center-title {
    text-align: center;
    color: #2c3e50;
}

h2.links-title {
    text-align: left;
    color: #8B4513;
}

/* Стани посилань з анімацією */
a:link {
    color: brown;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:visited {
    color: pink;
    text-decoration: none;
}

a:hover {
    color: red;
    font-size: 36pt;
    text-decoration: none;
}

/* Непарні абзаци */
p.odd {
    font-style: italic;
    font-size: 12pt;
}

Варіант 6

📝 Завдання:

Використати HEX-колір для відвіданих посилань та ефект збільшення при наведенні.

⚡ Вимоги:

  • Заголовки h2: по центру
  • Посилання: як заголовки h2, ліворуч
  • Невідвідані: коричневі, без підкреслення
  • При наведенні: червоні, збільшуються до 36пт
  • Відвідані: #5F9EA0, без підкреслення
  • Абзаци 1 та 3: не курсив, 12пт

Фінальний варіант

Тестування ефектів

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

Відвідане посилання

Перший абзац - не курсив, 12пт

Другий абзац - звичайний стиль

Третій абзац - не курсив, 12пт

styles.css ✓ Робочий код 
/* Заголовки */
h2.center-title {
    text-align: center;
    color: #2c3e50;
}

h2.links-title {
    text-align: left;
    color: #8B4513;
}

/* Стани посилань */
a:link {
    color: brown;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:visited {
    color: #5F9EA0;
    text-decoration: none;
}

a:hover {
    color: red;
    font-size: 36pt;
    text-decoration: none;
}

/* Непарні абзаци */
p.odd {
    font-style: normal;
    font-size: 12pt;
}

Назад Вперед Зміст