Kry die feite met hierdie CSS kort kursus
Cascading style sheets het baie voordele. Hulle laat jou toe om dieselfde stylblad oor jou hele webwerf te gebruik. Daar is twee maniere om dit te doen:
- skakel met die LINK-element
- invoer met die @import-opdrag
-
- @import url ('http://www.yoursite.com/styles.css');
-
Voordele en nadele van eksterne style blaaie
Een van die beste dinge oor die cascading style sheets is dat jy dit kan gebruik om jou 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 style sal hê.
Sommige van die voordele van die gebruik van eksterne style sheets sluit in dat jy die voorkoms en gevoel van verskeie dokumente gelyktydig kan 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 vervelend om voortdurend deur te blaai om te bepaal of voorbeeldteks in 12-punt-Arial-lettertipe of 14-punt koerier geskryf moet word.
Jy kan klasse van style maak wat dan op baie verskillende HTML-elemente gebruik kan word. As jy dikwels 'n spesiale Wingdings-lettertipe gebruik om nadruk te lê op verskillende dinge op jou bladsy, kan jy die Wingdings-klas gebruik wat jy in jou stylblad opstel, eerder as om 'n spesifieke styl vir elke geval van die klem te definieer.
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.
Daar is ook baie goeie redes om nie eksterne stylvelle te gebruik nie. Vir een, kan hulle die aflaaistyd verhoog as jy na baie van hulle skakel.
Elke keer as jy 'n nuwe CSS-lêer skep en dit koppel of invoer in jou dokument, moet die webblaaier 'n ander oproep na die webbediener maak om die lêer te kry. En bedieners oproepe laai tye laai.
As u slegs 'n klein aantal style het, kan dit die kompleksiteit van u bladsy verhoog.
Omdat die style nie reg is in die HTML nie, moet enigeen wat na die bladsy kyk, 'n ander dokument (die CSS-lêer) kry om uit te vind wat aangaan.
Hoe om 'n eksterne stylblad te skep
Eksterne style sheets word op dieselfde manier geskryf as ingebedde en inline style sheets. Maar al wat jy moet skryf is die styl selector en die verklaring . Jy het nie 'n STYLE-element of kenmerk in die dokument nodig nie.
Soos met alle ander CSS, is die sintaksis vir 'n reël:
selector {property: value; }
Hierdie reëls word geskryf na 'n tekslêer met die uitbreiding .css. Byvoorbeeld, jy kan jou style sheet styles.css noem.
Sodra jy 'n style sheet dokument het, moet jy dit aan jou webblaaie koppel. Soos ek hierbo genoem het, word dit op twee maniere gedoen.
Koppel CSS-dokumente
Om 'n stylblad te koppel, gebruik jy die LINK-element. Dit het die kenmerke rel en href. Die rel-attribuut vertel die leser wat jy koppel (in hierdie geval 'n stylblad) en die href-kenmerk bevat die pad na die CSS-lêer.
Daar is ook 'n opsionele kenmerk tipe wat u kan gebruik om die MIME-tipe van die gekoppelde dokument te definieer. Dit word nie in HTML5 vereis nie, maar moet in HTML 4-dokumente gebruik word.
Hier is die kode wat u sal gebruik om 'n CSS-stylblad met die naam styles.css te koppel:
En in 'n HTML 4-dokument sal jy skryf:
type = "text / css" >
CSS Style Sheets invoer
Ingevoerde stylvelle word binne die STYLE-element geplaas. U kan dan ook ingebedde style gebruik as u wil. U kan ook ingevoerde style in gekoppelde style sheets insluit. Binne die STYLE- of CSS-dokument, skryf:
@import url ('http://www.yoursite.com/styles.css');