Kolme CSS-tyyppityyppiä

Etupään verkkosivujen kehittäminen on usein esitetty kolmijalkaisena jakkarana, joka koostuu:

• HTML sivuston rakennetta varten
• CSS visuaalisiin tyyleihin
• Javascript käyttäytymistä varten

Tämän jakkaran toinen osa, Cascading Style Sheets, tukee kolmea eri tyyliä, jotka voit lisätä asiakirjaan.

1. Upotetut tyylit
2. Upotetut tyylit
3. Ulkoiset tyylit

Jokaisella näistä CSS-tyyleistä on ainutlaatuisia etuja ja haittoja.

Upotetut tyylit

Sisäiset tyylit ovat tyylit, jotka kirjoitetaan suoraan HTML-asiakirjan tagiin. Sisäiset tyylit vaikuttavat vain tiettyyn tagiin, johon niitä käytetään:

Tämä CSS-sääntö deaktivoi tämän yhden linkin tavallisen alleviivatun tekstikoristelun. Se ei kuitenkaan muuta mitään muuta linkkiä sivulla. Tämä on yksi inline-tyylien rajoituksista. Koska ne muuttuvat vain tietyssä tuotteessa, sinun on pyyhittävä HTML-koodisi näillä tyylillä yhtenäisen sivusuunnittelun aikaansaamiseksi. Se ei ole paras käytäntö: Itse asiassa se on yksi askel pois päivistä fontti tunnisteet sekä verkkosivujen rakenteen ja tyylin sekoitus.

Inline-tyylit vaativat myös erittäin suurta spesifisyyttä. Tämän vuoksi niitä on vaikea korvata muilla, ei-inline-tyylillä. Esimerkiksi, jos haluat tehdä sivustosta reagoivan ja muuttaa tapaa, jolla elementti näyttää tiettyjä katkaisupisteitä käyttämällä mediakyselyt, elementin sisäiset tyylit tekevät tästä vaikean.

Sisäiset tyylit ovat sopivia vain silloin, kun käytät niitä säästeliäästi, "poikkeus sääntöön" -lähestymistavassa, joka erottaa yhden tai kaksi elementtiä sivun ikäisistä.

Upotetut tyylit

Upotetut tyylit sijaitsevat asiakirjan päässä. He ovat koteloitu tunnisteet ja näyttävät paljolti ulkoisilta CSS-tiedostoilta asiakirjan kyseisessä osassa.

Upotetut tyylit vaikuttavat vain sen sivun tunnisteisiin, johon ne on upotettu. Jälleen kerran tämä lähestymistapa hylkää yhden CSS: n vahvuuksista. Koska jokaisella sivulla on otsikossa määritellyt tyylit, jos haluat tehdä koko sivuston laajuisen muutoksen - kuten vaihtaa väriä linkkejä punaisesta vihreään - sinun on tehtävä tämä muutos jokaisella sivulla, koska jokainen sivu käyttää upotettua tyyliä arkki. Tämä lähestymistapa on parempi kuin inline-tyylit, mutta silti ongelmallinen monissa tapauksissa.

Tyylitaulukot, jotka lisätään asiakirjan päähän, lisäävät myös merkittävän määrän merkintäkoodia tälle sivulle, mikä voi myös vaikeuttaa sivun hallintaa tulevaisuudessa.

Upotettujen tyylitaulukoiden etuna on, että ne latautuvat heti sivun kanssa sen sijaan, että vaatisivat muiden ulkoisten tiedostojen lataamista. Tämä tekniikka voi olla hyötyä latausnopeudesta ja suorituskyvystä.

Ulkoiset tyyliarkit

Suurin osa verkkosivustoista käyttää nykyään ulkoisia tyylisivuja. Ulkoiset tyylit ovat tyylit, jotka kirjoitetaan erilliseen asiakirjaan ja liitetään sitten erilaisiin verkkodokumentteihin. Ne kutsutaan pääasiakirjaan käyttämällä a -tunniste asiakirjan päähän. Ulkoiset tyylitaulukot voivat joko olla samassa palvelimessa kuin HTML, tai ne voidaan vetää kokonaan toisesta palvelimesta. Tämä pätee usein omaisuuksiin, kuten fontteihin, joita monet sivustot lainaa Googlelta.

Ulkoiset tyylisivut vaikuttaa mihin tahansa asiakirjaan, johon ne on liitetty, mikä tarkoittaa, että jos sinulla on 20 sivun verkkosivusto, jossa jokainen sivu käyttää samaa tyylitaulukkoa (näin tehdään yleensä), voit tehdä visuaalisen muutoksen jokaiselle sivulle muokkaamalla yksinkertaisesti yhtä tyyliä arkki. Tämä talous helpottaa sivuston pitkäaikaista hallintaa.

Ulkopuolisten tyylitaulukoiden haittapuoli on, että ne vaativat sivuja noutamaan ja lataamaan nämä ulkoiset tiedostot. Kaikki sivut eivät käytä CSS-taulukon kaikkia tyylejä, joten monet sivut lataavat paljon suuremman CSS-sivun kuin mitä todellisuudessa tarvitaan.

Vaikka on totta, että ulkoisten CSS-tiedostojen suorituskyky on osunut, se voidaan varmasti minimoida. Realistisesti CSS-tiedostot ovat vain tekstitiedostoja, joten ne eivät ole aluksi suuria. Jos koko sivustosi käyttää yhtä CSS-tiedostoa, saat myös edun siitä, että asiakirja välimuistiin tallennetaan sen lataamisen jälkeen, mikä tarkoittaa, että Joidenkin käyntien ensimmäisellä sivulla saattaa olla pieni suorituskykyosuma, mutta seuraavilla sivuilla käytetään välimuistissa olevaa CSS-tiedostoa, joten kaikki osumat olisivat kumottu.