CSS Comment eksempel – sådan kommenterer du CSS

Kommentarer bruges i CSS til at forklare en blok kode eller til at foretage midlertidige ændringer under udvikling. Den kommenterede kode udføres ikke.

Både single og multi-line kommentarer i CSS begynde med /* og slutte med */, og du kan tilføje lige så mange kommentarer til dit stylesheet, som du kan lide. For eksempel:

/* This is a single line comment*/.group:after { content: ""; display: table; clear: both;}/* This is a multi-line comment*/

Du kan også lave dine kommentarer mere kan læses af stilisering dem:

I større projekter, CSS-filer kan hurtigt vokse i størrelse og blive vanskeligt at opretholde., Det kan være en hjælp til at organisere dine CSS i adskilte sektioner med en indholdsfortegnelse for at gøre det nemmere at finde bestemte regler i fremtiden:

lidt mere om CSS: CSS Syntaks og Selektorer

Når vi taler om syntaksen af CSS, vi taler om, hvordan ting er lagt ud. Der er regler om, hvad der går hvor, både så du kan skrive CSS konsekvent og et program (som en bro .ser) kan fortolke det og anvende det på siden korrekt.

Der er to hovedmåder til at skrive CSS.,

Inline CSS

specifikationer for CSS-specificitet: CSS-Tricks

Inline CSS anvender styling på et enkelt element og dets børn, indtil en anden stil, der tilsidesætter den første, opstår.

Hvis du vil anvende inline CSS, skal du tilføje attributten “style” til et HTML-element, som du gerne vil ændre. Inde citater, omfatter en semikolon-afgrænset liste over nøgle / værdi par (hver til gengæld adskilt af et kolon) angiver stilarter at indstille.

Her er et eksempel på inline CSS. Ordene “En” og ” to ” vil have en baggrundsfarve på gul og tekstfarve på rød., Ordet ” tre ” har en ny stil, der tilsidesætter den første, og vil have en baggrundsfarve på grøn og tekstfarve på cyan. I eksemplet anvender vi stilarter til <div> tags, men du kan anvende en stil til ethvert HTML-element.

<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>

det Indre CSS

Mens du skriver en inline stil er en hurtig måde at ændre et enkelt element, der er en mere effektiv måde, til at anvende samme stil til mange elementer på siden på én gang.,

den interne CSS har sine stilarter angivet i <style>tag, og det er indlejret i <head> tag.

Her er et eksempel, der har en lignende virkning som “inline” – eksemplet ovenfor, bortset fra at CSS er blevet ekstraheret til sit eget område. Ordene ” En “og” to”vil matche div vælgeren og være rød tekst på en gul baggrund., Ordene ” tre “og” fire”vil matche div vælgeren også, men de matcher også .nested_div vælgeren, som gælder for ethvert HTML-element, der refererer til denne klasse. Denne mere specifikke vælger tilsidesætter den første, og de ender med at blive vist som cyan tekst på en grøn baggrund.

selektorerne vist ovenfor er ekstremt enkle, men de kan blive ret komplekse. For eksempel er det muligt kun at anvende stilarter til indlejrede elementer; det vil sige et element, der er et barn af et andet element.,

Her er et eksempel, hvor vi angiver en stil, der kun bør anvendes til div elementer, der er en direkte barn af andre div – elementer. Resultatet er, at “to ” og” tre “vises som rød tekst på en gul baggrund, men” en “og” fire ” forbliver upåvirket (og sandsynligvis sort tekst på en hvid baggrund).

<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>

ekstern CSS

Al styling har sit eget dokument, der er knyttet til <head> tag. Udvidelsen af den linkede fil er .css

Share

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *