Sisäänrakennetut, upotetut ja ulkoiset tyyliarkit: Tässä on sinun tarvitsee tietää
Etusivun verkkosivuston kehittämistä edustaa usein 3-jalkainen jakkara. Nämä jalat ovat seuraavat:
Tämän ulosteen, CSS: n tai Cascading Style Sheetsin toinen osa on mitä täällä täällä tarkastellaan. Tarkoituksena on erityisesti käsitellä 3 tyyppistä tyylejä, jotka voit lisätä asiakirjaan.
- Inline-tyylit
- Sulautetut tyylejä
- Ulkoiset tyylejä
Jokaisella tällaisella CSS-tyylillä on niiden etuja ja haittoja, joten ottakaamme syvemmälle tarkastele niitä kukin erikseen.
Inline-tyylit
Inline-tyylit ovat tyylejä, jotka on kirjoitettu suoraan HTML-asiakirjan tunnisteeseen. Inline-tyylit vaikuttavat vain niihin tiettyihin tunnisteisiin, joihin heihin sovelletaan. Tässä on esimerkki vakiolinkkiin tai ankkuriin merkitylle inline-tyylille:
Tämä CSS-sääntö kääntäisi tämän yhden linkin standardin alleviivauksen tekstin sisustuksen pois. Se ei kuitenkaan muuta minkään muun sivun linkkiä. Tämä on yksi inline-tyylien rajoituksista. Koska ne vaihtuvat vain tiettyyn kohteeseen, sinun on välitettävä HTML-tyylisi näiden tyylien avulla varsinaisen sivun suunnitteluun. Se ei ole paras käytäntö. Itse asiassa se on yksi askel poistettu "kirjasinta" tunnisteiden päivistä ja rakenteesta ja tyylilajista verkkosivuilla.
Inline-tyyleillä on myös erittäin suuri spesifisyys.
Tämä tekee niistä erittäin vaikeita korvata muilla, ei-inline-tyyleillä. Jos esimerkiksi haluat tehdä sivuston reagoivan ja muuttaa elementin tarkastelemista tiettyjen rajapintojen avulla käyttämällä mediakyselyitä , elementtien sisäiset tyylejä tekevät tästä erittäin vaikeaksi.
Lopulta inline-tyylit ovat oikeastaan vain sopivia, kun niitä käytetään hyvin säästeliäästi.
Itse asiassa harvoin koskaan käytän inline-tyylejä verkkosivuillani.
Sulautetut tyylit
Sulautetut tyylit ovat tyylejä, jotka on upotettu asiakirjan päähän. Sulautetut tyylejä koskevat vain ne sivut, joihin ne on upotettu. Jälleen kerran tämä lähestymistapa heikentää yhtä CSS: n vahvuuksista. Koska jokaisella sivulla on tyylit
, jos haluat tehdä sitewide-muutoksen, kuten muuttamalla linkkien väriä punaisesta vihreään, sinun pitäisi tehdä tämä muutos jokaisella sivulla, koska jokainen sivu käyttää upotettua tyyliarkkia. Tämä on parempi kuin inline-tyylit, mutta silti ongelmallinen monissa tapauksissa.
Tyylitiedostot, jotka lisätään
asiakirjassa on myös huomattava määrä merkintäkoodia kyseiselle sivulle, mikä voi myös helpottaa sivun hallintaa tulevaisuudessa.
Sulautettujen tyyliarkkien etuna on, että kuorma latautuu välittömästi sivun kanssa sen sijaan, että vaadittaisiin muiden ulkoisten tiedostojen lataamista. Tämä voi olla hyöty latausnopeuden ja suorituskyvyn näkökulmasta .
Ulkoiset tyyliarkit
Useimmat verkkosivustot käyttävät nykyisin ulkoisia tyyliarkkeja. Ulkoiset tyylit ovat tyylejä, jotka on kirjoitettu erilliseen dokumenttiin ja liitetty sitten erilaisiin verkkoasiakirjoihin. Ulkoiset tyyliarkit voivat vaikuttaa kaikkiin asiakirjoihin, joihin ne liitetään, mikä tarkoittaa, että jos sinulla on 20 sivun verkkosivusto, jossa jokainen sivu käyttää samaa tyyliarkkia (tämä on tyypillisesti miten se tehdään), voit tehdä visuaalisen muutoksen jokaiselle näistä sivuista yksinkertaisesti muokkaamalla kyseistä tyyliarkkia.
Tämä helpottaa pitkän aikavälin sivuston hallintaa.
Ulkoisten tyyliarkkien haittapuolena on, että ne vaativat sivuja hakeakseen ja lataamaan nämä ulkoiset tiedostot. Jokainen sivu ei käytä jokaista tyyliä CSS-arkistossa, joten monet sivut lataavat paljon suuremman CSS-sivun kuin mitä todella tarvitaan.
Vaikka on totta, että ulkoisten CSS-tiedostojen suorituskyky osuu, se voidaan varmasti minimoida. Realistisesti CSS-tiedostot ovat vain tekstitiedostoja, joten ne eivät yleensä ole kovin suuria aluksi. Jos koko sivustosi käyttää 1 CSS-tiedostoa, saat myös sen etun, jossa kyseinen asiakirja välimuistissa on sen lataamisen jälkeen.
Tämä tarkoittaa sitä, että ensimmäisellä sivulla voi olla hieman suorituskyvyn osumia, mutta seuraavissa sivuissa käytetään välimuistissa olevaa CSS-tiedostoa, joten kaikki osumat hylätään. Ulkoiset CSS-tiedostot muokkaavat kaikkia verkkosivuja.