Komentari se koriste u CSS-u za objašnjavanje bloka koda ili za privremene promjene tijekom razvoja. Komentirani kod se ne izvršava.
I jednostruki i višeredni komentari u CSS-u započinju s /*i završavaju s tim */, a u svoj stil lista možete dodati koliko god želite komentara. Na primjer:
/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */Također možete svoje komentare učiniti čitljivijima tako da ih stilizirate:
/* *** * 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. *** */Organiziranje CSS-a s komentarima
U većim projektima CSS datoteke mogu brzo povećati veličinu i postaju teške za održavanje. Može biti korisno organizirati CSS u zasebne odjeljke sa sadržajem kako biste u budućnosti lakše pronašli određena pravila:
/* * 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 ***/Još malo o CSS-u: CSS sintaksa i selektori
Kada govorimo o sintaksi CSS-a, govorimo o tome kako su stvari postavljene. Postoje pravila o tome što gdje ide, kako biste CSS mogli dosljedno pisati, a program (poput preglednika) mogao ga interpretirati i ispravno primijeniti na stranicu.
Postoje dva glavna načina za pisanje CSS-a.
Ugrađeni CSS
Specifičnosti CSS-a Specifičnost: CSS trikovi
Inline CSS primjenjuje stil na jedan element i njegovu djecu, sve dok se ne naiđe na drugi stil koji prevlada prvi.
Da biste primijenili ugrađeni CSS, dodajte atribut "style" HTML elementu koji želite izmijeniti. Unutar navodnika uključite popis parova ključ / vrijednost razdvojen zarezom (svaki odvojen dvotočkom) koji označava stilove koje treba postaviti.
Evo primjera ugrađenog CSS-a. Riječi "Jedan" i "Dvije" imat će žutu boju pozadine, a crvenu boju teksta. Riječ "tri" ima novi stil koji nadjačava prvi i imat će zelenu boju pozadine i cijan boju teksta. U primjeru primjenjujemo stilove na oznake, ali stil možete primijeniti na bilo koji HTML element.
One Two Three Interni CSS
Iako je pisanje umetnutog stila brz način za promjenu pojedinog elementa, postoji učinkovitiji način primjene istog stila na mnoge elemente stranice odjednom.
Interni CSS ima svoje stilove navedene u oznaci i ugrađen je u oznaku.
Evo primjera koji ima sličan učinak kao gornji primjer "inline", osim što je CSS izdvojen u svoje područje. Riječi "Jedan" i "Dva" odgovarat će divizborniku i biti crveni tekst na žutoj pozadini. Riječi "Tri" i "Četiri" također će se podudarati s divselektorom, ali se također podudaraju s .nested_divselektorom koji se odnosi na bilo koji HTML element koji upućuje na tu klasu. Ovaj specifičniji selektor nadjačava prvi i na kraju se pojavljuju kao cijan tekst na zelenoj pozadini.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four Gore prikazani selektori izuzetno su jednostavni, ali mogu biti i prilično složeni. Na primjer, moguće je primijeniti stilove samo na ugniježđene elemente; odnosno element koji je podređen drugom elementu.
Evo primjera gdje navodimo stil koji bi se trebao primijeniti samo na divelemente koji su izravno podređeni drugim divelementima. Rezultat je da se "Dva" i "Tri" pojavljuju kao crveni tekst na žutoj pozadini, ali "Jedan" i "Četiri" ostaju nepromijenjeni (i najvjerojatnije crni tekst na bijeloj pozadini).
div > div { color: red; background: yellow; } One Two Three Four Vanjski CSS
Sav styling ima svoj dokument koji je povezan u oznaku. Proširenje povezane datoteke je.css