Вміст Маркетинг

Що таке каскадні таблиці стилів (CSS)?

Прочитайте нижче повне пояснення того, як працюють каскадні таблиці стилів. Ми показуємо наші програми у верхній частині сторінки, щоб їх було легко знайти та використовувати. Якщо ви читаєте цю статтю електронною поштою чи каналом, натисніть на стиснути ваш CSS.

Якщо ви насправді не розробляєте сайти, ви можете не повністю зрозуміти каскадні таблиці стилів (CSS). CSS — це мова таблиць стилів, яка використовується для опису зовнішнього вигляду та форматування написаного документа HTML or XML. CSS можна використовувати для визначення стилів для різних елементів, таких як шрифт, колір, інтервали та макет. CSS дозволяє відокремити презентацію вашого HTML-документа від його вмісту, полегшуючи підтримку та оновлення візуального стилю вашого веб-сайту.

Структура мови CSS

Команда селектор це HTML-елемент, який потрібно стилізувати, і власність та значення визначте стилі, які ви хочете застосувати до цього елемента:

selector {
  property: value;
}

Наприклад, наступний CSS зробить усе <h1> елементи на сторінці мають червоний колір і розмір шрифту 32 пікселя:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Вихід

Тема

Ви також можете вказати CSS для унікального ідентифікатора елемента:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Вихід

Введення

Або застосувати клас до кількох елементів:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Вихід

я хочу виділити слово в тезі span.

Ви можете включити CSS у свій HTML-документ трьома способами:

  1. Вбудований CSS, використовуючи style атрибут елемента HTML
  2. Внутрішній CSS, використовуючи a <style> елемент в <head> вашого документа HTML
  3. Зовнішній CSS за допомогою окремого файлу .css, пов’язаного з вашим HTML-документом за допомогою <link> елемент в <head> вашого документа HTML

Адаптивний CSS

CSS є неймовірно гнучким і може використовуватися для налаштування відображення елементів на основі роздільної здатності екрана, тому ви можете мати той самий HTML, але створювати його реагувати до роздільної здатності пристрою:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Стиснення CSS

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

Багато конфігурацій серверів пропонують інструменти, які автоматично стискають CSS на льоту та кешують зменшений файл, щоб вам не довелося робити це вручну.

Що таке SCSS?

Sassy CSS (СКСС) — це препроцесор CSS, який додає додаткові функції та синтаксис до мови CSS. Він розширює можливості CSS, дозволяючи використовувати змінні, міксини, функції та інші функції, недоступні в стандартному CSS.

Переваги SCSS

  • Покращена зручність обслуговування: за допомогою змінних ви можете зберігати значення в одному місці та повторно використовувати їх у своїй таблиці стилів, що полегшує підтримку та оновлення ваших стилів.
  • Краща організація: за допомогою міксинів ви можете групувати та повторно використовувати набори стилів, роблячи вашу таблицю стилів більш упорядкованою та легшою для читання.
  • Розширена функціональність: SCSS містить багато функцій, недоступних у стандартному CSS, наприклад функції, керуючі структури (наприклад, if/else) і арифметичні операції. Це дозволяє створити більш динамічний і виразний стиль.
  • Краща продуктивність: файли SCSS компілюються в CSS, що може підвищити продуктивність за рахунок зменшення обсягу коду, який потрібно проаналізувати браузеру.

Недоліки SCSS

  • Крива навчання: синтаксис SCSS відрізняється від стандартного CSS, і вам потрібно вивчити цей новий синтаксис, перш ніж ви зможете ефективно його використовувати.
  • Додаткова складність: хоча SCSS може зробити вашу таблицю стилів більш організованою та легшою для обслуговування, вона також може внести додаткову складність у вашу кодову базу, особливо якщо ви не знайомі з новими функціями та синтаксисом.
  • Інструменти: щоб використовувати SCSS, вам знадобиться компілятор для перекладу вашого коду SCSS у CSS. Для цього потрібні додаткові налаштування та інструменти, що може стати перешкодою для входу для деяких розробників.

У наведеному нижче прикладі код SCSS використовує змінні для зберігання значень ($primary-color та $font-size), які можна повторно використовувати в таблиці стилів. Код CSS, створений із цього коду SCSS, є еквівалентним, але він не містить змінних. Натомість значення змінних використовуються безпосередньо в CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Ще одна функція SCSS, яка демонструється в цьому прикладі, — це вкладені стилі. У коді SCSS, h1 стилі вкладені в body стилі, що неможливо в стандартному CSS. Коли код SCSS компілюється, вкладені стилі розгортаються в окремі стилі в коді CSS.

Загалом SCSS надає багато переваг порівняно зі стандартним CSS, але важливо врахувати компроміси та вибрати правильний інструмент для вашого проекту на основі ваших потреб і обмежень.

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.