Варақаҳои услуби каскадӣ (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;
}
Натиҷаи
Ё синфро дар байни якчанд унсурҳо татбиқ кунед:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}
Натиҷаи
Ман мехоҳам таъкид калима дар теги span.
Шумо метавонед CSS-ро ба ҳуҷҷати HTML-и худ бо се роҳ дохил кунед:
- Inline 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-и худро дар сайти худ кам кардан ё фишурдани 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-и стандартӣ бартариҳои зиёд фароҳам меорад, аммо муҳим аст, ки бартариятҳоро баррасӣ кунед ва абзори дурусти лоиҳаи худро дар асоси ниёзҳо ва маҳдудиятҳои худ интихоб кунед.