Eksempel på CSS-kommentar - Sådan kommenteres CSS

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

Både enkelt- og flerlinjekommentarer i CSS begynder med /*og slutter med */, og du kan tilføje så mange kommentarer til dit typografiark, som du vil. For eksempel:

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

Du kan også gøre dine kommentarer mere læsbare ved at stilisere dem:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Organisering af CSS med kommentarer

I større projekter kan CSS-filer hurtigt vokse i størrelse og blive vanskelige at vedligeholde. Det kan være nyttigt at organisere din CSS i forskellige sektioner med en indholdsfortegnelse for at gøre det lettere at finde bestemte regler i fremtiden:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Lidt mere om CSS: CSS-syntaks og vælgere

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

Der er to hovedmåder at skrive CSS på.

Integreret 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 det første, er stødt på.

For at anvende indbygget CSS skal du tilføje attributten "stil" til et HTML-element, som du gerne vil ændre. Inde i citater inkluderer en semikolon-afgrænset liste over nøgle- / værdipar (hver igen adskilt af et kolon), der angiver typografier, der skal indstilles.

Her er et eksempel på inline CSS. Ordene "Én" og "To" har en baggrundsfarve gul og tekstfarve rød. Ordet "Tre" har en ny stil, der tilsidesætter den første og vil have en baggrundsfarve grøn og tekstfarve cyan. I eksemplet anvender vi typografier på tags, men du kan anvende en typografi på ethvert HTML-element.

 One Two Three 

Intern CSS

Mens det at skrive en integreret stil er en hurtig måde at ændre et enkelt element på, er der en mere effektiv måde at anvende den samme stil på mange elementer på siden på én gang.

Den interne CSS har sine stilarter specificeret i koden, og den er indlejret i koden.

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 "Én" og "To" matcher divvælgeren og er rød tekst på en gul baggrund. Ordene "Tre" og "Fire" matcher også divvælgeren, men de matcher også .nested_divvælgeren, der gælder for ethvert HTML-element, der refererer til den 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.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Vælgerne vist ovenfor er ekstremt enkle, men de kan blive ret komplekse. For eksempel er det muligt kun at anvende stilarter på indlejrede elementer; et element der er et barn af et andet element.

Her er et eksempel, hvor vi specificerer en stil, der kun skal anvendes på divelementer, der er et direkte underordnet divelement af andre 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).

 div > div { color: red; background: yellow; } One Two Three Four 

Ekstern CSS

Al styling har sit eget dokument, der er linket i taggen. Udvidelsen af ​​den linkede fil er.css