Paano ipasok ang isang CSS file sa HTML

May -Akda: Eric Farmer
Petsa Ng Paglikha: 3 Marso. 2021
I -Update Ang Petsa: 1 Hulyo 2024
Anonim
Paano mai-link ang CSS sa HTML
Video.: Paano mai-link ang CSS sa HTML

Nilalaman

Tinutukoy ng Hypertext Markup Language (HTML) kung anong mga elemento ang naroroon sa isang web page. Inilalarawan ng wika ng programa ng Cascading Style Sheets (CSS) ang hitsura ng mga elementong ito.Ang CSS file ay maaaring idagdag sa HTML bilang isang panlabas (ang CSS ay idinagdag bilang isang hiwalay na file) o panloob na style sheet (kasama ang CSS sa HTML file). Alamin kung paano i-embed ang CSS sa isang HTML file upang muling idisenyo ang iyong site.

Mga hakbang

Paraan 1 ng 2: Paano mag-set up ng isang panlabas na sheet ng estilo

  1. 1 Lumikha ng isang CSS file. Maghanda at mag-save ng isang CSS file na may extension na ".css".
  2. 2 I-upload ang CSS file sa iyong site.
  3. 3 Kopyahin ang address (URL) ng CSS file. Ang site address ay magmumukhang ganito: www.yoursite.com/stylesheet.css.
    • Mahusay na kasanayan na alisin ang pangunahing pangalan ng domain mula sa URL. Batay dito, ang address na http: //myisite.com/css/default.css ay paikliin sa "/css/default.css". Tandaan na isama ang nangungunang slash ("/"). Ito ay tinatawag na isang kamag-anak na landas.
  4. 4 Ipasok ang link sa file. Hanapin ang / ulo> na tag sa iyong HTML file at lumikha ng isang walang laman na linya sa itaas mismo nito. I-paste sa linyang iyon LINK rel = styleheet type = "text / css" href = "www.your_site.com / styleheet.css">, pinapalitan ang "www.your ..." ng isang link sa CSS file.
  5. 5 I-save ang HTML file at i-upload ito sa site.
  6. 6 Siguraduhin na ang lahat sa site ay mukhang katulad nito. Kung hindi man, muling buksan ang HTML file, hanapin ang mga error, at gumawa ng mga pagbabago.

Paraan 2 ng 2: Paano magsingit ng isang panloob na sheet ng estilo

  1. 1 Lumikha ng isang estilo ng label>. Buksan ang HTML file at hanapin ang / ulo> na tag. Magdagdag ng ilang mga blangko na linya sa itaas nito at ipasok ang sumusunod:

Type ng style = "text / css"> / STYLE>

  1. 1 I-paste ang lahat ng iyong CSS sa pagitan ng dalawang label na ito.
  2. 2 I-save ang HTML file (kasama ang .html extension).
  3. 3 Siguraduhin na ang lahat sa site ay mukhang katulad nito. Kung hindi man, gawin ang nais na mga pagbabago.

Mga Tip

  • Palaging suriin ang hitsura ng site sa iba't ibang mga browser at sa iba't ibang mga operating system. Ang ilang mga browser ay kumonekta sa CSS sa bahagyang iba't ibang mga paraan. Maaari rin itong mangyari sa parehong browser, ngunit sa iba't ibang mga bersyon ng Mac at Windows. Kung ang iyong site ay mukhang naiiba sa isa pang browser (halimbawa, ang spacing sa pagitan ng ilang mga bagay, tulad ng mga listahan, ay may iba't ibang laki), kung gayon ang problema ay ang mga setting ng browser. Hanapin ang master styleheet at i-paste ito sa tuktok ng CSS file upang baguhin ang mga default na setting ng browser. Ginagawa ito upang ang iyong mga setting ay hindi magbago ng anuman sa browser mismo.
  • Magpasok ng isang panlabas na sheet ng estilo kung maaari mo. Papayagan ka nitong baguhin ang hitsura ng site sa pamamagitan ng pagbabago ng code sa source file. Sa ganitong paraan hindi mo kailangang baguhin ang CSS sa bawat pahina ng iyong site.
  • Kung ang iyong site ay hindi tumutugon sa CSS sa paraang gusto mo, i-double check ang buong pag-encode upang matiyak na wasto ang baybay nito. Sa partikular, magbayad ng espesyal na pansin sa mga semicolon (";") at pagsasara ng mga braket ("}"). Ito ay medyo madali upang alisin ang isa sa mga character sa isang CSS file.
  • I-save ang HTML file sa iyong computer upang maibuksan mo ito sa ibang pagkakataon sa iba't ibang mga web browser at suriin muli ang hitsura nito bago i-download pa ito. Ngunit upang mai-load ito, kailangang ipasok ang CSS file sa HTML bilang isang panlabas na istilo ng istilo.
  • Kung ang sheet ng istilo ay sumasalungat sa kanyang sarili - halimbawa, sinasabi muna na ang teksto ay magiging asul at pagkatapos ay magiging pula - ang huling kondisyon ay palaging matugunan. Kung ang isang utos ay isang panlabas na sheet ng istilo at ang iba pa ay isang panloob na sheet ng estilo, magiging aktibo ang sheet ng panloob na istilo.

Mga babala

  • Huwag gumamit ng "bukas" na pagtatanghal ng CSS, iyon ay, ang CSS na kasama sa tag ng HTML. (Halimbawa: "align = 'center'" ay isang bukas na setting ng CSS). Ito ay isang lipas na pagpipilian na may mahinang syntax. Kung makalipas ang ilang sandali kailangan mong i-update ang site, ang setting na ito ay mahirap baguhin.