Wat is uw CSS-stijl? - dummies

Een van de meest verwarrende aspecten van het werken met CSS (Cascading Style Sheets) is dat je stijlen op zoveel verschillende manieren kunt schrijven. Vergelijkbaar met het schrijven van proza, alleen omdat je de basisregels van grammatica en spelling begrijpt, betekent nog niet dat je je het schrijven van beknopt proza ​​hebt eigen gemaakt.

Ervaren CSS-ontwerpers besteden veel tijd aan het maken van korte, duidelijke CSS die gemakkelijk te bewerken en bij te werken is. Maar degenen die nieuw zijn voor CSS zijn geneigd om meer stijlen te schrijven dan nodig is en om overbodige stijlen te maken.

Redundante code duurt niet alleen langer om te downloaden naar een webbrowser, het is veel moeilijker om deze later te bewerken of te herzien. En hoe overbodiger uw code, hoe groter de kans dat u stijlconflicten tegenkomt.

Hier zijn vijf tips voor het schrijven van schone, efficiënte stijlen:

• Maak nooit twee stijlen als dat genoeg is. U kunt bijvoorbeeld een stijl maken met behulp van de tagselector voor alle

  -tags die de lettertypefamilie van uw koppen wijzigen en vervolgens een tweede stijl maken met behulp van een categorieselector die u op uw koppen kunt toepassen om de kleur.

  Maar het zou efficiënter zijn om zowel de kleur als de lettertypefamilie in dezelfde stijl te definiëren. Vergeet niet dat u altijd terug kunt gaan en een stijl kunt bewerken om een ​​andere regel toe te voegen als u de opmaak van de stijl wilt wijzigen.

• Afkorting van hexadecimale kleurcodes. U kunt kleuren in CSS definiëren door de volledige hexadecimale kleurcode op te nemen. Als u echter herhalende kleurcodes gebruikt, moet u alleen de eerste drie tekens opnemen. Bijvoorbeeld, #ffffff is hetzelfde als #fff; beide zullen de kleur wit creëren.

• Gebruik externe stijlbladen. U kunt stijlen in een intern stijlblad boven aan elke webpagina definiëren of u kunt uw stijlen opslaan in een extern bestand met de. CSS-extensie en plak die stijlpagina aan al uw webpagina's. Externe stylesheets zijn inherent efficiënter omdat ze u in staat stellen dezelfde stijl te gebruiken op een of alle pagina's van uw site.

  Als u bijvoorbeeld een stijl definieert die alle hoofdkoppen vet, blauw en groot maakt, kunt u die stijl in een externe stijlpagina opslaan zodat u dezelfde stijl voor elke kop kunt gebruiken. Als u later besluit dat u de koppen wilt wijzigen in groen, kunt u de stijl in één externe stylesheet wijzigen en alle headlines in één keer wijzigen.

  Als u de stijlen in een interne stijlpagina hebt opgeslagen, moet u de stijl van de kop in elk bestand bewerken.

• Ontwikkel een naamgevingsconventie voor uw stijlen. Hoewel u stijlen die met de klasse- of id-selectoren zijn gemaakt, naar eigen inzicht kunt benoemen, kunt u het best stijlen kiezen die behalve de opmaak ook betekenis hebben.Als u bijvoorbeeld een stijl maakt met de naam. redHeadlines en dan later beslissen dat je al je wilt. roodHoofdlijnen om blauw te zijn, u krijgt ofwel een blauwe kopstijl met de naam. redHeadlines of moet de stijl hernoemen.

  En de stijl hernoemen omvat teruggaan en die stijl opnieuw toepassen overal waar u een rode kop hebt die u blauw wilt kleuren, wat de kracht van stijlen teniet doet om wereldwijde updates te maken. Om dit probleem te voorkomen, maakt u stijlnamen die verwijzen naar de positie of het belang van elementen, zoals. hoofdHoofdlijnen of. sidebarHeadlines.

• * Test en valideer uw code. Zelfs ervaren CSS-ontwerpers maken fouten. Daarom bevat Dreamweaver zoveel geweldige hulpmiddelen voor het testen en valideren van de code in uw webpagina's. Zorg ervoor dat u uw CSS test op veelvoorkomende fouten.

  Hieronder volgen twee online testservices die u kunt gebruiken om te controleren op fouten in uw CSS-code. Voer eenvoudig de URL in van een webpagina op internet in het adresveld van een van deze sites en klik op de knop Verzenden om een ​​rapport te ontvangen met fouten in uw code:

  • De W3C CSS-validatieservice

  • XHTML-CSS : wees geldig of schrijf leer