Skilningur á 3 gerðum af CSS stílum

Inline, embed, og ytri stílblöð: Hér er það sem þú þarft að vita

Front-end website þróun er oft táknuð sem 3-legged hægðir. Þessir fætur eru sem hér segir:

• HTML fyrir uppbyggingu vefsvæðis;
• CSS fyrir sjónræna stíl;
• Javascript fyrir hegðun.

Seinni fóturinn í þessum hægðum, CSS eða Cascading Style Sheets, er það sem við erum að skoða hér í dag. Sérstaklega viljum við að takast á við 3 tegundir af stíl sem þú getur bætt við skjali.

1. Inline stíl
2. Embedded stíll
3. Ytri stíll

Hver af þessum tegundum CSS stíll hefur kosti þeirra og galla, þannig að við skulum skoða dýpra hvert og eitt þeirra.

Inline Stíll

Inline stíl eru stíl sem eru skrifuð beint í merkinu í HTML skjalinu. Inline stíl hefur aðeins áhrif á tiltekið merki sem þau eru beitt til. Hér er dæmi um inline stíl sem er beitt á venjulegan hlekk, eða akkeri, merki:

Þessi CSS regla myndi breyta stöðluðu undirstöðu texta skraut burt af þessum einum hlekk. Það myndi þó ekki breyta öðrum tenglum á síðunni. Þetta er eitt af takmörkunum á inline stílum. Þar sem þeir breytast aðeins á tilteknu hluti, þyrftu að rusla HTML með þessum stílum til að ná raunverulegri síðuhönnun. Það er ekki besta æfingin. Í raun er það eitt skref fjarlægt frá dögum "leturmerki" og blöndu af uppbyggingu og stíl á vefsíðum.

Þetta gerir þeim mjög erfitt að skrifa yfir með öðrum, ekki inline stílum. Til dæmis, ef þú vilt gera síðuna móttækileg og breyta því hvernig þáttur lítur á ákveðnar brotalínur með því að nota fjölmiðlafyrirspurnir , munu innlínustílir á þáttur gera þetta mjög erfitt að gera.

Að lokum eru inline stíll í raun aðeins viðeigandi þegar það er notað mjög sparlega.

Reyndar nota ég sjaldan alltaf inline stíll á vefsíðum mínum.

Embedded Stíll

Innbyggðar stíll er stíll sem er embed in í höfuðið á skjalinu. Embedded stíll hefur aðeins áhrif á merkin á síðunni sem þau eru innbyggð í. Aftur á móti neitar þessi nálgun einn af styrkleika CSS. Þar sem hver síða myndi hafa stíll í

, ef þú vilt breyta um allan heim, eins og að breyta lit á tenglum frá rauðum til grænum, þá ættirðu að gera þessa breytingu á hverri síðu, þar sem hver síða notar innbyggðan stílblað. Þetta er betra en inline stíl, en samt erfið í mörgum tilfellum.

Stílblöð sem eru bætt við

af skjali bætir einnig við umtalsvert magn af merkjakóðanum við þá síðu, sem getur einnig gert síðuna erfiðara að stjórna í framtíðinni.

Ávinningurinn af innbyggðum stílblöðum er sú að álagið strax við síðuna sjálft, í stað þess að þurfa að hlaða öðrum ytri skrám. Þetta getur verið gagn af niðurhalshraða og frammistöðuhorf .

Ytri stílblöð

Flestar vefsíður nota í dag ytri stílblöð. Útlendar stíll er stíll sem er skrifaður í sérstakt skjali og síðan tengt ýmsum vefgögnum. Ytri stílblöð geta haft áhrif á öll skjal sem þau eru tengd við, sem þýðir að ef þú ert með 20 síðu vefsíðu þar sem hver síða notar sömu stílblað (þetta er venjulega hvernig það er gert) geturðu breytt sjónrænum breytingum á hverjum einasta af þessum síðum með því einfaldlega að breyta því stílblöð.

Þetta gerir langtíma stjórnun á vefsvæðum mun auðveldara.

The hæðir við ytri stíl blöð er að þeir þurfa síður til að sækja og hlaða þessum ytri skrám. Ekki sérhver síða mun nota alla stíll í CSS blaðinu, svo margir síður munu hlaða upp miklu stærri CSS síðu en það þarf í raun.

Þó að það sé satt að það sé frammistöðu högg fyrir ytri CSS skrár, þá er það vissulega hægt að lágmarka það. Raunverulega eru CSS skrár bara textaskrár, svo þau eru yfirleitt ekki mjög stór til að byrja með. Ef allt vefsvæði þitt notar 1 CSS skrá, færðu einnig þann kost að þessi skjal sé afrituð eftir að hún er upphaflega hlaðið.

Þetta þýðir að það gæti verið lítilsháttar árangur á fyrstu síðu sumar heimsóknir, en síðari síður munu nota Cached Cached-skrána, þannig að allir högg yrðu neitaðar. Ytri CSS skrár eru hvernig ég byggja allar vefsíður mínar.