Kolm tüüpi CSS-stiile

click fraud protection

Esiotsa veebisaidi väljatöötamine on sageli kujutatud kolme jalaga väljaheidet, mis koosneb järgmistest osadest:

  • HTML saidi struktuuri jaoks
  • CSS visuaalsete stiilide jaoks
  • Javascript käitumise jaoks

Selle väljaheite teine ​​osa, kaskaadiga stiililehed, toetab kolme erinevat stiili, mille saate dokumendile lisada.

  1. Sisenevad stiilid
  2. Manustatud stiilid
  3. Välised stiilid

Kõigil neil CSS-stiilidel on ainulaadsed eelised ja puudused.

Ekraanil kuvatakse CSS-iga sülearvuti illustratsioon.
hardik pethani / Getty Images 

Sisenevad stiilid

Sisenevad stiilid on stiilid, mis on kirjutatud otse HTML-dokumendi märgendisse. Sisenevad stiilid mõjutavad ainult konkreetset silti, millele neile rakendatakse:


See CSS-reegel deaktiveerib selle ühe lingi tavapärase allajoonitud tekstikaunistuse. See ei muuda aga lehel ühtegi muud linki. See on üks tekstisiseste stiilide piirangutest. Kuna need muutuvad ainult konkreetsel üksusel, peate ühtse lehekujunduse saavutamiseks oma HTML-i nende stiilidega risustama. See ei ole parim tava: tegelikult on see üks samm tänapäevast font sildid ning veebilehtede struktuuri ja stiili segunemine.

instagram viewer

Ka sisesed stiilid nõuavad väga suurt spetsiifilisust. Seetõttu on neid raske üle kirjutada muude mitte-siseste stiilidega. Näiteks kui soovite muuta saidi tundlikuks ja muuta selle abil, kuidas element teatud katkestuspunktidele vaatab meediapäringud, elemendi sisseehitatud stiilid muudavad selle raskeks.

Sisenevad stiilid sobivad ainult siis, kui kasutate neid mõõdukalt, lähenemisviisis "reegli erand", mis eraldab lehel olevast eakaaslasest ühe või kaks elementi.

Manustatud stiilid

Manustatud stiilid asuvad dokumendi peas. Nad on ümbritsetud sildid ja sarnanevad väliselt CSS-failidega dokumendi selles osas.

Manustatud stiilid mõjutavad ainult lehe silte, kuhu need on manustatud. Taas eitab selline lähenemine CSS-i ühe tugevuse. Kuna igal lehel on päises määratletud stiilid, siis kui soovite muuta kogu saiti, näiteks muuta värvi lingid punasest roheliseks - peate selle muudatuse tegema igal lehel, kuna igal lehel on sisseehitatud stiil leht. See lähenemisviis on parem kui tekstisisesed stiilid, kuid on paljudel juhtudel siiski problemaatiline.


Dokumendi päisesse lisatud stiililehed lisavad sellele lehele ka märkimisväärse hulga märgistuskoodi, mis võib ka lehe haldamise tulevikus raskendada.

Manustatud stiililehtede eeliseks on see, et need laaditakse kohe koos lehega ise, selle asemel et nõuda muude väliste failide laadimist. See tehnika võib olla kasulik allalaadimiskiiruse ja jõudluse seisukohast.

Välised stiililehed

Enamik veebisaite kasutab tänapäeval väliseid stiililehti. Välised stiilid on stiilid, mis kirjutatakse eraldi dokumendis ja kinnitatakse seejärel erinevatele veebidokumentidele. Nad kutsutakse põhidokumenti, kasutades a silt dokumendi peas. Välised stiililehed võivad asuda HTML-iga samas serveris või saab need täielikult teisest serverist sisse tõmmata. Seda sageli selliste varade, näiteks fontide puhul, mida paljud saidid Google'ilt laenavad.

Välised stiililehed mõjutada mis tahes dokumenti, millele need on lisatud, mis tähendab, et kui teil on 20-leheküljeline veebisait, kus iga leht kasutab sama stiililehte (tavaliselt tehakse nii), saate visuaalselt muuta kõiki neid lehti, lihtsalt redigeerides seda ühte stiili leht. See majandus muudab saidi pikaajalise haldamise palju lihtsamaks.


Enamik professionaalseid veebidisainereid kasutab saidi kujunduse ja kujunduse haldamiseks esmast CSS-faili.

Väliste stiililehtede negatiivne külg on see, et nende väliste failide toomiseks ja laadimiseks on vaja lehti. Mitte iga leht ei kasuta CSS-i lehel kõiki stiile, nii et paljud lehed laadivad palju suurema CSS-i lehe, kui see tegelikult vaja oleks.

Kuigi on tõsi, et väliste CSS-failide toimivus on tabanud, saab seda kindlasti minimeerida. Realistlikult on CSS-failid lihtsalt tekstifailid, seega pole need alustuseks suured. Kui kogu teie sait kasutab ühte CSS-faili, saate selle dokumendi vahemällu salvestamise eelise ka pärast selle algset laadimist, mis tähendab, et Mõnel külastusel võib esimesel lehel olla väike jõudlushitt, kuid järgmistel lehtedel kasutatakse vahemällu salvestatud CSS-faili, nii et kõik tabamused oleksid eitatud.

instagram story viewer