CSS (Cascading Style Sheets) - це мова, яка використовується для визначення вигляду веб-сторінок. Наприклад, шрифти, кольори, фон, макет та анімації веб-сайту контролюються за допомогою CSS. Однак для тих, хто не знайомий з CSS, використання CSS на початковому етапі може бути досить заплутаним. Тому в цій статті ми розглянемо початкові приклади CSS та дамо поради з веб-дизайну.
Приклад 1: Створення основних HTML і CSS файлів
Першим крок, щоб почати працювати з веб-дизайном, є створення HTML і CSS файлів. HTML - це мова, яка визначає структуру веб-сторінок, а CSS - це мова, яка визначає їх вигляд. Після визначення файлу HTML вам потрібно підключити файл CSS. Нижче наведено приклад коду, який показує, як створити основні файли HTML та CSS:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок веб-сторінки</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок веб-сторінки</h1>
<p>Тут буде зміст вашої веб-сторінки.</p>
</body>
</html>
У цьому коді
<!DOCTYPE html> вказує версію HTML-документу.
<html> означає початок HTML-документу, а
</html> - його кінець.
<head> містить метадані веб-сторінки, а
<title> - заголовок веб-сторінки. Щоб підключити файл CSS до HTML-документу, використовуйте тег
<link>.
<body> містить зміст веб-сторінки.
Приклад 2: Поширені властивості CSS
В CSS є багато властивостей, якими можна користуватись. Нижче перераховано деякі з найпоширеніших:
Кольори
body {
background-color: #FFFFFF;
color: #000000;
}
Шрифти
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
font-weight: bold;
}
Модель блоку
div {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
border: 1px solid #000000;
}
Позиціонування
div {
position: relative;
top: 50px;
left: 50px;
}
Анімації
div {
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}
Респонсивний дизайн
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
Використовуючи вищезазначені властивості, ви можете створювати різноманітний вигляд вашої веб-сторінки. Кольори відповідають за кольорову палітру вашого веб-сайту. Шрифти відповідають за шрифтову палітру вашого веб-сайту. Модель блоку відповідає за розташування елементів на вашому веб-сайті. Позиціонування відповідає за точне розташування елементів на вашому веб-сайті. Анімації дозволяють створювати різноманітні ефекти на вашому веб-сайті. Респонсивний дизайн дозволяє вашому веб-сайту коректно відображатись на різних пристроях, включаючи мобільні телефони та планшети.
Приклад 3: Використання CSS-фреймворків
CSS-фреймворки є зручним і швидким рішенням для веб-дизайнерів, які хочуть створити професійний вигляд своїх веб-сайтів. Вони містять зарано налаштовані CSS-стилі, які можна використовувати для різних елементів веб-сторінки. Найпопулярніші CSS-фреймворки на сьогоднішній день - це Bootstrap та Foundation.
Щоб використати CSS-фреймворки, спочатку потрібно підключити їх до свого проекту. Bootstrap і Foundation можна підключити через CDN (Content Delivery Network) або завантажити локально і підключити до свого проекту.
Використовуючи Bootstrap, ви можете швидко створити адаптивну веб-сторінку за допомогою вбудованих класів. Наприклад, ви можете використовувати клас
container для створення контейнера, в якому будуть розміщені всі елементи веб-сторінки, і клас
row для створення рядка, в якому будуть розміщені колонки.
<!DOCTYPE html>
<html>
<head>
<title>Мій веб-сайт</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Вітаю на моєму веб-сайті</h1>
<p>Це приклад веб-сторінки, створеної за допомогою Bootstrap.</p>
<div class="row">
<div class="col-md-6">
<p>Перша колонка</p>
</div>
<div class="col-md-6">
<p>Друга колонка</p>
</div>
</div>
</div>
</body>
</html>
У цьому прикладі ми використовуємо клас
container, щоб створити контейнер, в якому розташ шовуються всі елементи веб-сторінки. Далі ми створюємо рядок з двома колонками, використовуючи клас
row, і класи
col-md-6, щоб розподілити рядок на дві колонки, кожна з яких займає половину рядка на середніх екранах і більше.
Foundation - це інший популярний CSS-фреймворк, який пропонує багато корисних функцій для веб-дизайнерів. Використовуючи Foundation, ви можете швидко створити адаптивну веб-сторінку за допомогою вбудованих класів. Наприклад, ви можете використовувати клас
grid-x для створення сітки, яка буде містити рядки і колонки, і класи
cell та
medium-6, щоб створити рядок з двома колонками.
<!DOCTYPE html>
<html>
<head>
<title>Мій веб-сайт</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>
</head>
<body>
<div class="grid-x">
<div class="cell medium-6">
<p>Перша колонка</p>
</div>
<div class="cell medium-6">
<p>Друга колонка</p>
</div>
</div>
</body>
</html>
У цьому прикладі ми використовуємо клас
grid-x, щоб створити сітку, яка містить рядок з двома колонками. Клас
cell вказує, що елемент є клітинкою в сітці, а
medium-6 вказує, що колонка займає половину рядка на середніх екранах і більше.
Висновок
У цій статті ми розглянули декілька початкових прикладів CSS, які можуть допомогти вам почати працювати з CSS. Ми детально розглянули синтаксис CSS, властивості CSS, використання CSS-фреймворків, а також навели приклади коду для кожного з цих прикладів. CSS є важливою складовою веб-дизайну, яка допомагає створювати професійний вигляд веб-сторінок і забезпечує їх адаптивність для різних пристроїв.
Якщо ви новачок у веб-дизайні і тільки починаєте вивчати CSS, то почніть з простих прикладів і поступово працюйте над вдосконаленням своїх навичок. Пам'ятайте, що CSS - це мистецтво, і чим більше ви практикуєтеся, тим більше навичок ви отримуєте.