Slik bruker du lokale stiler for HTML5 og CSS3 programmering - dummies

En stil kan defineres direkte i HTML5-kroppen. Her er et eksempel på denne typen kode. En lokal stil kalles også noen ganger elementnivå , fordi den endrer en bestemt forekomst av et element på siden.

localStyles. html

Lokale stiler
Dette avsnittet har en lokalt definert ramme






Dette avsnittet inneholder en rekke skrift- og tekstregler.

Når du ser over denne koden, bør det oppstå noen ting:

• Ingen -elementet er i overskriften. Normalt bruker du en seksjon i sidens overskrift for å definere alle stilene dine. Denne siden har ikke et slikt segment.

• Stykker har sine egne stilattributter. En stilattributt ble lagt til i hvert avsnitt i HTML-kroppen. Alle HTML-elementene støtter stilattributtet.

• Hele stilkoden går i et enkelt par sitater. For hvert stilelement går hele stilen inn i et par anførselstegn fordi det er ett HTML-attributt. Du kan bruke innrykk og hvitt rom for å gjøre det lettere å forstå.

Når du skal bruke lokale stiler

Lokale stiler bør ikke være ditt førstevalg, men de kan være nyttige under noen omstendigheter.

Hvis du skriver et program for å oversette fra en tekstbehandler eller et annet verktøy, er lokale stiler ofte den enkleste måten å få oversettelsen på. Hvis du bruker en tekstbehandler til å lage en side og du forteller det å lagre siden som HTML, vil den ofte bruke lokale stilarter fordi tekstbehandlere ofte bruker denne teknikken i eget proprietært format.

Vanligvis når du ser en HTML-side med mange lokale stilarter, er det fordi et automatisk oversettelsesverktøy laget siden.

Noen ganger ser du lokale stiler som brukes i kodeeksempler. For eksempel kan følgende kode brukes til å demonstrere forskjellige grenseformater:

localBorders. html

Inline Borders
Dette avsnittet har en solid svart ramme
Dette avsnittet har en dobbel svart ramme

For eksempel er det nyttig å se stilen ved siden av elementet. Denne koden vil være bra for demonstrasjons- eller testformål (hvis du bare vil ha en rask titt på noen grenseformer), men det ville ikke være en god ide for produksjonskoden.

Lokale stiler har svært høy prioritet, så alt du søker i en lokal stil, overstyrer de andre stilreglene. Dette kan være en nyttig løsning hvis ting ikke virker som du forventer, men det er bedre å få stilene dine til å fungere riktig enn å stole på en løsning.

Ulempene med lokale stiler

Det er ganske enkelt å bruke en lokal stil, men for det meste anbefales ikke teknikken vanligvis fordi det har noen problemer, for eksempel

• Ineffektivitet: Hvis du definerer stiler på elementnivå med stilattributtet, du definerer bare den aktuelle forekomsten.Hvis du vil sette avsnittfarger for hele siden din på denne måten, vil du ende opp med å skrive mange stilregler.

• Lesbarhet: Hvis stilinformasjon er spredt over hele siden, er det mye vanskeligere å finne og endre enn om den ligger sentralt i overskriften (eller i et eksternt dokument).

• Manglende adskillelse: Ved å plassere stilene på elementnivået, blir målet om å skille innhold fra stil. Det blir mye vanskeligere å gjøre endringer, og blanding av stil og innhold gjør at koden din er vanskeligere å lese og endre.

• Awkwardness: En hel rekke CSS-regler må fylles inn i et enkelt HTML-attributt med et par anførselstegn. Dette kan være vanskelig å lese fordi du har CSS integrert direkte i HTML-strømmen.

• Sitatproblemer: HTML-attributten krever sitater, og enkelte CSS-elementer krever også sitater (fontfamilier med mellomrom i dem, for eksempel). Å ha flere nivåer av sitater i et enkelt element er en oppskrift på problemer.