CSS Zpět na Základy Terminologie vysvětleny
CSS nebo kaskádové styly doplňují definující jazyk návrhových pravidel pro náš web. Umělci všude používají CSS denně k vytváření, organizování a zakódování sad pravidel pro základní rozložení webových stránek. Toto se stalo nejpopulárnějším jazykem pro front-end design a poskytuje úžasné schopnosti s nedávným vydáním CSS3. Co ale vlastně znamená celý tento kód?
Jazyk je již několik let plně vyvinut. Zmatky mohou vzniknout především z důvodu nedorozumění a zneužití podobných termínů. CSS přináší do tabulky mnoho nových konceptů. Budeme pokrývat některé z nejoblíbenějších terminologii zvládnout jako CSS guru.
Proč se specializovat na CSS?
Tato otázka byla předložena dříve, a dokonce i do roku 2011 můžeme vidět stejné výsledky objevování. CSS je robustní jazyk, který nemá rád skriptování ani programování. Je to jazyk stylu, konkrétně kód používaný k popisu chování webové stránky.
Pomocí CSS můžeme přímo manipulovat s atributy z jednotlivých HTML elementů. Všechny bloky, odstavce, odkazy a obrázky mohou být ovlivněny pravidly CSS. Zdokonalení prezentační sémantiky pro web bylo vždy obrovským krokem. To je hlavní důvod, proč je CSS stále předním hráčem pro návrháře - nikdo nic lepšího nevytvořil!
Vlastnosti a hodnoty
Toto je nejjednodušší způsob, jak se dostat do CSS. Všechny kódy spadají do dvou akcí: výběrem prvku, který bude aplikovat návrhy a co aplikovat. Ten je vytvořen pomocí párů vlastností a hodnot.
Jako příklad červená barva; je velmi jednoduchý pár vlastností / hodnoty. Vlastnost, kterou jsme použili, je barva který nám umožňuje přejít v přijatelném rozsahu hodnota změnit barvu textu. To může být také hexadecimální nebo RGB (červená-zelená-modrá) barevná data. Mnohokrát se návrháři nezmiňují o hodnotách, protože to může být zavádějící.
Vlastnosti a hodnoty jsou opravdu jediná myšlenka. Každá deklarace majetku vyžaduje hodnotu a hodnoty samotné jsou bezvýznamné. Existuje mnoho on-line dokumentace, která přesahuje mnoho různých vlastností a jak ovlivňují prvky HTML. Doporučil bych si koupit referenční knihu CSS z jakéhokoli blízkého knihkupectví. Jsou poměrně levné a drží většinu informací, které potřebujete.
Hodnoty voliče
Selektory jsou potřeba k dokončení celého řádku kódu CSS. To je to, co prohlašujeme za to, jaký typ prvku cílíme. Existuje mnoho selektorů a mnoho z nich je tak spletitých, že by průměrný designér tyto dovednosti nepotřeboval. Pokud se chcete dozvědět více, zkontrolujte dokumentaci voliče W3.
Nejjednodušší způsob, jak začít definovat styl, je použití holých elementů jako selektorů vlastností. To znamená manipulaci s kořenovým kódem, například str pro odstavce, div pro rozdělení a dokonce tělo a html lze použít k manipulaci s celým dokumentem webové stránky. Níže je uveden rychlý příklad stylingu všech prvků odstavce.
p font-family: Arial, sans-serif; barva: # 222; font-weight: tučné;
Co dává CSS skutečná váha je jak přesný sniping může být. Nejlepší způsob, jak dosáhnout cílené styly je přes 2 metody známé jako třídy a ID. Jedná se o běžné myšlenky v HTML, kde můžete nastavit libovolný prvek tak, aby měl ID a hodnotu třídy prostřednictvím atributů. Pak pomocí CSS je jednoduché aplikovat styly na tento konkrétní blok.
p # firstpar velikost písma: 14px; / * styly odstavce s ID "firstpar" * / p.comment velikost písma: 1.0em; line-height: 1.3em; / * styly odstavce s třídou "komentář" * /
Délka jednotek a hodnot
Často se tyto termíny mísí, ne velké překvapení. Hodnoty byly dříve vysvětleny jako umístění, které používáme k popisu nemovitosti. Jednotky délky jsou také hodnoty v tom, že se používají k popisu vlastnosti.
Rozdíl je v tom, že tyto hodnoty vyžadují číselné údaje, a proto musí vrátit určitou formu jednotek. Pixely (px) jsou nejrozšířenější a lze je použít pro většinu čehokoliv: šířka / výška, velikost písma, polstrování / okraje, aby se jmenovalo několik.
Kromě těchto můžete vidět procenta (%) používaná často prostřednictvím rozvržení tekutin. Při nastavení hodnot šířky na procento bude kompilátor předpokládat, že 100% bude celá šířka webového prohlížeče. To dává designérům velkou přesnost při použití stylů na struktury struktury a typografii stránek.
Blok prohlášení
Poté, co jsme všechny tyto termíny spojili, jsme konečně schopni diskutovat o hlavní myšlence za styly. Bloky kódu se používají k vymezení oblastí tématu a určení podrobností prvku. Níže je například řádek kódu pro jednoduchý navigační kontejner:
div # nav display: block; šířka: 100%; polstrování: 3px 6px; margin-bottom: 20px;
Nejjednodušší způsob, jak zobrazit tento kód, je zarovnat vlastnosti jeden po druhém. Vývojáři CSS použili bloky kódu k rozdělení každé vlastnosti na svůj vlastní řádek. Tato agenda zabírá nejen mnohem více místa, ale snižuje i schopnost “skim” list, abyste našli přesně to, co potřebujete.
Lepší způsob, jak rozdělit bloky kódu, je oddělit spletité prvky na jejich vlastní poté, co dosáhnou prahu. Toto číslo je osobní a bude se mezi vývojáři lišit. Je to bod zlomu, kdy logika diktuje, že je hloupé udržet vše na jednom řádku, většinou díky čitelnosti.
Níže jsem napsal příklad bloku navigačních vlastností dohromady. Tato praxe udržuje hlubší prvky ve stejném místě, takže úpravy všech navigačních prvků jsou mnohem jednodušší.
div # nav display: block; šířka: 100%; polstrování: 3px 6px; margin-bottom: 20px; div # nav ul seznam-styl: žádný; zobrazení: blok; div # nav ul li float: left; pravý okraj: 10px; velikost písma: 12px; div # nav ul li a color: # 0f0f0f; text-decoration: žádný; displej: inline-block; polstrování: 2px 5px;
Možné pokroky z CSS2 / CSS3
V novinách nedávno bylo non-stop mluvit o úžasné výhody z CSS3. Ale co má opravdu změněn v jazyce? Jasně starý kód bude stále v pořádku. To alespoň ukazuje úplnou zpětnou kompatibilitu mezi kompilátory (vždy dobrá věc).
Hlavní rozdíly se většinou týkají nových vlastností. To umožňuje, aby se v prohlížeči zobrazovaly zaoblené rohy a efekty stínů. CSS3 také nabízí nové nástroje pro popis barev v dokumentu. HSL (Hue-Saturation-Lightness) je novinkou kromě HSLA, která obsahuje alfa kanál pro snížení opacity.
Selektory atributů jsou obrovským krokem vpřed, pokud jde o styl značkování. Pomocí tohoto stylu kódu můžete cílit na konkrétní název prvku, který obsahuje atributy s určitými hodnotami. Ty jsou většinou užitečné při práci s značkami, jako je XML, kde neexistují standardní zásady pro práci s uzly. Níže uvedený příklad je poměrně jednoduchý nápad:
div [attrib ^ = "1"] / * styly zde * /
Výše uvedený kód je součástí knihovny voličů CSS. To by ovlivnilo všechny prvky div s atributem “attrib” který také drží hodnotu “1”. Pokud je to stále matoucí odkaz na příklad níže objasnit. Teoreticky by tyto dva selektory měly provádět stejné akce.
p [id ^ = "primární"] / * styly * / p # primární / * styly * /
Závěr
Po rozbití několika nejpříliš zmatených termínů se zdá, že CSS je jako procházka v parku. Jazyk je velmi intuitivní a začátečníci mohou začít pracovat během několika prvních hodin. To je to, co dělá CSS tak populární mezi webovými vývojáři.
Výhody CSS3 se teprve začaly projevovat. V průběhu několika posledních let nám vývoj webových trendů ukáže, jak moc máme kontrolu nad webovou stránkou. CSS je v současné době pyšný jako dominantní jazyk pro tvorbu webových stránek. Praxe v základních dovednostech na střední úrovni může přinést bohatý design a další znalosti.
