kommentarer används i CSS för att förklara ett kodblock eller för att göra tillfälliga ändringar under utveckling. Den kommenterade koden körs inte.
både enkla och multi-line kommentarer i CSS börjar med /* och slutar med */, och du kan lägga till så många kommentarer till din stilmall som du vill. Till exempel:
/* This is a single line comment*/.group:after { content: ""; display: table; clear: both;}/* This is a multi-line comment*/Du kan också göra dina kommentarer mer läsbara genom att stilisera dem:
i större projekt kan CSS-filer snabbt växa i storlek och bli svåra att underhålla., Det kan vara till hjälp att organisera din CSS i olika avsnitt med en innehållsförteckning för att göra det lättare att hitta vissa regler i framtiden:
lite mer om css: css Syntax och väljare
När vi pratar om CSS syntax talar vi om hur saker läggs ut. Det finns regler om vad som går var, både så att du kan skriva CSS konsekvent och ett program (som en webbläsare) kan tolka det och tillämpa det på sidan korrekt.
det finns två huvudsakliga sätt att skriva CSS.,
Inline css
detaljerna om CSS specificitet: CSS Tricks
Inline css gäller styling till ett enda element och dess barn, tills en annan stil åsidosätter den första påträffas.
om du vill använda inline CSS lägger du till attributet ”style” i ett HTML-element som du vill ändra. Inne citat, inkludera en semikolon-avgränsad lista över nyckel / värdepar (var och en i sin tur åtskilda av ett kolon) som anger stilar att ställa in.
här är ett exempel på inline CSS. Orden ” en ”och” två ” kommer att ha en bakgrundsfärg av gul och textfärg av röd., Ordet ” Tre ” har en ny stil som åsidosätter den första, och kommer att ha en bakgrundsfärg av grön och textfärg av cyan. I exemplet använder vi stilar till<div> – taggar, men du kan använda en stil till vilket HTML-element som helst.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>Intern CSS
När du skriver en inline stil är ett snabbt sätt att ändra ett enda element, det finns ett mer effektivt sätt att tillämpa samma stil på många delar av sidan på en gång.,
den interna CSS har sina stilar som anges i<style> – taggen, och den är inbäddad i<head> – taggen.
här är ett exempel som har en liknande effekt som exemplet ”inline” ovan, förutom att CSS har extraherats till sitt eget område. Orden ”en” och”två”kommer att matcha div väljaren och vara röd text på en gul bakgrund., Orden ”tre” och”fyra”matchar div – väljaren, men de matchar också .nested_div – väljaren som gäller för alla HTML-element som refererar till den klassen. Denna mer specifika väljare åsidosätter den första, och de hamnar visas som cyan text på en grön bakgrund.
väljarna som visas ovan är extremt enkla, men de kan bli ganska komplexa. Det är till exempel möjligt att applicera stilar endast för kapslade element; det vill säga ett element som är ett barn av ett annat element.,
här är ett exempel där vi anger en stil som endast ska tillämpas pådiv element som är ett direkt barn till andradiv element. Resultatet är att” två ”och” tre ”kommer att visas som röd text på en gul bakgrund, men” en ”och” fyra ” kommer att förbli opåverkade (och troligen svart text på en vit bakgrund).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>extern CSS
all styling har sitt eget dokument som är länkat i<head> – taggen. Förlängningen av den länkade filen är .css