Web design pro děti: CSS rozvržení.

() translation by (you can also view the original English article)

Vítejte v šesté verzi naší série Web designu pro děti, Css rozvržení.

Série je o tom kam položíme všechny prvky tak, aby byly přesně tam, kde chceme na obrazovce. Budeme přidávat do HTML i do CSS.

Připoměňte si, podívejte se na tuto stránku kterou stavíme. Soubory pro tento kurz můžete stánout zde a nezapomeňte se zeptat na jakoukoliv otázku kterou máte v komentářích na dolní straně stránky.

Než začneme

Je tu několik věcí, které potřebujeme vědět předtím než přímo skočíma na rozvržení. V první sekci se mrkneme na to jak zůstat organizovaní. Obsáhneme některé základy pozicování a popovídáme si jaká CSS příslušenstí jsou použita pro rozvržení.

CSS přikazování

Udržení uspořádaní CSS dokumentu je velmi důležité. Řádné uspořádání zjednodušuje hledání všech částí v souboru. A zjednodušuje pozdější úpravy a přidávání dalších věcí. Obecně řečeno, Nejlepší je uspořádat naše CSS deklarace v pořadí jakém se nacházejí na stránce.

Budeme přidávat styly v této lekci do main například Přidá se stylování do hlavního prvku které by měl váš CSS dokument obsahovat před dalším prvkem který je v main.

Box model

HTML prvky jsou tak trochu jako obdélník. Css (box) model popisuje rozložení těchto boxů.

Každý box má čtyři strany. Můžeme se věnovat všem stranám v našem CSS zkrze padding (vycpávka), border (lem) a margin okraj. Ačkoli, pokud chceme stylovat pouze jednu stranu prvku, můžeme to udělat také. Například:

1	padding-left: 20px;
2	border: 4px solid #205D76;

Řekněme že tato růžový box reprezentuje text. Vidíme že padding (výplň) byla přidána pouze nalevo a silná modrá hranice pokrývá všecny čtyři strany obsahu.

Flexbox

CSS kaskádové styly ná dávají sadu vlastností, vyrobené speciálně k tomu, aby nám pomohly s rozložením naší webové stránky. Mezitím co box model nám pomáhá vysvětlit rozestavění kolem HTML prvků, flexbox nám umožní posouvat tyto elementy v prostoru.

Když používáme flexbox v nádobě elementů, tento element se stává flex nádoba a všechny prvky v ní se stávají Flex položkami.

Když se soustředíme na kontejner, automaticky poskládá prvky vodorovně a poté se můžeme dostat k do dalších detailnějších vlastností v Flexboxu.

Nebudeme moc potřebovat použití flexboxu v naší stránce, ale je důležité myslet na flexbox jako nejmodernější a nejkorektnější způsob jak pozicovat malé kousky obsahu na stárnce.

Hlavička

Nadpis h1 a obrázek města v Hlavičce jsou uprostřed stránky. Existuje několik odlišných způsobů centrování kaskádovými styly, ale nyní použijeme text-align: center v hlavičce.

Ukážeme si na hlavičku použitím class name které jsme již přidali.

1	.primary-header {
2	text-align: center;
3	}

Nezapomeňte! Uložte dokumenty a znovu spusťte prohlížeč, aby jste viděli změny za běhu.

Sekce

Uplně první věc kterou chceme do našich sekcí udělat je napsat obsah, obrázek a seznam do každé sekce, které sedí vedle sebe, ne ve štosu na hromadě.

K dosažetí použijeme flexbox Flexbox je užitý na prvky v kontejneru použitím display: flex

1	.store-section {
2	display: flex;
3	display: -webkit-flex; /* This is a vendor prefix! */
4	}

K připomenutí toho o čem jsme mluvili dříve, obrázek a div obsahující seznam jsou nyní flex prvky, protože se nacházíte ve Flex kontejneru.

Zatímco existuje mnoho možností k přesné specifikaci, kam by prvek měl jít. Defaultní chování flexboxu tu funguje perfektně a seznam obchodu je přesně vedle obrázku.

Poznámka "prefixy prodejce"

flexbox je poměrně nový, ne všechny prohlížeče měly šanci ho náležitě do zahrnout. Jak tento fakt obejít, můžeme zahrnout vendor prefix do flexbox vlastností, přidáním chybějící podpory, která zatím není. Ačkoli jsme se pouze zaměřili na nejnovější verze moderních prohlížečů, budeme stále potřebovat webkit- vendor prefix pro flexbox, abychom se ujistili, že bude fungovat v "Safari".

Obrázek a seznamy

Mohli bychom použít špetku pozicování mezi obrázky a prvek, který obsahuje celý text, takže pojďme přidat class store-details do našeho div obsahující text.

Po uložení můžeme přeskočit na náš kaskádový styl a přidat pozicování, ale pouze nalevo.

1	.store-details {
2	margin-left: 30px;
3	}

Defaultní seznam pozicování

Je tu nějaké pozicování nalevo od našeho obchodu v neuspořádaném seznamu. Je to protože je tu jakési dafaultní stylování, které přichází s použitím HTML seznamu. Děkdy toto defaultní stylování je v pořádku, ale někdy nedocílíme žádaného efektu.

Můžeme se zbavit defaultního pozicování seznamu použitím padding:0 v neuspořádaném seznamu., ale mohli bychom zapříčinit že naše hlavní body by šly moc doleva, ve srovnání s naším hlavním seznamem.

My chceme trochu výplně, ale ne tak moc jak nám je nabízeno defaultně. padding-left 15px v našem seznamu srovná naše body výše celkem pěkně, takže přidáme to samé ještě k dalším bodům, které jsme přidali v minulé lekci.

1	.store-list {
2	padding-left: 15px; /* newly added styling */
3	color: #FFC122;
4	}

Místo mezi položkami v seznamu.

Stále tu je záležitost kterou jsem již zmínili v minulé lekci jedná se o to, že položky v seznamu jsou příliž blízko sebe. K vyřešení tohoto problému přidejme class store-name do všech položek seznamu < li > do našeho HTML. Poté přidáme malý ukraj do dolních stran položek.

1	.store-name {
2	margin-bottom: 10px;
3	}

Okraje a Centrování.

Pozicování potřebuje být přidáno do sekcí. Dostaneme se k tomu skrze margin a width vlastnosti.

Znova, budeme přidávat do stylování které už jsme psali:

.store-section {
    display: flex; 
    display: -webkit-flex; 
    margin: 50px auto; 
    width: 450px; 
}

50px hodnota s Margin / okraje se zde platí pro každou horní sekci. Následně toto s Auto říká, že prohlížeč pokládá šírky elementů (které jsou nastaveny na 450px) a centrovány v prohlážeči automaticky.

Patička

Pro naší Footer(patičku ) vycentrujeme text a přidáme malé padding/ odsazení, abychom se ujistili, že text není příliž blízko k okrajům patičky.

.primary-footer {
    padding: 2px;
    text-align: center;
    background-color: #FFC122;
}

okraje kořenového prvku body

Mluvili jsme trošku o defautním stylování, když umisťujeme seznamy. Element body má svůj defaultní styl, s vlastním margin, který obklopuje celou stránku. Někdy to není problém, můžeme vidět, že to brání background-color naší footer / patičky od plného roztažení do každé strany okna prohlížeče.

Řešení je v tom, že musíme skočit zpět do body našeho CSS dokumentu a přidat následující:

1	body {
2	margin: 0;
3	}

Závěr

V tomto kurzu jsem dostali všechny naše elementy na místo pomocí CSS technik rozvržení. Zatímco existuje několik odlišných způsobů jak docílit konkrétního rozvržení, CSS způsobe je příjemný a flexbox poskytuje velmi pevné pochopení těchto odlišných přístupů.

I kdž naše stránka je kompletní (gratulace) budeme se příště bavit o designu, typografii a barvách v příští lekci. Pomůže vám to stát se celkově uvědomělý a informovaný webový designer.

Uvidíme se ahoj!