Приклад:

Позиціювання (властивість position)При розміщенні елементів на сторінці можна використовувати один із таких режимів:static – на вільне місце після попереднього об'єкта;absolute – точне місце розміщення;fixed - не рухається при прокручуванні;relative –розташування об'єкта відносно того місця, яке би він зайняв, якби для нього використовувалось статичне позиціонування. Для відносного та абсолютного позиціонування можна задавати відступи для розміщення об'єкта по горизонталі left(ліворуч) та right(праворуч), та по вертикалі top(згори) та bottom(знизу).

Приклад:

Властивість float визначає, до якої сторони сторінки "прикріплюється" вміст: Для вирівнювання по центру: {margin: auto; width: 50%;}Налаштування тла блоку:background: url(header.jpg)  зображенняrepeat-x повтор по горизонталіbackground-attachment: fixed;  не прокручується no-repeat  без повторуcenter вирівнювання по центру

На зображенні можна переглянути, як буде розміщено елемент у різних режимах:

Наприкладfirst {position:fixed; top:450; left:500;} Елемент нерухомий при прокручуванні..second {position:absolute; top:100; left:400}Елемент показаний поверх інших у заданому розміщенні..third {position:relative; top:200;}На місці елемента – порожньо, а сам елемент показаний зі зміщенням. Стиль  .feedback {    position: fixed; /* Фіксоване розміщення */    right: 0; top: 50%; /* Координати */    background: red; /* Колір тла*/    width: 70px; /* Ширина блоку*/    height: 70px; /* Висота блоку*/   }

Продовженнявизначає створення квадрату червоного кольору 70х70 пікселів посередині висоти сторінки і з нульовим відступом справа. Він може бути зафіксованим при прокручуванні, розміщений абсолютно absolute чи плаваюче float. Так можна додавати, так звані, врізки: цитати, відгуки, коментарі. При позиціюванні варто враховувати, що існують стилі, визначені стандартно, наприклад відступи між заголовками чи на початку сторінки. Для того, щоб скинути ці значення варто задати стиль, який стосуватиметься усіх елементів (або вказувати конкретні теги, для яких видаляти стандартні відступи та поля):* {margin: 0; padding: 0; }

Градієнти. За допомогою стилів CSS можна створювати градієнти, це атрибут linear-gradient, у якому слід вказати напрямок градієнта та назви кольорів (два і більше). Наприклад, background: linear-gradient(red, yellow, green); - лінійний градієнт з трьох кольорів. Варіанти градієнта: to right (зліва направо), to bottom right, (кутовий - до правого нижнього кута), або за допомогою вказання кута повороту градієнта, наприклад -90deg.background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); - горизонтальна веселкаbackground: radial-gradient(red, yellow, green); - радіальний градієнт

Наприклад, стиль .content {background: linear-gradient(orange, yellow);}створює градієнт на всю висоту сторінки (чи блоку) - вгорі буде оранжевий колір, внизу - жовтий. Задавши додаткову властивість background-attachment: fixed; отримаємо зафіксований градієнт тла, яке не рухається при прокручуванні сторінки. У стилі можна вказати адресу зображення властивістю background: url(header.jpg). У такому разі за умовчанням це зображення замостить простір по горизонталі та вертикалі. Якщо потрібно розмістити зображення лише по горизонталі, задають атрибут repeat-x (repeat-y - відповідно, по вертикалі). Зверніть увагу на скорочений запис того факту, що цей атрибут стосується властивості background, тому перед repeat-x НЕМАЄ крапки з комою. .header {background: url(header.jpg) repeat-x; }Можна, наприклад, вказати відсутність замощення і розташувати зображення по центру блоку no-repeat center; Якщо ж додамо background-attachment: fixed; зображення тла буде зафіксоване при прокручуванні (щоправда, поки відвідувач не прокрутить вміст сторінки до наступного блоку). Наприклад, body { background: url(background.jpg) fixed no-repeat center;} розміщує нерухоме зображення по центру сторінки.

ПорадиІноді елементи сторінки можуть накладатися один на одний. У нижній частині такої групи об'єктів буде розташований об'єкт, який описали першим, а зверху – той об'єкт, який описали останнім. Можна також задати властивість z-index: 2Іноді потрібно задати обтікання об'єкту текстом: float: right; Оскільки серед властивостей стилів немає можливості задати висоту блоку, то для розтягування блоку на всю висоту вікна можна скористатись комбінацією стилів position: fixed; min-height: 100%;У разі, якщо вміст блоку перевищує його розмір (або може перевищити), варто задати властивість переповнення overflow: auto; (блок при цьому буде розтягуватись).

https://learnlayout.com/Вивчіть макет CSS

Процес верстки веб-сторінок. Використання CSS для стилізаціїCSS використовується для стилізації веб-сторінки. На цьому етапі встановлюються кольори, шрифти, розміри елементів, вирівнювання та інші атрибути, щоб досягти бажаного вигляду сторінки. Додавання інтерактивності за допомогою Java. Script. Java. Script можна використовувати для додавання різних інтерактивних ефектів та функціональності на сторінку. Наприклад, валідація форм, анімація елементів, реагування на події користувача тощо. Тестування та оптимізація верстки. На цьому етапі проводяться тестування верстки для перевірки правильності відображення сторінки в різних браузерах та на різних пристроях. Виправляються помилки та оптимізується швидкодія сторінки.

💻 Вправа "Таємний шифр"Оформити “таємне повідомлення” на основі заготовки https://jsfiddle.net/oksanapas/t7 Lfo4qw/1/  застосовуючи різні заливки, градієнти, повороти, нахили. Довідник  CSS https://css.in.ua/css/properties