Что такое CSS

CSS, или каскадные таблицы стилей, — это язык, который используется для описания внешнего вида и форматирования HTML-документов. С помощью CSS можно задавать оформление, цвета, шрифты, размеры, расположение элементов и поведение интерфейса на разных устройствах. Темы WordPress используют CSS и HTML, чтобы выводить данные, сгенерированные системой. Каждая тема WordPress содержит файл style.css, где находятся правила и стили, определяющие внешний вид страниц.

CSS остаётся простым в изучении и использовании. Существует множество ресурсов и онлайн-учебников, которые помогают освоить основы буквально с нуля. Пользователи WordPress могут быстро понять принципы, просто открыв файл темы style.css и посмотрев, как заданы стили.

Пример:

body {
  font-size: 16px;
  color: #333;
  background-color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

h1 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-title {
  font-size: 1.25rem;
  color: #4c0000;
  font-weight: 500;
}

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

Пример HTML:

<div id="header">
  <h1 class="blog-title">
    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">
      <?php bloginfo('name'); ?>
    </a>
  </h1>
</div>

Показанный выше HTML содержит идентификатор ‘header’  и класс ‘blog-title’. Эти разделы могут быть застилизованы CSS.

Пример CSS:

#header {
  background-color: #4c0000;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1.blog-title a {
  color: #fff;
  font-size: 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  text-decoration: none;
}

CSS позволяет создавать не только базовое оформление, но и гибкие, адаптивные макеты. Современные сайты используют Flexbox и CSS Grid, чтобы элементы автоматически подстраивались под разные размеры экрана.

Пример адаптивного блока:

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

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

Кроме того, в CSS можно задавать переменные, что упрощает поддержку стилей и создание дизайн-систем:

:root {
  --color-primary: #4c0000;
  --color-text: #333;
}

body {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

CSS легко комбинируется с современными инструментами веб-разработки — от WordPress-тем до React- или Vue-проектов. Он стал основой визуальной части Интернета, позволяя дизайнерам и разработчикам создавать быстрые, адаптивные и красивые сайты.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520