CSS для начинающих: как сделать сайт красивым и удобным

CSS (Cascading Style Sheets, или каскадные таблицы стилей) — это язык, который отвечает за внешний вид сайта. Если HTML создаёт структуру страницы (заголовки, текст, картинки), то CSS делает её красивой и удобной: задаёт цвета, шрифты, расположение элементов и адаптивность для разных устройств. Эта статья — твой старт в мир CSS. Мы разберём, как он работает, зачем нужен, и покажем примеры, чтобы ты мог сразу попробовать.

Что такое CSS и зачем он нужен?

CSS — это инструмент, который превращает скучный HTML в стильный сайт. Без CSS страница выглядит как чёрно-белый текст из 90-х: без отступов, красивых шрифтов или адаптации под телефон. С CSS ты можешь:

• Задать цвета и фоны (например, сделать кнопку красной).
• Настроить шрифты и размеры текста (например, крупный заголовок).
• Расположить элементы на странице (например, меню слева, контент справа).
• Сделать сайт адаптивным, чтобы он выглядел хорошо на компьютере, планшете и смартфоне.

Пример: Без CSS заголовок <h1>Привет, мир!</h1> — это просто чёрный текст. С CSS ты можешь написать:

h1 {
  color: blue;
  font-size: 36px;
  text-align: center;
}

Теперь заголовок синий, крупный и выровнен по центру.

CSS работает вместе с HTML и управляет тем, как браузер показывает страницу. Это ключевой навык для веб-дизайнера, потому что клиенты хотят не только функциональный, но и красивый сайт.

Как работает CSS?

CSS состоит из правил, которые говорят браузеру, как стилизовать элементы HTML. Каждое правило включает:

1. Селектор: указывает, к какому элементу HTML применяется стиль (например, h1 для заголовков или p для абзацев).
2. Свойства и значения: описывают, как должен выглядеть элемент (например, color: blue; задаёт синий цвет текста).

Пример правила:

p {
  color: green;
  margin: 10px;
}

Здесь p — селектор (все абзацы), color: green; делает текст зелёным, а margin: 10px; добавляет отступы вокруг абзаца.

CSS можно подключить к HTML тремя способами:

• Внутри тега <style> в HTML-файле:

  <style>
    h1 {
      color: red;
    }
  </style>
  

• В отдельном файле (например, styles.css), который подключается через <link>:

  <link rel="stylesheet" href="/styles.css">
  

• Встроенный стиль через атрибут style:

  <h1 style="color: blue;">Заголовок</h1>
  

Самый удобный способ — отдельный файл .css, потому что он позволяет держать код организованным и применять стили ко всем страницам сайта.

Основы CSS: ключевые свойства

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

1. Цвета и фоны

• color: задаёт цвет текста.

  h1 {
    color: #ff0000; /* Красный цвет в шестнадцатеричном формате */
  }
  

• background-color: задаёт цвет фона.

  div {
    background-color: lightblue; /* Светло-голубой фон */
  }
  

• Цвета можно указывать разными способами: названия (red), HEX-коды (#ff0000), RGB (rgb(255, 0, 0)).

2. Шрифты и текст

• font-family: задаёт шрифт.

  p {
    font-family: Arial, sans-serif; /* Arial, если доступен, иначе другой без засечек */
  }
  

• font-size: размер текста.

  h2 {
    font-size: 24px; /* Размер текста 24 пикселя */
  }
  

• text-align: выравнивание текста.

  h1 {
    text-align: center; /* Текст по центру */
  }
  

3. Отступы и границы

• margin: внешние отступы (пространство вокруг элемента).

  div {
    margin: 20px; /* Отступ 20 пикселей со всех сторон */
  }
  

• padding: внутренние отступы (пространство внутри элемента).

  button {
    padding: 10px 20px; /* Внутренние отступы: 10px сверху/снизу, 20px слева/справа */
  }
  

• border: рамка вокруг элемента.

  div {
    border: 1px solid black; /* Чёрная рамка толщиной 1 пиксель */
  }
  

4. Размеры и позиционирование

• width и height: ширина и высота элемента.

  img {
    width: 300px;
    height: 200px;
  }
  

• display: управляет отображением элемента.

  div {
    display: flex; /* Элементы внутри div выстраиваются в ряд */
  }
  

• position: задаёт позиционирование (например, фиксированное меню).

  nav {
    position: fixed; /* Меню остаётся на месте при прокрутке */
    top: 0;
  }
  

5. Адаптивность

Адаптивный дизайн — это когда сайт выглядит хорошо на любом устройстве: компьютере, планшете, смартфоне. Для этого используют:

• Единицы измерения:
  • px (пиксели) — фиксированный размер.
  • % или vw/vh — относительные размеры (зависят от ширины/высоты экрана).
  • rem и em — зависят от размера шрифта.

  div {
    width: 100%; /* Занимает всю ширину экрана */
  }
  

• Медиа-запросы: меняют стили в зависимости от размера экрана.

  @media (max-width: 600px) {
    h1 {
      font-size: 18px; /* Меньший шрифт для телефонов */
    }
  }
  

Практический пример: создаём простую страницу

Давай соберём всё вместе. Вот пример HTML и CSS для страницы с заголовком, абзацем и кнопкой.

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>Добро пожаловать!</h1>
  <p>Это пример стильной страницы.</p>
  <button>Нажми меня</button>
</body>
</html>

CSS (styles.css):

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  font-size: 32px;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

button {
  background-color: #ff5733;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #e04e2c; /* Цвет кнопки при наведении */
}

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
  button {
    width: 100%; /* Кнопка на всю ширину на телефоне */
  }
}

Что делает этот код:

• Создаёт страницу с заголовком, текстом и кнопкой.
• Задаёт шрифты, цвета, отступы.
• Делает кнопку оранжевой с закруглёнными углами и эффектом при наведении.
• Настраивает адаптивность: на телефонах заголовок меньше, а кнопка шире.

Попробуй сохранить эти файлы и открыть index.html в браузере. Ты увидишь стильную страницу!

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

CSS — это не просто про красоту, а про пользовательский опыт. Вот почему он важен:

• Удобство: Правильные отступы и шрифты делают сайт читаемым.
• Привлекательность: Красивые цвета и анимации удерживают внимание.
• Адаптивность: Сайт должен работать на любом устройстве, иначе пользователи уйдут.
• Брендинг: Стили помогают передать характер компании (например, строгие цвета для корпоративного сайта или яркие для магазина игрушек).

Каскадность (от слова “Cascading”) означает, что стили применяются по приоритету:

• Стили в <style> перебивают стили из внешнего файла.
• Встроенные стили (style="...") имеют самый высокий приоритет.
• Это позволяет гибко управлять дизайном, но требует аккуратности, чтобы не запутаться.