Базовый синтаксис CSS

3.1 Правила (Rules)

Основные элементы CSS включают правила (rules), свойства (properties) и значения (values). Понимание базового синтаксиса CSS является ключом к созданию привлекательных и функциональных веб-страниц.

Основные элементы CSS:

• Правила (Rules)
• Селекторы (Selectors)
• Свойства (Properties)
• Значения (Values)

Правила (Rules)

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

Пример:

    
      селектор {
        свойство: значение;
        свойство: значение;
      }
    
  

Пример для заголовка:

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

В этом примере h1 — это селектор, color и font-size — свойства, а blue и 24px — значения этих свойств.

3.2 Свойства и значения

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

Основные свойства и их значения:

Цвет и фон:

• color: задает цвет текста
• background-color: задает цвет фона элемента

Пример:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Шрифт:

• font-family: определяет семейство шрифтов
• font-size: устанавливает размер шрифта
• font-weight: определяет толщину шрифта

Пример:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Текст:

• text-align: выравнивает текст внутри элемента
• text-decoration: добавляет эффекты к тексту, такие как подчеркивание

Пример:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

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

• margin: задает внешние отступы вокруг элемента
• padding: задает внутренние отступы внутри элемента
• border: определяет границу элемента

Пример:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Размеры и положение:

• width и height: задают ширину и высоту элемента
• position: определяет способ позиционирования элемента

Пример:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Вам необходимо:

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

Лучше всего это сделать через практику – писать много CSS и смотреть как он работает.

1

Задача

Модуль 1: Web Core, 7 уровень, 2 лекция

Недоступна

Цвет и фон

Цвет и фон

Открыть

1

Задача

Модуль 1: Web Core, 7 уровень, 2 лекция

Недоступна

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

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

Открыть