Kontenut Marketing

X'inhuma Cascading Style Sheets (CSS)?

Aqra hawn taħt għal spjegazzjoni sħiħa ta' kif jaħdmu l-stylesheets cascading. Aħna nuru l-apps tagħna fin-naħa ta' fuq tal-paġna sabiex tkun faċli biex issibha u tużaha. Jekk qed taqra dan l-artikolu permezz ta' email jew feed, ikklikkja fuq ikkompressa CSS tiegħek.

Sakemm ma tkunx qed tiżviluppa siti fil-fatt, tista' ma tifhimx bis-sħiħ il-folji tal-istil cascading (CSS). CSS hija lingwa tal-istil użata biex tiddeskrivi d-dehra u l-ifformattjar ta’ dokument miktub fih HTML or XML. CSS jista 'jintuża biex jispeċifika l-istili għal diversi elementi bħal font, kulur, spazjar, u tqassim. Is-CSS jippermettilek tissepara l-preżentazzjoni tad-dokument HTML tiegħek mill-kontenut tiegħu, u tagħmilha aktar faċli li żżomm u taġġorna l-istil viżwali tal-websajt tiegħek.

Struttura tal-Lingwa CSS

il selettur huwa l-element HTML li trid stil, u l- proprjetà u, valur iddefinixxi l-istili li trid tapplika għal dak l-element:

selector {
  property: value;
}

Pereżempju, is-CSS li ġej se jagħmel kollox <h1> elementi fuq paġna għandhom kulur aħmar u daqs tat-tipa ta' 32px:

CSS

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

output

Intestatura

Tista' wkoll tispeċifika CSS għal ID unika fuq element:

CSS

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

output

Intro

Jew applika klassi f'diversi elementi:

CSS

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

output

Irrid li jenfasizzaw kelma fit-tikketta span.

Tista' tinkludi CSS fid-dokument HTML tiegħek fi tliet modi:

  1. Inline CSS, bl-użu tal- style attribut fuq element HTML
  2. CSS intern, bl-użu ta' a <style> element fil- <head> tad-dokument HTML tiegħek
  3. CSS estern, billi tuża fajl .css separat marbut mad-dokument HTML tiegħek billi tuża l- <link> element fil- <head> tad-dokument HTML tiegħek

CSS li jirrispondu

CSS huwa oerhört flessibbli u jista 'jintuża biex jaġġusta l-wiri ta' elementi abbażi tar-riżoluzzjoni tal-iskrin, sabiex ikollok l-istess HTML imma tibnih jirrispondu għar-riżoluzzjoni tat-tagħmir:

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

Kompressjoni CSS

Tista 'tara fl-eżempju ta' hawn fuq li hemm kumment, mistoqsija tal-midja, u stili multipli li jużaw spazji u line feeds biex jorganizzaw il-veduta tas-CSS. Hija prattika kbira li timminimizza jew tikkompressa CSS tiegħek fuq is-sit tiegħek biex tnaqqas id-daqsijiet tal-fajls u, sussegwentement, iż-żmien li tieħu biex titlob u tirrendi l-grafika tiegħek. Mhuwiex ammont żgħir... tista' tara tfaddil ta' aktar minn 50% fuq xi wħud mill-eżempji ta' hawn fuq.

Ħafna konfigurazzjonijiet tas-server joffru għodod li awtomatikament jikkompressaw is-CSS fuq il-fly u jżommu fil-cache l-fajl minifikat sabiex ma jkollokx għalfejn tagħmel dan manwalment.

X'inhu SCSS?

Sassy CSS (SCSS) huwa preproċessur CSS li jżid funzjonalità u sintassi addizzjonali mal-lingwa CSS. Huwa jestendi l-kapaċitajiet tas-CSS billi jippermetti l-użu ta 'varjabbli, mixins, funzjonijiet, u karatteristiċi oħra li mhumiex disponibbli fis-CSS standard.

Vantaġġi SCSS

  • Mantenibbiltà mtejba: Bl-użu ta 'varjabbli, tista' taħżen il-valuri f'post wieħed u terġa' tużahom matul il-stylesheet tiegħek, u tagħmilha aktar faċli li żżomm u taġġorna l-istili tiegħek.
  • Organizzazzjoni aħjar: Bil-mixins, tista’ tiġbor u tuża mill-ġdid settijiet ta’ stili, u b’hekk il-folja tal-istil tiegħek tkun aktar organizzata u aktar faċli biex tinqara.
  • Żieda fil-funzjonalità: SCSS jinkludi ħafna karatteristiċi mhux disponibbli fis-CSS standard, bħal funzjonijiet, strutturi ta' kontroll (eż. jekk/ inkella), u operazzjonijiet aritmetiċi. Dan jippermetti stil aktar dinamiku u espressiv.
  • Prestazzjoni aħjar: Il-fajls SCSS huma kkompilati f'CSS, li jistgħu jtejbu l-prestazzjoni billi jnaqqas l-ammont ta 'kodiċi li jeħtieġ li jiġi analizzat mill-browser.

SCSS Żvantaġġi

  • Kurva tat-tagħlim: SCSS għandu sintassi differenti minn CSS standard, u jkollok bżonn titgħallem din is-sintassi l-ġdida qabel ma tkun tista' tużaha b'mod effettiv.
  • Kumplessità addizzjonali: Għalkemm SCSS jista' jagħmel il-folja tal-istil tiegħek aktar organizzata u aktar faċli biex tinżamm, tista' wkoll tintroduċi kumplessità addizzjonali fil-codebase tiegħek, speċjalment jekk m'intix familjari mal-karatteristiċi u s-sintassi l-ġodda.
  • Għodda: Biex tuża SCSS, ikollok bżonn kompilatur biex jittraduċi l-kodiċi SCSS tiegħek f'CSS. Dan jeħtieġ setup u għodda addizzjonali, li jistgħu jkunu ostaklu għad-dħul għal xi żviluppaturi.

F'dan l-eżempju hawn taħt, il-kodiċi SCSS jagħmel użu minn varjabbli biex jaħżen il-valuri ($primary-color u, $font-size) li jistgħu jerġgħu jintużaw matul il-stylesheet. Il-kodiċi CSS li huwa ġġenerat minn dan il-kodiċi SCSS huwa ekwivalenti, iżda ma jinkludix il-varjabbli. Minflok, il-valuri tal-varjabbli jintużaw direttament fis-CSS.

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

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

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

Karatteristika oħra ta 'SCSS li hija murija f'dan l-eżempju hija stili nested. Fil-kodiċi SCSS, il- h1 stili huma nested fi ħdan il- body stili, li mhux possibbli fis-CSS standard. Meta l-kodiċi SCSS jiġi kkompilat, l-istili nested jiġu estiżi fi stili separati fil-kodiċi CSS.

B'mod ġenerali, SCSS jipprovdi ħafna vantaġġi fuq CSS standard, iżda huwa importanti li tikkunsidra l-kompromessi u tagħżel l-għodda t-tajba għall-proġett tiegħek ibbażata fuq il-ħtiġijiet u r-restrizzjonijiet tiegħek.

Douglas Karr

Douglas Karr huwa CMO ta OpenINSIGHTS u l-fundatur tal- Martech Zone. Douglas għen għexieren ta’ startups ta’ MarTech ta’ suċċess, għen fid-diliġenza dovuta ta’ aktar minn $5 biljun f’akkwisti u investimenti ta’ Martech, u jkompli jgħin lill-kumpaniji fl-implimentazzjoni u l-awtomatizzazzjoni tal-istrateġiji tal-bejgħ u l-kummerċjalizzazzjoni tagħhom. Douglas huwa trasformazzjoni diġitali rikonoxxuta internazzjonalment u espert u kelliem tal-MarTech. Douglas huwa wkoll awtur ippubblikat ta 'gwida ta' Dummie u ktieb ta 'tmexxija tan-negozju.

Artikli relatati

Lura għall-buttuna ta 'fuq
Agħlaq

Adblock Individwat

Martech Zone huwa kapaċi jagħtik dan il-kontenut mingħajr ebda spiża għaliex aħna monetize is-sit tagħna permezz ta 'dħul minn reklam, links affiljati, u sponsorships. Napprezzaw jekk tneħħi l-imblokkatur tar-reklami tiegħek hekk kif tara s-sit tagħna.