Hoe om 'n eksterne stylblad te bou

Gebruik CSS Site Wide

Webwerwe is 'n kombinasie van styl en struktuur, en op vandag se web is dit 'n beste praktyk om hierdie twee aspekte van 'n webwerf apart van mekaar te hou.

HTML is altyd wat 'n webwerf met sy struktuur verskaf. In die vroeë dae van die web bevat HTML ook stylinligting. Elemente soos die -tag is oor die HTML-kode gesaai, en kyk en voel inligting saam met strukturele inligting. Die webstandaardebeweging het ons gedruk om hierdie praktyk te verander en om al die stylinligting in CSS of Cascading Style Sheets te druk. As u dit nog 'n stap verder neem, is die huidige aanbevelings dat u 'n "eksterne stylblad" gebruik vir u webwerf se stileringsbehoeftes.

Voordele en nadele van eksterne style blaaie

Een van die beste dinge oor Cascading Style Sheets is dat jy dit kan gebruik om jou hele webwerf konsekwent te hou. Die maklikste manier om dit te doen is om 'n eksterne stylblad te koppel of te invoer. As u dieselfde eksterne stylblad gebruik vir elke bladsy van u werf, kan u seker wees dat al die bladsye dieselfde styl sal hê. U kan dit ook makliker maak om veranderinge vir die toekoms aan te bring. Aangesien elke bladsy dieselfde eksterne stylblad gebruik, sal enige verandering in die blad elke werfbladsy beïnvloed. Dit is baie beter as om elke bladsy individueel te verander!

Voordele van eksterne style blaaie

  • U kan die voorkoms en gevoel van verskeie dokumente gelyktydig beheer.
    • Dit is veral handig as jy met 'n span mense werk om jou webwerf te skep. Baie stylreëls kan moeilik wees om te onthou, en terwyl jy 'n gedrukte stylgids het, is dit ondoeltreffend en vervelend om deurlopend daardeur te blaai om te bepaal of voorbeeldteks in 12 punte Arial font of 14-punt koerier geskryf moet word. Deur alles op een plek te hê, en sedert daardie plek ook waar u veranderinge sou maak, kan u onderhoud soveel makliker maak.
  • Jy kan klasse van style maak wat dan op baie verskillende HTML-elemente gebruik kan word .
    • As jy dikwels 'n sekere lettertypestylering gebruik om nadruk te lê op verskillende dinge op jou bladsy, kan jy 'n klasattribuut gebruik wat jy in jou stylblad opstel om hierdie voorkoms te kry, eerder as om 'n spesifieke styl vir elke geval van die klem.
  • Jy kan jou style maklik groepeer om doeltreffender te wees.
    • Al die groeperingsmetodes wat beskikbaar is vir CSS kan gebruik word in eksterne style sheets, en dit bied u meer beheer en buigsaamheid op u bladsye.

Nadele van Eksterne Style Sheets

  • Eksterne stylbladsye kan die aflaaistyd verhoog, veral as hulle uiters groot is. Aangesien die CSS-lêer 'n aparte dokument is wat gelaai moet word, sal dit die prestasie beïnvloed om die aflaai uit te voer.
  • Eksterne stylvelle word baie vinnig, aangesien dit moeilik is om te vertel wanneer 'n styl nie meer gebruik word nie, want dit word nie uitgevee wanneer die bladsy verwyder word nie. Behoorlike bestuur van jou CSS-lêers is belangrik, veral as meer mense op dieselfde lêer werk.
  • As u slegs 'n enkele bladsy webwerf het, is dit dalk nie nodig om 'n eksterne lêer vir CSS te hê nie, aangesien u slegs daardie een bladsy moet styl. Baie van die voordele van eksterne CSS is verlore as jy net 'n enkele bladsy webwerf het.

Hoe om 'n eksterne stylblad te skep

Eksterne stylbladsye word geskep met 'n soortgelyke sintaksis tot stylvlakke op dokumentvlak. Al wat jy moet insluit is die keurder en die verklaring. Net soos in 'n dokumentvlak-stylblad, is die sintaksis vir 'n reël:

selector {property: value;}

Stoor hierdie reëls in 'n tekslêer met die uitbreiding .css. Dit is nie nodig nie, maar dit is 'n goeie gewoonte om in te gaan, sodat jy dadelik jou stylvelle kan herken in 'n kataloguslys.

Sodra jy 'n style sheet dokument het, moet jy dit aan jou webblaaie koppel. Dit kan op twee maniere gedoen word:

  1. koppel
    1. Om 'n stylblad te koppel, gebruik jy die HTML-tag. Dit het die eienskappe rel , type en href . Die rel attribuut vertel wat jy koppel (in hierdie geval 'n style sheet), die tipe definieer die MIME-Type vir die blaaier, en die href is die pad na die .css-lêer.
  2. invoer
    1. U sal 'n ingevoerde stylvel gebruik binne 'n stylvlak van 'n dokumentvlak sodat u die eienskappe van 'n eksterne stylvel kan invoer terwyl geen dokument spesifieke items verlore gaan nie. Jy noem dit op 'n soortgelyke manier om 'n gekoppelde stylblad te noem, maar dit moet genoem word binne 'n dokumentvlakstylverklaring. U kan soveel eksterne style sheets invoer as wat u nodig het om u webwerf te behou.

Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 8/8/17