CSS-tyylisivut on monia etuja. Niiden avulla voit käyttää samaa tyylisivua koko verkkosivustollasi. Voit tehdä tämän kahdella tavalla:
- linkittäminen LINK-elementtiin
- tuonti @import-komennolla
Ulkoisten tyylitaulukoiden edut ja haitat
Yksi parhaista asioista CSS-tyylisivut on, että voit käyttää niitä pitämään sivustosi yhtenäisenä. Helpoin tapa tehdä tämä on linkittää tai tuoda ulkoinen tyylitaulukko. Jos käytät samaa ulkoista tyylitaulukkoa jokaiselle sivustosi sivulle, voit olla varma, että kaikilla sivuilla on sama tyylejä.
Joitakin ulkoisten tyylitaulukoiden käytön etuja ovat, että voit hallita useiden asiakirjojen ulkoasua ja tuntumaa kerralla. Tämä on erityisen hyödyllistä, jos työskentelet ihmisryhmän kanssa verkkosivustosi luomisessa. Monia tyylisääntöjä voi olla vaikea muistaa, ja vaikka sinulla saattaa olla painettu tyyliopas, se on hankala olla selata sitä jatkuvasti selvittääkseen, kirjoitetaanko esimerkkiteksti 12 pisteen Arial-fontilla vai 14 pisteen Kuriiri.
Voit luoda tyyliluokkia, joita voidaan sitten käyttää monissa eri HTML-elementeissä. Jos käytät usein erityistä Wingdings-kirjasinta korostaaksesi sivusi eri asioita, voit käyttää Wingdings luokka, jonka asetit tyylitaulukkoosi luodaksesi ne sen sijaan, että määrittelisit tietyn tyylin kullekin painopiste.
Voit helposti ryhmitellä tyylisi tehokkaammiksi. Kaikkia CSS: n käytettävissä olevia ryhmittelymenetelmiä voidaan käyttää ulkoisissa tyylitaulukoissa, mikä antaa sinulle enemmän hallintaa ja joustavuutta sivuillesi.
Siitä huolimatta on myös erittäin hyviä syitä olla käyttämättä ulkoisia tyylisivuja. Ensinnäkin ne voivat pidentää latausaikaa, jos linkität moniin niistä.
Joka kerta, kun luot uuden CSS-tiedoston ja linkität tai tuodaan sen asiakirjaan, Web-selain vaatii uuden puhelun Web-palvelimelle tiedoston saamiseksi. Ja palvelinkutsut hidastavat sivun latausaikoja.
Jos sinulla on vain pieni määrä tyylejä, ne voivat lisätä sivusi monimutkaisuutta. Koska tyylit eivät näy suoraan HTML-koodissa, jokaisen sivua katsovan on hankittava toinen asiakirja (CSS-tiedosto) selvittääkseen mitä tapahtuu.
Ulkoisen tyylisivun luominen
Ulkoiset tyylitaulukot kirjoitetaan samalla tavalla kuin upotetut ja sisäiset tyylitaulukot. Mutta sinun tarvitsee vain kirjoittaa tyyli valitsin ja vakuutus. Et tarvitse STYLE-elementtiä tai määritettä asiakirjassa.
Kuten kaikkien muidenkin kanssa CSS, säännön syntaksi on:
selector {ominaisuus: arvo; }
Nämä säännöt kirjoitetaan tekstitiedostoon, jonka laajennus on.
.css. Voit esimerkiksi nimetä tyylisivusi.
styles.css.
CSS-asiakirjojen linkittäminen
Tyylisivun linkittämiseen käytetään LINK-elementtiä. Tällä on määritteet rel ja href. Rel-attribuutti kertoo selaimelle, mitä linkität (tässä tapauksessa tyylitaulukko), ja href-määritteellä on polku CSS-tiedostoon.
On myös valinnainen attribuuttityyppi, jonka avulla voit määrittää linkitetyn asiakirjan MIME-tyypin. Tätä ei vaadita HTML5: ssä, mutta sitä tulisi käyttää HTML 4 -asiakirjoissa.
Tässä on koodi, jota käytät linkittäessäsi CSS-tyylitaulukon nimeltä tyylit.css:
HTML 4 -asiakirjaan kirjoitat:
type = "text / css">
Tuodaan CSS-tyylitaulukoita
Tuodut tyylitaulukot sijoitetaan STYLE-elementtiin. Voit sitten käyttää upotettuja tyylejä myös, jos haluat. Voit myös sisällyttää tuotuja tyylejä linkitettyihin tyylitauluihin. Kirjoita STYLE- tai CSS-asiakirjan sisään:
@import url (' http://www.yoursite.com/styles.css');