CSS er et stylingspråk som brukes til å endre utseendet til websider. Det er blant en av de mest bemerkelsesverdige teknologiene som brukes til å bygge en webside. Nå må du lure på hvordan CSS styrer stilen? Vi vil! CSS gjør dette ved å sørge for at hvordan elementer vil vises på en webside som deres tekstfarge, bakgrunnsfarge, skriftstil osv. Derfor må en passende struktur følges for å skrive en effektiv CSS -kode.

Denne oppskrivningen vil presentere en trinn-for-trinns guide for å forstå hvordan CSS er strukturert?

• den grunnleggende syntaksen til CSS.
• Hvordan implementere CSS til et HTML -dokument.
• Hvordan jobbe med CSS -velgere etterfulgt av Selectors spesifisitet.
• Hvite rom i CSS.
• Kommentarer i CSS.

La oss starte med syntaksen til CSS.

Syntaks av CSS

Den grunnleggende syntaksen til CSS inkluderer en velger sammen med erklæringsblokken. Erklæringsblokken består av to ting jeg.e. en CSS -egenskap med verdien.

I figuren ovenfor er P en velger som peker på et HTML -elementavsnitt, farge er en CSS -egenskap og grønn er verdien som er tilordnet fargeegenskapen.

Hvordan bruke CSS på HTML -dokument

CSS kan brukes på et hvilket som helst HTML -dokument på tre måter jeg.e. Bruke inline -stiler, ved hjelp av et internt stilark eller eksterne stilark. Denne artikkelen vil forklare arbeidet med alle tre stylingmetodene ved hjelp av eksempler.

Inline CSS

Inline -stilmetoden brukes ofte til å implementere en unik stil på et enkelt element. Så vi må bruke "stil" -attributtet i et HTML -element for å implementere enhver CSS -egenskap til det spesifiserte elementet.

Eksempel

Eksemplet nedenfor implementerer inline -stilen på

element:

Inline CSS

Ovennevnte kode setter tekstfargen som rød, bakgrunnsfargen som blå og den justerer teksten i sentrum:

Intern CSS

Den interne CSS -stilmetoden spesifiserer stilen i taggen og i hodet. Det brukes til å implementere en bestemt stil på hele siden.

Eksempel Dette eksemplet beskriver et internt stilark for alle

elementer

Intern CSS

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Utgangen viser at stilen som er spesifisert i stilelementet implementert på alle

elementer:

Ekstern CSS

Som navnet i seg selv antyder, er et eksternt stilark en egen CSS -fil som kan brukes til å style hele nettstedet. I dette tilfellet vil referansen til den eksterne CSS -filen bli lagt til HTML -filen.

Eksempel Dette eksemplet definerer forskjellige stiler for forskjellige HTML -elementer, og disse stilene vil bli implementert ved hjelp av et eksternt stilark.

Html

HTML -filen inneholder en lenke til en ekstern CSS -fil:

Ekstern CSS

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

CSS

H2
Farge: gull;
bakgrunnsfarge: svart;

P
fargen oransj;
Bakgrunnsfarge: Seagreen;
tekst-align: sentrum;

Ovennevnte kode vil produsere følgende utgang:

La oss konkludere med hva vi har lært i dette avsnittet, bruk inline CSS bare hvis du må style bare noen få HTML -elementer, blir inline ikke betraktet som en god tilnærming fordi du kanskje må redigere flere ting for en stil for en stil for en stil for en stil for en stil. Bruk intern stil for nettsteder med én side.

CSS -velgere

Velgerne brukes målrettet mot HTML -elementene du vil style, og det er flere typer CSS -velgere som:

• CSS elementvelger Målet HTML -elementene basert på navnet deres.
• CSS ID -velger retter seg mot HTML -elementene basert på deres ID.
• CSS Klassevelger Målet HTML -elementet basert på en klasseattributt.
• CSS universell velger Målet alle elementene som er til stede på siden.

Eksempel Den undergitte kodestilen forskjellige HTML-elementer i.e. H2, og P ved bruk av henholdsvis elementvelger, klasselektor og ID -velger.

Html

H2 ved hjelp av elementvelger

avsnitt ved hjelp av klasseleser

Avsnitt ved hjelp av ID -velgeren

CSS

H2
bakgrunnsfarge: svart;
Farge: Goldenrod;
tekst-align: sentrum;

.stil
bakgrunnsfarge: svart;
Farge: grønn;
tekst-align: sentrum;

#style1
bakgrunnsfarge: svart;
fargen rød;
tekst-align: sentrum;

Vi får følgende utdata:

Spesifisitet

Noen ganger oppstår et sammenstøt jeg.e. To velgere/stiler rettet mot det samme HTML -elementet som vil skje i et slikt tilfelle og hvilken velger som vil få preferansen. Vi vil! Vi har en generell regel for spesifisitet

• !viktig har høyere spesifisitet, så det vil overstyre alt
• Inline har nest høyest spesifisitet, så den kan overstyre alt bortsett fra !viktig
• ID -velgeren har høyere spesifisitet blant andre velgere, men lavere enn !viktig og inline
• Neste kommer klassevelger, attributtvelger og pseudoklasse
• Elementvelger, og pseudo-elementer
• Universal Selector har den laveste spesifisiteten
• Hvis den samme regelen gjentas i et eksternt ark, vil den siste bli implementert

La oss forstå spesifisiteten med et eksempel:

Eksempel Det gitte eksemplet nedenfor vil forklare begrepet spesifisitet.

Html

Velkommen til Linuxhint.com

Spesifisitetseksempel

CSS

P
fargen oransj !viktig;

#style1
fargen rød;

.stil
Farge: grønn;

P
Farge: blå;

H1
Farge: blå;

H1
Farge: grønn;

Utgangen vil være:

I eksemplet ovenfor observerte vi følgende punkter:

• De

  elementet er målrettet av !viktig, ID, klasse og elementvelger men

  elementet er stylet i henhold til !viktig som viser det !Viktig har høyest spesifisitet.

• Det er to forskjellige elementvelgere for å definere to forskjellige stiler for

  element, elementvelgeren som kommer på slutten får prioritet.

For bedre forståelse, bland rekkefølgen på velgerne og observere forskjellen!

Hvite rom i CSS

I CSS ignorerer nettleserne de hvite rommene, men riktig bruk av hvite rom kan forbedre kodens lesbarhet.

Eksempel: Dette eksemplet forklarer hvordan hvite rom/ linjebrudd øker koden lesbarhet:

Html

H2 ved hjelp av elementvelger

Spesifisitetseksempel

CSS

.stil
bakgrunnsfarge: svart; Farge: grønn; tekst-align: sentrum;

#style1
bakgrunnsfarge: svart;
fargen rød;
tekst-align: sentrum;

I klassevelgeren er all koden skrevet i samme linje mens vi i ID -velgeren skriver hver egenskap på en ny linje. Whitespaces/Line Breaks øker lesbarheten til koden. Utgangen verifiserer at nettleseren ikke bryr seg om hvordan du skrev koden og begge velgerne utførte med hell:

Kommentarer i CSS

I CSS vil alle de kommenterte seksjonene være vedlagt i “/*” og “*/”. Alt som kommer innenfor kommentarene vil bli forsømt av nettleseren. Noen ekstra detaljer kan legges til i kommentarene for å forstå koden.

Eksempel Dette eksemplet la til noen kommentarer som vil hjelpe oss å forstå koden.

Html

Første avsnitt

Andre avsnitt

CSS

/* Klassevelger*/
.stil
bakgrunnsfarge: svart;
fargen oransj;
tekst-align: sentrum;

/* ID -velgeren*/
#style1
bakgrunnsfarge: svart;
fargen rød;
tekst-align: sentrum;

Ovennevnte kode genererer følgende utgang:

Utgangen verifiserer at kommentarer gir en bedre forståelse av koden uten å påvirke resultatene.

Konklusjon

Grunnstrukturen til CSS inkluderer grunnleggende syntaks for valg av HTML -element ved hjelp av CSS -velgere og styling av det valgte elementet ved hjelp av CSS -egenskaper.CSS kan implementeres i en HTML -fil på tre måter jeg.e. Inline styling for å stille stilen for et spesifikt element, intern styling ved hjelp av TAG og legge til ekstern CSS -fil.

Denne artikkelen diskuterer alle det grunnleggende for å strukturere en CSS -fil. Med utgangspunkt i den grunnleggende syntaksen til CSS og etterpå forklarer det de forskjellige typene CSS og CSS -utvalgere. Videre forklarer det begrepet spesifisitet i CSS og konkluderer med at blant alle CSS -velgerne ID -velgeren har høyere spesifisitet. Til slutt forklarer det betydningen av kommentarer og hvite rom i CSS.