Upota CSS HTML 5: ään - näin se tehdään
Voit integroida CSS: n helposti HTML 5: ään. Koska jos haluat tehdä HTML- ja XML-asiakirjoista graafisempaa, CSS (Cascading Style Sheets) on hyvä valinta. Alustuskieli tarjoaa sinulle useita vaihtoehtoja verkkosivustojesi parantamiseksi visuaalisesti. Periaatteessa on kolme eri tapaa integroida CSS HTML 5: ään. Näytämme tämän tässä käytännöllisessä kärjessä.
CSS HTML 5: ssä: Vaihtoehto 1 - ulkoista CSS-tiedosto
Ensimmäinen vaihtoehto on siirtää CSS erilliseen tiedostoon. Tämä tarjoaa lukuisia etuja: tyylitaulukot eivät koske vain yhtä sivua, vaan niitä käytetään automaattisesti jokaisella HTML5-sivulla. Tärkein etu on keskushallinto. Voit nopeasti toteuttaa muutokset kaikilla sivuilla. Kuinka upottaa CSS-tiedosto HTML 5: ään:
- Luo uusi CSS-tiedosto.
- Katso pään alueella CSS-tiedostoasi. Tässä tapauksessa tiedosto nimettiin style.css - mutta nimeäminen on tietysti henkilökohtainen:
- Sinun tulisi tallentaa style.css-tiedosto web-palvelimen päähakemistoon.
- CSS-tiedostosi on integroitu onnistuneesti HTML 5: ään.
CSS HTML 5-tiedostosi alussa
Jos et halua luoda ulkoistettuja CSS-tiedostoja, voit myös asettaa CSS-ominaisuudet HTML 5 -asiakirjan otsikossa. Nämä vaikuttavat sitten vain tähän HTML 5-tiedostoon, ei kaikille HTML 5-sivuille.
- Avaa HTML 5 -asiakirjasi
- Lisää seuraava komento pään alueelle:
- Määritä nyt halutut ominaisuudet: Tämä voi olla esimerkiksi otsikkojen koko, tekstin väri jne. Käytä tähän tuttuja CSS-komentoja.
- Sulje komento kirjoittaessasi ominaisuuksia painikkeella.
- Määritetyt ominaisuudet otetaan käyttöön tälle HTML 5 -dokumentille.
CSS-rivityyli: käytä komentoja suoraan
Viimeinen tapa integroida CSS HTML 5: ään on inline-tyyli. Tämä tarkoittaa, että kirjoitat komennot suoraan lähdekoodiin.
- Siirry kohtaan, jossa haluat muuttaa graafista näyttöä.
- Kirjoita CSS-komennot suoraan. Tämä voi näyttää esimerkiksi tältä:
Sininen alaotsikko
- Ominaisuutta käytetään vain tähän komentoon.