Kategorie | Css

Základy CSS

Publikováno 02 Červenec 2007, Petr Láslo


Než začneme cokoli dělat s CSS, měli byste už něco znát o XHTML. Váš XHTML soubor by měl být strukturovaný a psaný bez chyb v kódu. Jste připraveni? Tak se do toho pusťme :-)

Syntaxe

Kaskádové styly můžeme definovat buď přímo v hlavičce dokumentu <head>, nebo je zapsat do tzv. stylopisů(stylsheet) tj. do externího souboru. V těchto souborech pak můžeme definovat pravidla stylů, které se skládají ze tří částí : - selektoru (identifikátor prvku)
- název vlastnosti
- hodnoty

př.: body {color:#FF0000;}

-celý text na stránce, ke které aplikuji tento styl, se vypíše červenou barvou
Daný styl určuji dvojicí název:hodnota; mezi dvojicí se píše dvojtečka a na konci středník. Za poslední dvojicí máte na výběr ze dvou možnosti: středník napsat, nebo nenapsat. Z vlastních zkušeností Vám doporučuji vybrat první možnost. Dvojice název:hodnota se nazývá definice stylu.
př.:

body{
color:#FF0000;
bacground:#000000;
border: 2px solid #FF0000;
}

- tento styl způsobí to, že text na stránce bude psán červenou barvou, pozadí stránky bude černé a rámeček kolem stránky bude mít šířku 2 pixely, styl solid a červenou barvu.
Komentáře

V definici stylů se používají komentáře s označením /* a*/, vše mezi těmito značkami je ignorováno.




Linkuj.cz! | Vybrali.sme.sk | | MediaBlog.cz | Del.icio.us

Příspěvků v diskuzi: 9

  1. Blackened Říká:

    Škoda jen, že článek o tvorbě www stránek, v tomto případě o CSS, je sám ukázkou toho, jak by se to dělat nemělo. Vedle do očí bijících pravopisných chyb a zbytečných překlepů v ukázkovém kódu by možná neškodilo na správných místech využít XHTML elementů CODE, PRE, UL, H3 a dalších s nimi souvisejících. Prospělo by to nejen důvěryhodnosti zde uvedených informací, ale také kvalitě celého webu.

  2. Admin Říká:

    Děkuji za upozornění, ihned po návratu z dovolené situaci proberu s redaktorem a budu pracovat na nápravě a na tom, aby se situace již neopakovala. Poslední dobou nemám bohužel moc času a práce je hafo, takže nestíhám všechny články číst.

  3. merlin Říká:

    Já teda nevím, do očí blikající pravopisné chyby jsem nenašel. Překlepy jsem upravil. Při tvorbě tohoto článku jsem čerpal z literatury, kde jsem si ověřoval správnost kódu po technické stránce. Články píši ve vizuálním editoru, tak nemám důvod používat elementy XHTML. I tvůj text není pravopisně 100% správně, tak než někoho budeš kritizovat, zamysli se nejdřív nad sebou a pak kritizuj druhé. :-(

  4. Blackened Říká:

    Merlin: Svůj příspěvek jsem nemyslel nijak zle a snažil jsem se jen poukázat na některé nedostatky, které článek má. Nejednalo se o osobní útok a tudíž nemám nejmenší důvod se nad sebou zamýšlet. Nikdo nejsme neomylný a osobně naopak vítám, když mě někdo na chybu upozorní. V mém příspěvku nicméně pravopisné chyby nejsou, tolik k tvé poslední větě.

    Nesejde na tom, zda je text formátovaný ručně, nebo prostřednictvím vizuálního editoru. Při bližším pohledu na mnou uvedené názvy elementů je zřejmé, že jsem svým příspěvkem směřoval spíše k typografické úpravě. Psát odrážky ručně není příliš šťastné, stejně jako je vhodné rozlišit ukázky zdrojových kódů neproporcionálním písmem.

    Co se týče pravopisných chyb, na některých místech textu pokulhává interpunkce. Chybou v kódu jsem měl na mysli zejména “bacground” v závěru článku.

  5. Admin Říká:

    Koukám že se nám tu rozvíjí diskuze na ,,dané téma”. Takže doufám že je problém vyřešen a zejména ke spokojenosti návštěvníků, neboť ti jsou pro tento web nejdůležitější. Jsem rád, že na chyby bylo upozorněno a jako majitel webu budu pracovat na tom, aby se již neopakovali, nebo při nejmenším se pokusím aby se jejich výskyt omezil na minimum.

  6. merlin Říká:

    Blackened: je pod mojí úrověň se s tebou dohadovat.

  7. Admin Říká:

    Nezdá se mi že od Blackeneda tohle byl pokus o dohadování se, takže bude určitě nejlepší když tohle téma ukončím. Veškeré další komentáře ohledně této debaty budou smazány. (Blackened se k tomu však může naposledy vyjádřit) Děkuji za pochopení

  8. Kenny Říká:

    Naopak Vaše diskuze v komentářích je pro mě jakožto laika báječným zpestřením mezi tím co se snažím dozvědět a naučit něco o css.

    Thx je to FuNy and CoOl…L !

  9. Dj Liki Říká:

    Jak se slušně dohadovali xD! Toenhle článek byl spíš jako o barvách ale pomohl mi! Snažim se pár věcí naučit a tenhle web mi hodně pomáhá! Díki adminovi za skvělý články a přeju spousta ůspěchů, ….

Zapoj se do diskuze

XHTML: Můžete používat tyto tagy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">





Anketa