Riktig format for å tilkoble en CSS

August 30

Flere alternativer er tilgjengelige for å koble CSS til en HTML-fil. Et eksternt stilark linker til et HTML-dokument ved hjelp av LINK tag eller @import regnskapet. Mindre effektive metoder for å bruke CSS inkluderer innebygging stilarket direkte inn i enkelte HTML-sider og bruke inline stiler.

ekstern CSS

Hvis du vil koble en ekstern CSS-fil til HTML-koden, bruker du "<link>" tag, som er plassert i HTML-dokumentet hodet og omfatter obligatoriske og valgfrie attributter som HREF, TYPE, REL og MEDIA.

<Head>

</ Head>

Den nødvendige "href" attributtet angir plasseringen av en link eller stilark. Stilene kan ikke vise om plasseringen av stilark ikke er riktig koblet.

"Type" attributtet brukes til å angi en medietype slik at nettlesere å ignorere ustøttede typer stil. Bruke konfigurasjons "text / css" som Content-type for CSS-filen er en god idé.

Den "REL" attributtet definerer forholdet mellom HTML-dokumentet og koblede filen, og er ofte REL = "stylesheet", som angir et vedvarende eller foretrukne stil.

Den valgfrie "MEDIA" attributtet angir hvilken type medium eller media som stilarket skal brukes. Mulige verdier inkluderer skjerm, print, punktskrift og TV.

Bygge en Style Sheet

En intern stilark brukes når en enkelt HTML-dokument krever en unik stil. Bruke samme innebygde stilark på tvers av flere HTML-sider er mindre effektiv fordi det gjør det vanskeligere å endre stiler i et helt nettsted.

Du definerer den interne stiler i "head" -seksjonen på HTML-siden ved hjelp av "<style>" tag.

<Head>

<Style type = "text / css"> <! -

kropp {

background-image: URL ( "images / back.gif");

}

</ Style>

</ Head>

Importere et Style Sheet

Bruke "@import" statement gjør at en ekstern ark som skal importeres inn i et dokument. Uttalelsen kan brukes til en ekstern CSS-fil eller en dedikert stilark på en HTML-side. Alle CSS-regler kan inngå i den stilelementet, men alle @import uttalelser må skje i begynnelsen av stilark.

Eventuelle regler spesifisert i stilarket overstyring motstridende regler i de importerte stiler. I tillegg er rekkefølgen stilark er importert bestemmer hvordan de glir. Med andre ord, hvis den første stilark angir uthevet skrift for å være i blått og det andre arket stil (other.css) spesifiserer fet type som rødt, ville fet skrift i rødt råde.

<Style type = "text / css" MEDIA = "screen"> <! -

@import URL (http://www.DOMAINNAME.com/style.css);

@import URL (/stylesheets/other.css); ->

</ Style>

inline Styles

Inline stiler er langt mindre fleksible enn de andre metodene. I tillegg innebygde stiler implisitt gjelder for alle medier, fordi det er ingen måte å angi den tiltenkte medium. Inline stil bruker "STYLE" attributt i relevante koder i BODY-koden, inkludert kroppen selv. Den kan også inneholde en rekke CSS erklæringer, atskilt av en etterfølgende semikolon.

<P style = "color = red; margin-right: 20px;">. En avsnittsstiler i rødt og innrykket 20 piksler fra høyre </ p>