Модуль: Основы CSS - каскадные таблицы стилей

Синтаксис CSS

CSS состоит из правил. Каждое правило включает:

• Селектор — указывает, к какому элементу (или элементам) HTML применяются стили.

• Блок объявлений — содержит одно или несколько свойств и их значений, заключенных в фигурные скобки {}.

• Свойство и значение — определяют правило - какой стиль будет применен.

Пример:

h1 {
    color: blue;
    font-size: 24px;
}

color: blue; — это свойство (color) и его значение (blue).

font-size: 24px; — еще одно свойство и значение.



 

Как правильно описать правило

1. Правило в CSS состоит из двух основных частей: селектора и блока правил. Селектор указывает, к каким элементам на странице (сайте) будут применяться стили (например, все элементы h1). После селектора идут фигурные скобки {}, внутри которых прописываются сами правила.
2. Каждое правило состоит из свойства (например, цвет или размер шрифта) и его значения, которые разделяются двоеточием (:). После значения ставится точка с запятой (;), чтобы завершить правило и, при необходимости, добавить следующее. Пара "свойство-значение" называется объявлением (правилом).
3. Все объявления, заключённые в фигурные скобки {}, образуют блок правил (или блок объявлений), который применяется к элементам, выбранным селектором.

Типы селекторов

Селекторы определяют, к каким элементам применяются стили.

1. Селектор по тегу

Применяет стили ко всем элементам с указанным тегом.

p {
    color: green;
}

Этот стиль применится ко всем элементам <p>.
 

2. Селектор по классу

Используется для выбора элементов с определенным классом. Класс указывается в атрибуте class в HTML.

.text-red {
    color: red;
}

HTML:

<p class="text-red">Этот текст красный.</p>

3. Селектор по ID

Используется для выбора элемента с уникальным идентификатором. ID указывается в атрибуте id в HTML.

#header {
    background-color: yellow;
}

HTML:

<div id="header">Шапка сайта</div>

4. Универсальный селектор

Выбирает все элементы на странице.

* {
    margin: 0;
    padding: 0;
}

5. Комбинированные селекторы

Можно комбинировать селекторы для более точного выбора.

• Вложенные элементы:

  div p {
      color: purple;
  }

  Этот стиль применится ко всем элементам <p>, которые находятся внутри <div>.

• Несколько классов:

  .text-bold.big-text {
      font-weight: bold;
      font-size: 20px;
  }

  HTML:

  <p class="text-bold big-text">Жирный и большой текст.</p>