Sisältö

• Askeleet
• Tapa 1 /2: Ulkoisen tyylitaulukon määrittäminen
• Tapa 2/2: Kuinka lisätä sisäinen tyylitaulukko
• Vinkkejä
• Varoitukset

Hypertext Markup Language (HTML) määrittää, mitä elementtejä verkkosivulla on. CSS (Cascading Style Sheets) -ohjelmointikieli kuvaa näiden elementtien ulkoasun.CSS -tiedosto voidaan lisätä HTML -muotoon ulkoisena (CSS lisätään erillisenä tiedostona) tai sisäisenä tyylitaulukkona (CSS sisältyy HTML -tiedostoon). Opi upottamaan CSS HTML -tiedostoon, jotta voit suunnitella sivustosi uudelleen.

Askeleet

Tapa 1 /2: Ulkoisen tyylitaulukon määrittäminen

1. 1 Luo CSS -tiedosto. Valmistele ja tallenna CSS -tiedosto, jonka tunniste on ".css".
2. 2 Lataa CSS -tiedosto sivustoosi.
3. 3 Kopioi CSS -tiedoston osoite (URL). Sivuston osoite näyttää tältä: www.yoursite.com/stylesheet.css.
   • On hyvä käytäntö poistaa ensisijainen verkkotunnus URL -osoitteesta. Tämän perusteella osoite http: //myisite.com/css/default.css lyhennetään muotoon "/css/default.css". Muista lisätä kauttaviiva ("/"). Sitä kutsutaan suhteelliseksi poluksi.
4. 4 Lisää linkki tiedostoon. Etsi / head> -tunniste HTML -tiedostostasi ja luo tyhjä rivi sen yläpuolelle. Liitä kyseiselle riville LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css"> ja korvaa "www.your ..." linkillä CSS -tiedostossa.
5. 5 Tallenna HTML -tiedosto ja lataa se sivustolle.
6. 6 Varmista, että kaikki sivustolla näyttää siltä, ​​miltä sen pitäisi näyttää. Muussa tapauksessa avaa HTML -tiedosto uudelleen, etsi virheitä ja tee muutoksia.

Tapa 2/2: Kuinka lisätä sisäinen tyylitaulukko

1. 1 Luo tunnistetyyli>. Avaa HTML -tiedosto ja etsi / head> -tunniste. Lisää sen yläpuolelle tyhjiä rivejä ja kirjoita seuraava:

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

1. 1 Liitä kaikki CSS -tiedostot näiden kahden tunnisteen väliin.
2. 2 Tallenna HTML -tiedosto (.html -laajennuksella).
3. 3 Varmista, että kaikki sivustolla näyttää siltä, ​​miltä sen pitäisi näyttää. Muussa tapauksessa tee haluamasi muutokset.

Vinkkejä

• Tarkista aina sivuston ulkonäkö eri selaimissa ja eri käyttöjärjestelmissä. Jotkut selaimet muodostavat yhteyden CSS: ään hieman eri tavoilla. Se voi tapahtua jopa samassa selaimessa, mutta eri Mac- ja Windows -versioissa. Jos sivustosi näyttää erilaiselta toisessa selaimessa (esimerkiksi joidenkin objektien, kuten luetteloiden välinen etäisyys on erikokoinen), ongelma on selaimen asetuksissa. Etsi päätaulukko ja liitä se CSS -tiedoston yläosaan muuttaaksesi selaimen oletusasetuksia. Tämä tehdään niin, että asetuksesi eivät muuta mitään itse selaimessa.
• Lisää ulkoinen tyylitaulukko, jos voit. Tämän avulla voit muuttaa sivuston ulkoasua muuttamalla lähdetiedoston koodia. Näin sinun ei tarvitse muuttaa CSS: ää sivustosi jokaisella sivulla.
• Jos sivustosi ei vastaa odotetulla tavalla CSS: ään, tarkista koko koodaus ja varmista, että se on kirjoitettu oikein. Kiinnitä erityistä huomiota puolipisteisiin (";") ja sulkeisiin ("}"). Yhden näistä merkeistä on melko helppo jättää pois CSS -tiedostosta.
• Tallenna HTML-tiedosto tietokoneellesi, jotta voit avata sen myöhemmin eri selaimissa ja tarkistaa sen ulkoasun ennen lataamista. Mutta sen lataamiseksi CSS -tiedosto on lisättävä HTML -koodiin ulkoisena tyylitaulukkona.
• Jos tyylitaulukko on ristiriidassa itsensä kanssa - esimerkiksi sanotaan ensin, että teksti on sininen ja sitten, että se on punainen - viimeinen ehto täyttyy aina. Jos yksi komento on ulkoinen tyylitaulukko ja toinen sisäinen tyylisivu, sisäinen tyylisivu on aktiivinen.

Varoitukset

• Älä käytä "avointa" CSS -CSS: ää eli HTML -tagiin sisältyvää CSS: ää. (Esimerkki: "align = 'center'" on avoin CSS -asetus). Tämä on vanhentunut vaihtoehto, jolla on huono syntaksi. Jos joudut jonkin ajan kuluttua päivittämään sivuston, tätä asetusta on vaikea muuttaa.