Inhoud bemarking

Wat is Cascading Style Sheets (CSS)?

Lees hieronder vir 'n volledige verduideliking van hoe trapstylblaaie werk. Ons vertoon ons toepassings boaan die bladsy sodat dit maklik is om te vind en te gebruik. As jy hierdie artikel via e-pos of voer lees, klik deur na komprimeer jou CSS.

Tensy jy werklik besig is om werwe te ontwikkel, sal jy dalk nie die trapstylblaaie ten volle begryp nie (CSS). CSS is 'n stylbladtaal wat gebruik word om die voorkoms en formatering van 'n dokument waarin geskryf is, te beskryf HTML or XML. CSS kan gebruik word om die style vir verskeie elemente soos lettertipe, kleur, spasiëring en uitleg te spesifiseer. CSS laat jou toe om die aanbieding van jou HTML-dokument van sy inhoud te skei, wat dit makliker maak om die visuele styl van jou webwerf te onderhou en op te dateer.

CSS Taalstruktuur

Die keurder is die HTML-element wat jy wil styl, en die eiendom en waarde definieer die style wat jy op daardie element wil toepas:

selector {
  property: value;
}

Byvoorbeeld, die volgende CSS sal alles maak <h1> elemente op 'n bladsy het 'n rooi kleur en 'n lettergrootte van 32px:

CSS

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

Uitgawe

Opskrif

U kan ook CSS vir 'n unieke ID op 'n element spesifiseer:

CSS

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

Uitgawe

Intro

Of pas 'n klas toe oor verskeie elemente:

CSS

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

Uitgawe

Ek wil beklemtoon 'n woord in die span-tag.

U kan CSS op drie maniere in u HTML-dokument insluit:

  1. Inline CSS, met behulp van die style kenmerk op 'n HTML-element
  2. Interne CSS, met behulp van 'n <style> element in die <head> van jou HTML-dokument
  3. Eksterne CSS, deur 'n aparte .css-lêer te gebruik wat aan jou HTML-dokument gekoppel is deur die <link> element in die <head> van jou HTML-dokument

Responsiewe CSS

CSS is ongelooflik buigsaam en kan gebruik word om die vertoning van elemente aan te pas op grond van skermresolusie, sodat jy dieselfde HTML kan hê, maar dit kan bou reageer na die toestelresolusie:

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

CSS kompressie

Jy kan in die voorbeeld hierbo sien dat daar 'n opmerking, 'n medianavraag en veelvuldige style is wat spasies en lyntoevoer gebruik om die aansig van die CSS te organiseer. Dit is 'n goeie oefening om jou CSS op jou werf te verklein of saam te komprimeer om lêergroottes te verminder en, gevolglik, die tyd wat dit neem om jou stilering aan te vra en weer te gee. Dit is nie 'n klein bedrag nie ... jy kan meer as 50% besparings sien op sommige van die voorbeelde hierbo.

Baie bedienerkonfigurasies bied gereedskap wat CSS outomaties sal saamdruk en die verkleinde lêer in die kas kas sodat jy dit nie handmatig hoef te doen nie.

Wat is SCSS?

Sassy CSS (SCSS) is 'n CSS-voorverwerker wat addisionele funksionaliteit en sintaksis by die CSS-taal voeg. Dit brei die vermoëns van CSS uit deur die gebruik van veranderlikes, mixins, funksies en ander kenmerke toe te laat wat nie in standaard CSS beskikbaar is nie.

SCSS voordele

  • Verbeterde instandhouding: Met die gebruik van veranderlikes kan jy waardes op een plek stoor en dit regdeur jou stylblad hergebruik, wat dit makliker maak om jou style te onderhou en op te dateer.
  • Beter organisasie: Met mixins kan jy stelle style groepeer en hergebruik, wat jou stylblad meer georganiseerd en makliker maak om te lees.
  • Verhoogde funksionaliteit: SCSS sluit baie kenmerke in wat nie in standaard CSS beskikbaar is nie, soos funksies, beheerstrukture (bv. as/anders), en rekenkundige bewerkings. Dit maak voorsiening vir meer dinamiese en ekspressiewe stilering.
  • Beter werkverrigting: SCSS-lêers word in CSS saamgestel, wat werkverrigting kan verbeter deur die hoeveelheid kode wat deur die blaaier ontleed moet word, te verminder.

SCSS Nadele

  • Leerkurwe: SCSS het 'n ander sintaksis as standaard CSS, en jy sal hierdie nuwe sintaksis moet leer voordat jy dit effektief kan gebruik.
  • Bykomende kompleksiteit: Alhoewel SCSS jou stylblad meer georganiseerd en makliker kan maak om te onderhou, kan dit ook bykomende kompleksiteit in jou kodebasis inbring, veral as jy nie vertroud is met die nuwe kenmerke en sintaksis nie.
  • Gereedskap: Om SCSS te gebruik, het jy 'n samesteller nodig om jou SCSS-kode in CSS te vertaal. Dit vereis bykomende opstelling en gereedskap, wat 'n hindernis vir toegang vir sommige ontwikkelaars kan wees.

In hierdie voorbeeld hieronder maak die SCSS-kode gebruik van veranderlikes om waardes te stoor ($primary-color en $font-size) wat regdeur die stylblad hergebruik kan word. Die CSS-kode wat uit hierdie SCSS-kode gegenereer word, is ekwivalent, maar dit sluit nie die veranderlikes in nie. In plaas daarvan word die waardes van die veranderlikes direk in die CSS gebruik.

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

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

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

Nog 'n kenmerk van SCSS wat in hierdie voorbeeld gedemonstreer word, is geneste style. In die SCSS-kode, die h1 style is geneste binne die body style, wat nie in standaard CSS moontlik is nie. Wanneer die SCSS-kode saamgestel is, word die geneste style in afsonderlike style in die CSS-kode uitgebrei.

Oor die algemeen bied SCSS baie voordele bo standaard CSS, maar dit is belangrik om die afwegings te oorweeg en die regte hulpmiddel vir jou projek te kies, gebaseer op jou behoeftes en beperkings.

Douglas Karr

Douglas Karr is CMO van Maak INSIGTE oop en die stigter van die Martech Zone. Douglas het tientalle suksesvolle MarTech-opstartondernemings gehelp, het gehelp met die omsigtigheidsondersoek van meer as $5 miljard in Martech-verkrygings en -beleggings, en gaan voort om maatskappye te help met die implementering en outomatisering van hul verkoops- en bemarkingstrategieë. Douglas is 'n internasionaal erkende digitale transformasie en MarTech deskundige en spreker. Douglas is ook 'n gepubliseerde skrywer van 'n Dummie-gids en 'n besigheidsleierskapboek.

verwante Artikels

Terug na bo knoppie
Sluiting

Advertensieblok bespeur

Martech Zone is in staat om hierdie inhoud gratis aan u te verskaf, want ons verdien ons webwerf deur advertensie-inkomste, geaffilieerde skakels en borgskappe. Ons sal dit waardeer as jy jou advertensieblokkering sal verwyder terwyl jy ons webwerf bekyk.