Базовий синтаксис 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 і дивитись, як він працює.