Kaip įterpti CSS failą į HTML

Autorius: Eric Farmer
Kūrybos Data: 3 Kovas 2021
Atnaujinimo Data: 1 Liepos Mėn 2024
Anonim
How to Link a CSS File to a HTML File [Web Tutorial]
Video.: How to Link a CSS File to a HTML File [Web Tutorial]

Turinys

Hiperteksto žymėjimo kalba (HTML) nustato, kokie elementai yra tinklalapyje. Kaskadinio stiliaus lapų (CSS) programavimo kalba aprašo, kaip šie elementai turėtų atrodyti.CSS failą galima pridėti prie HTML kaip išorinį (CSS pridedamas kaip atskiras failas) arba vidinį stiliaus lapą (CSS yra įtrauktas į HTML failą). Sužinokite, kaip įterpti CSS į HTML failą ir pertvarkyti savo svetainę.

Žingsniai

1 metodas iš 2: kaip nustatyti išorinį stiliaus lapą

  1. 1 Sukurkite CSS failą. Paruoškite ir išsaugokite CSS failą su plėtiniu „.css“.
  2. 2 Įkelkite CSS failą į savo svetainę.
  3. 3 Nukopijuokite CSS failo adresą (URL). Svetainės adresas atrodys maždaug taip: www.yoursite.com/stylesheet.css.
    • Gera praktika yra pašalinti pirminį domeno pavadinimą iš URL. Remiantis tuo, adresas http: //myisite.com/css/default.css bus sutrumpintas iki „/css/default.css“. Nepamirškite įtraukti pirmojo brūkšnio ("/"). Tai vadinama santykiniu keliu.
  4. 4 Įdėkite nuorodą į failą. Raskite žymą / head> savo HTML faile ir sukurkite tuščią eilutę tiesiai virš jos. Įklijuokite toje eilutėje LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, pakeisdami "www.your ..." su nuoroda CSS faile.
  5. 5 Išsaugokite HTML failą ir įkelkite jį į svetainę.
  6. 6 Įsitikinkite, kad viskas svetainėje atrodo taip, kaip turėtų. Priešingu atveju iš naujo atidarykite HTML failą, ieškokite klaidų ir atlikite pakeitimus.

2 metodas iš 2: kaip įterpti vidinį stiliaus lapą

  1. 1 Sukurkite etiketės stilių>. Atidarykite HTML failą ir raskite žymą / head>. Virš jo pridėkite tuščias eilutes ir įveskite:

STILIO tipas = "text / css"> / STYLE>

  1. 1 Įklijuokite visą savo CSS tarp šių dviejų etikečių.
  2. 2 Išsaugokite HTML failą (su .html plėtiniu).
  3. 3 Įsitikinkite, kad viskas svetainėje atrodo taip, kaip turėtų. Priešingu atveju atlikite norimus pakeitimus.

Patarimai

  • Visada patikrinkite svetainės išvaizdą skirtingose ​​naršyklėse ir skirtingose ​​operacinėse sistemose. Kai kurios naršyklės prie CSS prisijungia šiek tiek kitaip. Tai netgi gali įvykti toje pačioje naršyklėje, tačiau skirtingose ​​„Mac“ ir „Windows“ versijose. Jei kitoje naršyklėje jūsų svetainė atrodo kitaip (pavyzdžiui, tarpai tarp kai kurių objektų, pvz., Sąrašų, yra skirtingo dydžio), problema yra ta, kad naršyklės nustatymai. Raskite pagrindinį stiliaus lapą ir įklijuokite jį CSS failo viršuje, kad pakeistumėte numatytuosius naršyklės nustatymus. Tai daroma taip, kad jūsų nustatymai nieko nekeistų pačioje naršyklėje.
  • Jei galite, įdėkite išorinį stiliaus lapą. Tai leis jums pakeisti svetainės išvaizdą, pakeitus kodą šaltinio faile. Tokiu būdu jums nereikia keisti CSS kiekviename savo svetainės puslapyje.
  • Jei jūsų svetainė neatsako į CSS taip, kaip tikitės, dar kartą patikrinkite visą kodavimą, kad įsitikintumėte, jog jis parašytas teisingai. Ypač atkreipkite dėmesį į kabliataškius (";") ir uždarymo skliaustus ("}"). CSS faile gana lengva praleisti vieną iš šių simbolių.
  • Išsaugokite HTML failą savo kompiuteryje, kad vėliau galėtumėte jį atidaryti įvairiose interneto naršyklėse ir prieš atsisiųsdami dar kartą patikrinkite jo išvaizdą. Tačiau norint jį įkelti, CSS failą reikia įterpti į HTML kaip išorinį stiliaus lapą.
  • Jei stiliaus lapas prieštarauja pats sau, pavyzdžiui, pirmiausia sakoma, kad tekstas bus mėlynas, o paskui raudonas - paskutinė sąlyga visada bus įvykdyta. Jei viena komanda yra išorinio stiliaus lapas, o kita - vidinio stiliaus lapas, vidinis stiliaus lapas bus aktyvus.

Įspėjimai

  • Nenaudokite „atviro“ sustojimo CSS, ty CSS, įtraukto į HTML žymą. (Pavyzdys: „align = 'center'" yra atviras CSS nustatymas). Tai pasenusi parinktis su prasta sintaksė. Jei po kurio laiko turėsite atnaujinti svetainę, šį nustatymą bus sunku pakeisti.