Маркетингии Content

Варақаҳои услуби каскадӣ (CSS) чистанд?

Барои шарҳи пурраи чӣ гуна кор кардани ҷадвалҳои услубҳои каскадӣ дар зер хонед. Мо барномаҳои худро дар болои саҳифа нишон медиҳем, то пайдо ва истифодааш осон бошад. Агар шумо ин мақоларо тавассути почтаи электронӣ ё канал хонед, ба он клик кунед 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-ро барои ID-и беназир дар элемент муайян кунед:

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-и худ бо се роҳ дохил кунед:

  1. Inline 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-и худро дар сайти худ кам кардан ё фишурдани CSS-ро барои кам кардани андозаи файл ва баъдан вақти дархост ва пешниҳоди ороиши шумо лозим аст. Ин маблағи кам нест… шумо метавонед дар баъзе мисолҳои дар боло овардашуда зиёда аз 50% сарфаро бинед.

Бисёре аз конфигуратсияҳои сервер асбобҳоеро пешниҳод мекунанд, ки CSS-ро ба таври худкор фишурда мекунанд ва файли хурдкардашударо кэш мекунанд, то ба шумо лозим нест, ки онро дастӣ иҷро кунед.

SCSS чист?

Sassy CSS (SCSS) як протсессори CSS мебошад, ки ба забони CSS функсияҳо ва синтаксиси иловагӣ илова мекунад. Он имкониятҳои CSS-ро тавассути имкон додани истифодаи тағирёбандаҳо, омехтаҳо, функсияҳо ва дигар хусусиятҳое, ки дар CSS стандартӣ дастрас нестанд, васеъ мекунад.

Афзалиятҳои SCSS

  • Нигоҳдории беҳтар: Бо истифода аз тағирёбандаҳо, шумо метавонед арзишҳоро дар як ҷо нигоҳ доред ва онҳоро дар тамоми ҷадвали услуби худ дубора истифода баред, ки нигоҳдорӣ ва навсозии услубҳои худро осонтар мекунад.
  • Ташкили беҳтар: Бо омехтаҳо, шумо метавонед маҷмӯи сабкҳоро гурӯҳбандӣ кунед ва аз нав истифода баред, варақаи услуби шуморо ба тартиб даровардан ва хондан осонтар мекунад.
  • Афзоиши функсияҳо: SCSS бисёр хусусиятҳоро дар бар мегирад, ки дар CSS стандартӣ мавҷуд нестанд, ба монанди функсияҳо, сохторҳои идоракунӣ (масалан, агар/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 мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

Мақолаҳо марбут

Бозгашт ба боло
наздик

Блоки рекламавӣ ошкор карда шуд

Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.