Slik bruker du et eksternt stilark for HTML5 og CSS3 programmering - dummier

CSS3 støtter eksterne stilark. Denne teknikken lar deg definere et stilark som et eget dokument og importere det til websidene dine. For å se hvorfor dette kan være attraktivt, ta en titt på eksemplet.

Når du ser på koden for externalStyle. html, kan du bli overrasket over å se ingen åpenbar stilinformasjon i det hele tatt!

externalStyle. html

Ekstern stil
Denne siden har stiler angitt for avsnitt, kropp og topp 1.
Stilene er definert i et eksternt stilark.

Hvor du vanligvis ser stiletiketter (i overskriften), er det ingen stil. I stedet ser du en tagg. Denne spesielle taggen brukes til å koble det nåværende dokumentet med et annet dokument.

Hvordan definere den eksterne stilen

Når du bruker en ekstern stil, er stilelementene ikke innebygd i sidens overskrift, men i et helt eget dokument.

I dette tilfellet er siden koblet til en spesiell fil som heter myStyle. css. Denne filen inneholder alle CSS-reglene:

/ * myStyle. css * / body {bakgrunnsfarge: # 333300; farge: #FFFFFF;} h1 {farge: # FFFF33; tekst-align: center; skrifttype: kursiv 200% fantasi;} p {bakgrunnsfarge: # FFFF33; farge: # 333300; tekstjustering: høyre; border: 3px groove # FFFF33;}

Stilarket ser akkurat ut som en sidetypestil, bortsett fra noen få viktige forskjeller:

• Regelarkreglene er inneholdt i en egen fil. Stilen er ikke lenger en del av HTML-siden, men er en helt egen fil lagret på serveren. CSS-filer slutter vanligvis med. css forlengelse.

• Det er ingen koder. Dette er ikke nødvendig fordi stilen ikke lenger er innebygd i HTML.

• Koden starter med en kommentar. / / * * / paret indikerer en kommentar i CSS. Sannferdig kan du sette kommentarer i CSS på sideneivå. Eksterne CSS-filer har ofte kommentarer i dem.

• Stiledokumentet har ingen HTML. CSS-dokumenter inneholder ingenting annet enn CSS. Dette kommer nærmere målet om å skille stil (i CSS-dokumentet) og innhold (i HTML-dokumentet).

• Dokumentet er ikke knyttet til en bestemt side. Den store fordelen med ekstern CSS er gjenbruk. CSS-dokumentet er ikke en del av en bestemt side, men noen sider kan bruke den.

Slik bruker du en ekstern CSS-stil

Ekstern stilark er veldig gøy når du har mer enn én side som trenger samme stil. De fleste nettsteder bruker i dag flere sider, og de bør dele et felles stilark for å holde konsistens.

Koden viser hvor enkelt dette er gjort:

SecondPage.html

Andre side
Denne siden bruker samme stil som externalStyle. html.

Ekstern stilark har noen store fordeler:

• Ett stilark kan styre mange sider: Generelt har du et stort antall forskjellige sider på et nettsted som alle deler samme generelle stil. Du kan definere stilarket i ett dokument og få alle HTML-filene til å referere til CSS-filen.

• Globale endringer er enklere: Hvis du bruker eksterne stiler, gjør du en endring på ett sted, og den overføres automatisk til alle sidene i systemet.

• Separasjon av innhold og design: Med eksternt CSS er alt designet plassert i CSS, og dataene er i HTML.

• Enkle oppgraderinger: Fordi designparametrene til hele nettstedet er definert i en fil, kan du enkelt endre nettstedet uten å måtte rote rundt med individuelle HTML-filer.

Lenkemerket

Koden er nøkkelen til å legge til en CSS-referanse til et HTML-dokument. Merket har følgende egenskaper:

• Taggen er en del av HTML-siden. Bruk en tagg i HTML-dokumentet ditt for å angi hvilket CSS-dokument som skal brukes av HTML-siden.

• Taggen forekommer bare i overskriften. I motsetning til taggen, kan taggen bare forekomme i overskriften.

• Etiketten har ingen visuell tilstedeværelse. Brukeren kan ikke se taggen, bare dens effekter.

• Koden link brukes til å forholde dokumentet med et annet dokument. Du bruker taggen for å beskrive forholdet mellom dokumenter.

• Koden har et rel attributt, som definerer typen forhold. For øyeblikket er det eneste forholdet du vil bruke, stilarket attributtet.

• Taggen har også et href attributt som beskriver plasseringen til det andre dokumentet.

Link-koder brukes ofte til å koble en side til et eksternt definert stil dokument.

De fleste refererer til hyperkoblingene som er opprettet av ankeret () -merket som hyperkoblinger eller lenker. Dette kan føre til viss forvirring fordi i denne forstand ikke koblingsmerket oppretter den typen kobling.

Slik spesifiserer du en ekstern lenke

Følg disse trinnene for å bruke taggen for å angi et eksternt stilark:

1. Definer stilarket.

   Ekstern stilark ligner de som du allerede vet. Bare sett alle stilene i et eget tekstdokument uten og taggene.

2. Opprett et koblingselement i HTML-sidenes hovedområde for å definere koblingen mellom HTML- og CSS-sidene.

   Mitt koblingselement ser slik ut:

3. Angi linkens forhold ved å angi attributten rel = "stylesheet".

   Ærlig, stilark er nesten det eneste forholdet du noensinne vil bruke, så dette skal bli automatisk.

4. Angi type stil ved innstilling type = "text / css".

5. Bestem plasseringen av stilarket med href-attributtet.