CSS Späť na základy Terminológie vysvetlené
CSS alebo kaskádové štýly dokončia definujúci jazyk pravidiel návrhu pre náš web. Umelci všade používajú CSS na dennej báze, aby vytvorili, organizovali a kódovali sady pravidiel pre základné rozvrhnutie webových stránok. To sa stalo najobľúbenejším jazykom pre dizajn front-end a poskytuje úžasné schopnosti s nedávnym vydaním CSS3. Ale čo vlastne znamená celý kód??
Samotný jazyk je už niekoľko rokov plne rozvinutý. Zmätok môže vzniknúť najmä v dôsledku nesprávnej komunikácie a zneužitia podobných výrazov. CSS prináša do tabuľky množstvo nových konceptov. Zahrňame niektoré z najpopulárnejších terminológií, ktoré môžete zvládnuť ako guru CSS.
Prečo sa špecializujete na CSS?
Táto otázka bola položená predtým a dokonca aj v roku 2011 môžeme vidieť rovnaké výsledky. CSS je robustný jazyk, ktorý sa nenachádza v skriptovaní alebo programovaní. Je to jazyk štýlov, presnejšie kód, ktorý sa používa na popísanie toho, ako by sa webová stránka mala správať.
Pomocou CSS môžeme priamo manipulovať atribúty z jednotlivých prvkov HTML. Všetky bloky, odseky, odkazy a obrázky môžu byť ovplyvnené pravidlami CSS. Vylepšenie prezentačnej sémantiky pre web bolo vždy obrovským krokom. To je hlavný dôvod, prečo CSS je stále vedúcim hráčom pre dizajnérov - nikto si nevytvoril nič lepšie!
Vlastnosti a hodnoty
To je najjednoduchší spôsob, ako preniknúť do CSS. Celý kód spadá do dvoch akcií: výber prvku na uplatnenie návrhov a aplikácie. Tá je vytvorená prostredníctvom dvojíc vlastností / hodnoty.
Ako príklad farba: červená; je veľmi jednoduchý pár vlastností / hodnôt. Vlastnosť, ktorú sme použili, je farba čo nám umožňuje prejsť akýmkoľvek prijateľným hodnota zmeniť farbu textu. Mohlo by to byť aj hexadecimálne alebo RGB (červeno-zelené-modré) farebné dáta. Mnohokrát sa návrhári nezmieňajú o myšlienke hodnôt, pretože to môže byť zavádzajúce.
Vlastnosti a hodnoty sú naozaj jediný nápad. Každé vyhlásenie o majetku vyžaduje hodnotu a hodnoty samy o sebe nemajú zmysel. Existuje veľa dokumentácie online, ktorá prechádza mnohými rôznymi vlastnosťami a ako ovplyvňujú prvky HTML. Odporúčam si zakúpiť referenčnú knihu CSS z akéhokoľvek blízkeho knižného obchodu. Sú pomerne lacné a obsahujú väčšinu informácií, ktoré by ste potrebovali.
Výberové hodnoty
Na vyplnenie celej riadky kódu CSS sú potrebné selektory. To je to, čo deklarujeme, aby sme nastavili, aký typ prvku sa zameriavame. Existuje veľa selektorov a mnohé sú tak zložité, že priemerný dizajnér nebude potrebovať tieto zručnosti. Ak chcete získať viac informácií, prečítajte si doklady voliča W3.
Najjednoduchší spôsob, ako začať s definíciami štýlov, je používať holé prvky ako selektory vlastníctva. To znamená manipuláciu s koreňovým kódom ako napr p pre odseky, div pre divízie a dokonca telo a html možno použiť na manipuláciu s celým dokumentom webových stránok. Nižšie je uvedený rýchly príklad vykresľovania všetkých prvkov odseku.
p font-family: Arial, sans-serif; farba: # 222; font-weight: tučné;
Čo dáva skutočnú váhu CSS, je to, aké presné vychyľovanie môže byť. Najlepší spôsob, ako dosiahnuť cielené štýly, je prostredníctvom dvoch metód známych ako vyučovanie a ID. Toto sú bežné nápady v HTML, kde môžete nastaviť ľubovoľný prvok na to, aby mal hodnotu ID a triedu prostredníctvom atribútov. Potom pomocou CSS je jednoduché aplikovať štýly na daný blok.
p # firstpar veľkosť písma: 14px; / * štýly odsek s ID "firstpar" * / p.comment font-size: 1.0em; line-height: 1,3m; / * štýly odsek (y) s triedou "komentár" * /
Dĺžkové jednotky a hodnoty
Často sa tieto pojmy zmiešajú, nie je veľkým prekvapením. Hodnoty boli vysvetlené skôr ako umiestnenie, ktoré používame na opis nehnuteľnosti. Dĺžkové jednotky sú tiež hodnoty v tom, že sa používajú na opis nehnuteľnosti.
Rozdiel je, že tieto hodnoty vyžadujú číselné údaje a preto musia vrátiť nejakú formu jednotiek. Pixely (px) sú najrozšírenejšie a môžu byť použité pre väčšinu čokoľvek: šírka / výška, veľkosť písma, polstrovanie / okraje, aby sme vymenovali niekoľko.
Okrem týchto môžete vidieť percentá (%), ktoré sa často používajú kvapalinami. Pri nastavovaní hodnôt šírky na percentuálny podiel kompilátor zaujme 100%, aby bola celá šírka webového prehliadača. To dáva návrhárom veľa presnosti pri použití štýlov na štruktúru rozloženia a dokonca aj na typografiu stránok.
Blok vyhlásenia
Teraz po uvedení všetkých týchto pojmov dohromady sme konečne schopní diskutovať o základnej myšlienke štýlov. Bloky kódu sa používajú na vymedzenie témových oblastí a špecifikáciu podrobností prvkov. Nižšie je napríklad riadok kódu pre jednoduchý navigačný kontajner:
div # nav zobrazenie: blok; šírka: 100%; polstrovanie: 3px 6px; margin-bottom: 20px;
Najjednoduchší spôsob, ako zobraziť tento kód, je vlastnosti línií za sebou. Vývojári CSS použili bloky kódu na prerušenie každej vlastnosti na vlastnú linku. Tento program nielenže zaberá oveľa viac priestoru, ale znižuje schopnosť “kĺzať” vášho hárku, aby ste našli presne to, čo potrebujete.
Lepším spôsobom, ako rozdeliť bloky kódu, je oddeliť spletité prvky do ich vlastných po dosiahnutí prahu. Toto číslo je osobné a bude sa líšiť medzi vývojármi. Je to sklopný bod, kde logika diktuje hlúpe, aby všetko zostalo na jednej linke, väčšinou kvôli čitateľnosti.
Nižšie som napísal príklad bloku navigačných vlastností spolu. Tento postup udržuje hlbšie prvky v rovnakom mieste, takže úpravy všetkých navigačných prvkov sú oveľa jednoduchšie.
div # nav zobrazenie: blok; šírka: 100%; polstrovanie: 3px 6px; margin-bottom: 20px; div # nav ul zoznam štýlu: žiadne; zobrazenie: blok; div # nav ul li float: vľavo; margin-right: 10px; veľkosť písma: 12px; div # nav ul li a farba: # 0f0f0f; textová výzdoba: žiadne; zobrazenie: inline-block; polstrovanie: 2px 5px;
Možné pokroky z CSS2 / CSS3
V titulkoch sa nedávno hovorilo o neobyčajných výhodách z CSS3. Ale čo naozaj zmenený v jazyku? Zrejme starý kód bude stále v poriadku. To aspoň ukazuje úplnú spätnú kompatibilitu medzi kompilátormi (vždy dobrá vec).
Veľké rozdiely sa väčšinou týkajú nových vlastností. Tieto umožňujú zaobchádzať za okrúhlymi rohmi a efektmi tieňového efektu v prehliadači. CSS3 tiež ponúka nové nástroje na popis farieb v dokumentoch. HSL (Hue-Saturation-Lightness) je najnovší okrem HSLA, ktorý obsahuje Alpha kanál na zníženie opacity.
Voľba atribútov predstavuje obrovský krok vpred, pokiaľ ide o štýl priameho označovania. Pomocou tohto štýlu kódu môžete zacieliť na konkrétny názov prvku, ktorý obsahuje atribúty s určitými hodnotami. Tieto sú väčšinou užitočné pri práci s označením, ako je napríklad XML, kde neexistujú štandardné zásady návrhu na manipuláciu s uzlami. Nasledujúci príklad je pomerne jednoduchý nápad:
div [attrib ^ = "1"] / * štýly tu * /
Tento kód je súčasťou knižnice výberu CSS. To by malo vplyv na všetky prvky div s atribútom “attrib” ktorý má aj hodnotu “1”. Ak je to stále mätúce odkaz nižšie uvedený príklad na objasnenie. Teoreticky by tieto dva selektory mali vykonávať rovnaké činnosti.
p [id ^ = "primárne"] / * štýly * / p # primárne / * štýly * /
záver
Po rozbití niekoľkých z najviac prehnane zmätených výrazov sa CSS zdá ako prechádzka v parku. Jazyk je veľmi intuitívny a začiatočníci môžu začať navrhovať v priebehu niekoľkých prvých hodín. To je to, čo robí CSS tak populárne medzi vývojárom webu.
Výhody CSS3 sa teprve začali uplatňovať. V priebehu niekoľkých nových rokov sa budú vývojové trendy na webe podarí ukázať, akú kontrolu máme skutočne nad dizajnom webových stránok. CSS je v súčasnosti hrdý ako dominantný jazyk pre štýlový dizajn webových stránok. Cvičenie na dokonca rudimentárne zručnosti strednej úrovne môže priniesť bohaté skúsenosti z dizajnu a ďalšie vedomosti.
