Inline, ynboude, eksterne stylblêden: Hjir is wat jo witte moatte
Front-end-websteeûntwikkeling wurdt faak fertsjintwurdige as in 3-legged holle. Dizze skonken binne sa:
It twadde leg fan dizze holle, CSS of Cascading Style Sheets, is wat wy hjir hjoed sykje. Spesifyk wolle wy de 3 soarten stilen oanpasse dy't jo tafoegje kinne oan in dokumint.
- Inline styles
- Embedded styles
- Eksterne stylen
Elk fan dizze soarten CSS-stilen hat har foardielen en minne fertsjinnen, dus litte wy in djipper eachop sjen yn elk fan harren.
Inline Styles
Inline-stilen binne stilen dy't direkt yn it tag skreaun binne yn it HTML-dokumint. Inline-stylen ynfloed allinich de spesifike tag dy't se tapast wurde. Hjir is in foarbyld fan in ynline styl dy't tapast wurdt op in standert keppeling, of anker, tag:
Dizze CSS-regel sil de standert ûndersteande tekstdekoraasje ôfbrekke fan dizze ien keppeling. It soe lykwols gjin oare link wizigje op 'e side. Dit is ien fan 'e beheining fan ynline stilen. Om't se allinich op in bepaald item wizigje, moatte jo jo HTML mei dizze stilen nedich meitsje om in aktuele side-ûntwerp te berikken. Dat is gjin bêste praktyk. Yn feite is it in stap fuortsmiten fan 'e dagen fan' lettertype 'tags en it gemak fan struktuer en styl yn websiden.
Ynline-stilen hawwe ek in hege spesifike smaak.
Dit makket har tige hurd om te oerskriuwen mei oare, net-ynline stylen. As jo bygelyks in side opfreegje meitsje en wizigje hoe't in elemint beskôge wurdt by bepaalde breakpoints troch media-query te brûken , sil ynline-stilen op elke elemint har heul swier meitsje.
Uteinlik binne ynline-stilen echt allinich te pas genôch wannear't se tige sparen brûke.
In feite, ik brûk ik eartiids ynline stilen op myn webside.
Embedded Styles
Yntegrearre stilen binne stylen dy't yn 'e kop fan it dokumint ynsteld binne. Yntegrearre stilen ynfloed allinich de tags op 'e side dy't se ynsteld binne. Dizze oplossing ferlytt ien fan' e krêften fan CSS. Om't elke side stylen hawwe yn 'e
As jo in sitewide wizigje woe, lykas wizigje de kleur fan links fan read nei grien, moatte jo dizze feroaring op elke side meitsje, om't elke side in ynboude stylblêd brûkt. Dit is better as ynline stilen, mar noch altyd problematysk yn in protte eksimplaren.
Stylblêden dy't tafoege wurde oan it
fan in dokumint falt ek in signifikant bedrach fan markearre koade oan dy side, dy't de side ek hurder meitsje kin yn 'e takomst te beheinen.
De foardiel fan ynboude stylblêden is dat de laden fuortendaliks mei de side sels, ynstee fan oare eksterne triemmen om te laden. Dit kin in foardiel wêze fan in download-hurd en optredensperspektyf .
Eksterne stylblêden
De measte websiden brûke hjoed deistige stylblêden. Eksterne stylen binne stilen dy't skreaun binne yn in aparte dokumint en dêrnei oan ferskate webdokten oanbean. Eksterne stylblêden kinne ynfloed hawwe op alle dokuminten dy't se oanfreegje, wat betsjuttet dat as jo in 20-webside hawwe wêr't elke side itselde stylblêd brûke (dit is typysk hoe't it dien wurdt), kinne jo in fisuele feroaring meitsje foar elke fan dy siden troch gewoan it stylblêd te bewurkjen.
Dit makket it langstmeel websteebehear folle makliker.
De ûndergong nei eksterne stylblêden is dat se siden nedich om dizze eksterne bestannen te heljen en te laden. Net elke side sil elke styl yn it CSS-blêd brûke, sadat in soad siden in folle gruttere CSS-side lade dan dat eins needsaaklik is.
Wyls it is wier dat der in prestaasjetoetsen is foar eksterne CSS-bestannen, kin it wis fan minimearje. Realistysk binne CSS bestannen gewoan tekstdateuren, dus se binne algemien net hiel grut om te begjinnen. As jo folsleine side 1 CSS-bestân brûkt, krije jo ek de foardiel fan dat dokumint dat cached is nei't it yn earste ynsteld is.
Dit betsjut dat der in lege optreden wurde kin op 'e earste side in pear besiken, mar de folgjende siden brûke de cached css-bestân, dus dan sil alle siden negatyf wurde. Externe CSS-bestannen binne hoe't ik al myn websteeën bouwe.