Початкові приклади CSS: крок за кроком до веб-дизайну

Yakug · Квт. 15, 2023, 02:58 PM

CSS (Cascading Style Sheets) - це мова, яка використовується для визначення вигляду веб-сторінок. Наприклад, шрифти, кольори, фон, макет та анімації веб-сайту контролюються за допомогою CSS. Однак для тих, хто не знайомий з CSS, використання CSS на початковому етапі може бути досить заплутаним. Тому в цій статті ми розглянемо початкові приклади CSS та дамо поради з веб-дизайну.

Приклад 1: Створення основних HTML і CSS файлів
Першим крок, щоб почати працювати з веб-дизайном, є створення HTML і CSS файлів. HTML - це мова, яка визначає структуру веб-сторінок, а CSS - це мова, яка визначає їх вигляд. Після визначення файлу HTML вам потрібно підключити файл CSS. Нижче наведено приклад коду, який показує, як створити основні файли HTML та CSS:

Код Select

<!DOCTYPE html>
<html>
<head>
	<title>Заголовок веб-сторінки</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Заголовок веб-сторінки</h1>
	<p>Тут буде зміст вашої веб-сторінки.</p>
</body>
</html>

У цьому коді

Код Select

<!DOCTYPE html> вказує версію HTML-документу.

Код Select

<html> означає початок HTML-документу, а

Код Select

</html> - його кінець.

Код Select

<head> містить метадані веб-сторінки, а

Код Select

<title> - заголовок веб-сторінки. Щоб підключити файл CSS до HTML-документу, використовуйте тег

Код Select

<link>.

Код Select

<body> містить зміст веб-сторінки.

Приклад 2: Поширені властивості CSS
В CSS є багато властивостей, якими можна користуватись. Нижче перераховано деякі з найпоширеніших:
Кольори

Код Select

body {
	background-color: #FFFFFF;
	color: #000000;
}

Шрифти

Код Select

h1 {
	font-family: Arial, sans-serif;
	font-size: 36px;
	font-weight: bold;
}

Модель блоку

Код Select

div {
	width: 200px;
	height: 200px;
	padding: 20px;
	margin: 20px;
	border: 1px solid #000000;
}

Позиціонування

Код Select

div {
	position: relative;
	top: 50px;
	left: 50px;
}

Анімації

Код Select

div {
	animation-name: example;
	animation-duration: 2s;
}

@keyframes example {
	0% {background-color: red;}
	50% {background-color: yellow;}
	100% {background-color: green;}
}

Респонсивний дизайн

Код Select

@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, ви можете швидко створити адаптивну веб-сторінку за допомогою вбудованих класів. Наприклад, ви можете використовувати клас

Код Select

container для створення контейнера, в якому будуть розміщені всі елементи веб-сторінки, і клас

Код Select

row для створення рядка, в якому будуть розміщені колонки.

Код Select

<!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>

У цьому прикладі ми використовуємо клас

Код Select

container, щоб створити контейнер, в якому розташ шовуються всі елементи веб-сторінки. Далі ми створюємо рядок з двома колонками, використовуючи клас

Код Select

row, і класи

Код Select

col-md-6, щоб розподілити рядок на дві колонки, кожна з яких займає половину рядка на середніх екранах і більше.

Foundation - це інший популярний CSS-фреймворк, який пропонує багато корисних функцій для веб-дизайнерів. Використовуючи Foundation, ви можете швидко створити адаптивну веб-сторінку за допомогою вбудованих класів. Наприклад, ви можете використовувати клас

Код Select

grid-x для створення сітки, яка буде містити рядки і колонки, і класи

Код Select

cell та

Код Select

medium-6, щоб створити рядок з двома колонками.

Код Select

<!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>

У цьому прикладі ми використовуємо клас

Код Select

grid-x, щоб створити сітку, яка містить рядок з двома колонками. Клас

Код Select

cell вказує, що елемент є клітинкою в сітці, а

Код Select

medium-6 вказує, що колонка займає половину рядка на середніх екранах і більше.

Висновок
У цій статті ми розглянули декілька початкових прикладів CSS, які можуть допомогти вам почати працювати з CSS. Ми детально розглянули синтаксис CSS, властивості CSS, використання CSS-фреймворків, а також навели приклади коду для кожного з цих прикладів. CSS є важливою складовою веб-дизайну, яка допомагає створювати професійний вигляд веб-сторінок і забезпечує їх адаптивність для різних пристроїв.

Якщо ви новачок у веб-дизайні і тільки починаєте вивчати CSS, то почніть з простих прикладів і поступово працюйте над вдосконаленням своїх навичок. Пам'ятайте, що CSS - це мистецтво, і чим більше ви практикуєтеся, тим більше навичок ви отримуєте.

Початкові приклади CSS: крок за кроком до веб-дизайну

Yakug