CSS Vissza az alapokhoz Terminológiák magyarázata
A CSS vagy a Cascading Stylesheets teljesíti a webes tervezési szabályok meghatározó nyelvét. A művészek mindenütt használják a CSS-t napi rendszerességgel, hogy létrehozzák, megszervezzék és kódolják az alapvető webhely-elrendezések szabályrendszereit. Ez lett a legnépszerűbb nyelv a front-end tervezéshez, és csodálatos képességekkel rendelkezik a közelmúltbeli CSS3 kiadásával. De mit jelent ez a kód?
A nyelv már néhány éve teljesen kifejlesztett. Az összetévesztés többnyire a helytelen kommunikáció és a hasonló fogalmakkal való visszaélés miatt következhet be. A CSS sok új fogalmat hoz az asztalhoz. A legismertebb terminológiát a CSS guruként kezeljük.
Miért specializálódott a CSS?
Ezt a kérdést korábban felvetették, és még 2011-re is belépve ugyanazokat az eredményeket láthatjuk. A CSS egy robusztus nyelv, amely nem a szkriptek vagy a programozás szerette. Ez egy stílusnyelv, pontosabban kód, amely leírja, hogyan kell viselkednie egy weboldalnak.
A CSS segítségével közvetlenül kezelhetjük az egyes HTML elemek attribútumait. A blokkok, a bekezdések, a hivatkozások és a képek a CSS szabályai által befolyásolhatók. A webes prezentációs szemantika finomítása mindig is hatalmas lépés volt. Ez a fő oka annak, hogy a CSS még mindig vezető szerepet játszik a tervezőknél - senki sem teremtett semmit jobbra!
Tulajdonságok és értékek
Ez a legegyszerűbb módja a CSS behatolásának. Minden kód két műveletre esik: egy elem kiválasztása a tervek alkalmazásához és az alkalmazáshoz. Az utóbbit a tulajdon / érték párok segítségével hozzuk létre.
Mint például piros szín; egy nagyon egyszerű tulajdonság / érték pár. Az általunk használt tulajdonság szín amely lehetővé teszi számunkra, hogy elfogadható legyen érték a szöveg színének módosítása. Ez lehet hexakód vagy RGB (piros-zöld-kék) színadatok is. A tervezők sokszor nem említik az értékeket, mert félrevezető lehet.
A tulajdonságok és értékek valójában egyetlen ötlet. Minden ingatlan-nyilatkozat értéket igényel, és az értékek önmagukban értelmetlenek. Sok olyan online dokumentáció található, amely túlmutat a sok különböző tulajdonságon és hogyan befolyásolja a HTML elemeket. Azt javaslom, hogy a közeli könyvesboltból CSS referencia könyvet vásároljon. Ők meglehetősen olcsóak és a legtöbb információt megtartják.
Kiválasztó értékek
A CSS-kód teljes sorának teljesítéséhez a szelektorok szükségesek. Ezeket állítjuk be, hogy meghatározzuk, hogy milyen típusú elemeket célzunk. Számos szelektor van, és sokan olyan meggyengültek, hogy az átlagos tervezőnek nincs szüksége a készségekre. Ellenőrizze a W3 választóját, ha többet szeretne megtudni.
A stílus definíciók megkezdésének legegyszerűbb módja, hogy csupasz elemeket használjunk tulajdonságválasztókként. Ez azt jelenti, hogy a gyökérkódot manipulálni kell, például p bekezdésre, div a felosztások, és még test és html használható a teljes weblap dokumentum manipulálására. Az alábbiakban egy gyors példa az összes bekezdéselem kialakítására.
p font-család: Arial, sans-serif; szín: # 222; font-súly: félkövér;
Ami a CSS-t illeti, az az, hogy mennyire pontos a szelektor. A célzott stílusok elérésének legjobb módja a következő két módszer osztályok és azonosítók. Ezek a szokásos ötletek a HTML-ben, ahol bármely elemet megadhat azonosítóval és osztályértékkel attribútumokon keresztül. Ezután a CSS használatával egyszerű a stílusok alkalmazása az adott blokkhoz.
p # firstpar font-size: 14px; / * stílusszakasz az "firstpar" * / p.comment azonosítójával font-size: 1.0em; vonalmagasság: 1.3em; / * stílus-bekezdés (ek) a "megjegyzés" osztályával * /
Hosszegységek és értékek
Gyakran ezek a feltételek keverednek, nem nagy meglepetés. Az értékeket korábban az ingatlan leírására használt elhelyezésként magyarázta. A hosszúság egységek értékek is, mivel azokat egy tulajdonság leírására használják.
A különbség ezek az értékek numerikus adatokat igényelnek, és ezért bizonyos mértékű egységeket kell visszaadniuk. A pixelek (px) a legelterjedtebbek, és a legtöbbet használhatják: szélesség / magasság, betűméret, betét / margók, néhány név megnevezése.
Ezeken kívül a folyadékelrendezéseken gyakran használt százalékok (%) is láthatóak. Ha a szélességi értékeket egy százalékra állítja, a fordító 100% -ot feltételez a webböngésző teljes szélességének. Ez nagy pontosságot ad a tervezőknek, amikor stílusokat alkalmaz az elrendezési struktúrákra és az oldallap tipográfiára.
A nyilatkozat blokkja
Most, miután mindezeket a kifejezéseket együttesen helyeztük el, végre meg tudjuk vitatni a stíluslapok mögötti ötletet. A kódblokkok a témakörök körvonalazására és az elem részletezésének meghatározására szolgálnak. Az alábbiakban például egy egyszerű navigációs tároló kódja van:
div # nav kijelző: blokk; szélesség: 100%; párnázás: 3px 6px; margin-bottom: 20px;
A kód legegyszerűbb megjelenítésének módja a tulajdonságok egymás utáni sorolása. A CSS fejlesztők kódblokkokat használtak arra, hogy az egyes tulajdonságokat saját sorára bontják. Ez a napirend nemcsak sokkal több helyet foglal el, hanem csökkenti a képességét “lefölöz” a lapot, hogy pontosan megtalálja azt, amire szüksége van.
A kódok blokkolásának jobb módja az, hogy a görbített elemeket a küszöbérték elérése után külön-külön szétválasztják. Ez a szám személyes és eltérő lesz a fejlesztők között. Ez a fordulópont, ahol a logika azt ostoba diktálja, hogy mindent egy sorban tartson, többnyire az olvashatóság miatt.
Az alábbiakban írtam egy példát a navigációs tulajdonságok blokkjáról. Ez a gyakorlat a mélyebb elemeket ugyanazon a helyen tartja, így minden navigációs elem szerkesztése sokkal egyszerűbb.
div # nav kijelző: blokk; szélesség: 100%; párnázás: 3px 6px; margin-bottom: 20px; div # nav ul list-style: nincs; kijelző: blokk; div # nav ul li float: balra; margin-right: 10px; betűméret: 12px; div # nav ul li a color: # 0f0f0f; szöveg-dekoráció: nincs; kijelző: inline-block; párnázás: 2px 5px;
Lehetséges előrelépések a CSS2 / CSS3-tól
A közelmúltban a CSS3 csodálatos előnyeiről a non-stop beszélgetésről beszélhetünk. De mi valójában megváltozott a nyelven? Nyilvánvalóan a régi kód még mindig rendben lesz. Ez legalább a teljes fordító kompatibilitást mutatja a fordítók között (mindig jó dolog).
A legnagyobb különbségek többnyire az új tulajdonságokhoz kapcsolódnak. Ezek lehetővé teszik a lekerekített sarkok és a drop-shadow effektek böngészőben történő megjelenítését. A CSS3 új eszközöket is kínál a dokumentumok színeinek leírásához. A HSL (Hue-Saturation-Lightness) a legfrissebb a HSLA mellett, amely tartalmazza az Alpha csatornát az opacitás csökkentésére.
Az attribútumválasztók hatalmas előrelépést jelentenek az egyenes jelölési stílus tekintetében. Ezzel a kóddal megcélozhat egy bizonyos elemnevet, amely bizonyos értékekkel rendelkező attribútumokat tartalmaz. Ezek többnyire hasznosak az olyan jelölésekkel végzett munka során, mint az XML, ahol nincsenek szabványos tervezési elvek a csomópontok kezeléséhez. Az alábbi példa viszonylag egyszerű ötlet:
div [attrib ^ = "1"] / * stílusok itt * /
A fenti kód a CSS szelektor könyvtárának része. Ez minden attribútummal rendelkező div elemet érintené “attrib” amely szintén az értéket tartja “1”. Ha ez még mindig zavaros, az alábbi példát tisztázza. Elméletileg ezek a két szelektornak ugyanazokat a cselekvéseket kell végrehajtania.
p [id ^ = "elsődleges"] / * stílusok * / p # elsődleges / * stílusok * /
Következtetés
A leginkább túlzottan zavaros fogalmak lebontása után a CSS egy séta a parkban. A nyelv nagyon intuitív, a kezdők pedig az első néhány órában kezdhetik a tervezést. Ez teszi a CSS-t annyira népszerűvé a webfejlesztők körében.
A CSS3 előnyei csak most kezdtek hatályba. Az új néhány év alatt a fejlődő webes trendek megmutatják számunkra, hogy mennyire befolyásolják a weblap tervezését. A CSS jelenleg büszke arra, hogy a front-end weboldal stílusának domináns nyelve. A még alaposabb középszintű készségekre való gyakorlás bőséges tervezési élményt és további ismereteket eredményezhet.
