Hoe externe stijlen maken in CSS3 - dummies

De meeste ontwikkelaars gebruiken externe stijlen in CSS3 om de hoeveelheid werk die nodig is om een ​​site te onderhouden te verminderen. Een. CSS-bestand bevat alle stijlen voor de site, wat betekent dat het veranderen van een stijl voor de hele site net zo eenvoudig is als het veranderen van dat ene bestand (in plaats van elke pagina). Omdat de wijziging op slechts één plaats plaatsvindt, is er geen enkele kans dat een of meer wijzigingen op afzonderlijke pagina's worden overgeslagen.

Het maken en gebruiken van een externe stijlpagina verschilt niet veel van het gebruik van een interne stijlpagina. In het volgende voorbeeld worden standaardtechnieken gebruikt om een ​​externe stijlpagina te maken:

1. Maak een nieuw HTML5-bestand met uw teksteditor.

2. Typ de code voor de HTML-pagina.

   Een eenvoudige pagina
   Een eenvoudige kop
   Eenvoudige tekst die bij de kop past.
   

   Zorg ervoor dat u de code precies typt. Waar je uiteindelijk mee zou moeten eindigen is dezelfde simpele pagina - een zonder stijlen.

3. Typ de volgende code direct na de tag.

   De tag vertelt de browser om naar een externe bron te zoeken. In dit geval geeft het rel-kenmerk aan dat het naar een stijlpagina moet zoeken en het href-kenmerk de naam van die stijlpagina.

4. Sla het HTML5-bestand op schijf op.

5. Maak een nieuwe. CSS-bestand met uw teksteditor.

   Uw editor ondersteunt mogelijk niet. CSS-bestanden. Elk tekstbestand zal het doen.

6. Typ de volgende code in de. CSS-bestand.

   p {font-family: cursive; lettergrootte: groot; kleur: # 0000ff; achtergrondkleur: # ffff00;} h1 {font-family: "Times New Roman", Georgia, serif; lettertypegrootte: 40px; text-align: center; tekstdecoratie: onderstrepen; kleur: # ff0000; achtergrondkleur: # 00ffff;}
   

   Dit kan dezelfde code zijn die u hebt gebruikt om uw interne bestand aan te maken. Het enige verschil is dat het zich nu in een extern bestand bevindt.

7. Sla het CSS-bestand op schijf op als ExternalCSS. CSS.

   Het is absoluut noodzakelijk dat de naam van het bestand precies overeenkomt met de naam in het href-kenmerk. Sommige platforms zijn hoofdlettergevoelig, dus u moet dezelfde naam gebruiken voor de bestandsnaam. Bijvoorbeeld externalcss. CSS kan worden bekeken als een ander bestand dan ExternalCSS. CSS.

8. Laad de pagina in uw browser.