Создание блока и обращение к нему
Создадим блок с помощью тега <div> и идентификатором block:
<div id="block"></div>В main.css будем описывать стили, обращаясь к блоку по идентификатору:
#block {
/* Здесь будут стили */
}Установка фона, высоты и ширины
Зададим фоновый цвет:
#block {
background: red;
}Установим высоту 200 пикселей:
#block {
background: red;
height: 200px;
}Для ширины используем пиксели. Установим ширину 300 пикселей:
#block {
background: red;
height: 200px;
width: 300px;
}Обводка (border)
Добавим обводку с помощью свойства border. Укажем ширину, стиль и цвет:
#block {
background: red;
height: 200px;
width: 300px;
border: 7px solid silver;
}- 7px – ширина обводки.
- solid – сплошной стиль. Другие стили: dashed (прерывистая), dotted (пунктирная), double (двойная).
- silver – цвет обводки.
Обводка отдельных сторон
Можно задавать обводку для отдельных сторон с помощью свойств border-top, border-right, border-bottom, border-left:
#block {
border: 7px solid silver;
border-bottom: 0; /* Убираем обводку снизу */
}Или, например, для левой стороны:
#block {
border-left: 7px dashed blue; /* Левая обводка - прерывистая синяя */
}Можно задавать отдельные стили, ширину и цвет для каждой стороны:
#block {
border-top: 5px dotted green;
}Скругление углов (border-radius)
Свойство border-radius скругляет углы. Можно указать одно значение для всех углов или несколько для разных:
#block {
border-radius: 15px; /* Скругление всех углов на 15 пикселей */
}Или разные значения:
#block {
border-radius: 15px 30px; /* Верхний левый и нижний правый - 15px, остальные - 30px */
}Четыре значения задают скругление для каждого угла по часовой стрелке, начиная с верхнего левого.
Прозрачность (opacity)
Свойство opacity управляет прозрачностью (от 0 – полностью прозрачный, до 1 – полностью непрозрачный):
#block {
opacity: 0.9; /* 90% непрозрачности */
}Отступы (margin и padding)
margin задаёт внешние отступы (пространство вокруг блока), а padding – внутренние (пространство внутри блока, между границей и содержимым):
#block {
margin: 20px 50px; /* Верх/низ - 20px, лево/право - 50px */
padding: 20px; /* Внутренний отступ со всех сторон - 20px */
}Аналогично border, можно указывать значения для отдельных сторон.
Удаление отступов по умолчанию
Браузеры могут добавлять отступы по умолчанию. Чтобы их убрать, используем универсальный селектор *:
* {
margin: 0;
padding: 0;
}Отображение элементов (display)
Свойство display определяет тип отображения. Строчные элементы (например, <span>) не занимают всю ширину строки, в отличие от блочных (<div>). Чтобы сделать строчный элемент блочным, используем display: block:
.block {
display: block;
}Теперь элемент с классом block, даже если это <span>, будет вести себя как блочный элемент. Другие значения display: inline, inline-block, table, none.
Рассмотрены основные CSS стили для работы с блоками: установка фона, высоты, ширины, обводки, скругления углов, прозрачности, внешних и внутренних отступов, а также управление типом отображения элементов с помощью свойства display. Эти стили позволяют создавать разнообразные макеты веб-страниц.