Какво е CSS? Cascading Style Sheets, Responsive CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Какво представляват каскадните стилови таблици (CSS)?

Douglas Karr Четвъртък, февруари 9, 2023

1 104 Прочети 4 минути

Прочетете по-долу за пълно обяснение как работят каскадните таблици със стилове. Ние показваме нашите приложения в горната част на страницата, така че да е лесно за намиране и използване. Ако четете тази статия по имейл или емисия, щракнете върху компресирайте своя CSS.

Освен ако всъщност не разработвате сайтове, може да не разберете напълно каскадните стилови листове (CSS). CSS е стилов език, използван за описване на външния вид и форматирането на написан документ HTML or XML. CSS може да се използва за определяне на стилове за различни елементи като шрифт, цвят, разстояние и оформление. CSS ви позволява да отделите представянето на вашия HTML документ от неговото съдържание, което улеснява поддържането и актуализирането на визуалния стил на вашия уебсайт.

Езикова структура на CSS

- селектор е HTML елементът, който искате да стилизирате, и имот и стойност дефинирайте стиловете, които искате да приложите към този елемент:

selector {
  property: value;
}

Например следният CSS ще направи всичко <h1> елементите на страницата имат червен цвят и размер на шрифта 32px:

CSS

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

Продукция

Заглавие

Можете също да посочите CSS за уникален идентификатор на елемент:

CSS

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

Продукция

Intro

Или приложете клас в множество елементи:

CSS

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

Продукция

искам да подчертае дума в тага span.

Можете да включите CSS във вашия HTML документ по три начина:

Вграден CSS, използвайки style атрибут на HTML елемент

Вътрешен CSS, използвайки a <style> елемент в <head> на вашия HTML документ
Външен 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 (SCSS) е CSS препроцесор, който добавя допълнителна функционалност и синтаксис към CSS езика. Той разширява възможностите на CSS, като позволява използването на променливи, миксини, функции и други функции, които не са налични в стандартния CSS.

Предимства на SCSS

Подобрена поддръжка: С използването на променливи можете да съхранявате стойности на едно място и да ги използвате повторно във вашия лист със стилове, което улеснява поддържането и актуализирането на вашите стилове.
По-добра организация: С mixins можете да групирате и използвате повторно набори от стилове, което прави вашата таблица със стилове по-организирана и по-лесна за четене.
Повишена функционалност: 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, но е важно да вземете предвид компромисите и да изберете правилния инструмент за вашия проект въз основа на вашите нужди и ограничения.