Hva er Cascading Style Sheets og hva brukes CSS til?

Hva er Cascading Style Sheets og hva brukes CSS til?

CSS tilhører en trilling av kjerne -webteknologier sammen med HTML og JavaScript. Med nøye planlegging bidrar CSS til en separasjon av bekymringer. Uavhengige ressurser kontrollerer innholdets struktur, presentasjon og oppførsel.





Stilark spiller en viktig rolle i tilgjengelighet, skalerbarhet og til og med webytelse. Som innholdsforfatter eller webdesigner gir de deg kontroll over hvordan enheter gjengir innhold. Fra layout til skriftstørrelse og farge, CSS forvandler innhold til flotte sider.



Hvordan ser CSS ut?

CSS er et stort språk - det er mange forskjellige ting å style! Men syntaksen er enkel, med bare noen få regler å lære.





HTML -elementer har forskjellige egenskaper som CSS kan style. De farge egenskapen angir forgrunnsfargen (f.eks. tekst). Skriftstørrelsen avhenger av skriftstørrelse eiendom.

Hver eiendom kan settes til en verdi som støttes. Tildelingen av en verdi til en eiendom er en 'deklarasjon'. Generelt ser de slik ut:



property: value

For eksempel:

hvorfor er klokken på datamaskinen min feil?
color: red

Verdier for forskjellige eiendommer kan se veldig forskjellige ut, jevne verdier for den samme eiendommen. Her er for eksempel ytterligere to måter å skrive den forrige erklæringen på:



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

Hvordan HTML og stilark kommer sammen

Du kan kombinere HTML og CSS på noen få forskjellige måter, hver med sine fordeler.

Skriver stiler inline

Den enkleste metoden er å feste stildeklarasjoner direkte til et element i HTML -filen. Du kan gjøre dette ved å bruke stil attributt slik:




Most of this text is red …


… but this isn’t!


Selv om stylingelementer inline som dette kan være praktiske, har det flere ulemper. For det første kompliserer det HTML, noe som gjør det vanskeligere å lese med et blikk. Det er også vanskelig å vedlikeholde: forestill deg et langt dokument der vi vil angi fargen på hvert avsnitt. Dette er CSS, men det er ikke 'Style Sheets'.

Legge inn stiler i hodet

Du kan begynne å se hvordan et stilark ser ut med den andre mekanismen, innebygd . Ved å bruke denne tilnærmingen samler vi alle stilerklæringene i en stil element i hode av dokumentet vårt. Det kommer til å se slik ut:





/* style instructions go here */



...

Stilinstruksjonene våre trenger imidlertid litt mer detaljer enn før. Siden vi har flyttet dem til hodet, er hver regel ikke lenger knyttet til et element. Vi kan ha erklært fargen rød , men hva skal den fargen ha?

Det er her CSS -velgere kommer inn. De lar oss målrette mot bestemte deler av siden og definere stilen deres på ett sted ved å bruke denne syntaksen:

komprimering på en fil fungerer etter
selector {
declaration1;
declaration2;
/* etc. */
}

For eksempel, for å style avsnitts tekstblå, kan vi spesifisere følgende:

p {
color: blue;
}

I dette eksemplet er velgeren ganske enkelt s , som samsvarer med alle avsnittselementene i dokumentet vårt. Den vil farge all tekst blå, så lenge den er inne

Koble til et eksternt stilark

Den siste metoden for å dekke er å koble. Dette er uten tvil den mest nyttige tilnærmingen, og en som du bør velge mesteparten av tiden. I stedet for å bygge inn CSS -regler i stil elementet direkte i dokumentet, kan du flytte dem ut til en egen fil.


Lim inn denne koden inne i tagger i HTML -filen for å koble det eksterne stilarket ditt.

Kraften til CSS

Med den koblede metoden utnytter vi en kjernekraft i CSS: separasjon av bekymringer. All semantisk informasjon - hva innholdet betyr - er inneholdt i HTML -dokumentet. Stylingen - hvordan den ser ut - er i en egen fil, stilarket.

Her er bare noen få fordeler med denne separasjonen:

  • Du kan bytte ut et stilark bare ved å endre filreferansen. Dette kan til og med skje dynamisk. I ett trinn kan du endre hele utseendet og følelsen på en side.
  • Mange sider kan dele de samme stilarkene som kreves. Ved å endre en enkelt fil, kan du oppdatere utseendet til et helt nettsted.
  • Å dele en side i 'innhold' og 'stil' har tekniske fordeler. Fullmakter og nettlesere kan lagre individuelle filer separat. Dette betyr at et nettsted kan sende sin stilinformasjon en gang, i stedet for å inkludere den på hver eneste side.
  • Når de samarbeider, kan forskjellige team arbeide med sine styrker, lage og redigere separate filer uten å påvirke hverandre.

Forklarer kaskaden

Du har lært mye om stiler og stilark, men hva med den brusende delen av CSS?

Kaskaden er det som bestemmer hvilke stiler som skal brukes når flere stilark er tilstede. Du har sett hvordan en forfatter kan spesifisere stiler for innholdet sitt. Men en annen egenskap ved CSS er at den gir lesere og nettleserprodusenter noe å si om saken også.

Du har kanskje allerede lurt på standardstiler. For eksempel, hvordan gjør en H1 elementet ser stort og fet ut, selv uten noen forfatterstilark? Dette er takket være et sett med spesielle regler som utgjør brukeragent -stilarket. Disse reglene brukes først av nettleseren din på hver side du besøker.

Kaskaden angir at et forfatterstilark gjelder etter brukeragentstiler. Hvis nettleseren vår sier at overskrifter er fet, men forfatteren av siden erklærer at overskrifter på denne siden er lette, så ender de opp.

Det er en annen stilark som gir noen kontroll til leseren. Enhver nettbruker kan i teorien opprettholde et brukerstilark med egendefinerte regler. Disse sitter i midten: brukerreglene overstyrer standard nettleserinnstillinger, men vil selv bli overstyrt av forfatterstiler. Dessverre har støtte for brukerstilark aldri vært utbredt.

Målretting mot forskjellige medier

Du kan bruke Style Sheets i forskjellige sammenhenger, utenfor skjermen. De halv attributt til lenke element definerer hvilke medietyper stilarket gjelder for. For eksempel kan du definere a stilark for utskrift ved å bruke markup som følgende:

Du kan samle vanlige stiler i ett globalt stilark og mediespesifikke stiler i separate filer. Det er til og med medietyper for å ta hensyn til lyd- eller punktskriftspresentasjoner av innholdet ditt. CSS er et viktig verktøy for å forbedre tilgjengeligheten.

I slekt: Slik surfer du på nettet hvis du er blind eller synshemmet

hvordan du best bruker google voice

Nettsteder som Wikipedia bruker CSS til å kontrollere utskriftsstilen, skjule uønskede elementer og forenkle oppsettet.

CSS får HTML til å se bra ut

Cascading Style Sheets dekker mye: kaskaden, arv, selektere, kilder, medier, etc. Men deres kraft gjør det mulig for det moderne nettet. Dette er et medium som gir innebygde funksjoner for gjenbruk, fleksibilitet og tilgjengelighet.

For å se full effekt av CSS og hvor mye den har å tilby, sjekk ut vårt jukseark som dekker alle de viktige CSS3 -egenskapene.

Dele Dele kvitring E -post Essential CSS3 Properties Cheat Sheet

Mestre essensiell CSS -syntaks med juksearket til CSS3 -egenskapene våre.

Les neste Relaterte temaer
  • Programmering
  • Webutvikling
  • CSS
Om forfatteren Bobby Jack(58 artikler publisert)

Bobby er en teknologientusiast som jobbet som programvareutvikler i de fleste to tiårene. Han brenner for spill, jobber som Reviews Editor i Switch Player Magazine, og er fordypet i alle aspekter av online publisering og webutvikling.

Mer fra Bobby Jack

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere