Базовые стили
Базовые стили
Базовые стили CSS представляют собой основные параметры оформления веб-страниц, такие как цвет текста, фон, размер шрифта, отступы и рамки. Они позволяют задавать визуальные характеристики элементов, делая страницу более читаемой и привлекательной.
Давайте рассмотрим основыне стили
Цвета и фоны
Используйте свойство color для изменения цвета текста и background-color для задания цвета фона.
body {
color: #333; /* черный текст */
background-color: #f0f0f0; /* светлый фон */
}
Шрифты и размеры текста
Настройте стиль текста с помощью свойства font-family и задайте размер с помощью font-size.
h1 {
font-family: 'Arial', sans-serif; /* выбор шрифта */
font-size: 24px; /* размер шрифта */
}
Отступы и рамки
Используйте margin и padding для управления отступами вокруг элементов, а также border для создания рамок.
div {
margin: 10px; /* внешний отступ */
padding: 5px; /* внутренний отступ */
border: 1px solid #ccc; /* рамка толщиной 1 пиксель, серого цвета */
}
Выравнивание
Свойства text-align и vertical-align используются для выравнивания текста и элементов по горизонтали и вертикали.
p {
text-align: justify; /* выравнивание текста по ширине */
}
img {
vertical-align: middle; /* выравнивание изображения по центру */
}
Пример
Давайте создадим простую веб-страницу с применением вышеописанных стилей:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
color: #333;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
font-size: 24px;
}
div {
padding: 10px;
border: 1px solid #ccc;
}
p {
text-align: justify;
}
</style>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Добро пожаловать на мою веб-страницу!</h1>
<div>
<p>Это пример использования основных стилей CSS для оформления веб-страницы.</p>
<img src="https://agrobook.ru/sites/default/files/20-09/blog/2560x1706_765016_www.artfile.ru_.jpg" alt="Пример изображения">
</div>
</body>
</html>
Заключение
Этот урок предоставил вам базовое понимание применения стилей с помощью CSS. Следующие шаги включают в себя изучение более продвинутых возможностей CSS, таких как позиционирование, селекторы и адаптивный дизайн.
Будьте первым