opmerkingen worden gebruikt in CSS om een blok code uit te leggen of om tijdelijke wijzigingen aan te brengen tijdens de ontwikkeling. De code met commentaar wordt niet uitgevoerd.
zowel enkelvoudige als meervoudige commentaren in CSS beginnen met /* en eindigen met */, en u kunt zoveel commentaren aan uw stijlblad toevoegen als u wilt. Bijvoorbeeld:
/* This is a single line comment*/.group:after { content: ""; display: table; clear: both;}/* This is a multi-line comment*/u kunt uw opmerkingen ook leesbaarder maken door ze te stylen:
in grotere projecten kunnen CSS-bestanden snel groeien en moeilijk te onderhouden worden., Het kan nuttig zijn om uw CSS in verschillende secties met een inhoudsopgave te organiseren om het gemakkelijker te maken om bepaalde regels in de toekomst te vinden:
een beetje meer over CSS: css syntaxis en Selectors
wanneer we praten over de syntaxis van CSS, hebben we het over hoe dingen worden ingedeeld. Er zijn regels over wat waar gaat, zowel zodat u CSS consistent kunt schrijven en een programma (zoals een browser) het kan interpreteren en toepassen op de pagina correct.
Er zijn twee manieren om CSS te schrijven.,
Inline CSS
Specifics on CSS Specificity: CSS Tricks
Inline CSS past styling toe op een enkel element en zijn kinderen, totdat een andere stijl wordt aangetroffen die de eerste overschrijft.
om inline CSS toe te passen, voegt u het attribuut “style” toe aan een HTML-element dat u wilt wijzigen. Binnen aanhalingstekens, een puntkomma-gescheiden lijst van sleutel/waarde paren (elk op hun beurt gescheiden door een dubbele punt) aangeeft stijlen in te stellen.
Hier is een voorbeeld van inline CSS. De woorden ” een ” en “twee” hebben een achtergrondkleur van geel en tekstkleur van rood., Het woord “Drie” heeft een nieuwe stijl die de eerste overschrijft, en zal een achtergrondkleur van groen en tekstkleur van cyaan hebben. In het voorbeeld passen we stijlen toe op <div> tags, maar je kunt een stijl toepassen op elk HTML-element.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>Internal CSS
terwijl het schrijven van een inline stijl een snelle manier is om een enkel element te veranderen, is er een efficiëntere manier om dezelfde stijl toe te passen op veel elementen van de pagina tegelijk.,
de interne CSS heeft zijn stijlen gespecificeerd in de<style> tag, en het is ingebed in de<head> tag.
Hier is een voorbeeld dat een vergelijkbaar effect heeft als het” inline ” voorbeeld hierboven, behalve dat de CSS is geëxtraheerd naar zijn eigen gebied. De woorden ” één ” en “twee”komen overeen met de div selector en zijn rode tekst op een gele achtergrond., De woorden “Three” en “Four”komen ook overeen met de div selector, maar ze komen ook overeen met de .nested_div selector die van toepassing is op elk HTML-element dat naar die klasse verwijst. Deze meer specifieke selector overschrijft de eerste, en ze uiteindelijk verschijnen als cyaan tekst op een groene achtergrond.
de bovenstaande selectors zijn uiterst eenvoudig, maar ze kunnen vrij complex worden. Het is bijvoorbeeld mogelijk om stijlen alleen toe te passen op geneste elementen; dat wil zeggen, een element dat een kind is van een ander element.,
Hier is een voorbeeld waarin we een stijl specificeren die alleen toegepast moet worden op div elementen die een direct kind zijn van andere div elementen. Het resultaat is dat “twee ” en” drie “zullen verschijnen als rode tekst op een gele achtergrond, maar” één “en” vier ” zullen onaangetast blijven (en hoogstwaarschijnlijk zwarte tekst op een witte achtergrond).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>externe CSS
alle styling heeft een eigen document dat is gekoppeld in de <head> tag. De extensie van het gekoppelde bestand is .css