Primer komentarja CSS - Kako komentirati CSS

Komentarji se v CSS uporabljajo za razlago bloka kode ali za začasne spremembe med razvojem. Komentirana koda se ne izvede.

Enostavni in večvrstični komentarji v CSS se začnejo z /*in končajo z njimi */, v svoj slog pa lahko dodate poljubno število komentarjev. Na primer:

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

Svoje komentarje lahko naredite tudi bolj berljive, če jih 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 s komentarji

Pri večjih projektih se datoteke CSS lahko hitro povečajo in jih je težko vzdrževati. Koristno je, če svoj CSS organizirate v ločene razdelke z kazalom, da boste v prihodnosti lažje našli določ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 ***/

Nekaj ​​več o CSS: Sintaksa CSS in izbirniki

Ko govorimo o sintaksi CSS, govorimo o tem, kako so stvari postavljene. Obstajajo pravila o tem, kaj kam gre, tako da lahko CSS pišete dosledno, program (na primer brskalnik) pa si ga lahko razlaga in pravilno uporabi na strani.

Obstajata dva glavna načina za pisanje CSS.

Vstavljeni CSS

Posebnosti CSS Specifičnosti: CSS triki

Inline CSS uporablja slog za en element in njegove podrejene elemente, dokler ne naletimo na drug slog, ki preglasi prvega.

Če želite uporabiti vrstni CSS, dodajte atribut »style« elementu HTML, ki ga želite spremeniti. Znotraj narekovajev vključite seznam parov ključ / vrednost, ločen s podpičjem (vsak pa ločen z dvopičjem), ki označuje sloge, ki jih želite nastaviti.

Tu je primer vdelanega CSS-ja. Besedi "Ena" in "Dve" bosta imeli barvo ozadja rumeno in besedilo rdeče. Beseda »tri« ima nov slog, ki prevlada nad prvim, in bo imela ozadje zelene barve, besedilo pa cianove. V primeru uporabljamo sloge za oznake, vendar lahko slog uporabite za kateri koli element HTML.

 One Two Three 

Notranji CSS

Čeprav je pisanje vrstnega sloga hiter način za spreminjanje enega samega elementa, obstaja učinkovitejši način, da isti slog hkrati uporabite za več elementov strani hkrati.

Notranji CSS ima v oznaki določene sloge in je vdelan v oznako.

Tu je primer, ki ima podoben učinek kot zgornji primer »inline«, le da je bil CSS izvlečen na svoje območje. Besedi "Ena" in "Dva" se bosta ujemali z divizbirnikom in bodo rdeče besedilo na rumenem ozadju. Besedi "tri" in "štiri" se bodo ujemale tudi z divizbirnikom, ujemajo pa se tudi z .nested_divizbirnikom, ki velja za kateri koli element HTML, ki se sklicuje na ta razred. Ta bolj natančen izbirnik preglasi prvega in na koncu se na zelenem ozadju prikažejo kot cianovo besedilo.

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

Zgoraj prikazani izbirniki so zelo preprosti, lahko pa so tudi precej zapleteni. Tako je na primer mogoče uporabiti sloge samo za ugnezdene elemente; to je element, ki je podrejen drugemu elementu.

Tu je primer, v katerem določimo slog, ki naj se uporablja samo za divelemente, ki so neposredni podrejeni divelementov. Rezultat je, da bosta »Dva« in »Tri« prikazana kot rdeča besedila na rumenem ozadju, vendar »Ena« in »Štiri« ostaneta nespremenjena (in najverjetneje črno besedilo na belem ozadju).

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

Zunanji CSS

Vsi stylingi imajo svoj dokument, ki je povezan v oznako. Razširitev povezane datoteke je.css