CSS çi ye? Rûpelên Şêweya Cascading, CSS Bersiv, Sassy CSS, Compres, Minify, Unminify, Uncompress Tool

Sheets Style Cascading (CSS) çi ne?

Douglas Karr Pêncşem, Sibat 9, 2023

1 104 Minutes 4 bixwînin

Ji bo ravekirinek bêkêmasî ya ka çawa şêwazên cascading dixebitin li jêr bixwînin. Em sepanên xwe li serê rûpelê nîşan didin da ku dîtin û karanîna wê hêsan be. Ger hûn vê gotarê bi e-name an bi feedê dixwînin, bikirtînin CSS-ya xwe tevlihev bikin.

Heya ku hûn bi rastî malperan pêşve naçin, dibe ku hûn bi tevahî şêwazên kascading fam nekin (CSS). CSS zimanek şêwazê ye ku ji bo danasîna xuyang û formata belgeyek ku tê de hatî nivîsandin tê bikar anîn HTML or XML. CSS dikare were bikar anîn da ku şêwazên ji bo hêmanên cihêreng ên wekî font, reng, valahî, û layout diyar bike. CSS dihêle ku hûn pêşkêşkirina belgeya HTML-a xwe ji naveroka wê veqetînin, ji bo parastin û nûvekirina şêwaza dîtbarî ya malpera xwe hêsantir dike.

Struktura Ziman CSS

Ew hilbijêr hêmana HTML-ê ye ku hûn dixwazin şêwaz bikin, û ya mal û giranî şêwazên ku hûn dixwazin li wê hêmanê bicîh bikin diyar bikin:

selector {
  property: value;
}

Mînakî, CSS-ya jêrîn dê hemî çêbike <h1> hêmanên li ser rûpelê rengê sor û mezinahiya tîpan 32 px hene:

CSS

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

Karûabr

sernivîs

Her weha hûn dikarin CSS-ê ji bo nasnameyek yekta li ser hêmanek diyar bikin:

CSS

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

Karûabr

Intro

An jî çînek li ser gelek hêmanan bicîh bikin:

CSS

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

Karûabr

Ez dixwazim highlight peyvek di tagê span de.

Hûn dikarin CSS-ê di belgeya HTML-a xwe de bi sê awayan têxin nav:

Inline CSS, bi kar tînin style taybetmendiyek li ser hêmanek HTML

CSS-ya navxweyî, bi karanîna a <style> element di <head> belgeya xweya HTML
CSS-ya derve, bi karanîna pelê .css veqetandî ku bi belgeya HTML-a we ve girêdayî ye bikar tîne <link> element di <head> belgeya xweya HTML

CSS bersivdar

CSS pir maqûl e û dikare were bikar anîn da ku nîşana hêmanan li ser bingeha çareseriya ekranê rast bike, ji ber vê yekê hûn dikarin heman HTML-ê hebe lê wê ava bikin. pêrakirin ji bo çareseriya cîhazê:

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

CSS Compression

Hûn dikarin di mînaka li jor de bibînin ku şîroveyek, pirsek medyayê, û gelek şêwaz hene ku cîh û rêzikên rêzê bikar tînin da ku dîtina CSS-ê organîze bikin. Pratîkek pir girîng e ku hûn CSS-ya xwe li ser malpera xwe kêm bikin an tevlihev bikin da ku mezinahiyên pelan kêm bikin û, dûv re, dema ku hewce dike ku hûn şêwaza xwe daxwaz bikin û bidin. Ew ne hindik e… hûn dikarin li ser hin mînakên li jor zêdetirî 50% teserûfê bibînin.

Pir mîhengên serverê amûran pêşkêş dikin ku dê bixweber CSS-ê di firînê de tevlihev bikin û pelê kêmkirî bişopînin da ku hûn ne hewce ne ku wê bi destan bikin.

SCSS çi ye?

Sassy CSS (SCSS) pêşprocessorek CSS-ê ye ku fonksiyon û hevoksaziya zêde li zimanê CSS zêde dike. Ew kapasîteyên CSS-ê bi destûrkirina karanîna guhêrbar, mîksîn, fonksiyon û taybetmendiyên din ên ku di CSS-ya standard de tune ne, dirêj dike.

Avantajên SCSS

Xweparastina çêtir: Bi karanîna guhêrbaran, hûn dikarin nirxan li yek cîhek hilînin û wan li seranserê şêwazê xwe ji nû ve bikar bînin, ji bo parastin û nûvekirina şêwazên xwe hêsantir dike.
Organîzasyona çêtir: Bi mixins re, hûn dikarin komek şêwazan kom bikin û ji nû ve bikar bînin, şêwaza we organîzetir û xwendinê hêsantir dike.
Zêdebûna fonksiyonê: SCSS gelek taybetmendiyên ku di CSS-ya standard de peyda nabin vedihewîne, wek fonksiyon, strukturên kontrolê (mînak heke / din), û operasyonên jimartinê. Ev rê dide şêwazek dînamîk û eşkeretir.
Performansa çêtir: Pelên SCSS-ê di CSS-ê de têne berhev kirin, ku dikare performansê bi kêmkirina mêjera koda ku hewce dike ji hêla gerokê ve were pars kirin çêtir bike.

Dezawantajên SCSS

Kevirê fêrbûnê: SCSS ji CSS-ya standard hevoksaziyek cihêreng heye, û hûn ê hewce ne ku vê hevoksaziya nû fêr bibin berî ku hûn wê bi bandor bikar bînin.
Tevliheviya Zêdetir: Her çend SCSS dikare şêwaza we organîzetir û domandina hêsantir bike, ew di heman demê de dikare tevliheviyek din jî têxe nav koda we, nemaze heke hûn bi taybetmendî û hevoksaziya nû nizanin.
Amûr: Ji bo ku hûn SCSS-ê bikar bînin, hûn ê hewceyê berhevkarek bikin ku koda SCSS-a we wergerîne CSS. Ji bo vê yekê sazkirin û amûrek din hewce dike, ku dikare ji bo hin pêşdebiran bibe astengek li pêşiya têketinê.

Di vê mînaka jêrîn de, koda SCSS guhêrbaran bikar tîne da ku nirxan hilîne ($primary-color û $font-size) ku dikare li seranserê şêwazê ji nû ve were bikar anîn. Koda CSS ya ku ji vê koda SCSS-ê hatî çêkirin wekhev e, lê ew guherbaran nagire. Di şûna wê de, nirxên guhêrbar rasterast di CSS-ê de têne bikar anîn.

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

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

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

Taybetmendiyek din a SCSS ya ku di vê nimûneyê de hatî destnîşan kirin şêwazên nested e. Di koda SCSS de, ya h1 şêwaz di hundurê de têne hêlîn kirin body şêwazên ku di CSS-ya standard de ne gengaz e. Dema ku koda SCSS-ê tê berhev kirin, şêwazên hêlînkirî di koda CSS-ê de li şêwazên cihê têne berfireh kirin.

Bi tevayî, SCSS gelek avantajên li ser CSS-ya standard peyda dike, lê girîng e ku meriv lihevhatinan bihesibîne û ji bo projeya xwe amûrek rast hilbijêrin li gorî hewcedarî û astengiyên xwe.