Hvordan legge til CSS
Det er forskjellige måter å bruke CSS på HTML -dokumentet ditt og er definert nedenfor:
- På linje: Tillater å legge til CSS i en spesifikk HTML -kode
- Innvendig: En CSS -kode er skrevet inne i hodekoden (anbefalt, men ikke nødvendig) på en HTML -side
- Utvendig: En CSS -fil er laget eksternt ved å definere alle egenskapene. Den legges til HTML -siden ved hjelp av <lenke> Element
Vi har samlet denne guiden for å demonstrere alle mulige måter å legge CSS på en HTML -side.
Hvordan legge til CSS i en webside
Denne delen beskriver kort tilgjengelige tilnærminger for å legge CSS til en HTML -side.
Hvordan legge til inline CSS
Som navnet på teknikken antyder, lar den deg legge CSS til et enkelt HTML -element. De stil attributt til et element utøves for å gjøre det. La oss øve på det nedenfor uttalte eksemplet for å få et tydeligere bilde av inline CSS:
Eksempel
Koden skrevet nedenfor legger stilene til en HTML -tag Linux hint
:
Linux hint
- Tekstfarge er satt til grønn: for dette, den farge eiendom til stil attributt brukes
- Teksten til
er sentrert på linje: Tekstalign Eiendom brukes
- Overskriftsteksten vil bli understreket: å gjøre det, tekstdekorasjon Eiendom til stilattributt er satt til understrek.
Nettgrensesnittet til ovennevnte HTML-side vises nedenfor:
Bortsett fra de ovennevnte egenskapene, viser få HTML-redaktører rullegardinlisten over tilgjengelige egenskaper. Derfor anbefales det å velge din HTML -redaktør med omhu, da det bedre utvalget vil lette måten å legge CSS til HTML -siden.
Hvordan legge til intern CSS
Den interne CSS legges til ved hjelp av Merk i element i en HTML -side. La oss si at vi vil legge til forskjellige stiler til kropp, avsnitt, og divisjoner brukt på en HTML -side.
Bildet som vises nedenfor viser de forskjellige egenskapene som er lagt til flere deler av HTML -siden, og alle disse egenskapene er tildelt ved hjelp av <stil> Element.
- Bakgrunnsfargen på kroppen vil være svart
- Paragrafene vil ha rød tekst, 1M fontstørrelse og venstrejustert tekst
- Fargen på divisjonene er antiquewhite og bredden på divisjonene avhenger av bredden på teksten som brukes:
Nettgrensesnittet ved hjelp av ovennevnte egenskaper vises nedenfor:
Hvordan legge til ekstern CSS
CSS kan legges til på websider ved å lage en dedikert CSS -fil og deretter ringe den inne på en side. Den eksterne CSS er ganske nyttig når du må bruke samme styling på forskjellige HTML -sider. Denne delen gir et prosessuelt innlegg for å opprette og bruke en ekstern CSS -fil:
Trinn 1: Lag en .CSS -fil
For det første, åpne kodeditoren og lag en fil med .CSS Utvidelse (eller redaktøren kan tilby muligheten til å lagre som en CSS -fil). Filen vi bruker her heter som Linuxhintstylesheet og er opprettet som følger:
Åpnet en ny fil i redaktøren:
Etter det, klikket på Lagre som:
Kalt den filen med .CSS -utvidelse og valgt CSS som filtype:
Trinn 2: Legg til stiler i CSS -filen
Vi har lagt til følgende stylingegenskaper:
- Bakgrunnsfargen på kroppen er Skyblue
- De H1 vil ha hvit farge
- Paragrafene har fontfamilien satt til Serif og tekstdekorasjon inneholder Overlinje (linje over teksten) eiendom:
Følgende bilde viser koden som inneholder ovenfor angitte stiler:
Trinn 3: Legg CSS -filen til HTML -dokumentet
Etter å ha opprettet og lagt til stiler i en CSS -fil, må du nå legge filen til siden der du vil bruke disse stilene. Vi vil legge til Linuxhintstylesheet til Linuxhint HTML -dokument:
De Element av HTML brukes til å importere CSS fil. Dessuten rel og href Eiendom av lenkeelement utøves for å legge inn CSS -filen. De rel Attributt definerer forholdet mellom HTML -dokumentet og CSS -filen. Mens href Egenskapen til elementet inneholder lenken til CSS -filen.
Når trinnene ovenfor er utført riktig, vil du kunne laste inn HTML-siden din med de ovennevnte egenskapene.
Konklusjon
CSS er et språk for å lage websidene (html/xml) presentable. CSS kan legges til websider ved å ta i bruk en av de nevnte metodene i denne artikkelen. Den første metoden bruker stilattributtet til et element for å legge til forskjellige CSS -relaterte egenskaper. Den interne metoden praktiserer CSS -språket ved å bruke element i hodemerke. Og den siste metoden importerer en ekstern CSS -fil til en bestemt webside. Alle disse metodene brukes til å legge CSS til en webside, og valg av en metode avhenger av utvikleren at hvordan han/hun har tenkt å legge til stiler.