A megjegyzéseket a CSS-ben egy kódblokk magyarázatához vagy ideiglenes változtatásokhoz használják a fejlesztés során. A kommentelt kód nem fut le.
A CSS-ben az egy- és a többsoros megjegyzések kezdődnek /*és végződnek */, és annyi megjegyzést adhat hozzá a stíluslapjához, amennyit csak akar. Például:
/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */Megjegyzéseit stílusosabbá teheti olvashatóbbá is:
/* *** * 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. *** */CSS megszervezése megjegyzésekkel
Nagyobb projektekben a CSS-fájlok gyorsan növekedhetnek és nehezen karbantarthatók. Hasznos lehet, ha a CSS-t külön szakaszokba rendezi tartalomjegyzékkel, hogy később megkönnyítse bizonyos szabályok megtalálását:
/* * 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 ***/Még egy kicsit a CSS-ről: CSS Syntax és Selectors
Amikor a CSS szintaxisáról beszélünk, akkor a dolgok elrendezéséről beszélünk. Vannak szabályok arra vonatkozóan, hogy mi merre tart, mindkettő következetesen írhat CSS-t, és egy program (például egy böngésző) képes értelmezni és helyesen alkalmazni az oldalon.
A CSS írásának két fő módja van.
Inline CSS
A CSS specifikussága: CSS trükkök
Az Inline CSS a stílust egyetlen elemre és gyermekeire alkalmazza, amíg az elsőt felülíró másik stílussal találkozunk.
A belső CSS alkalmazásához adja hozzá a „style” attribútumot egy módosítani kívánt HTML elemhez. Az idézőjelek között pontosvesszővel elválasztott listát kell beírni a kulcs / érték párokról (mindegyiket viszont kettőspont választja el), és jelzi a beállítandó stílusokat.
Íme egy példa az inline CSS-re. Az „Egy” és „Kettő” szavak háttérszíne sárga, a szöveg színe pedig piros lesz. A „Három” szó új stílusú, amely felülírja az elsőt, zöld lesz a háttérszíne, a szöveg pedig cián. A példában stílusokat alkalmazunk a címkékre, de bármilyen HTML elemre alkalmazhat stílust.
One Two Three Belső CSS
Míg a beágyazott stílus megírása gyors módja egyetlen elem megváltoztatásának, hatékonyabb módszer van arra, hogy ugyanazt a stílust egyszerre alkalmazza az oldal számos elemére.
A belső CSS stílusait a címkében határozzák meg , és be van ágyazva a címkébe.
Itt van egy példa, amelynek hasonló hatása van, mint a fenti „inline” példának, azzal a különbséggel, hogy a CSS-t kibontották a saját területére. Az „Egy” és a „Kettő” szavak megegyeznek a divválasztóval, és sárga alapon piros szövegek. A „Három” és a „Négy” szavak divszintén megfelelnek a .nested_divválasztónak , de megfelelnek a választónak is, amely minden olyan HTML elemre vonatkozik, amely az adott osztályra hivatkozik. Ez a specifikusabb választó felülírja az elsőt, és végül zöld háttérként cián szövegként jelennek meg.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four A fenti szelektorok rendkívül egyszerűek, de meglehetősen bonyolultak lehetnek. Például a stílusokat csak beágyazott elemekre lehet alkalmazni; vagyis egy olyan elem, amely egy másik elem gyermeke.
Itt egy példa, ahol meghatározunk egy stílust, amelyet csak olyan divelemekre szabad alkalmazni, amelyek más divelemek közvetlen gyermekei . Ennek eredményeként a „Kettő” és a „Három” piros szövegként jelenik meg sárga alapon, de az „Egy” és „Négy” változatlan marad (és nagy valószínűséggel fehér alapon fekete szöveg).
div > div { color: red; background: yellow; } One Two Three Four Külső CSS
Az összes stílusnak megvan a saját dokumentuma, amely összekapcsolódik a címkében. A linkelt fájl kiterjesztése.css