Miért egyszerűsíti a kódolást?
CSS vagy Cascading Style Sheets, a webdesign ágazat elfogadott módja a vizuális stílusok hozzáadására egy webhelyen. A CSS segítségével szabályozhatja az oldal elrendezését, színeit, tipográfiáját , háttérképét és még sok mást. Alapvetően, ha ez egy vizuális stílus, akkor a CSS a módja annak, hogy ezeket a stílusokat a webhelyére.
Amikor CSS stílusokat ad hozzá egy dokumentumhoz, előfordulhat, hogy a dokumentum hosszabb és hosszabb ideig kezdődik. Még egy kicsi webhely is csak néhány oldallal eljuthat egy nagy CSS-fájlhoz - és egy nagyon nagy webhely sok és sok egyedi oldalas oldalakon nagyon nagy CSS-fájlokat tartalmazhat. Ezt olyan válaszadó webhelyek is hozzákapcsolják, amelyek sok médiabérletet tartalmaznak a stíluslapokban, hogy megváltoztassák a megjelenítések megjelenését és az oldal különböző képernyőkön.
Igen, a CSS-fájlok hosszúak lehetnek. Ez nem jelent komoly problémát a webhely teljesítményének és a letöltési sebességnek köszönhetően, mivel egy hosszadalmas CSS-fájl valószínűleg elég kicsi (mivel valójában csak szöveges dokumentum). Mégis, minden apró szám az oldal sebességének számít, így ha a stíluslapodat szebbé teheti, akkor ez jó ötlet. Ez az, ahol a "vessző" nagyon hasznos lehet a stíluslapodban!
Commas és CSS
Lehet, hogy kíváncsi lett volna, hogy a vessző milyen szerepet játszik a CSS választó szintaxisában. A mondatokhoz hasonlóan a vessző egyértelművé teszi - nem kódot - az elválasztóknak. A CSS választóban lévő vessző több szelektort választ el egymástól ugyanazon stílusok között.
Nézzünk például néhány CSS-t.
th {szín: piros; }
td {szín: piros; }
p.red {szín: piros; }
div # firstred {szín: piros; }
Ezzel a szintaxissal azt mondja, hogy a címkék, a td címkék, a bekezdéscímkék az osztály vörösével és a div tag az elsődleges azonosítvánnyal rendelkeznek, 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öntesz, hogy a tulajdonságok betűszínét kékre változtatja, akkor négyszer módosítania kell a változást a stíluslapján.
- Számos extra karaktert ad hozzá a stíluslapjához, amelyre nincs szüksége. Ez a 4 stílus nem feltétlenül túlzásnak tűnik, de ha folytatja ezt az egész stíluslapon, a vonalak összeadódnak, és a lap sokkal, sokkal nagyobb, mint amennyi szükséges.
Annak érdekében, hogy elkerüljük ezeket a hátrányokat, és egyszerűsítsük a CSS fájlt, megpróbálunk vesszőket használni.
A parancsok használata különálló választókhoz
Ahelyett, hogy 4 különálló CSS-szelektorot és 4 szabályt írnának ki, ezeket a stílusokat egyetlen szabály-tulajdonságként kombinálhatjuk, ha elválasztjuk az egyes szelektort vesszővel. Itt van, hogy ezt tennék:
th, td, p.red, div # firstred {szín: piros; }
A vessző karakter alapvetően a "és" szóval működik a választó belsejében. Tehát ez érvényes a t h címkékre ÉS td címkékre és bekezdéscímkékre, amelyek az osztály piros és az elsődleges azonosítóval rendelkező div tag. Pontosan ez volt azelőtt, de ahelyett, hogy 4 CSS szabályra lenne szükségünk, egyetlen szabály van több szelektorral. Ez az, amit a vessző tesz a választóban, lehetővé teszi számunkra, hogy több szelektort válasszunk egy szabályban.
Nem csak ez a megközelítés teszi a szebb, tisztább CSS fájlokat, hanem a jövőbeli frissítéseket is sokkal könnyebbé teszi. Most, ha szeretné megváltoztatni a színét pirosról kékre, akkor csak a helyszínen kell végrehajtania a változást, ahelyett, hogy az eredeti 4 stílus szabályain felül lennénk. Gondolj erre az időmegtakarításra egy teljes CSS fájlban, és láthatja, hogy ez hogyan takarít meg időt és helyet a hosszú rúnában!
Szintaxis változat
Néhány ember úgy dönt, hogy jobban olvashatóvá teszi a CSS-t, ha az egyes választókat elválasztja saját sorában, ahelyett, hogy a fentiek szerint egyetlen sort írna. Így kellene ezt tenni:
th,
td,
p.red,
div # firstred
{
piros szín;
}
Vegye figyelembe, hogy minden választó után vesszőt helyez, majd használja az "enter" billentyűt, hogy megszakítsa a következő választót a saját sorába. NEM ad meg vesszőt a végső választó után.
A szelektorkészletek közötti vesszőkkel kompatibilis, kompaktabb stíluslapot hoz létre, amelyet a jövőben könnyebben frissíthet és ma még könnyebben olvasható!
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 18/5/17