Inline, ingebedde en eksterne style sheets: Hier is wat jy moet weet
Front-end webwerf ontwikkeling word dikwels voorgestel as 'n 3-leggige stoel. Hierdie bene is soos volg:
Die tweede been van hierdie stoel, CSS of Cascading Style Sheets, is waarna ons vandag kyk. Spesifiek, ons wil die 3 soorte style wat u by 'n dokument kan voeg, aanspreek.
- Inline style
- Ingebedde style
- Eksterne style
Elkeen van hierdie soort CSS-style het hul voordele en nadele, dus laat ons elkeen van hulle individueel verdiep.
Inline Styles
Inline style is style wat direk in die tag in die HTML-dokument geskryf word. Inlynstyle beïnvloed slegs die spesifieke merker waarop hulle toegepas word. Hier is 'n voorbeeld van 'n inlyn styl wat toegepas word op 'n standaard skakel, of anker, tag:
Hierdie CSS reël sal die standaard onderstreep teks versiering af van hierdie een skakel. Dit sal egter nie enige ander skakel op die bladsy verander nie. Dit is een van die beperkings van inline style. Aangesien hulle slegs op 'n spesifieke item verander, sal jy jou HTML met hierdie style moet vullis om 'n werklike bladsyontwerp te bereik. Dit is nie 'n beste praktyk nie. Trouens, dit is een stap verwyder van die dae van "font" -tags en die mengsel van struktuur en styl in webblaaie.
Inline style het ook baie hoë spesifisiteit.
Dit maak hulle baie moeilik om te oorskryf met ander, nie-inline style. As jy byvoorbeeld 'n webwerf wil reageer en verander hoe 'n element na sekere breekpunte kyk deur media-navrae te gebruik , sal inlyn-style op 'n element dit baie moeilik maak.
Uiteindelik, inline style is regtig net gepas wanneer dit baie spaarsaam gebruik word.
Trouens, ek gebruik selde ooit inline style op my webblaaie.
Embedded Styles
Embedded style is style wat in die kop van die dokument ingebed is. Embedded style affekteer slegs die etikette op die bladsy waarop hulle ingebed is. Weer eens, weier hierdie benadering een van die sterk punte van CSS. Aangesien elke bladsy style in die
, as jy 'n terreinwye verandering wil maak, soos om die kleur van skakels van rooi na groen te verander, moet jy hierdie verandering op elke bladsy maak, aangesien elke bladsy 'n ingebedde stylblad gebruik. Dit is beter as inline style, maar in baie gevalle is dit nog steeds problematies.
Stylvelle wat by die
van 'n dokument voeg ook 'n beduidende aantal opmerkings kode by die bladsy, wat ook die bladsy moeiliker kan maak om in die toekoms te bestuur.
Die voordeel van ingebedde style sheets is dat die laai dadelik met die bladsy self, in plaas van dat ander eksterne lêers gelaai moet word. Dit kan 'n voordeel wees uit 'n aflaai spoed en prestasie perspektief .
Eksterne Style Sheets
Die meeste webwerwe gebruik vandag eksterne style sheets. Uitwendige style is style wat in 'n aparte dokument geskryf word en dan aan verskeie webdokumente geheg word. Eksterne stylbladsye kan enige dokument raak waarop hulle geheg is, wat beteken dat as jy 'n bladsy van 20 bladsye het waar elke bladsy dieselfde style gebruik (dit is tipies hoe dit gedoen word), kan jy elkeen 'n visuele verandering maak. van die bladsye deur eenvoudig die stylblad te wysig.
Dit maak die bestuur van langtermyn-webtuistes baie makliker.
Die nadeel van eksterne style sheets is dat hulle bladsye benodig om hierdie eksterne lêers te laai en laai. Nie elke bladsy sal elke styl in die CSS-blad gebruik nie, soveel bladsye sal 'n veel groter CSS-bladsy laai as wat dit werklik nodig het.
Alhoewel dit waar is dat daar 'n prestasie-treffer vir eksterne CSS-lêers is, kan dit beslis verminder word. Realisties, CSS lêers is net teks lêers, so hulle is oor die algemeen nie baie groot om mee te begin nie. As u hele webwerf 1 CSS-lêer gebruik, kry u ook die voordeel dat daardie dokument gekak word nadat dit aanvanklik gelaai is.
Dit beteken dat daar 'n klein prestasie getref op die eerste bladsy 'n paar besoeke kan wees, maar daaropvolgende bladsye sal die CSS-lêer in die kas gebruik, so enige treffer sal ontken word. Eksterne CSS lêers is hoe ek al my webblaaie bou.