Kobler til CSS. Hvordan inkludere en CSS-fil på en HTML-side

Når du endrer utformingen av et nettsted, kan spørsmålet oppstå hvordan du kobler CSS til HTML. Hvilke metoder er egnet for dette? Trenger du spesialisert kunnskap for dette?

Hva det er?

CSS (Cascading Style Sheets) – formelt språk innstillinger utseende sider skrevet i markup language. Det er 3 måter å koble en CSS-fil til HTML. Du trenger ingen spesiell kunnskap for dette, akkurat som det er umulig å tydelig identifisere hvilken metode for å koble CSS til HTML som er mest hensiktsmessig - bare følg instruksjonene og bruk den som passer for deg.

Generell struktur Koden som bruker velgere i lærebøkene presenteres som følger:

velger (

Eiendomsverdi;

Eiendomsverdi;

Implementeringen av hver metode er spesiell. Vi vil analysere det ved å bruke følgende kode som et eksempel:

Hensikten med plugin-stiler er å endre fargen på taggen til rød.

Hvert alternativ beskrevet nedenfor vil gi det samme resultatet, men den resulterende sidekoden kan variere betydelig.

Instruksjoner for å koble til CSS-stiler

Alternativ én

For å svare på spørsmålet om hvordan du inkluderer CSS-stiler, må du legge ved et stilark inne i kroppen ved å bruke stilattributtet.

Elementer inne i kroppen må ha en stilattributt knyttet til seg. I dette tilfellet vil verdien av det tilordnede attributtet være CSS-innstillingene som brukes på elementet.

For en mer tydelig forklaring, la oss se på eksemplet nedenfor. Stilverdien tilordnes elementet.

Det er ikke nødvendig å bruke velgere i denne metoden, siden det allerede er det spesifikk parameter, som stilene ble tildelt. Metoden er mest vanlig blant nybegynnere, siden det er nødvendig å registrere bare ett attributt, som lar deg endre egenskapene.

Metoden har betydelige mangler som er viktig å vurdere:

  1. Begrenset funksjonalitet. Dermed lar metoden deg ikke koble til flere velgere samtidig eller lage lenker i en fil.
  2. Den andre ulempen følger av den første: hver stil er individuelt skrevet manuelt, noe som over tid vil gjøre sidekoden til en ekte useriøs.

Alternativ to

Basert på å koble til en ekstra (ekstern) stilfil. Denne bruker lenkeelementet for å gi brukeren muligheten til å koble seg til siden tilleggsfiler. Spesiell oppmerksomhet bør rettes mot attributtene som er skrevet i elementet.

Det ser slik ut:

Kommentar. href-parameteren må beskrive banen til filen som ligger på datamaskinen. Betinget eksempel: href =”C:\Users:\Desktop:\file”.

Resultatet er kode som dette:

C:\Users:\Desktop:\style.css" type="text/css"/>

Det vedlagte stildokumentet skal inneholde følgende linje:

Noen få nyanser angående denne metoden:

  1. Link-kommandoen, som indikerer en lenke til en ekstern fil, må plasseres i overskriften mellom taggene.
  2. Rel attributt viser typen nettsted brukeren lenker til. I vårt tilfelle er velgertabellen skrevet som stilark.
  3. Banen til den eksterne filen må spesifiseres i forhold til koden. Derfor anbefales det å plassere begge filene i samme mappe.

Denne metoden brukes oftest av erfarne webmastere. Dette skyldes ikke bare det praktiske ved metoden, men også muligheten til å koble flere CSS-filer til siden samtidig, som lar deg lagre stor mengde tid og gjør kodelengden mye mindre.

Alternativ tre

I dette tilfellet skrives CSS inne i stilparameteren.

Den korteste måten å koble til sidekoden, hvis popularitet gradvis avtar. Elementet brukes til dette

Koble flere velgere til en side

Mange webansvarlige er ikke begrenset til én vedlagt fil på siden. For å koble til flere, er bare et par trinn nok:

  1. Vi lager flere css-filer med hvilket som helst navn.
  2. Ved å bruke den andre tilkoblingsmetoden legger vi inn en lignende linje i koden, som indikerer navnet og banen til den andre filen.

Den endelige koden vil se slik ut:

C:\Users:\Desktop:\1.css" type="text/css"/>

C:\Users:\Desktop:\2.css" type="text/css"/>

Avslutningsvis er det verdt å nevne denne muligheten: i enhver fil kan du plassere lenker til mange andre lignende dokumenter. Det er ganske enkelt å gjøre dette:

  1. Vi kobler stilen til siden ved å bruke en av metodene beskrevet ovenfor.
  2. I filen skriver vi en linje som kobler en ekstra stil til attributtet: @import url(“style-2.css”).

Video om emnet: koble CSS til HTML

Historien viser tydeligere alle måtene å koble et stilark til sidekoden:

De tre presenterte alternativene for å koble en velger til en side brukes oftest i praksis. Selvfølgelig er dette bare en teori; for en mer dyptgående studie av problemet, må du prøve hvert alternativ selv.

Publisert av nyforfatter

I denne opplæringen lærer du hvordan du kobler css til html. La oss se på flere alternativer med eksempler. La oss også snakke om asynkron lasting stiler og hacks for forskjellige nettlesere.

Hvordan koble css til html i en egen fil

Nå skal jeg vise deg hvordan du kobler css til html med en egen stilfil. Opprettet egen fil css. Videre bruk spesiallag den kobles til nødvendige dokumenter. Denne typen kalles et eksternt stilark.

Denne metoden er den mest å foretrekke. Den lar deg utvikle nettstedstiler separat fra HTML-dokumenter. Stilen kan deretter brukes i en enkelt style.css-fil på mange sider.

Vi skriver banen nøyaktig i head-taggen. Det indikerer alt som er nødvendig systeminformasjon for å vise siden. Den henger sammen slik:

Det finnes også andre tilkoblingsmetoder. Bruk dem kun som tilleggsalternativ.

Det er verdt å si at inline stiler har høyeste prioritet. Selv om du inkluderer ekstern css, vil nettleseren gi preferanse til de innebygde stilene for en bestemt tag. På andre plass i prioritet er interne stiler. De er dårligere enn innebygde, men overlegne eksterne.

Generelt, som et tilleggsalternativ, kan du finne det nyttig å bruke innebygd eller interne stiler. Dette er veldig nyttig hvis du trenger å style et element på spesifikk side uten å påvirke hoved-css-filen.

Finnes fire måter å koble stiler på til HTML-dokumentet ditt. De mest brukte metodene er inline CSS og ekstern CSS.

Innebygd CSS i HTML-element

Nedenfor er et eksempel CSS implementering basert på ovennevnte syntaks:

Overskrift

Avsnitt.

Vi får følgende resultat:

Attributter

Inline CSS - stilattributt

Du kan bruke attributtet på et hvilket som helst HTML-element for å definere stilregler. Disse reglene vil kun gjelde for dette elementet. Her er den generelle syntaksen:

<элемент style = "...правила стиля...">

Attributter

Eksempel

Nedenfor er et eksempel på innebygd CSS basert på syntaksen ovenfor:

Innebygd CSS

Vi får følgende resultat:

Eksterne CSS-stiler - element

Element kan brukes til å inkludere eksterne CSS-filer i HTML-dokumentet.

Et eksternt CSS-stilark er en egen tekstfil med utvidelsen .css. Du definerer alle stilreglene i denne tekstfil, og så kan du inkludere CSS-filen i et hvilket som helst HTML-dokument ved å bruke elementet .

Her er den generelle syntaksen for å inkludere en ekstern CSS-fil:

Attributter

Attributter er knyttet til elementer eller regler definert i noen ekstern fil stilark.

  • Enhver regel definert i tagger, overstyrer regler definert i enhver ekstern CSS-fil.
  • Enhver regel definert i en ekstern stilarkfil har lavest prioritet i CSS, og regler definert i den filen vil bare gjelde når de to foregående reglene ikke gjelder.

    • Håndtering av eldre nettlesere

    Det er mange eldre nettlesere som ikke støtter CSS. Derfor må vi passe på å skrive inline CSS i HTML-dokumentet vårt. Følgende kodebit viser hvordan kommentarkoder kan brukes til å skjule CSS fra eldre nettlesere:

    Det er tre måter å implementere CSS-stiler for nettstedet ditt: du kan bruke globale CSS-stiler ved å legge til CSS-regler i beholderen HTML-dokument, kan du legge til en lenke til en ekstern .css fil som inneholder alt nødvendige regler eller bruk intern CSS for å bruke regler på spesifikt element. I denne opplæringen skal vi se på alle tre CSS-alternativene og lære fordelene og ulempene deres.

    Global CSS er plassert i en beholder spesifikk side. Med dette tilkoblingsalternativet kan klasser og identifikatorer (ID-er) brukes for å få tilgang CSS-kode, men de vil kun være aktive på dette spesifikk side. CSS-stiler koblet på denne måten lastes inn hver gang siden lastes inn på nytt, slik at de kan påvirke lastehastigheten. Det er imidlertid flere situasjoner der bruk av global CSS kan være nyttig. Hvis du for eksempel trenger å sende noen en sidemal, vil det være mye lettere for deg å gi et foreløpig resultat hvis alt er på én side. Global CSS plasseres mellom tagger. Her er et eksempel på et globalt stilark:

    Fordeler med Global CSS:

    • Et stilark påvirker bare én side.
    • Global CSS kan bruke klasser og identifikatorer (IDer).
    • Det er ikke nødvendig å laste opp flere filer. HTML og CSS kan være i samme fil.

    Ulemper med Global CSS:

    • Økt sideinnlastingstid.
    • Kobles til kun én side – ineffektivt hvis du vil bruke samme CSS for flere sider.

    Hvordan koble CSS til en HTML-side

    1. Åpne HTML-siden din i et hvilket som helst tekstredigeringsprogram. Hvis siden allerede er lastet inn på din regnskap hosting, kan du bruke tekstredigerer levert av vertsleverandøren din. Hvis dette dokumentet HTML-en er på datamaskinen din, du kan bruke et hvilket som helst tekstredigeringsprogram for å redigere det, og deretter laste det opp på nytt til vertskontoen din ved å bruke .
    2. Finn åpningstaggen og legg til følgende kode etter den:

    Etter alle trinnene skal HTML-dokumentet med global CSS se omtrent slik ut :

    Hostinger guide

    Dette er vår tekst.

    Alternativ 2 - Ekstern CSS

    Kanskje mest praktisk alternativ for å koble CSS til nettstedet ditt, er dette for å koble det til et eksternt .css fil. I dette tilfellet vil alle endringer som gjøres i den eksterne CSS-filen gjenspeiles på nettstedet ditt som helhet. Link til ekstern CSS filen legges i en beholder sider:

    Mens selve stilarkene er plassert i filen style.css. For eksempel:

    Xleftcol ( flyte: venstre; bredde: 33%; bakgrunn:#809900; ) .xmiddlecol ( flyte: venstre; bredde: 34%; bakgrunn:#eff2df; )

    Fordeler med ekstern CSS:

    • Mindre HTML-sidestørrelse og renere filstruktur.
    • Rask lastehastighet.
    • Til forskjellige sider den samme kan brukes .css fil.

    Ulemper med ekstern CSS:

    • Siden vises kanskje ikke riktig før fullastet ekstern CSS.

    Alternativ 3- Intern CSS

    Inline CSS brukes for en spesifikk HTML-tag. Egenskap