Cascading Styles (CSS) pre všetky jeho logickéjednoduchosť umožňuje nielen vytvoriť efektívne dizajnové riešenie, ale aj poskytnúť prvky so skutočnou akciou, napodobniť vykonávanie skutočného kódu.
Akákoľvek vizuálna značka HTML –obdĺžniková oblasť špecifickej štruktúry a obsahu. Prvok obsahuje označenie súradníc, veľkostí, zarážok, farieb, písma, jeho štýlu atď. Rámec prvku CSS špecifikuje oblasť, ktorú zaberá, pričom sa nachádza od jeho okraja dovnútra o šírku uvedenú v popise.
Syntax popisu
Oblasť umiestnenia prvku je nastavená súradnicamivzhľadom k ľavému hornému rohu stránky (vľavo, hore), horizontálne a vertikálne (šírka, výška). Celý návrh a animácia prvku sa vykonáva v pároch: "vlastnosť: hodnota".
Popis sa vykonáva priamo v kóde stránky, na štýle vloženia alebo v samostatnom súbore, pričom naň odkazuje odkaz LINK. Syntax:
#name {vlastnost: hodnota; vlastnosť: hodnota; vlastnosť: hodnota; ...}
alebo
.meno {vlastnost: hodnota; vlastnosť: hodnota; vlastnosť: hodnota; ...}
Názov môže byť aj p, body, html, table, td ..., teda názov značky HTML markup. Je povolené zahrnúť popis štýlu priamo na prvok.
Pred vykonaním vlastných možnostíštýlov písania, nezaškodí vidieť, ako sa to robí na populárnych stránkach, uložiť kód stránky alebo stlačiť Ctrl-U na zobrazenie priamo v prehliadači.
Základné parametre
Zobrazí sa skutočný rámec CSS pre prvokštýl (border-style), farba (border-color), šírka (border-width). Všetko sa dá opísať jednou vlastnosťou – hranicou. Každý okraj rámu môžete opísať nezávisle (border-top, border-bottom, border-left, border-right).
Rámec CSS je opísaný podľa všeobecných pravidiel kaskádových štýlov:
orámovanie: 3px;
farba okraja: červená;
bordúra: dvojitá prerušovaná plná bodkovaná.
Tento popis nastavuje šírku okraja na 3 pixely, farbu na červenú, štýl strany: horná strana dvojitá, pravá strana prerušovaná, spodná plná, ľavá strana bodkovaná.
šírka-okraja: 1px 2px 4px 8px;
farba okraja: modrá;
okrajový štýl: bodkovaný.
Tu sú veľkosti každej strany tiež postupne, začínajúc zhora v smere hodinových ručičiek, farba je modrá a štýl je bodkovaný.
farba okraja: modrá červená zelená čierna;
tento popis označuje farbu každej strany zvlášť. Vlastnosť okraja môže obsahovať niekoľko parametrov naraz a rohy okraja môžu byť zaoblené:
orámovanie: 1px zelená plná;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
Ako urobiť hranicu v CSS závisípohodlie návštevníka, pretože tento štýlový efekt sa zvyčajne používa na technické účely: keď je dôležité presne zobraziť miesto alebo veľkosť oblasti na stránke.
Hrúbka rámu a jeho účel
Pri výbere hrúbky rámu môžete použiť px, pt,em ..., ale majte na pamäti, že je vždy vo vnútri oblasti prvku. Je ťažké predpokladať, že okraj CSS má dizajnový účel, ale z technického hľadiska je veľmi vhodný na zvýraznenie prvkov stránky.
Ak je rám uzamknutý v hlavnej triede, potomchýba, potom jeho zadaním v pseudotriede: hover môžete zobraziť prvok stránky návštevníkovi, keď je na ňom kurzor myši, napríklad vybrať položku ponuky. Niekedy potrebujete niečo vybrať kliknutím na obrázok alebo niečo niekam pretiahnuť. Je veľmi výhodné použiť tu bodkované orámovanie namiesto zmeny pozadia prvku alebo jeho obsahu.
Niektoré aplikácie vyžadujú zvýraznenieoblasť stránky alebo výber položiek na ďalšie spracovanie. V tomto prípade môžete v momente kliknutia vytvoriť div s rámom a kým návštevník neuvoľní tlačidlo myši, meniť jeho veľkosť, čím sa vizuálne zobrazí výsledok výberu.
Nad rámec predpokladaného
Lekcie CSS sú veľmi zaujímavé a je tiež dôležité študovať kódy stránok populárnych stránok. Jeho vlastný zdroj však musí byť jedinečný, musí mať svoju identitu.
Hranica CSS poskytnutá syntaxou nedávatakú rozmanitosť ako ich vlastnú iniciatívu. Impromptu je skvelý začiatok a vývojárom nič nebráni vo vytvorení vlastného frameworku. Navyše so všetkými výdobytkami internetových technológií a možnosťami existujúcich štandardov existuje veľa sľubných nápadov založených na skutočných nedostatkoch v existujúcej syntaxi, ktorá (podľa definície) bola vždy prísne formálna.
Najmä ak naozaj vytvoríme rámec pre tie respiných prvkov, zdá sa byť vhodné urobiť to komplexným spôsobom. Výberom strán a rohov oblasti v samostatných značkách môžete získať úžasné efekty. A priradením vhodných obslužných programov môžete vytvárať dynamické prvky stránky zmenou polohy, tvaru a obsahu.
