CSS, vagy Lépcsőzetes stíluslapok, a web design ipar által elfogadott módszer vizuális stílusok hozzáadásához a webhelyhez. A CSS segítségével szabályozhatja az oldal elrendezését, színeit, tipográfia, háttérkép és még sok más. Alapvetően, ha vizuális stílusról van szó, akkor a CSS az a módja, hogy ezeket a stílusokat a webhelyére vigye.
A CSS-stílusok hozzáadásakor észreveheti, hogy a dokumentum egyre hosszabbá válik. Még egy kicsi, csak néhány oldalt tartalmazó oldal is méretes CSS-fájlhoz juthat - és egy nagyon nagy, sok-sok egyedi tartalmú oldallal rendelkező webhely nagyon nagy CSS-fájlokat tartalmazhat. Ezt tetézi: érzékeny webhelyek amelyeknek sok van média lekérdezések a stíluslapok tartalmazzák, hogy megváltoztassák a látvány megjelenését és az oldal elrendezését a különböző képernyők számára.
Igen, a CSS fájlok hosszúak lehetnek. Ez nem jelent nagy problémát a webhely teljesítménye és a letöltési sebesség, mert valószínűleg egy hosszú CSS fájl is elég kicsi (mivel valójában csak egy szöveges dokumentum). Ennek ellenére minden apróság számít az oldal sebességével kapcsolatban, tehát ha karcsúbbá teheti a stíluslapot, az jó ötlet. Ebben az esetben a "vessző" nagyon jól jöhet a stíluslapodban!
Vesszők és CSS
Elgondolkodhatott azon, hogy a vessző milyen szerepet játszik a CSS-választó szintaxisában. A mondatokhoz hasonlóan a vessző is egyértelműséget - és nem kódot - hoz az elválasztókhoz. A vessző a CSS választó elválasztja több választó ugyanazon stílusokon belül.
Nézzünk meg például néhány CSS-t alább.
th {szín: piros; }
td {szín: piros; }
p.red {szín: piros; }
div # firstred {szín: piros; }
Ezzel a szintaxissal azt akarod mondani th címkék, td a címkék, a bekezdéscímkék az osztály piros színével és a div címkék az azonosítóval erősítették, hogy a stílus színe piros legyen.
Ez teljesen elfogadható CSS, de két jelentős hátránya van ennek az írásnak:
- A jövőben, ha úgy dönt, hogy megváltoztatja a betű szín ezeknek a tulajdonságoknak a kékre váltása érdekében ezt a változtatást négyszer kell végrehajtania a stíluslapján.
- Sok olyan extra karaktert ad a stíluslapjához, amelyre nincs szüksége. Ez a 4 stílus nem tűnhet túlzásnak, de ha ezt folytatja a teljes stíluslapon, akkor a vonalak összeadódnak, és ez a lap sokkal-sokkal nagyobb lesz, mint kellene.
Ezen hátrányok elkerülése és a CSS-fájl egyszerűsítése érdekében megpróbálunk vesszőket használni.
Vesszők használata a választók elkülönítésére
Ahelyett, hogy 4 külön CSS-választót és 4 szabályt írna, megteheti kombájn mindezek a stílusok egy szabálytulajdonságba az egyes választók vesszővel történő elválasztásával. Így tehetnénk:
th, td, p.red, div # firstred {szín: piros; }
A vessző karakter alapvetően "vagy" szóként működik a választóban. Tehát ez vonatkozik th címkék VAGY td címkék VAGY bekezdéscímkék az osztály piros VAGY a div címke az azonosítóval. Pontosan ez volt korábban, de ahelyett, hogy 4 CSS-szabályra lenne szükségünk, egyetlen szabályunk van, több választóval. Ezt teszi a vessző a választóban, lehetővé teszi számunkra, hogy több választó legyen egy szabályban.
Ez a megközelítés nemcsak karcsúbb, tisztább CSS-fájlokat tesz lehetővé, hanem a jövőbeli frissítéseket is sokkal könnyebbé teszi. Most, ha a színt vörösről kékre kívánta változtatni, akkor csak egy helyen kell elvégeznie a változtatást az eredeti 4 stílusszabályunk helyett! Gondoljon ezekre az időmegtakarításokra egy teljes CSS fájlban, és láthatja, hogy ez hosszú távon hogyan takaríthat meg időt és helyet!
Szintaxis variáció
Vannak, akik úgy döntenek, hogy olvashatóbbá teszik a CSS-t azáltal, hogy az egyes választókat külön-külön választják el, ahelyett, hogy mindezt egy sorba írnák, mint fent. Így tennék ezt:
th,
td,
piros,
div # firstred
{
piros szín;
}
Figyelje meg, hogy vesszőt helyez minden választó után, majd az "enter" paranccsal tördeli a következő választót a saját vonalára. NEM ad hozzá vesszőt a végső választó után.
A választók közötti vesszők használatával többet hozhat létre kompakt stílusú lap ezt könnyebb frissíteni a jövőben, és ma könnyebb elolvasni!