Hvað er CSS? Cascading Style Sheets, Responsive CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Hvað eru Cascading Style Sheets (CSS)?

Douglas Karr Fimmtudagur, febrúar 9, 2023

1 104 4 mínútur lesa

Lestu hér að neðan til að fá fulla útskýringu á því hvernig fellandi stílblöð virka. Við birtum öppin okkar efst á síðunni þannig að auðvelt sé að finna þau og nota. Ef þú ert að lesa þessa grein með tölvupósti eða straumi, smelltu í gegnum til þjappaðu CSS þinn.

Nema þú sért í raun og veru að þróa síður, getur verið að þú skiljir ekki að fullu fallandi stílblöð (CSS). CSS er stílblaðsmál notað til að lýsa útliti og sniði skjals sem skrifað er í HTML or XML. CSS er hægt að nota til að tilgreina stíla fyrir ýmsa þætti eins og leturgerð, lit, bil og útlit. CSS gerir þér kleift að aðskilja framsetningu HTML skjalsins þíns frá innihaldi þess, sem gerir það auðveldara að viðhalda og uppfæra sjónrænan stíl vefsíðunnar þinnar.

CSS tungumálauppbygging

The valtari er HTML þátturinn sem þú vilt stíla, og eign og gildi skilgreindu stílana sem þú vilt nota á þann þátt:

selector {
  property: value;
}

Til dæmis mun eftirfarandi CSS gera allt <h1> þættir á síðu hafa rauðan lit og leturstærð 32px:

CSS

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

Output

Fyrirsögn

Þú getur líka tilgreint CSS fyrir einstakt auðkenni á frumefni:

CSS

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

Output

intro

Eða notaðu flokk yfir marga þætti:

CSS

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

Output

Ég vil varpa ljósi á orð í span taginu.

Þú getur sett CSS inn í HTML skjalið þitt á þrjá vegu:

Innbyggður CSS, með því að nota style eigind á HTML frumefni

Innri CSS, með því að nota a <style> þáttur í <head> af HTML skjalinu þínu
Ytri CSS, með því að nota sérstaka .css skrá sem tengist HTML skjalinu þínu með því að nota <link> þáttur í <head> af HTML skjalinu þínu

Móttækilegur CSS

CSS er ótrúlega sveigjanlegt og hægt að nota til að stilla birtingu þátta út frá skjáupplausn, svo þú getur haft sama HTML en byggt það móttækilegur að upplausn tækisins:

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

CSS þjöppun

Þú getur séð í dæminu hér að ofan að það er athugasemd, fjölmiðlafyrirspurn og margir stílar sem nota bil og línustrauma til að skipuleggja sýn á CSS. Það er frábær æfing að minnka eða þjappa CSS á síðuna þína til að minnka skráarstærð og, í kjölfarið, þann tíma sem það tekur að biðja um og gera stílinn þinn. Það er ekki lítið magn ... þú getur séð yfir 50% sparnað á sumum dæmanna hér að ofan.

Margar stillingar miðlara bjóða upp á verkfæri sem þjappa CSS sjálfkrafa saman í skyndi og geyma smækkuðu skrána svo að þú þurfir ekki að gera það handvirkt.

Hvað er SCSS?

Sassy CSS (SCSS) er CSS forgjörvi sem bætir viðbótarvirkni og setningafræði við CSS tungumálið. Það eykur getu CSS með því að leyfa notkun á breytum, blöndun, aðgerðum og öðrum eiginleikum sem eru ekki tiltækar í venjulegu CSS.

SCSS Kostir

Bætt viðhald: Með því að nota breytur geturðu geymt gildi á einum stað og endurnýtt þau í gegnum stílblaðið þitt, sem gerir það auðveldara að viðhalda og uppfæra stílana þína.
Betra skipulag: Með blöndunum geturðu flokkað og endurnýtt sett af stílum, sem gerir stílblaðið þitt skipulagðara og auðveldara að lesa.
Aukin virkni: SCSS inniheldur marga eiginleika sem ekki eru tiltækir í venjulegu CSS, svo sem aðgerðir, stjórnskipulag (td ef/annað) og reikniaðgerðir. Þetta gerir það að verkum að kraftmeiri og svipmikill stíll er.
Betri afköst: SCSS skrár eru settar saman í CSS, sem getur bætt árangur með því að minnka magn kóða sem þarf að flokka af vafrann.

SCSS ókostir

Lærdómsferill: SCSS hefur aðra setningafræði en venjulegt CSS og þú þarft að læra þessa nýju setningafræði áður en þú getur notað hana á áhrifaríkan hátt.
Viðbótarflækjustig: Þó að SCSS geti gert stílblaðið þitt skipulagðara og auðveldara í viðhaldi, getur það einnig komið á fleiri flækjum inn í kóðagrunninn þinn, sérstaklega ef þú þekkir ekki nýju eiginleikana og setningafræðina.
Verkfæri: Til að nota SCSS þarftu þýðanda til að þýða SCSS kóðann þinn yfir í CSS. Þetta krefst viðbótaruppsetningar og verkfæra, sem getur verið aðgangshindrun fyrir suma forritara.

Í þessu dæmi hér að neðan notar SCSS kóðinn breytur til að geyma gildi ($primary-color og $font-size) sem hægt er að endurnýta í gegnum stílblaðið. CSS kóðinn sem er búinn til úr þessum SCSS kóða er jafngildur, en hann inniheldur ekki breyturnar. Þess í stað eru gildi breytanna notuð beint í CSS.

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

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

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

Annar eiginleiki SCSS sem sýndur er í þessu dæmi er hreiður stíll. Í SCSS kóðanum er h1 stíll er hreiður inn í body stílum, sem er ekki mögulegt í venjulegu CSS. Þegar SCSS kóðann er settur saman, eru hreiður stíll stækkaður í aðskilda stíla í CSS kóðanum.

Á heildina litið veitir SCSS marga kosti fram yfir venjulegt CSS, en það er mikilvægt að íhuga málamiðlanir og velja rétta tólið fyrir verkefnið þitt út frá þörfum þínum og takmörkunum.