Hvordan CSS fungerer

Hvis HTML er grunnlaget for et nettsted, er CSS malingsfargen og vindusstilen. Det hjelper webutviklere med å formatere websider på en måte som folk kan forstå. Det hjelper websider å se mer visuelt tiltalende og lesbar. Dessuten kan flere andre egenskaper håndteres, som størrelsen på skrifter/bilder, farge, skrift og bakgrunnsbilder.

CSS kan brukes til å endre layoutdesign, slik at du bare trenger å skrive en kode for alle elementene dine. Ved å bruke CSS kan du bruke mindre kode for å opprette websiden din. Du kan bruke en CSS -regel på alle tagger på en side. Ved å lære CSS, kan du få nettstedet ditt til å se bra ut.

Hvordan CSS fungerer

Kaskadeprosessen med CSS gjør det mulig å kombinere flere stilark. Det hjelper til å unngå konflikter når forskjellige stiler definerer den samme egenskapen, som skriftstørrelse. Når et element har mer enn ett stilark, vil nettleseren velge den mest passende (den siste) og løse konflikten.

Komponenter i en CSS -kode

Denne delen beskriver de grunnleggende forekomstene av en CSS -kode.

La oss ta eksemplet på en enkel CSS -kode for en overskrift (H1):

H1 farge: svart; Fontvekt: fet;

Ovennevnte CSS -kode består av følgende deler:

- H1 er kjent som "velger”

- Teksten skrevet i krøllete seler heter "erklæring“; Koden inne i de krøllete seler brukes på velgeren som er definert før krøllete seler.

- De farge og Fontvekt er egenskapene mens svart og dristig er verdiene til egenskapene

Bortsett fra de ovennevnte komponentene, a semi-kolon settes inn etter hver eiendom før du startet den andre. Kort sagt, en enkel CSS -kode har fire komponenter: velger, erklæring, eiendom og verdi.

Hvordan CSS -kode er innebygd

En CSS -kode kan være innebygd på en av følgende måter:

- Inne i et HTML -element: Egenskapene er definert i et spesifikt element i HTML, og bildet som vises nedenfor viser anvendelsen av inline CSS.

- Som en intern CSS: Koden er skrevet med element og inne i hode Tag av HTML -filen. For bedre undervurdering av interne CSS, har vi festet bildet som viser skrift og farge er satt til avsnitt:

- Som en ekstern CSS -fil: En CSS -kode skrives i en egen fil, og deretter er CSS -filen lenket til HTML -filen:

Hvordan CSS og HTML fungerer sammen

CSS og HTML -fenomenet er sammenkoblet til hverandre. En HTML -kode kan bli referert til som bygningens struktur, mens CSS er den forskjønende prosessen med den strukturen. En rå struktur er ubrukelig uten maling, og annen dekorasjon. HTML og CSS samarbeider på en webside:

En webside følger den under-uttalte prosessen som skal lastes ordentlig:

- En HTML -side er lastet av nettleseren

- Nettleseren konverterer det HTML til DOM (dataobjektsmodell) tre

- I mellomtiden laster nettleseren stilene som er tilknyttet den HTML -siden: For det er CSS -filen (lenket til den HTML -filen) analysert for å lage en Data Object Model (DOM) -tre.

- Etter vellykket tillegg av stylingregler blir det siste trinnet (display) deretter utført

Den visuelle representasjonen av å laste inn en webside vises nedenfor

Dataobjektsmodellen (DOM) er en hierarkisk (trelignende) struktur i HTML-koden. Hvert element og dets tilhørende egenskaper er kjent som DOM -noder. CSS -velgerne (det kan være et hvilket som helst HTML -element) blir sjekket med DOM -nodene og de matchende nodene tar i bruk egenskapene/verdiene som er definert i en CSS -fil.

Konklusjon

CSS -prosessen identifiserer elementene på en webside. Det bestemmer også hvordan stiler brukes på disse elementene. Det er viktig å forstå at CSS ikke er et språk som er begrenset til ett språk eller et enkelt stilark. Dette beskrivende innlegget opplyser grunnleggende og arbeidet med CSS. Til å begynne med har vi gitt korte detaljer om det grunnleggende konseptet med CSS og deretter beskrevet samarbeidsarbeidet til HTML og CSS.

Glad databehandling!