CSS Блоки: свойства и верстка

Блочная верстка — один из важнейших аспектов CSS и HTML. Ранее сайты создавались преимущественно с помощью таблиц, но сейчас блочная верстка значительно упрощает процесс. Рассмотрим, что такое блок и его основные свойства.

Что такое блок?

Блок — это участок сайта, обладающий определёнными границами, отступами, обводкой и позиционированием (высотой, шириной). Он представляет собой автономный элемент. Хотя чаще всего блоки создаются с помощью тега <div>, любой другой HTML-тег, например, <p>, <h1> и другие, также может функционировать как блок. <div> указывает, что элемент является блоком, и ему можно присвоить ID, например, test-block.

Основные свойства блоков

Используя ID, можно задавать стили для блока. Рассмотрим пример:

#test-block {
  border: 2px solid blue; /* Обводка: ширина 2 пикселя, сплошная линия, синего цвета */
  width: 500px; /* Ширина блока */
  height: 20px; /* Высота блока */
  background-color: #f0f0f0; /* Цвет фона */
  margin: 10px; /* Внешние отступы со всех сторон по 10 пикселей */
  padding: 10px; /* Внутренние отступы со всех сторон по 10 пикселей */
  border-radius: 50px; /* Радиус скругления углов */
}

border: задаёт обводку блока. Можно указывать ширину, стиль (сплошная линия solid, пунктирная dotted, прерывистая dashed и др.) и цвет.
width: задаёт ширину блока.
height: задаёт высоту блока.
background-color: устанавливает цвет фона блока.
margin: определяет внешние отступы — расстояние между блоком и другими элементами. Можно задавать значение для всех сторон сразу или отдельно для каждой (верх, низ, лево, право).
padding: определяет внутренние отступы — расстояние между содержимым блока и его границами. Аналогично margin, можно задавать значение для всех сторон или индивидуально.
border-radius: задаёт радиус скругления углов блока, создавая скругленные или даже полностью круглые формы.

Пример использования блоков

Даже сложные сайты, такие как Google, построены на основе блоков. Логотип — это блок, поисковая строка — другой блок, и каждый из них может быть вложен в другие блоки. Стиль применяется к этим блокам для создания желаемого внешнего вида.

В этом уроке мы рассмотрели основные свойства блоков в CSS. В дальнейших уроках, при создании сайта, мы более подробно изучим эти и другие свойства, и вы сможете применять их на практике.