CSS-kommentareksempel - Hvordan kommentere CSS
Kommentarer brukes i CSS for å forklare en blokk med kode eller for å gjøre midlertidige endringer under utviklingen. Den kommenterte koden kjøres ikke.
Både enkelt- og flerlinjekommentarer i CSS begynner med /*og slutter med */, og du kan legge til så mange kommentarer i stilarket ditt 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å gjøre kommentarene dine mer lesbare ved å 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. *** */Organiserer CSS med kommentarer
I større prosjekter kan CSS-filer raskt vokse i størrelse og bli vanskelige å vedlikeholde. Det kan være nyttig å organisere CSS i forskjellige seksjoner med en innholdsfortegnelse for å gjøre det lettere å finne 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 ***/Litt mer om CSS: CSS-syntaks og velgere
Når vi snakker om syntaksen til CSS, snakker vi om hvordan ting er lagt opp. Det er regler for hva som går hvor, både slik at du kan skrive CSS konsekvent, og et program (som en nettleser) kan tolke det og bruke det riktig på siden.
Det er to hovedmåter å skrive CSS på.
Inline CSS
Spesifikasjoner for CSS-spesifisitet: CSS-triks
Inline CSS bruker styling på et enkelt element og dets barn, til det oppstår en annen stil som overstyrer den første.
For å bruke innebygd CSS, legg til "style" -attributtet til et HTML-element som du vil endre. Inne i anførselstegn inkluderer en semikolon-avgrenset liste over nøkkel- / verdipar (hver i sin tur atskilt med et kolon) som indikerer stiler å sette.
Her er et eksempel på innebygd CSS. Ordene "En" og "To" vil ha en bakgrunnsfarge gul og tekstfarge rød. Ordet "Tre" har en ny stil som overstyrer den første, og vil ha en bakgrunnsfarge grønt og tekstfarge på cyan. I eksemplet bruker vi stiler på koder, men du kan bruke en stil på ethvert HTML-element.
One Two Three Intern CSS
Mens det å skrive en integrert stil er en rask måte å endre et enkelt element, er det en mer effektiv måte å bruke den samme stilen på mange elementer på siden samtidig.
Den interne CSS har stilene spesifisert i koden, og den er innebygd i koden.
Her er et eksempel som har en lignende effekt som “inline” -eksemplet ovenfor, bortsett fra at CSS er hentet ut til sitt eget område. Ordene "One" og "Two" vil samsvare med divvelgeren og være rød tekst på gul bakgrunn. Ordene “Tre” og “Fire” vil også matche divvelgeren, men de samsvarer også med .nested_divvelgeren som gjelder for ethvert HTML-element som refererer til den klassen. Denne mer spesifikke velgeren overstyrer den første, og de ender opp med å vises som cyan tekst på en grønn bakgrunn.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four Velgerne vist ovenfor er ekstremt enkle, men de kan bli ganske kompliserte. For eksempel er det mulig å bruke stiler bare på nestede elementer; det vil si et element som er et barn av et annet element.
Her er et eksempel der vi spesifiserer en stil som bare skal brukes på divelementer som er direkte underordnet av andre divelementer. Resultatet er at "To" og "Tre" vil vises som rød tekst på gul bakgrunn, men "En" og "Fire" forblir upåvirket (og mest sannsynlig svart tekst på en hvit bakgrunn).
div > div { color: red; background: yellow; } One Two Three Four Ekstern CSS
All styling har sitt eget dokument som er koblet i koden. Forlengelsen av den koblede filen er.css
