Turinio Rinkodara

Kas yra pakopiniai stiliaus lapai (CSS)?

Skaitykite toliau, kad gautumėte išsamų paaiškinimą, kaip veikia pakopiniai stilių lapai. Savo programas pateikiame puslapio viršuje, kad jas būtų lengva rasti ir naudoti. Jei skaitote šį straipsnį el. paštu arba sklaidos kanalu, spustelėkite, jei norite suspausti savo CSS.

Suspausti CSS Išskleiskite CSS Kopijuoti rezultatus

Nebent iš tikrųjų kuriate svetaines, galite ne iki galo suprasti pakopinio stiliaus lapų (CSS). CSS yra stiliaus lentelės kalba, naudojama apibūdinti dokumento išvaizdą ir formatavimą HTML or XML. CSS gali būti naudojamas įvairių elementų, tokių kaip šriftas, spalva, tarpai ir išdėstymas, stiliams nurodyti. CSS leidžia atskirti HTML dokumento pateikimą nuo jo turinio, todėl lengviau prižiūrėti ir atnaujinti svetainės vizualinį stilių.

CSS kalbos struktūra

Šios selektorius yra HTML elementas, kurio stilių norite sukurti, ir nuosavybė ir kainas apibrėžkite stilius, kuriuos norite taikyti tam elementui:

selector {
  property: value;
}

Pavyzdžiui, šis CSS padarys viską <h1> puslapio elementai yra raudonos spalvos, o šrifto dydis yra 32 pikseliai:

CSS

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

produkcija

Antraštė

Taip pat galite nurodyti CSS unikaliam elemento ID:

CSS

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

produkcija

Įvadas

Arba pritaikykite klasę keliems elementams:

CSS

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

produkcija

aš noriu pabrėžti žodis span žymoje.

CSS į savo HTML dokumentą galite įtraukti trimis būdais:

  1. Inline CSS, naudojant style atributas HTML elemente
  2. Vidinis CSS, naudojant a <style> elementas <head> HTML dokumento
  3. Išorinis CSS, naudojant atskirą .css failą, susietą su jūsų HTML dokumentu naudojant <link> elementas <head> HTML dokumento

Atsakingas CSS

CSS yra neįtikėtinai lankstus ir gali būti naudojamas elementų rodymo koregavimui pagal ekrano skiriamąją gebą, todėl galite turėti tą patį HTML, bet jį sukurti reaguojantis į įrenginio skiriamąją gebą:

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

CSS suspaudimas

Aukščiau pateiktame pavyzdyje galite matyti, kad yra komentaras, medijos užklausa ir keli stiliai, kurie naudoja tarpus ir eilučių tiekimą CSS rodiniui tvarkyti. Puiki praktika sumažinti arba suspausti CSS savo svetainėje, kad sumažintumėte failų dydį ir, atitinkamai, laiką, reikalingą stiliaus užklausai ir pateikimui. Tai nemaža suma... kai kuriuose aukščiau pateiktuose pavyzdžiuose galite sutaupyti daugiau nei 50 %.

Daugelis serverio konfigūracijų siūlo įrankius, kurie automatiškai suglaudins CSS skrydžio metu ir talpykloje saugo sumažintą failą, kad jums nereikėtų to daryti rankiniu būdu.

Kas yra SCSS?

Sassy CSS (SCSS) yra CSS pirminis procesorius, kuris prideda papildomų CSS kalbos funkcijų ir sintaksės. Jis išplečia CSS galimybes, leisdamas naudoti kintamuosius, derinius, funkcijas ir kitas funkcijas, kurių nėra standartiniame CSS.

SCSS privalumai

  • Pagerintas priežiūra: naudodami kintamuosius galite saugoti reikšmes vienoje vietoje ir pakartotinai naudoti jas visame stilių lape, kad būtų lengviau prižiūrėti ir atnaujinti stilius.
  • Geresnis organizavimas: naudodami mišinius galite grupuoti ir pakartotinai naudoti stilių rinkinius, todėl stilių lapas yra tvarkomas ir lengviau skaitomas.
  • Padidintas funkcionalumas: SCSS apima daug funkcijų, kurių nėra standartiniame CSS, pvz., funkcijas, valdymo struktūras (pvz., if/else) ir aritmetines operacijas. Tai leidžia sukurti dinamiškesnį ir išraiškingesnį stilių.
  • Geresnis našumas: SCSS failai sukompiliuojami į CSS, o tai gali pagerinti našumą sumažinant kodo, kurį naršyklė turi analizuoti, kiekį.

SCSS trūkumai

  • Mokymosi kreivė: SCSS sintaksė skiriasi nuo standartinės CSS, todėl prieš efektyviai naudodami šią naują sintaksę turėsite išmokti.
  • Papildomas sudėtingumas: nors SCSS gali padaryti jūsų stiliaus lentelę labiau organizuotą ir lengviau prižiūrimą, ji taip pat gali suteikti papildomos sudėtingumo jūsų kodų bazei, ypač jei nesate susipažinę su naujomis funkcijomis ir sintaksė.
  • Įrankiai: norėdami naudoti SCSS, jums reikės kompiliatoriaus, kuris išverstų jūsų SCSS kodą į CSS. Tam reikia papildomos sąrankos ir įrankių, o tai gali būti kliūtis kai kuriems kūrėjams patekti į rinką.

Šiame toliau pateiktame pavyzdyje SCSS kodas naudoja kintamuosius reikšmėms saugoti ($primary-color ir $font-size), kuriuos galima pakartotinai naudoti visame stiliaus lape. CSS kodas, sugeneruotas iš šio SCSS kodo, yra lygiavertis, tačiau jame nėra kintamųjų. Vietoj to, kintamųjų reikšmės naudojamos tiesiogiai CSS.

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

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

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

Kita šiame pavyzdyje parodyta SCSS funkcija yra įdėtieji stiliai. SCSS kode yra h1 stiliai yra įterpti į body stilių, o tai neįmanoma standartiniame CSS. Kai SCSS kodas sukompiliuojamas, įdėtieji stiliai išplečiami į atskirus stilius CSS kode.

Apskritai, SCSS suteikia daug pranašumų, palyginti su standartiniu CSS, tačiau svarbu atsižvelgti į kompromisus ir pasirinkti tinkamą įrankį savo projektui, atsižvelgiant į jūsų poreikius ir apribojimus.

Douglas Karr

Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

Susiję straipsniai

Atgal į viršų mygtukas
arti

Aptiktas skelbimų blokas

Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.