CSS yog dab tsi? Cascading Style Sheets, Teb CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Cascading Style Sheets (CSS) yog dab tsi?

Douglas Karr Hnub Thursday, Lub Ob Hlis 9, 2023

1 109 4 feeb nyeem

Nyeem hauv qab no rau kev piav qhia tag nrho ntawm cascading stylesheets ua haujlwm. Peb tso saib peb cov apps nyob rau sab saum toj ntawm nplooj ntawv kom nws yooj yim mus nrhiav thiab siv. Yog tias koj nyeem tsab xov xwm no ntawm email lossis pub, nyem rau ntawm compress koj CSS.

Tshwj tsis yog tias koj tab tom tsim qhov chaw tiag tiag, koj yuav tsis nkag siab tag nrho cov ntawv cascading style (CSS). CSS yog ib hom lus siv los piav qhia txog qhov tshwm sim thiab formatting ntawm cov ntaub ntawv sau rau hauv HTML or XML. CSS tuaj yeem siv los qhia cov qauv rau ntau yam xws li font, xim, sib nrug, thiab teeb tsa. CSS tso cai rau koj cais qhov kev nthuav qhia ntawm koj cov ntaub ntawv HTML los ntawm nws cov ntsiab lus, ua kom yooj yim los tswj thiab hloov kho qhov pom ntawm koj lub vev xaib.

CSS Language Structure

cov xaiv yog lub ntsiab HTML koj xav kom style, thiab cov vaj tse thiab tus nqi txhais cov style uas koj xav siv rau lub caij ntawd:

selector {
  property: value;
}

Piv txwv li, CSS hauv qab no yuav ua txhua yam <h1> cov ntsiab lus ntawm nplooj ntawv muaj xim liab thiab font loj ntawm 32px:

CSS

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

tso zis

nqe lus hais txog

Koj tuaj yeem hais qhia CSS rau ib tus ID tshwj xeeb ntawm ib lub caij:

CSS

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

tso zis

Intro

Los yog siv ib chav kawm hla ntau yam:

CSS

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

tso zis

Kuv xav highlight ib lo lus hauv span tag.

Koj tuaj yeem suav nrog CSS hauv koj daim ntawv HTML hauv peb txoj kev:

Inline CSS, siv lub style attribute ntawm ib qho HTML element

Internal CSS, siv a <style> element hauv <head> ntawm koj cov ntaub ntawv HTML
Sab nraud CSS, siv cov ntaub ntawv sib cais .css txuas rau koj cov ntaub ntawv HTML siv lub <link> element hauv <head> ntawm koj cov ntaub ntawv HTML

Teb CSS

CSS yog qhov hloov tau zoo kawg thiab tuaj yeem siv los kho cov zaub ntawm cov ntsiab lus raws li kev tshuaj ntsuam, yog li koj tuaj yeem muaj tib HTML tab sis tsim nws. teb rau qhov kev daws teeb meem ntawm lub cuab yeej:

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

CSS Compression

Koj tuaj yeem pom hauv qhov piv txwv saum toj no tias muaj cov lus qhia, cov lus nug xov xwm, thiab ntau yam uas siv qhov chaw thiab kab noj los npaj qhov kev pom ntawm CSS. Nws yog ib qho kev xyaum zoo los txo qis lossis nthuav koj CSS ntawm koj qhov chaw kom txo cov ntaub ntawv ntau thiab tsawg, tom qab ntawd, lub sij hawm nws yuav siv sij hawm los thov thiab muab koj cov styling. Nws tsis yog ib qho me me… koj tuaj yeem pom ntau dua 50% kev txuag ntawm qee qhov piv txwv saum toj no.

Ntau lub server configurations muaj cov cuab yeej uas yuav cia li compress CSS ntawm ya thiab cache cov ntaub ntawv minified kom koj tsis tas yuav ua nws manually.

SCSS yog dab tsi?

Sassy CSS (SCSS) yog CSS preprocessor uas ntxiv functionality thiab syntax rau CSS hom lus. Nws txuas ntxiv lub peev xwm ntawm CSS los ntawm kev tso cai siv cov hloov pauv, mixins, ua haujlwm, thiab lwm yam uas tsis muaj nyob hauv CSS tus qauv.

Qhov zoo ntawm SCSS

Txhim kho kev ruaj ntseg: Nrog kev siv cov kev hloov pauv, koj tuaj yeem khaws cov txiaj ntsig hauv ib qho chaw thiab rov siv dua thoob plaws hauv koj daim ntawv teev npe, ua kom yooj yim los tswj thiab hloov kho koj cov qauv.
Lub koom haum zoo dua: Nrog cov mixins, koj tuaj yeem pab pawg thiab rov qab siv cov txheej txheem, ua rau koj cov ntawv sau tau yooj yim dua thiab nyeem tau yooj yim dua.
Kev ua haujlwm ntau ntxiv: SCSS suav nrog ntau yam tsis muaj nyob hauv CSS tus qauv, xws li kev ua haujlwm, tswj cov qauv (xws li yog tias / lwm tus), thiab kev ua lej lej. Qhov no tso cai rau ntau dynamic thiab nthuav styling.
Kev ua tau zoo dua: SCSS cov ntaub ntawv tau muab tso ua ke rau hauv CSS, uas tuaj yeem txhim kho kev ua tau zoo los ntawm kev txo tus lej code uas yuav tsum tau txheeb xyuas los ntawm qhov browser.

SCSS Disadvantages

Kev kawm nkhaus: SCSS muaj qhov sib txawv syntax los ntawm tus qauv CSS, thiab koj yuav tsum kawm cov lus qhia tshiab no ua ntej koj tuaj yeem siv tau zoo.
Qhov nyuaj ntxiv: Txawm hais tias SCSS tuaj yeem ua rau koj cov ntawv style ntau dua thiab yooj yim rau kev tswj hwm, nws tseem tuaj yeem qhia qhov nyuaj ntxiv rau hauv koj cov codebase, tshwj xeeb tshaj yog tias koj tsis paub txog cov yam ntxwv tshiab thiab cov lus sib dhos.
Tooling: Siv SCSS, koj yuav xav tau ib tug compiler los txhais koj li SCSS code rau hauv CSS. Qhov no yuav tsum muaj kev teeb tsa thiab cov cuab yeej ntxiv, uas tuaj yeem yog qhov cuam tshuam rau kev nkag rau qee tus neeg tsim khoom.

Hauv qhov piv txwv no hauv qab no, SCSS code ua rau siv cov hloov pauv los khaws cov txiaj ntsig ($primary-color thiab $font-size) uas tuaj yeem rov siv tau thoob plaws hauv daim ntawv style. CSS code uas tau tsim los ntawm SCSS code no sib npaug, tab sis nws tsis suav nrog qhov sib txawv. Hloov chaw, cov txiaj ntsig ntawm qhov sib txawv yog siv ncaj qha rau hauv CSS.

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

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

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

Lwm qhov tshwj xeeb ntawm SCSS uas tau pom hauv qhov piv txwv no yog cov qauv hauv nested. Hauv SCSS code, lub h1 styles yog nested nyob rau hauv lub body styles, uas tsis tuaj yeem ua tau hauv CSS tus qauv. Thaum SCSS code tau muab tso ua ke, cov qauv nested tau nthuav dav rau hauv cov qauv sib cais hauv CSS code.

Zuag qhia tag nrho, SCSS muab ntau qhov zoo dua li tus qauv CSS, tab sis nws yog ib qho tseem ceeb uas yuav tsum xav txog kev lag luam tawm thiab xaiv cov cuab yeej tsim nyog rau koj qhov project raws li koj cov kev xav tau thiab kev txwv.