Slik setter du inn en CSS -fil i HTML

Forfatter: Eric Farmer
Opprettelsesdato: 3 Mars 2021
Oppdater Dato: 1 Juli 2024
Anonim
Hvordan kode HTML og CSS - Del 4 Hvordan sette inn logo og navigasjonsmeny i HTML
Video: Hvordan kode HTML og CSS - Del 4 Hvordan sette inn logo og navigasjonsmeny i HTML

Innhold

Hypertext Markup Language (HTML) bestemmer hvilke elementer som er tilstede på en webside. Programmeringsspråket Cascading Style Sheets (CSS) beskriver hvordan disse elementene skal se ut.CSS -filen kan legges til HTML som ekstern (CSS legges til som en egen fil) eller internt stilark (CSS er inkludert i HTML -filen). Lær hvordan du legger inn CSS i en HTML -fil for å redesigne nettstedet ditt.

Trinn

Metode 1 av 2: Hvordan sette opp et eksternt stilark

  1. 1 Lag en CSS -fil. Forbered og lagre en CSS -fil med utvidelsen ".css".
  2. 2 Last opp CSS -filen til nettstedet ditt.
  3. 3 Kopier adressen (URL) til CSS -filen. Nettstedsadressen vil se slik ut: www.yoursite.com/stylesheet.css.
    • Det er god praksis å fjerne det primære domenenavnet fra nettadressen. Basert på dette vil adressen http: //myisite.com/css/default.css bli forkortet til "/css/default.css". Husk å inkludere den ledende skråstrek ("/"). Det kalles en relativ bane.
  4. 4 Sett inn lenken i filen. Finn taggen / head> i HTML -filen, og lag en tom linje rett over den. Lim inn den linjen LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, erstatt "www.your ..." med en lenke i CSS -filen.
  5. 5 Lagre HTML -filen og last den opp til nettstedet.
  6. 6 Sørg for at alt på nettstedet ser ut som det skal. Ellers kan du åpne HTML -filen på nytt, se etter feil og gjøre endringer.

Metode 2 av 2: Slik setter du inn et internt stilark

  1. 1 Lag en etikettstil>. Åpne HTML -filen og finn taggen / head>. Legg til noen tomme linjer over det og skriv inn følgende:

STYLE type = "text / css"> / STYLE>

  1. 1 Lim inn all CSS mellom disse to etikettene.
  2. 2 Lagre HTML -filen (med filtypen .html).
  3. 3 Sørg for at alt på nettstedet ser ut som det skal. Ellers gjør de ønskede endringene.

Tips

  • Kontroller alltid utseendet til nettstedet i forskjellige nettlesere og på forskjellige operativsystemer. Noen nettlesere kobler seg til CSS på litt forskjellige måter. Det kan til og med skje i samme nettleser, men på forskjellige versjoner av Mac og Windows. Hvis nettstedet ditt ser annerledes ut i en annen nettleser (for eksempel er avstanden mellom noen objekter, for eksempel lister, av en annen størrelse), så er problemet nettleserens innstillinger. Finn hovedstylearket og lim det øverst i CSS -filen for å endre standard nettleserinnstillinger. Dette gjøres slik at innstillingene dine ikke endrer noe i selve nettleseren.
  • Sett inn et eksternt stilark hvis du kan. Dette lar deg endre utseendet på nettstedet ved å endre koden i kildefilen. På denne måten trenger du ikke å endre CSS på hver side på nettstedet ditt.
  • Hvis nettstedet ditt ikke reagerer på CSS slik du forventer, må du dobbeltsjekke hele kodingen for å kontrollere at det er stavet riktig. Vær spesielt oppmerksom på semikolon (";") og parenteser ("}"). Det er ganske enkelt å utelate et av disse tegnene i en CSS -fil.
  • Lagre HTML-filen på datamaskinen din, slik at du kan åpne den senere i forskjellige nettlesere og dobbeltsjekke utseendet før du laster den ned ytterligere. Men for å laste den må CSS -filen settes inn i HTML -koden som et eksternt stilark.
  • Hvis stilarket motsier seg selv - for eksempel står det først at teksten vil være blå og deretter at den vil være rød - vil den siste betingelsen alltid være oppfylt. Hvis den ene kommandoen er et eksternt stilark og den andre er et internt stilark, vil det interne stilarket være aktivt.

Advarsler

  • Ikke bruk "åpen" iscenesettende CSS, det vil si CSS som er inkludert i HTML -taggen. (Eksempel: "align = 'center'" er en åpen CSS -innstilling). Dette er et foreldet alternativ med dårlig syntaks. Hvis du etter en stund må oppdatere nettstedet, vil denne innstillingen være vanskelig å endre.