CSS

CSS (Cascading Style Sheets) - каскадні таблиці стилів. Це мова, яка описує зовнішній вигляд, позиціювання і поведінку HTML-елементів.

Синтаксис​

Блок CSS-коду називають правилом. Воно містить в собі селектор і оголошення.

Селектор вказує до яких елементів потрібно застосувати стилі. У фігурних дужках вказують перелік оголошень. Кожне оголошення складається з властивості та значення властивості. Вони розділяються символом двокрапки й пробілу. Оголошення обовʼязково закінчується крапкою з комою.

селектор {
  властивість1: значення;
  властивість2: значення;
  властивість3: значення;
}

Підключення стилів​

Способи застосування/підключення стилів в HTML-документі:

  • вбудовані стилі (inline styles)

  • вбудована таблиця стилів (embedded stylesheet)

  • зовнішня таблиця стилів (external stylesheet)

Вбудовані стилі​

Вбудовані стилі (inline styles) вказують безпосередньо в тезі в атрибуті style. Недолік такого способу задання стилів в тому, що їх потрібно вказувати в кожному окремому тезі й неможливо масштабувати. Але в рідкісних випадках при динамічному значенні стилізації такий спосіб може бути користним.

<p style="color:red; font-size:20px;">Red text.</p>

Вбудована таблиця стилів​

Для однотипної стилізації елементів зручно використовувати винесені стилі в окремий тег <style> в шапці документа. Відтак один і той самий стиль можна застосувати до різних елементів. Перевагою є те, що стилі виносять в окремий блок, при повторності застосування стилів, скорочується довжина коду і легко швидко правити стилі в межах однієї сторінки. Недолік в тому, що потрібно мати стилі в шапці кожного HTML-документу сайту. 

<head>
  <style type="text/css">
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

Зазвичай в багатосторінкових сайтах такий спосіб стилізації не використовують. Утім є методики його використання для підвищення швидкості завантаження сторінки, коли найважливіші стилі виносять в HTML-документ. Такий підхід називають Critical CSS.

Зовнішня таблиця стилів​

Сьогодні у багатосторінкових сайтах і навіть односторінкових лендінгах заведено виносити стилі в окремий CSS-файл. При такому підході стилізації легко масштабувати проєкт і повторно використовувати стилі до різних елементів на різних сторінках.

Стилі виносять у файл з розширенням .css і підключають в HTML-документі.

<head>
  <link rel="stylesheet" href="./css/styles.css" />
</head>

Можна під'єднати довільну кількість CSS-файлів. Кожен в окремому тезі <link> одне за одним.

Порядок підключення зовнішньої таблиці стилів:

  1. На одному рівні з index.html створити теку css, а всередині неї - файл стилів styles.css

  2. У файлі index.html в тезі <head>, використовуючи тег <link>, під'єднати створений раніше файл styles.css

  3. В атрибуті href вказати шлях до файлу стилів відносно HTML-документа

  4. В атрибуті rel вказати тип документа - stylesheet (таблиця стилів)

PreviousCSS та селекториNextСелектори

Last updated