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

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

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

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

📚 Класичний стиль

Завдання:

Створити класичне оформлення тексту з використанням серіфних шрифтів. Заголовки мають бути вишуканими, абзаци - з червоним рядком та вирівнюванням за шириною.

Основи веб-дизайну

Робота з типографікою

Класичний стиль передбачає використання серіфних шрифтів, які додають тексту елегантності та традиційності. Такий підхід часто використовується в книжкових виданнях та офіційних документах.

Велика висота рядка та червоний рядок полегшують читання довгих текстів, створюючи комфортний ритм для очей читача.

styles.css 
h1 {
    font-family: 'Georgia', serif;
    font-size: 42px;
    color: #2c3e50;
    text-align: center;
    font-style: italic;
    margin-bottom: 20px;
}

h2 {
    font-family: 'Georgia', serif;
    font-size: 28px;
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 5px;
}

p {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    color: #34495e;
    text-align: justify;
    line-height: 1.6;
    text-indent: 40px;
}

💡 Поради для класичного стилю:

  • Шрифти: Використовуйте серіфні шрифти (Georgia, Times New Roman)
  • Червоний рядок: Додайте text-indent для абзаців
  • Вирівнювання: Застосуйте text-align: justify для рівномірного розподілу
  • Кольори: Використовуйте класичні кольори (темно-сині, бордові)
  • Акценти: Додайте курсив для заголовків для елегантності

💼 Сучасний стиль

Завдання:

Створити сучасне оформлення з sans-serif шрифтами. Заголовки мають бути стилізованими, абзаци - збільшеним міжрядковим інтервалом для кращої читабельності.

Сучасний веб-дизайн

Інновації в типографіці

Сучасний стиль характеризується чистими лініями, sans-serif шрифтами та мінімалістичним підходом. Такий дизайн добре підходить для корпоративних сайтів та блогів.

Великий міжрядковий інтервал та чіткі контрасти роблять текст легким для сприйняття на екранах різних пристроїв.

styles.css 
h1 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    color: #27ae60;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

h2 {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    color: #2980b9;
    background: #ecf0f1;
    padding: 10px;
    border-radius: 5px;
}

p {
    font-family: 'Verdana', sans-serif;
    font-size: 16px;
    color: #2c3e50;
    text-align: left;
    line-height: 1.8;
}

💡 Поради для сучасного стилю:

  • Шрифти: Використовуйте sans-serif шрифти (Arial, Verdana, Helvetica)
  • Інтервал: Застосуйте великий line-height для читабельності
  • Трансформація: Експериментуйте з text-transform для заголовків
  • Кольори: Використовуйте сучасні кольори (зелений, синій)
  • Фон: Додайте background-color для виділення підзаголовків

🖼️ Варіант 1 - Рамки

Завдання:

Змініть файл my.css так, щоб усі елементи були в різних рамках з різними полями та відступами:

  • h1: колір #DAA520, товщина 10, тип ridge
  • h2: колір #6495ED, товщина 15, тип double
  • p непарні: колір #F08080, товщина 10, тип inset
  • p парні: колір #DA70D6, товщина 25, тип dashed

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 10px ridge #DAA520;
    padding: 20px;
    margin: 15px;
}

h2:not(a):not(img) {
    border: 15px double #6495ED;
    padding: 15px;
    margin: 10px;
}

p:nth-child(odd) {
    border: 10px inset #F08080;
    padding: 12px;
    margin: 8px;
}

p:nth-child(even) {
    border: 25px dashed #DA70D6;
    padding: 18px;
    margin: 12px;
}

💡 Поради для роботи з рамками:

  • Властивість border: комбінує width, style та color
  • Типи рамок: solid, dashed, dotted, double, groove, ridge, inset, outset
  • Відступи: padding - всередині рамки, margin - зовні
  • Псевдокласи: :nth-child() для вибору парних/непарних елементів
  • Винятки: :not() для виключення певних елементів

🖼️ Варіант 2 - Рамки

Завдання:

Змініть файл my.css так, щоб усі елементи були в різних рамках з різними полями та відступами:

  • h1: колір #2F4F4F, товщина 15, тип dotted
  • h2: колір Seagreen, товщина 15, тип double
  • p непарні: колір #4A708B, товщина 10, тип ridge
  • p парні: колір #8B3E2F, товщина 25, тип outset

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 15px dotted #2F4F4F;
    padding: 25px;
    margin: 20px;
}

h2:not(a):not(img) {
    border: 15px double seagreen;
    padding: 20px;
    margin: 15px;
}

p:nth-child(odd) {
    border: 10px ridge #4A708B;
    padding: 15px;
    margin: 10px;
}

p:nth-child(even) {
    border: 25px outset #8B3E2F;
    padding: 20px;
    margin: 15px;
}

💡 Поради для роботи з рамками:

  • Кольори: можна використовувати HEX, RGB або назви кольорів
  • Товщина рамки: вказується в px, em, rem або інших одиницях
  • Типи рамок: dotted - пунктир, double - подвійна лінія
  • Відступи: padding робить контент всередині рамки комфортнішим
  • Маргіни: margin створює простір між елементами

🖼️ Варіант 3 - Рамки

Завдання:

Змініть файл my.css так, щоб усі елементи були в різних рамках з різними полями та відступами:

  • h1: колір #8B4513, товщина 8, тип groove
  • h2: колір #4682B4, товщина 12, тип solid
  • p непарні: колір #32CD32, товщина 6, тип dotted
  • p парні: колір #FF4500, товщина 20, тип groove

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 8px groove #8B4513;
    padding: 18px;
    margin: 12px;
}

h2:not(a):not(img) {
    border: 12px solid #4682B4;
    padding: 14px;
    margin: 8px;
}

p:nth-child(odd) {
    border: 6px dotted #32CD32;
    padding: 10px;
    margin: 6px;
}

p:nth-child(even) {
    border: 20px groove #FF4500;
    padding: 16px;
    margin: 10px;
}

💡 Поради для роботи з рамками:

  • Groove рамка: створює 3D-ефект виїмки
  • Solid рамка: проста суцільна лінія
  • Dotted рамка: складається з крапок
  • Різноманітність: комбінуйте різні типи рамок для цікавого дизайну
  • Контраст: використовуйте контрастні кольори для кращої видимості

🖼️ Варіант 4 - Рамки

Завдання:

Змініть файл my.css так, щоб усі елементи були в різних рамках з різними полями та відступами:

  • h1: колір #4B0082, товщина 5, тип solid
  • h2: колір #DC143C, товщина 10, тип dashed
  • p непарні: колір #FFD700, товщина 8, тип double
  • p парні: колір #008080, товщина 15, тип solid

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 5px solid #4B0082;
    padding: 22px;
    margin: 18px;
}

h2:not(a):not(img) {
    border: 10px dashed #DC143C;
    padding: 16px;
    margin: 12px;
}

p:nth-child(odd) {
    border: 8px double #FFD700;
    padding: 14px;
    margin: 10px;
}

p:nth-child(even) {
    border: 15px solid #008080;
    padding: 18px;
    margin: 14px;
}

💡 Поради для роботи з рамками:

  • Тонкі рамки: тонкі solid рамки виглядають елегантно
  • Double рамка: подвійна лінія додає акцент
  • Dashed рамка: штрихова лінія для сучасного вигляду
  • Кольорова палітра: індиго, малиновий, золотий, теal
  • Мінімалізм: менші товщини рамок створюють легкий вигляд

🖼️ Варіант 5 - Рамки

Завдання:

Змініть файл my.css так, щоб рамки навколо елементів були такими (відступи і поля визначте самостійно):

  • h1: колір #DAA520, товщина 10, тип dashed
  • h2: колір #6495ED, товщина 15, тип double
  • p непарні: колір #F08080, товщина 10, тип outset
  • p парні: колір #DA70D6, товщина 25, тип ridge

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 10px dashed #DAA520;
    padding: 18px;
    margin: 12px;
}

h2:not(a):not(img) {
    border: 15px double #6495ED;
    padding: 16px;
    margin: 14px;
}

p:nth-child(odd) {
    border: 10px outset #F08080;
    padding: 14px;
    margin: 10px;
}

p:nth-child(even) {
    border: 25px ridge #DA70D6;
    padding: 22px;
    margin: 18px;
}

💡 Поради для роботи з рамками:

  • Властивість border: скорочений запис width style color
  • Типи рамок: dashed - штрихова, ridge - рельєфна випукла
  • Відступи: можна задавати різні значення для кожної сторони
  • Адаптивність: використовуйте % або viewport units для гнучкості
  • Доступність: переконайтесь, що рамки не заважають читанню

🖼️ Варіант 6 - Рамки

Завдання:

Змініть файл my.css так, щоб рамки навколо елементів були такими (відступи і поля визначте самостійно):

  • h1: колір #2F4F4F, товщина 12, тип inset
  • h2: колір Seagreen, товщина 18, тип groove
  • p непарні: колір #4A708B, товщина 14, тип solid
  • p парні: колір #8B3E2F, товщина 22, тип dotted

Заголовок H1

Заголовок H2

Перший абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

Другий абзац (парний) з демонстраційним текстом для перевірки рамок та відступів.

Третій абзац (непарний) з демонстраційним текстом для перевірки рамок та відступів.

my.css 
h1 {
    border: 12px inset #2F4F4F;
    padding: 26px;
    margin: 21px;
}

h2:not(a):not(img) {
    border: 18px groove seagreen;
    padding: 21px;
    margin: 17px;
}

p:nth-child(odd) {
    border: 14px solid #4A708B;
    padding: 18px;
    margin: 14px;
}

p:nth-child(even) {
    border: 22px dotted #8B3E2F;
    padding: 23px;
    margin: 19px;
}

💡 Поради для роботи з рамками:

  • Inset рамка: створює 3D-ефект вдавленості
  • Groove рамка: протилежність ridge, виглядає як виїмка
  • Solid рамка: класичний варіант для чіткого контуру
  • Dotted рамка: легкий та сучасний вигляд
  • Максималізм: більші товщини рамок створюють сильний акцент

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