Chii chinonzi CSS? Cascading Style Sheets, Inopindura CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Chii chinonzi Cascading Style Sheets (CSS)?

Douglas Karr China, Kukadzi 9, 2023

1 109 Maminitsi e4 akaverengwa

Verenga pazasi kuti uwane tsananguro izere yekuti cascading stylesheets inoshanda sei. Isu tinoratidza maapuro edu kumusoro kwepeji kuitira kuti zvive nyore kuwana nekushandisa. Kana iwe uchiverenga chinyorwa ichi kuburikidza neemail kana feed, tinya kusvika dzvanya CSS yako.

Kunze kwekunge iwe uri kunyatso gadzira mawebhusaiti, unogona kusanzwisisa zvizere cascading style sheets (CSS) CSS mutauro wepepa rinoshandiswa kutsanangura kutaridzika uye kuumbwa kwegwaro rakanyorwa mukati HTML or XML. CSS inogona kushandiswa kududzira masitaera ezvinhu zvakasiyana senge font, ruvara, nzvimbo, uye marongerwo. CSS inokutendera kuti upatsanure kuratidzwa kwegwaro rako reHTML kubva pane zvirimo, zvichiita kuti zvive nyore kuchengetedza nekuvandudza maitiro ekuona ewebhusaiti yako.

CSS Mutauro Chimiro

The sarudza ndiyo HTML chinhu chaunoda kuita, uye iyo pfuma uye ukoshi tsanangura masitayera aunoda kushandisa kune icho chinhu:

selector {
  property: value;
}

Semuenzaniso, inotevera CSS ichaita zvese <h1> zvinhu zviri papeji zvine ruvara rutsvuku uye saizi yefonti ye32px:

CSS

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

goho

musoro wenyaya

Iwe unogona zvakare kutsanangura CSS kune yakasarudzika ID pane chinhu:

CSS

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

goho

Intro

Kana shandisa kirasi pazvinhu zvakawanda:

CSS

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

goho

ndinoda ku anosimbisa izwi mune span tag.

Iwe unogona kusanganisira CSS mugwaro rako reHTML nenzira nhatu:

Inline CSS, uchishandisa iyo style hunhu pane HTML element

Yemukati CSS, uchishandisa a <style> element mu <head> yegwaro rako reHTML
CSS yekunze, uchishandisa yakaparadzana .css faira yakabatana negwaro rako reHTML uchishandisa iyo <link> element mu <head> yegwaro rako reHTML

Inopindura CSS

CSS inochinjika zvinoshamisa uye inogona kushandiswa kugadzirisa kuratidzwa kwezvinhu zvichibva pakugadziriswa kwescreen, saka iwe unogona kuve neHTML yakafanana asi uivaka. wirirana kugadziriso yemudziyo:

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

CSS Compression

Iwe unogona kuona mumuenzaniso wepamusoro kuti pane chirevo, mubvunzo wenhau, uye maitiro akawanda anoshandisa nzvimbo uye mafidhi emutsara kuronga maonero eCSS. Iyo itsika yakanaka kudzikisa kana kudzvanya CSS yako pane yako saiti kuderedza masaizi efaira uye, zvino, nguva yaunotora kukumbira uye kupa maitiro ako. Haisi mari shoma… unokwanisa kuona mari inodarika 50% pane mimwe mienzaniso iri pamusoro.

Mazhinji maseva magadzirirwo anopa maturusi anozongomanikidza CSS panhunzi uye cache iyo minified faira kuitira kuti usaite nemawoko.

Chii chinonzi SCSS?

Sassy CSS (SCSS) iCSS preprocessor iyo inowedzera kushanda uye syntax kumutauro weCSS. Inopamhidzira kugona kweCSS nekubvumira kushandiswa kwezvakasiyana, misanganiswa, mabasa, uye zvimwe zvimiro zvisingawanikwe muyakajairwa CSS.

SCSS Advantages

Kunatsiridza kuchengetedza: Nekushandiswa kwezvakasiyana, unogona kuchengeta zvakakosha munzvimbo imwechete uye wozvishandisa zvakare mukati mesheti rako remaitiro, zvichiita kuti zvive nyore kuchengetedza nekuvandudza masitaera ako.
Kurongeka kurinani: Nemisanganiswa, unogona kuita mapoka uye kushandisa zvekare seti dzezvitayera, zvichiita kuti pepa rako rive rakarongeka uye rive nyore kuverenga.
Kuwedzera kushanda: SCSS inosanganisira zvakawanda zvisingawanikwe muCSS yakajairwa, senge mabasa, zvimiro zvekudzora (semuenzaniso kana/zvimwe), uye mashandiro esvomhu. Izvi zvinobvumira mamwe maitiro ane simba uye anoratidza.
Kuita kurinani: Mafaira eSCSS anounganidzwa muCSS, anogona kuvandudza mashandiro nekudzikisa huwandu hwekodhi inoda kucheneswa nebrowser.

SCSS Zvakaipa

Curve yekudzidza: SCSS ine syntax yakasiyana kubva kune yakajairwa CSS, uye unozofanirwa kudzidza iyi syntax nyowani usati waishandisa nemazvo.
Kuwedzera kuomarara: Kunyangwe SCSS ichigona kuita kuti shizha rako rive rakarongeka uye rive nyore kuchengetedza, rinogona kuunza kuwedzera kuomarara mucodebase yako, kunyanya kana usinga jairane nezvinyowani uye syntax.
Kushandisa: Kuti ushandise SCSS, uchada compiler kuti ushandure kodhi yako yeSCSS kuita CSS. Izvi zvinoda kumwe kuseta uye kushandisa, izvo zvinogona kuve chipingamupinyi chekupinda kune vamwe vanogadzira.

Mumuenzaniso uyu pazasi, iyo SCSS kodhi inoshandisa mabhii kuti achengete kukosha ($primary-color uye $font-size) inogona kushandiswa zvakare musheetti yese. Iyo CSS kodhi inogadzirwa kubva kuSCSS kodhi iyi yakaenzana, asi haisanganisi zvinosiyana. Pane kudaro, kukosha kwezvakasiyana zvinoshandiswa zvakananga muCSS.

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

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

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

Chimwe chimiro cheSCSS chinoratidzwa mumuenzaniso uyu masitaera akaiswa. MuSCSS kodhi, iyo h1 masitayera akaiswa mukati me body zvitayera, izvo zvisingagoneke mune yakajairwa CSS. Kana iyo SCSS kodhi yaunganidzwa, masitaera akaiswa anowedzerwa kuita akasiyana masitaera muCSS kodhi.

Pakazere, SCSS inopa akawanda mabhenefiti pamusoro peyakajairwa CSS, asi zvakakosha kuti utarise kutengeserana-offs uye kusarudza chishandiso chakakodzera chepurojekiti yako zvichienderana nezvaunoda uye zvinokumanikidza.