Píšeme svoje prvé komplexné CSS
Štyri časti nášho CSS.
1. štýlovanie základných HTML tagov – sekcia nezávislá na projekte
Každý prehliadač má prednastavený vzhľad pre tagy značkovacieho jazyka HTML. Môžu byť mierne odlišné prehliadač od prehliadača. Preto si zoženieme zoznam značiek a pre každý svoj projekt si spravíme rovnaký segment v CSS s vašimi vlastnými hodnotami. Tým pádom vychádzame u každého projektu z rovnakých podmienok.
2. layout – sekcia určujúca rozloženie prvkov stránky
Vytvoríme si (alebo vygenerujeme) layout a značky, ktoré sú v dokumente súčasťou layoutu (sú jeho základné kamene) oštýlujeme v tejto sekcií. Dobre je si zvyknúť významovo rovnaké časti layoutu nazývať rovnako (väčšinou layout staviame za pomoci DIV s parametrom ID).
3. vzhľad – sekcia závislá na layoute
Do tejto sekcie definujeme všetky prvky, ktoré určujú vzhľad a domaľúvajú stránku v zvolenom layoute. Je to teda akési vizuálne pokračovanie suchej kostry layoutu. Práve tu pridelíme pravému stĺpcu farbu pozadia, veľkosti písma a pod.
4. obsah – sekcia určujúca vzhľad textu
Nemenej dôležité. Tu si definujeme ako má vyzerať nadpis prvej úrovne v tej, ktorej sekcií layoutu. Najdôležitejšej sekcií – pre samotný obsah – venujeme obvzlášť veľkú pozornosť.
No a teraz máme CSS pre media screen. Zostane nám dorobiť media print a media handheld. Pokiaľ píšeme CSS solídne, tak ich úpravy nebudú nič náročné – napr. layout zrušíme v príslušnej sekcií a pod.
Uvedomujem si istú schématickú abstrakciu rozdielnu ako je reálny výsledok. Určite však vo svojom CSS niečo z toho vidíte.
Já používám trošku jiné rozdělení, ale myšlenka je podobná. První css je jen spojovací (v něm jsou odkazy na další styly, dobré pro výměny souborů, redesigny, a tak různě, nezasahuju do html), druhé je kostra layoutu – rozvržení stránky, kde co kam patří spolu s hlavními rozměry (margin, padding). Třetí je typografie (různé nastavení prvků css, okraje, chování), čtvrté obsahuje barvičky (všechny informace color, borders color, background a vazby na background images) – to už jen tak pro legraci. ;)
Ja to mám dosť podobne.
Najprv si to navrhnem na výkres (všetko grafické). Potom pokračujem približným logickým rozčlenením – ktorá časť sa bude ako volať a čo všetko tam chcem mať. Potom príde na rad CSS a dolaďovanie logiky layoutu. No a nakoniec drobnosti v CSS.
Co je to CSS? Nieco som zmeskal? :-)))
Používam trošku iné rozdelenie:
/*tag:*/ – globálne vlastnosti pre tagy
/*class:*/ – globálne triedy
/*layout:*/ – layout webu, vrátane nadpisov ktoré majú špecifické postavenie, táto časť je ďalej rozčlenená na header, (topmenu) main, menu a footer
/*page-specific:*/ – obsah v maine závislý od stránky (trebárs fotogaléria, stránka kontakty, …)
Každý má svoje zažité rozloženie, každé má svoje výhody i nevýhody, záleží od webu… Raz som skúšal rôzne farebné schémy na jednej stránke a kvôli tomu som si pospájal všetky prvky s rovnakými farbami (cez background alebo color) a farbu definoval na jednom mieste… Bolo to rýchlejšie ako na x miestach meniť farby…
[4] ano, napr. ak chces zmenit modru na zelenu
tak v jednom CSS mozes ten isty prvok spominat viacejkrat:
h1, #box, .zvyraznenie { modra }
h1 { velkost pisma }
#box { poloha, velkost }
[5] Presne, otázka znie – kde je hranica? Na čo všetko to použiť? Kedy dávať vlastnosti podľa prvkov a kedy prvky podľa vlastností:
prvok{jeho vlastnosti;} vs. prvky{vlastnost;}
Já to píšu podle posloupnosti elementů na stránce, myslím, že tak je to nejjednodušší.
Pak podle jednotlivých kontejnerů layoutu, jako je sdebar, hlavička, patička rozdělím viditelnýma poznámkama.
Rony, myslíš, že když píšeš článek pro HTML a CSS kodéry, je nutné v každém odstavci znovu a znovu vysvětlovat, co ty zkratky znamenají?
Nebylo by i jedno vysvětlení zbytečné?
[8] tie skratky vysvetluje automat – plugin. chapem jeho nedostatky ale nie som ochotny venovat cas skumanim ako ho vylepsit. mas spravnu pripomienku. avsak nepisem zrejme vyhradne pre koderov.