CSS - 1. Úvod
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

CSS - 1. ÚvodCSS - 1. Úvod

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

CSS - 1. Úvod

Google       Google       7. 4. 2007       23 005×

1.1 ⋅ Čo by ste už mali vedieť
1.2 ⋅ CSS v bodoch
1.3 ⋅ Štýly riešia všeobecný problém
1.4 ⋅ Štýlové hárky ušetria mnoho práce
1.5 ⋅ Možnosti použitia CSS
1.6 ⋅ Záver

Reklama
Reklama

1.1 Čo by ste už mali vedieť

Predtým, než začnete s týmto kurzom, by ste mali ovládať aspoň základy jazykov HTML alebo XHTML. Kvalitné kurzy nájdete aj na portáli Programujte, ďalej odporúčam stránky JakPsatWeb a vynikajúci učebný portál W3Schools, z ktorého sa prekladá aj časť tohto kurzu.

Ak ste ešte nikdy predtým s HTML/XHTML nepracovali a rozhodujete sa, ktorý sa naučiť, jednoznačne vám odporúčam XHTML. Výborný, jednoduchý a profesionálne napísaný kurz nájdete na W3Schools - XHTML.


1.2 CSS v bodoch

  • CSS je skrátený názov pre Cascading Style Sheets
  • Štýly definujú, ako sa (X)HTML elementy zobrazia
  • Štýly sú normálne uložené v štýlových hárkoch (Style Sheets)
  • Prvýkrát boli štýly boli pridané do HTML 4.0, aby vyriešili problém s oddelením dizajnu od obsahu
  • Externé štýlové hárky výrazne zjednodušujú prácu a zvyšujú časovú efektívnosť
  • Externé štýlové hárky sú uložené v .css súboroch
  • Viacnásobné štýlové definície budú kaskádované do jednej

1.3 Štýly riešia všeobecný problém

HTML tagy boli pôvodne navrhnuté na definovanie obsahu stránky. Dokázali "povedať": Toto je nadpis, Toto je odstavec  alebo Toto je tabuľka s použitím tagov, ako napríklad <h2>, <p> alebo <table>. O grafické rozloženie dokumentu sa mal starať prehliadač, bez používania akýchkoľvek tagov na formátovanie.

Dva najvýznamnejšie prehliadače tej doby - Netscape a Internet Explorer však pokračovali v pridávaní nových tagov a atribútov (napríklad tag <font> a atribút farba písma). Postupom času sa preto stalo omnoho ťažšie, respektíve prakticky nemožné vytvoriť slušne vyzerajúcu stránku, ktorá by mala dizajn úplne oddelený od obsahu.

Riešenie tohto problému bolo nutné, musel sa prijať nový formát. World Wide Web Consortium (W3C) - neprofitujúca organizácia zodpovedná za štandardizáciu webových formátov - vytvorila štýly ako prídavný formát k HTML (neskôr aj XHTML, ktoré ich použitie vyžaduje omnoho viac). V dnešnej dobe všetky väčšie prehliadače štýly podporujú, ba stále viac ich vyžadujú.


1.4 Štýlové hárky ušetria mnoho práce

Štýlové hárky definujú ako majú byť (X)HTML elementy zobrazené, podobne ako tag <font> a atribút farba písma v HTML 3.2 a starších formátoch. Zvyčajne sa štýly ukladajú do externých .css súborov a ide zrejme o najvhodnejšie riešenie situácie. Veľkým plus je aj to, že zmenou jedného CSS dokumentu môžete zmeniť vzhľad všetkých stránok na serveri (ktoré s daným CSS súborom pracujú).

CSS je revolúcia vo webdizajne, pretože dovoľuje vývojárom ovládať štýly a dizajn mnohých stránok z jedného bodu. Stačí vytvoriť jeden CSS súbor a aplikovať ho na akékoľvek množstvo stránok. Ak potom zmeníte CSS dokument, zmeny na samotných stránkach sa prejavia automaticky.


1.5 Možnosti použitia CSS

Používanie externého súboru nie je jediný spôsob interpretácie CSS. Naštýlovať môžete aj samostatný (X)HTML element priamo v kóde stránky či deklarovať štýly v hlave (X)HTML dokumentu - <head>. Ich priorita je však odlišná (vyššie číslo znamená vyššiu prioritu):

  • 1. Defaultne prehliadačom
  • 2. Externý CSS súbor
  • 3. Interný štýlový hárok (v tagu <head>)
  • 4. Štýlovanie (X)HTML elementu

To znamená, že štýlovanie (X)HTML elementu priamo v kóde má zo všetkých najväčšiu prioritu. Tento údaj je však častokrát zbytočný - ak totiž používate iba externé CSS dokumenty, nebude na vašej stránke nič prioritnejšie, a tak sa externý CSS súbor automaticky stáva najprioritnejším.

Pozor! Táto tabuľka platí, iba ak ste v hlavičke stránky uviedli najprv link na CSS dokument a až za ním hlavičkový štýlový hárok. Ak totiž najprv vložíte samotné štýly do hlavy dokumentu pomocou <style> a až za tým zverejníte link na CSS súbor, "zvíťazí" CSS a v tom prípade táto tabuľka stráca zmysel. O tom si však povieme v ďalších lekciách, jediná dôležitá vec, ktorú si musíte zapamätať je, že do hlavy stránky vždy najprv pripájame externý CSS súbor a až tak vkladáme interný štýlový hárok (ak je potrebný). Zapamätajte si to, aj keď tomu ešte nerozumiete.


1.6 Záver

V ďalšej časti sa dočítate o syntaxi CSS. Dopredu by som chcel upozorniť, že hoci sa v článkoch budú spomínať aj iné metódy, prioritnou aplikačnou metódou tohto kurzu je štýlovanie pomocou externého súboru. Od začiatku budú CSS značky a súbory písané validne. Preto budú články doplnené aj z iných literatúr a patrične prispôsobené

Zdroj: http://w3schools.com

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Autor sa zaujíma o šport, je aktívnym hudobníkom a v minulosti písal pre portál Programujte. V súčasnosti je prakticky nemožné zastihnúť ho.

Nové články

Obrázek ke článku NVIDIA shrnuje přehled novinek na E3 2018

NVIDIA shrnuje přehled novinek na E3 2018

Společnost NVIDIA si u příležitosti E3 2018 připravila řadu novinek, které uvádí v kompletním přehledu, Například nové hry s podporou NVIDIA Highlights, která je součástí aplikace GeForce Experience, i nadále nabírá na obrátkách. Kromě výše zmíněné Shadow of the Tomb Raider získaly podporu také hry Dirty Bomb a Switchblade.

Reklama
Reklama
Obrázek ke článku SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

Firmy chrání svá citlivá data často nedostatečně. Podle průzkumu společnosti SODAT se v minulém roce setkalo až 80 % z nich s bezpečnostním incidentem ztráty nebo úniku dat. Jedna z pilotních firem, která testovala novou verzi řešení SODAT Protection & Analytics 2.0pro bezpečností analýzu a monitoring dat díky novince zjistila, kdo z disku smazal důležité výkresy a mohla na incident včas reagovat.

Obrázek ke článku Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Letní měsíce jsou pro většinu zaměstnanců spojené s každoroční dovolenou. Z údajů Českého statistického úřadu vyplývá, že v roce 2017 podnikli Češi přes 13 milionů delších cest (tzn. s více než čtyřmi noclehy). Přitom právě na období července, srpna a září připadá více než 7,5 milionů z nich. Nicméně tradiční představu o dovolené jako o čase, kdy má práci na starost někdo jiný, Češi boří. 

Obrázek ke článku 10 SEO mýtů, které už nemusíte v roce 2018 řešit

10 SEO mýtů, které už nemusíte v roce 2018 řešit

„Kolik má být na stránce klíčových slov?“, „Nemáš vyplněný meta tag keywords, to nebude fungovat.“, „Katalogy jsou mrtvý“. Také jste už slyšeli některé z těchto otázek? Pojďme si na ně konečně jednou provždy odpovědět.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý