Основы создания правил CSS

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

CSS-правила (или наборы правил) используются для стилизации и управления макетом HTML-контента.

В этом мануале мы разберем синтаксис CSS-правил и покажем, как их создавать. Сначала мы рассмотрим пример правила CSS, которое окрашивает HTML-элементы <h1> в синий цвет, чтобы понять, как работают CSS-правила, а затем подробно изучим каждый из компонентов.

Требования

Чтобы следовать этому руководству, подготовьте необходимые файлы и папки согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Синтаксис CSS-правила

Ниже вы видите пример правила CSS. Внесите в свой файл styles.css следующее правило:

h1 {
.   color: blue;
.   }

Сохраните файл styles.css. Обратите внимание, строка color: blue имеет отступ в два пробела справа. Этот отступ рекомендуется соблюдать при написании правил стиля CSS, поскольку он упрощает чтение кода разработчиками.

Только что добавленное правило говорит браузеру отображать любой текстовый HTML-контент, помеченный элементом <h1>, в синем цвете.

Читайте также: Вложение элементов HTML

Затем добавьте какой-нибудь текст, помеченный элементом <h1>, в файл index.html (прямо под строкой <link rel=”stylesheet” href=”css/styles.css”> в верхней части документ):

<h1>A Sample Title</h1>

Сохраните и загрузите HTML-файл в свой браузер, чтобы проверить результаты.

В браузере вы должны увидеть следующее:

A Sample Title

Если ваш результат отличается, убедитесь, что вы сохранили файлы index.html и styles.css и что в коде нет ошибок.

Компоненты CSS-правил

Давайте теперь рассмотрим пример правила CSS, чтобы понять каждый из его компонентов. Как правило, правило CSS состоит из селектора, блока объявления, свойств и значений. На схеме ниже показано, как каждая из этих частей представлена ​​в правиле:

селектор --→   h1 {
свойство --→      color: blue;   ←-- значение
.                }         
.               блок объявления 

Давайте теперь изучим каждый из этих компонентов.

  • Селектор указывает, какой тип контента стилизуется данным CSS-правилом. Селектор размещается в начале правила, вне открывающей фигурной скобки. В нашем примере селектором является HTML-элемент <h1>, это селектор тегов. Другие типы селекторов мы рассмотрим позже в этой серии руководств.
  • Блок объявления – это часть CSS-правила, которая объявляет правило стиля для селектора. Блок объявления – это то, что помещено в фигурные скобки. В нашем примере блоком объявления является color:blue;.
  • Свойство определяет свойство HTML-контента, к которому будет применяться правило CSS (например, это может быть размер шрифта или цвет, font-size илиcolor). В нашем примере свойство – color. Обратите внимание, после свойства стаавится двоеточие.
  • Значение – это то, что присваивается свойству (например, 16px илиblue). В нашем примере значение – это blue. Обратите внимание, после значения ставится точка с запятой.

После того, как вы объявите правило для селектора, каждый фрагмент контента в HTML-документе, отмеченный этим селектором, будет отображаться согласно этому правилу. Однако если у вас объявлено конфликтующее CSS-правило с более высоким приоритетом, при обработке будут возникать исключения.

Заключение

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

В следующем мануале этой серии мы добавим в CSS-правило несколько свойств и создадим другие правила стиля для HTML-документа.

Tags: ,

Добавить комментарий