Hvad er Cascading Style Sheets, og hvad bruges CSS til?

CSS tilhører en triplet af kernewebteknologier sammen med HTML og JavaScript. Med omhyggelig planlægning bidrager CSS til en adskillelse af bekymringer. Uafhængige ressourcer styrer et indholds struktur, dets præsentation og dets adfærd.

Style Sheets spiller en vigtig rolle i tilgængelighed, skalerbarhed og endda webpræstation. Som indholdsforfatter eller webdesigner giver de dig kontrol over, hvordan enheder gengiver indhold. Fra layout til skriftstørrelse og farve, CSS omdanner indhold til flotte sider.

Hvordan ser CSS ud?

CSS er et stort sprog - der er masser af forskellige ting at style! Men dens syntaks er ligetil, med kun et par regler at lære.

HTML -elementer har forskellige egenskaber, som CSS kan style. Det farve egenskab indstiller farven i forgrunden (f.eks. tekst). Skriftstørrelsen afhænger af skriftstørrelse ejendom.

Hver ejendom kan indstilles til en understøttet værdi. Tildelingen af en værdi til en ejendom er en 'erklæring'. Generelt ser de sådan ud:

property: value

For eksempel:

hvor meget tjener kunstnere på spotify

color: red

Værdier for forskellige ejendomme kan se meget forskellige ud, lige værdier for den samme ejendom. Her er f.eks. Yderligere to måder at skrive den tidligere erklæring på:

color: #ff0000  
color: rgb(255, 0, 0)

Hvordan HTML og stilark kommer sammen

Du kan kombinere HTML og CSS på et par forskellige måder, hver med sine fordele.

Skrive stilarter indbygget

Den enkleste metode er at vedhæfte stildeklarationer direkte til et element i HTML -filen. Du kan gøre dette ved hjælp af stil attribut sådan:

  
 Most of this text is red …
  
 … but this isn’t!

Selvom stylingelementer inline som denne kan være praktiske, har den flere ulemper. Til at begynde med komplicerer det HTML, hvilket gør det sværere at læse på et øjeblik. Det er også akavet at vedligeholde: forestil dig et langt dokument, hvor vi vil indstille farven på hvert afsnit. Dette er CSS, men det er ikke 'Style Sheets'.

Indlejring af stilarter i hovedet

Du kan begynde at se, hvordan et stilark ser ud med den anden mekanisme, indlejring . Ved hjælp af denne fremgangsmåde samler vi alle stilerklæringer i en stil element i hoved af vores dokument. Det kommer til at se sådan ud:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Vores stilinstruktioner har dog brug for lidt flere detaljer end før. Da vi har flyttet dem til hovedet, er hver regel ikke længere forbundet med et element. Vi kunne have erklæret farve: rød , men hvad skal den farve have?

Det er her CSS -vælgere kommer ind. De giver os mulighed for at målrette mod bestemte dele af siden og definere deres stil på ét sted ved hjælp af denne syntaks:

hvor kan jeg downloade gratis e -bog

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

For eksempel for at style afsnits tekstblå kan vi angive følgende:

p {  
 color: blue;  
}

I dette eksempel er vælgeren simpelthen s. s , der matcher alle afsnitselementer i vores dokument. Det farver al tekst blå, så længe den er inde

Tilknytning af et eksternt stilark

Den sidste metode til dækning er sammenkædning. Dette er langt den mest nyttige fremgangsmåde, og du bør vælge det meste af tiden. I stedet for at integrere CSS -regler i stil element direkte i dit dokument, kan du flytte dem ud til en separat fil.

Indsæt denne kode inde i tags i din HTML -fil for at linke dit eksterne typografiark.

Kraften i CSS

Med den sammenkædede metode udnytter vi en kernekraft i CSS: adskillelse af bekymringer. Alle semantiske oplysninger - hvad indholdet betyder - er indeholdt i HTML -dokumentet. Stylingen - hvordan den ser ud - er i en separat fil, typografiarket.

Her er blot nogle få fordele ved denne adskillelse:

Du kan skifte et typografiark ud bare ved at ændre filreferencen. Dette kan endda ske dynamisk. I et trin kan du ændre hele udseendet og følelsen af en side.

Mange sider kan dele de samme typografiark efter behov. Ved at ændre en enkelt fil kan du opdatere udseendet og følelsen af et helt websted.

Opdeling af en side i 'indhold' og 'stil' har tekniske fordele. Proxyer og browsere kan gemme individuelle filer separat. Det betyder, at et websted kan sende sine stiloplysninger en gang, frem for at inkludere det på hver enkelt side.

Når man samarbejder, kan forskellige teams arbejde med deres styrker og oprette og redigere separate filer uden at påvirke hinanden.

Forklarer kaskaden

Du har lært meget om stilarter og stilark, men hvad med den brusende del af CSS?

Kaskaden er det, der bestemmer, hvilke stilarter der skal bruges, når der findes flere typografiark. Du har set, hvordan en forfatter kan angive stilarter for deres indhold. Men en anden funktion ved CSS er, at det også giver læsere og browserproducenter noget at sige om sagen.

Du har måske allerede undret dig over standardformater. For eksempel hvordan gør en H1 element ser stort og fed ud, selv uden forfatterstilarter? Dette er takket være et sæt særlige regler, der udgør brugeragent -stilarket. Disse regler anvendes i første omgang af din webbrowser på hver side, du besøger.

Kaskaden angiver, at et forfatterstilark gælder efter bruger-agent-typografierne. Hvis vores browser siger, at overskrifter er fed, men forfatteren af siden erklærer overskrifter på denne side er lette, så ender de med lys.

Der er en anden kilde til stilark, der overdrager en vis kontrol til læseren. Enhver webbruger kan i teorien opretholde et brugerformat med brugerdefinerede regler. Disse sidder i midten: brugerregler tilsidesætter standard browserindstillinger, men tilsidesættes selv af forfatterstile. Desværre har support til brugerstilark aldrig været udbredt.

Målretning mod forskellige medier

Du kan bruge Style Sheets i forskellige sammenhænge, ud over skærmen. Det halvt attribut for link element definerer hvilke medietyper typografiarket gælder for. For eksempel kan du definere en stilark til tryk ved hjælp af markup som følgende:
Du kan samle fælles stilarter i et globalt typografiark og mediespecifikke stilarter i separate filer. Der er endda medietyper til at tage højde for lyd- eller braillepræsentationer af dit indhold. CSS er et vigtigt redskab til at forbedre tilgængeligheden.

Relaterede: Sådan surfer du på nettet, hvis du er blind eller synshandicappet
hvordan man indstiller tid på fitbit versa

Websteder som Wikipedia bruger CSS til at styre deres udskriftsstil, skjule uønskede elementer og forenkle layoutet.

CSS får HTML til at se godt ud

Cascading Style Sheets dækker meget: kaskaden, arv, selektorer, kilder, medier osv. Men deres magt muliggør det moderne web. Dette er et medie, der giver funktioner til genanvendelse, fleksibilitet og tilgængelighed indbygget.

For at se den fulde effekt af CSS og hvor meget den har at tilbyde, kan du tjekke vores snydeblad, der dækker alle de væsentlige CSS3 -egenskaber.
Del Del Tweet E -mail Essential CSS3 Properties Cheat Sheet
Behersk essentiel CSS -syntaks med vores CSS3 egenskaber snydeblad.
Læs Næste Relaterede emner

Programmering

Web-udvikling

CSS

Om forfatteren Bobby Jack(58 artikler udgivet)
Bobby er en teknologientusiast, der arbejdede som softwareudvikler i det meste af to årtier. Han brænder for spil, arbejder som Reviews Editor hos Switch Player Magazine og er nedsænket i alle aspekter af onlineudgivelse og webudvikling.
Mere fra Bobby Jack
Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere