Maketing Kontni

Ki sa ki Cascading Style Sheets (CSS)?

Li pi ba a pou yon eksplikasyon konplè sou fason kaskad stylesheets travay. Nou montre aplikasyon nou yo nan tèt paj la pou li fasil pou jwenn ak itilize. Si w ap li atik sa a pa imel oswa manje, klike sou konprese CSS ou.

Sòf si w ap aktyèlman devlope sit, ou ka pa konplètman konprann fèy style kaskad (CSS). CSS se yon langaj style ki itilize pou dekri aparans ak fòma yon dokiman ekri HTML or XML. CSS ka itilize pou presize estil pou divès eleman tankou font, koulè, espas, ak layout. CSS pèmèt ou separe prezantasyon dokiman HTML ou a ak kontni li yo, sa ki fè li pi fasil kenbe ak mete ajou style vizyèl nan sit entènèt ou a.

Estrikti langaj CSS

Jounal selektè se eleman HTML ou vle style, ak la pwopriyete ak valè defini estil ou vle aplike nan eleman sa a:

selector {
  property: value;
}

Pou egzanp, CSS sa yo pral fè tout <h1> eleman sou yon paj gen yon koulè wouj ak yon gwosè font 32px:

CSS

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

Sòti

Tit

Ou kapab tou presize CSS pou yon ID inik sou yon eleman:

CSS

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

Sòti

Entwodui

Oswa aplike yon klas atravè plizyè eleman:

CSS

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

Sòti

mwen vle rekò yon mo nan tag span.

Ou ka mete CSS nan dokiman HTML ou nan twa fason:

  1. Inline CSS, lè l sèvi avèk la style atribi sou yon eleman HTML
  2. Entèn CSS, lè l sèvi avèk yon <style> eleman nan <head> nan dokiman HTML ou a
  3. CSS ekstèn, lè l sèvi avèk yon dosye .css separe ki lye ak dokiman HTML ou lè l sèvi avèk <link> eleman nan <head> nan dokiman HTML ou a

CSS reponn

CSS se ekstrèmman fleksib epi yo ka itilize yo ajiste ekspozisyon an nan eleman ki baze sou rezolisyon ekran, konsa ou ka gen menm HTML la men bati li. reponn nan rezolisyon aparèy la:

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

CSS konpresyon

Ou ka wè nan egzanp ki anwo a ke gen yon kòmantè, yon rechèch medya, ak plizyè estil ki itilize espas ak liy liy yo òganize gade nan CSS la. Li se yon bon pratik pou minify oswa konprese CSS ou sou sit ou a diminye gwosè dosye epi, answit, tan li pran pou mande ak rann manier ou. Se pa yon ti kantite... ou ka wè plis pase 50% ekonomi sou kèk nan egzanp ki anwo yo.

Anpil konfigirasyon sèvè ofri zouti ki pral otomatikman konprese CSS sou vole ak kachèt fichye minified la pou ke ou pa oblije fè li manyèlman.

ki sa ki SCSS?

Sassy CSS (SCSS) se yon preprosesè CSS ki ajoute plis fonksyonalite ak sentaks nan lang CSS la. Li pwolonje kapasite CSS yo lè li pèmèt itilizasyon varyab, mixin, fonksyon, ak lòt karakteristik ki pa disponib nan CSS estanda.

Avantaj SCSS

  • Amelyore antretyen: Avèk itilizasyon varyab, ou ka estoke valè yo nan yon sèl kote epi reitilize yo nan tout fèy style ou a, sa ki fè li pi fasil kenbe ak mete ajou estil ou yo.
  • Pi bon òganizasyon: Avèk mixins, ou ka gwoupe epi reitilize seri estil, fè fèy style ou a pi òganize epi pi fasil pou li.
  • Ogmante fonksyonalite: SCSS gen ladan anpil karakteristik ki pa disponib nan CSS estanda, tankou fonksyon, estrikti kontwòl (egzanp si/lòt), ak operasyon aritmetik. Sa a pèmèt yon manier plis dinamik ak ekspresif.
  • Pi bon pèfòmans: dosye SCSS yo konpile nan CSS, sa ki ka amelyore pèfòmans lè yo diminye kantite kòd ki bezwen analize pa navigatè a.

Dezavantaj SCSS

  • Koub aprantisaj: SCSS gen yon sentaks diferan de CSS estanda, epi w ap bezwen aprann nouvo sentaks sa a anvan ou ka itilize li efektivman.
  • Konpleksite adisyonèl: Malgre ke SCSS ka fè fèy style ou a pi òganize epi pi fasil pou kenbe, li kapab tou entwodui plis konpleksite nan baz kod ou a, sitou si ou pa abitye ak nouvo karakteristik ak sentaks yo.
  • Zouti: Pou itilize SCSS, w ap bezwen yon du pou tradui kòd SCSS ou an CSS. Sa a mande konfigirasyon adisyonèl ak zouti, ki ka yon baryè pou antre pou kèk devlopè.

Nan egzanp sa a anba a, kòd SCSS la sèvi ak varyab pou estoke valè ($primary-color ak $font-size) ki ka reyitilize nan tout fèy style la. Kòd CSS ki pwodui nan kòd SCSS sa a ekivalan, men li pa genyen varyab yo. Olye de sa, valè varyab yo itilize dirèkteman nan CSS la.

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

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

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

Yon lòt karakteristik nan SCSS ki demontre nan egzanp sa a se estil enbrike. Nan kòd SCSS la, la h1 estil yo enbrike nan la body estil, ki pa posib nan CSS estanda. Lè kòd SCSS la konpile, estil enbrike yo elaji nan estil separe nan kòd CSS la.

An jeneral, SCSS bay anpil avantaj sou CSS estanda, men li enpòtan pou w konsidere konpwomi yo epi chwazi bon zouti pou pwojè w la dapre bezwen w ak kontrent w yo.

Douglas Karr

Douglas Karr se CMO nan OpenINSIGHTS ak fondatè a nan Martech Zone. Douglas te ede plizyè douzèn demaraj MarTech ki gen siksè, li te ede nan dilijans plis pase $5 milya nan akizisyon ak envestisman Martech, epi li kontinye ede konpayi yo nan mete ann aplikasyon ak otomatize estrateji lavant ak maketing yo. Douglas se yon transfòmasyon dijital entènasyonalman rekonèt ak ekspè MarTech ak oratè. Douglas se tou yon otè pibliye nan yon gid Dummie a ak yon liv lidèchip biznis.

Atik ki gen rapò

Retounen nan bouton tèt
Fèmen

Adblock Detekte

Martech Zone se kapab ba ou kontni sa a gratis paske nou monetize sit nou an atravè revni anons, lyen afilye, ak parennaj. Nou ta apresye si ou ta retire bloke anons ou a pandan w ap gade sit nou an.