ITnetwork summer 2020
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 6 - Úvod do CSS (kaskádových stylů)

V předešlém cvičení, Řešené úlohy k 4.-5. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Zatím jsme se v našem on-line kurzu HTML úspěšně vyhýbali stylování stránek, pojďme to nyní napravit. V tomto tutoriálu si vysvětlíme k čemu slouží CSS a ukážeme si, jak vypadá. Abych co nejlépe vysvětlil podstatu jazyka CSS, udělejme si velmi krátkou odbočku do historie vývoje internetu a jazyka HTML.

Historie jazyka HTML

Stručně řečeno, první internet se nazýval Arpanet a vznikl v 60. letech 20. století jako armádní projekt USA v době studené války. Později byl uvolněn mezi veřejnost a připojovaly se k němu univerzity a výzkumné ústavy. Tehdy vůbec nevypadal jako dnes, protože se přes něj přenášely pouze textové soubory.

Až v 90. letech se v evropském výzkumném ústavu CERN rodí jazyk HTML a standard WWW, tedy web, jak ho známe dnes. HTML mělo sloužit pro sdílení interních dokumentů v ústavu. Jazyk HTML byl vytvořen za účelem rozlišit jednotlivé části dokumentu od prostého textu (např. toto je nadpis, toto je seznam, toto je tabulka) a hlavně, aby mohl propojovat jednotlivé dokumenty pomocí odkazů. Vznikaly první webové prohlížeče.

Jak se web dostával mezi lidi, HTML se rozvíjelo a přidávaly se nové a nové tagy. Bohužel už ne jen ty, které přidělovaly význam, ale i ty, které elementy jen stylovaly. Prohlížeče se předháněly, kolik tagů podporují a chrlily nové a nové značky. Problémem bylo, že v HTML dokumentech se rázem objevilo 60% balastu, který sloužil pouze k obarvování textu, k zarovnání nadpisů na střed nebo k nastavení fontu písma. Tento problém narůstal až do HTML verze 4, kdy se stylování přímo v HTML označilo za zastaralé a přestalo se používat.

Odstrašující příklad zastaralého webu

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Podívejte se sami, jak mohl vypadat zastaralý HTML 3 dokument (zobrazil jsem jen část body, hlavička pro nás není zajímavá), který se autor snažil ostylovat.

<body bgcolor="#0395c3" text="white">
    <h1 align="center"><font color="#0a294b">Web v HTML 3</font></h1>
    <p>Když chci všechny nadpisy na stránce tmavě modré a centrované, musím to do každého psát znovu a znovu. Můj kód je plný zastaralých atributů align a zastaralých tagů font.</p>

    <h2 align="center"><font color="#0a294b">Další nadpis</font></h2>
    <p>Opět do nadpisu musím napsat, že ho chci centrovaný a tmavě modrý. Ve stránce se již téměř nevyznám.</p>

    <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" bordercolor="#0a294b">
        <tr><td valign="top" align="center"><font color="#0a294b">Tato tabulka</font></td><td valign="top" align="center"><font color="#0a294b">obsahuje</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">příliš mnoho</font></td><td valign="top" align="center"><font color="#0a294b">zbytečných atributů</font></td></tr>
    </table>

    <br />

    <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" text="white" bordercolor="#0a294b">
        <tr><td valign="top" align="center"><font color="#0a294b">Tato tabulka je úplně</font></td><td valign="top" align="center"><font color="#0a294b">stejně stylovaná, jako</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">ta nahoře, ale stejně musím</font></td><td valign="top" align="center"><font color="#0a294b">všechny styly psát znovu.</font></td></tr>
    </table>
    <h2 align="center"><font color="#0a294b">Smutné je</font></h2>

    <p>Že hodně návodů na internetů vás bude učit psát web právě takto.</p>
    <p align="center"><img src="obrazky/smutny.png" alt="Smutný" /></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">Proto používejte zejména ITnetwork, kde učíme, jak psát web moderně. </font></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">Tento odstavec je tmavě modrý a centrovaný stejně jako ten výše, ale já to musím stejně napsat znovu.</font></p>
</body>

Výsledný web by potom vypadal takto:

Odstrašující příklad webu v HTML 3 bez CSS

Všimněte si, kolik procent kódu zabírá samotný obsah webu a kolik procent balast, který slouží jen ke stylování. Styly se také opakují zbytečně pořád dokola. Nevýhod jsou desítky, např. nepřehlednost kódu, stránka je několikrát větší a déle se načítá, je potlačován význam elementů a tedy i základní účel jazyka HTML, příliš mnoho tagů mate vyhledávače (např. Google) a ty pak stránky chybně chápají a indexují. Hlavně si představte, že máte web, který má 50 stránek podobné této. A vy se rozhodnete, že se vám modré tabulky s modrým písmem již nelíbí a že chcete zelené s tmavě zeleným písmem. Co uděláte? Ano, budete muset přepsat stovky tagů na jinou barvu. Asi sami vidíte, že takhle to nepůjde. Proto byl vyvinut jazyk CSS.

CSS

CSS (Cascading Style Sheets) je jazyk, speciálně vyvinutý pro stylování HTML. Kaskádový proto, protože ve stylech funguje dědičnost. Když tedy např. dáme buňce tabulky červenou barvu písma, tuto barvu písma automaticky dostanou i všechny odstavce textu v této buňce. Samozřejmě stále můžeme nějakému odstavci dodatečně barvu změnit, vždy platí ten konkrétnější styl. Nejlepší je, že jeden a ten samý CSS styl můžeme aplikovat třeba na 100 stránek a všechny budou vypadat stejně. Když se rozhodneme něco změnit, změníme jednu řádku ve stylu a změny se samy projeví na všech stránkách. CSS k sobě přesouvá veškeré stylování HTML dokumentu, kód se tedy čistí, je přehledný a odpadají duplikace.

Dal jsem si záležet, abych vám názorně ukázal, že používat CSS je nutnost a že do HTML prostě styly nepatří. Tyto tutoriály píši tak, jak se píše moderní web nyní, ne, jak se psal před X lety a jak se můžete chybně dočíst v jiných a starých návodech na internetu.

Ukážeme si ještě, jak by vypadal ten samý dokument s použitím CSS:

<body>
    <h1>Web využívající CSS</h1>
    <p>Když chci všechny nadpisy na stránce tmavě modré a centrované, jednoduše styl jednou definuji v souboru CSS. Můj HTML kód je čistý a styl je zapsán pouze jednou a platí pro všechny nadpisy.</p>

    <h2>Další nadpis</h2>
    <p>Nadpis výše se sám ostyloval, jelikož to bylo jednou pro všechny nadpisy definováno v CSS.</p>

    <table>
        <tr>
            <td>Tato tabulka</td>
            <td>obsahuje</td>
        </tr>
        <tr>
            <td>jen definici tabulky</td>
            <td>a text.</td>
        </tr>
    </table>

    <br />

    <table>
        <tr>
            <td>Tato tabulka je úplně</td>
            <td>stejně stylovaná, jako</td>
        </tr>
        <tr>
            <td>ta nahoře, jednoduše</td>
            <td>se použije ten samý styl.</td>
        </tr>
    </table>

    <h2>Dobré je</h2>

    <p>Že toto čtete a již tedy víte, jak se to dělá správně.</p>
    <p class="centrovany"><img src="obrazky/vesely.png" alt="Veselý" /></p>

    <p class="velky">Na ITnetwork se dočtete jak na to.</p>

    <p class="velky">Tento odstavec používá styl s větším textem, který je jednou definován v CSS.</p>
</body>

Výsledek:

Web s CSS

To je poměrně zásadní rozdíl, že? Porovnejte si kód ještě jednou s kódem výše. Určitě jste si také všimli atributů class, které přiřazují elementu nějaký styl, definovaný v externím CSS souboru.

V příští lekci, Základní CSS selektory a vlastnosti, si ukážeme použití CSS. Naučíme se jak barvit a zarovnávat text.


 

Předchozí článek
Řešené úlohy k 4.-5. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
101 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

Komentáře

Avatar
Mircosoft
Redaktor
Avatar
Mircosoft:24.8.2011 11:56

Skvělý odstrašující příklad :).

Ještě jedna nesémantická hrůza do sbírky:
(br)
(center)(font size="6")Hlavní nadpis(/font)(/cen­ter)
(br)

 
Odpovědět
24.8.2011 11:56
Avatar
xM4tHeWx
Redaktor
Avatar
xM4tHeWx:27.8.2011 12:55

krásny tutorial moc díky idem si prečítat aj dalšie :)

 
Odpovědět
27.8.2011 12:55
Avatar
kozzyCZech
Neregistrovaný
Avatar
kozzyCZech:30.1.2012 15:20

ahoj :) super a diky :) html uz se nejakou kratsi dobu venuji a vzdy kdyz sem zkousel co uz umim tak sem to delal vse jen v html ale diky tomuhle tutorialu uz sem pochytil tu strukturu CSS a jak vubec funguje :) driv sem se ho dost bal kdyz sem zkoumal ruzny weby a projizdel sem CSS tak tam toho bylo mraky a vzdy sem se toho bal :) ale dnes vidim ze to je jednoduchy jako v html :) fakt diky moc :)

 
Odpovědět
30.1.2012 15:20
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na kozzyCZech
David Čápka:30.1.2012 17:37

Nemáš zač, snažil jsem se celý seriál psát co nejjednodušeji, aby výsledkem byl moderní web :) Určitě se podívej i na další část o CSS.

Odpovědět
30.1.2012 17:37
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
jindral
Redaktor
Avatar
Odpovídá na Mircosoft
jindral:22.6.2012 20:45

Takhle mam udělanej svuj web :D po pár dnech úprav jsem se rozhodnul že se naučim CSS :D

Odpovědět
22.6.2012 20:45
Life's just a dream.
Avatar
daniel.ruzicka:22.6.2012 21:53

CSS je nutnost,i když ale některé věci je zbytečné psát do style.css,nap­ř:centrování-

<center></center>

,ale kdo chce mít v tom lepší pořádek,tak do style.css

 
Odpovědět
22.6.2012 21:53
Avatar
daniel.ruzicka:22.6.2012 21:56

CSS není nijak těžšký,nejdříve ale ten první pohled na něj byl hrozný,nevyznal jsem se v tom,takže jsem se na něj vykašlal....pak jsem ho nutně potřeboval,no a během pěti minut jsem se tam vyznal ve všem(to co jsem potřeboval)

 
Odpovědět
22.6.2012 21:56
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na daniel.ruzicka
David Čápka:23.6.2012 9:48

Tag center je nevalidní, funguje jen z důvodu kompatibility. Je z dob, kdy se ještě formátovalo jiným způsobem.

Odpovědět
23.6.2012 9:48
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
daniel.ruzicka:25.6.2012 21:23

Právě,to je ten Html3 :D

 
Odpovědět
25.6.2012 21:23
Avatar
daniel.ruzicka:25.6.2012 21:32

jinak teď nevím,co dělat...web mám celkem pěkný,ale sdílet ho ještě dlouho nebudu,než bude dokončený...HTML a CSS je dobrý jazyk,ale to je základ,takže jsem se vrhnul na jiný - PHP,ten mě nějak moc neuchytl a jediné co si pamatuji je:

<?php
echo ('Hello world')
?>
:)
 
Odpovědět
25.6.2012 21:32
Avatar
Kit
Redaktor
Avatar
Odpovídá na daniel.ruzicka
Kit:26.6.2012 6:53

Značka center do HTML nepatří, protože se stará o fyzické formátování. Pokud bych časem chtěl změnit vzhled celého webu, musel bych modifikovat obsah všech souborů HTML.

Odpovědět
26.6.2012 6:53
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
is3l0r
Člen
Avatar
is3l0r:9.7.2012 23:54

Úžasné tutoriály dělané přesně na mě. Web jsem se učil tvořit někdy před cca 5 lety a od té doby jsem to zapomněl, ale stále si pár věcí pamatuji.
Tady se vždy dovím, jak to udělat a vzpomenu si na "starý způsob" a hned se mi vybaví proč je to tu jinak.
Jenže o řádek níže je právě ten "starý způsob" hned zmíněný a je k němu i vysvětlení proč se to již tak nedělá. Vážně super a moc chválím. Díky 8-)

 
Odpovědět
9.7.2012 23:54
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na is3l0r
David Čápka:10.7.2012 8:06

Díky, jsem rád, že se líbí :) V sekci HTML a CSS vzniká kromě tuhoto seriálu také HTML manuál s přehledem nových tagů.

Odpovědět
10.7.2012 8:06
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:20.10.2012 11:01

Tento článek slouží jen jako předmluva k CSS, není tam kompletní kód, je to jen příklad. Jak se to dělá se dočteš dále.

Odpovědět
20.10.2012 11:01
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:21.5.2013 15:07

kde bereš ty obrázky ? :D

Odpovědět
21.5.2013 15:07
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:21.5.2013 15:09

V seriálu to přesně popisuji, přečti si ho odznovu, celé jsem to aktualizoval :)

Odpovědět
21.5.2013 15:09
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:21.5.2013 15:11

Myslím, že zůstanu u svého nevalidního způsobu psaní :D

Odpovědět
21.5.2013 15:11
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
matesax
Redaktor
Avatar
matesax:23.5.2013 17:35

Mě zde štve neustálé sebepropagování. Copak si skutečně myslíš, že neexistuje jiná stránka co by v dnešní době neučila tvořit s CSS? Chápu, že komunita znamená mít členy, ale tohle začíná být demagogické...

 
Odpovědět
23.5.2013 17:35
Avatar
Kit
Redaktor
Avatar
Odpovídá na matesax
Kit:23.5.2013 17:48

Klídek. Kdybych to měl brát stejně, asi bych se zbláznil. Každý člověk má své názory, za kterými si stojí, ale hádat se pro ně za každou cenu nemá smysl. Zejména pokud za to nejsi placený :)

Odpovědět
23.5.2013 17:48
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na matesax
David Čápka:23.5.2013 17:55

Kdybychom věci nedělali dobře, nebyli bychom tam, kde jsme teď. Zdá se, že ty návody o kterých mluvíš opravdu jinde nejsou. Nevidím důvod, proč v ukázce nenapsat, že tu děláme věci správně. Navíc to vidím jako velmi důležité, jelikož si vzpomeň, kolik lidí sem chodí a má ve stránkách tagy jako font a podobně, co přečetli někde na 10 let starém webu typu jakpsatweb a podobně.

Odpovědět
23.5.2013 17:55
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
matesax
Redaktor
Avatar
Odpovídá na Kit
matesax:23.5.2013 17:57

Já v klidu jsem - manipulaci mezi řádky přehlédnu, ale jak píši - když to začíná být demagogické...

 
Odpovědět
23.5.2013 17:57
Avatar
Jiří Šedý (jsedy7):5.8.2013 14:40

Tvé návody se mi líbí :) Já většinou dával větší prioritu aplikačnímu programování, ale díky tobě tímto snadno a velmi rychle postupuji vpřed. :)
Trošku postrádám třeba návody takové, že třeba vytvořím si design v Photoshopu a jak dál s tím souborem pracovat, abych vytvořil takový i web. Aby z toho nebyl jen obrázek nějakého konceptu.

Každopádně od něčeho se začínat musí a já tedy procházím tvými návody a cvičím na tvých příkladech.
Jen pokračuj v návodech pro psaní moderního webu. :)

Odpovědět
5.8.2013 14:40
Musíš se mnoho učit, abys poznal, že málo víš...
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Neaktivní uživatel:5.8.2013 14:58

To by byly články spíše ke grafice, s HTML a CSS to v podstatě nesouvisí :) Ale možná bych něco na ten způsob mohl zkusit sepsat ...

Odpovědět
5.8.2013 14:58
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Jiří Šedý (jsedy7):5.8.2013 15:01

Pokud jsi něco takového dělal, tak budu moc rád. Já bych řekl, že to maličko souvisí s HTML a CSS. Mě nepřijde těžké navrhnout takový design. Já jen nevim jak ho použít na webu. Říká se, že se dají jednotlivé vrstvy nějak využít tím, že se rozmístí na web a vlastně je z toho taková skládanka. Jen já moc netuším, jak začít. Kdyby jsi, měl čas udělat nějaký návod, budu moc rád :)

Odpovědět
5.8.2013 15:01
Musíš se mnoho učit, abys poznal, že málo víš...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Honza Bittner:5.8.2013 16:02

Nejdříve se nauč dobře HTML a CSS, pak ti půjde tvorba šablony například z .psd taky dobře :)

Odpovědět
5.8.2013 16:02
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Neaktivní uživatel:7.8.2013 8:28

Nepočítej s tím, že dostaneš návrh s vrstvami. Občas je grafik prase a dá ti psdčko s jednou vrstvou, když je to gurmán tak třeba jenom jpeg :) Zkusím něco vymyslet a sepsat.

Odpovědět
7.8.2013 8:28
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Jiří Šedý (jsedy7):7.8.2013 8:56

Nepotřebuju návrh s vrstvami, ten si klidně udělám sám. To mi přijde jednoduché :) jen si neumím představit jak ten návrh použít pro tvorbu hotového webu.

A dělat webovky z JPEG musí být lahůdka. Člověk to zabere minimálně půl hodiny práce na zpracování grafiky na nějakou použitelnou podobu. A to nemluvím ještě o kvalitativních ztrátách.

Když jsem dělal návrhy já, tak v PSD jsem měl vrstvu ke všemu. Taky jsem neviděl důvod proč to slučovat. Jen můj problém je a zatím i bude nakódění webovek tak, aby byla použita grafika z PSD. Stačí mi princip tvorby nějaký jednoduchý stránky, se zbytkem bych se mohl pokusit maličko pohrát. :)

Odpovědět
7.8.2013 8:56
Musíš se mnoho učit, abys poznal, že málo víš...
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Neaktivní uživatel:7.8.2013 8:59

Ne, udělat návrh není jednoduché. To bude taky jeden z důvodů, proč webdesigner dostane za web třeba 40 tisíc a koder jen 5 ...

Odpovědět
7.8.2013 8:59
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Jiří Šedý (jsedy7):7.8.2013 9:04

Tak v tom případě buď něčemu hodně špatně rozumím a nebo nevím.
Takže vytvořit obrázek (když to tak nazvu) s rozložením prvků webu není snadné?

V příloze je jedna z mých návrhů na design webové stránky. Ber to s rezervou jak to vypadá. :)

Potřebuju prostě pochopit, co myslíš tím, že to není tak jednoduché, tvořit webdesign. :)

Odpovědět
7.8.2013 9:04
Musíš se mnoho učit, abys poznal, že málo víš...
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Neaktivní uživatel:7.8.2013 9:17

Nemyslel rozložení webu, myslel jsem, aby to nevypadalo jako opičí p*del :)

Editováno 7.8.2013 9:20
Odpovědět
7.8.2013 9:17
Neaktivní uživatelský účet
Avatar
Kit
Redaktor
Avatar
Odpovídá na Jiří Šedý (jsedy7)
Kit:7.8.2013 9:54

Design navržený v PS je použitelný pro web pouze jako návrh. Kodér ho musí celý přepsat a musí vědět jak.

Odpovědět
7.8.2013 9:54
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
SandMan
Člen
Avatar
SandMan:24.11.2013 14:53

Divné je, že když to napíšu v HTML 3 tak mi to ukazuje stejný výsledek jako máš ty, ale když to udělám pomocí HTML 5 tak je pozadí bílé. Nevycentrované odstavce. :)) Nevěděl by mi někdo poradit?

Odpovědět
24.11.2013 14:53
Život je jako cesta do kurníku. Krátká a posraná.
Avatar
Odpovídá na SandMan
Neaktivní uživatel:24.11.2013 21:59

Nevidíme kód, takže takhle asi ne :)

Odpovědět
24.11.2013 21:59
Neaktivní uživatelský účet
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
SandMan
Člen
Avatar
Odpovídá na Neaktivní uživatel
SandMan:28.11.2013 16:39

Zkopíroval jsem kód autora tohoto článku :))

Odpovědět
28.11.2013 16:39
Život je jako cesta do kurníku. Krátká a posraná.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na SandMan
Zdeněk Pavlátka:28.11.2013 16:50

HTML5 neobsahuje některé zastaralé tagy.

Odpovědět
28.11.2013 16:50
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
mkub
Redaktor
Avatar
Odpovídá na SandMan
mkub:28.11.2013 16:53

HTML3 sa uz nikde nepouziva, je to uz velmi zastaraly standard

 
Odpovědět
28.11.2013 16:53
Avatar
ondra7cz
Člen
Avatar
ondra7cz:26.7.2014 21:07

Ahoj chtel bych se zeptat proč i po zkopirovani mam obyčejný web bez css3

 
Odpovědět
26.7.2014 21:07
Avatar
adder
Člen
Avatar
Odpovídá na ondra7cz
adder:26.7.2014 21:23

Máš v hlavičce?

<head>

<link rel="stylesheet" href="misto ulozeni css souboru" type="text/css" />

</head>
Odpovědět
26.7.2014 21:23
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Odpovídá na ondra7cz
Neaktivní uživatel:26.7.2014 21:30

Chybí ti celá hlavička :)

Odpovědět
26.7.2014 21:30
Neaktivní uživatelský účet
Avatar
ondra7cz
Člen
Avatar
 
Odpovědět
26.7.2014 21:33
Avatar
ondra7cz
Člen
Avatar
Odpovídá na adder
ondra7cz:26.7.2014 21:33

Díky :)

 
Odpovědět
26.7.2014 21:33
Avatar
ondra7cz
Člen
Avatar
ondra7cz:26.7.2014 21:36

No i když jsem přidal tu hlavičku pořád to nemam modry a vycentrovany na střed a tabulky jsou take uplne jine

 
Odpovědět
26.7.2014 21:36
Avatar
Odpovídá na ondra7cz
Neaktivní uživatel:26.7.2014 21:39

Ukaž nám tvůj html soubor, ukaž nám tvůj css soubor a napiš nám název css souboru :)

Odpovědět
26.7.2014 21:39
Neaktivní uživatelský účet
Avatar
ondra7cz
Člen
Avatar
ondra7cz:26.7.2014 22:13

css soubor nemam, ten v příkladu neni, ne ?

 
Odpovědět
26.7.2014 22:13
Avatar
adder
Člen
Avatar
Odpovídá na ondra7cz
adder:26.7.2014 22:43

máš pravdu, přečti si článek dokonce :). autor píše

Jak tedy vypadá a funguje onen magický CSS soubor, který nám sám HTML takto ostyluje? To se dozvíte příště
Odpovědět
26.7.2014 22:43
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Adéla Marková:26.5.2016 17:59

Děkuji za turtoriál :-)

 
Odpovědět
26.5.2016 17:59
Avatar
Hraju Hry
Člen
Avatar
Hraju Hry:1.12.2016 20:07

Děkuji pomohlo, ale v odstavci CSS kde je to napsané na prvním řádku "napatří". Ale nechci být puntičkář. Moc vám děkuji s pomocí !!!

 
Odpovědět
1.12.2016 20:07
Avatar
Marek Laušman:14.1.2017 16:47
:)
 
Odpovědět
14.1.2017 16:47
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Hraju Hry
David Čápka:4.5.2017 13:03

Díky, opraveno :)

Odpovědět
4.5.2017 13:03
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Patrik Weber
Člen
Avatar
Patrik Weber:15.10.2017 12:19

Evidentně měli tenkrát na práci více času :D

 
Odpovědět
15.10.2017 12:19
Avatar
Peter Butora
Člen
Avatar
Peter Butora:10.1.2018 18:58

Děkuji za článek,
škoda že není ten CSS soubor :D

Odpovědět
10.1.2018 18:58
Péťa
Avatar
Ján Dorínsky:4.2.2018 21:04

Pekne napísané. Vrátil som sa do tých 90tych rokov kedy som začínal s netom a aj s html na strednej. Bola to katastrofa. K tomu sa pridala vyučujúca ktorá mala aké také znalosti no času a príležitosti bolo málo. Doma PC bola rarita, stálo v tedy cca 50 000 Sk a bolo to nejaká 486, takže som sa z rôznych dôvodov na to vykašľal ... škoda. Hádam sa tu naučím niečo viac. Zatiaľ sú tie návody super, len byť vytrvalý. Elán tu je :-P Tak veľa zdaru všetkým kto sa chce niečo naučiť a niekam dotiahnuť a tvorcom lektorom ďakujem za super odvedenú prácu

 
Odpovědět
4.2.2018 21:04
Avatar
Filip Vondricka:23.7.2018 23:40

zdravim, pokud chci pracovat v css, musim pri vytvoreni v pspadu, kdyz otevru novy dokuent zvolit css, nebo html a vyplnit lang jinak nez normalne v html UTF-8?

 
Odpovědět
23.7.2018 23:40
Avatar
Odpovídá na Filip Vondricka
Jaroslav Patrný:24.7.2018 2:18

Ahoj, v indexu.html se musíš na CSS styly napojit, to znamená, že do hlavičky (<head></head>) napíšeš

<link rel="stylesheet" href="styl.css" type="text/css" />

přičemž styl.css je soubor s CSS kódem, založíš ho např. v PSPadu jako CSS, žádnou hlavičku tam nepíšeš, obsahuje pouze selektory a vlastnosti. Víc se dozvíš v dalších lekcích.

 
Odpovědět
24.7.2018 2:18
Avatar
Filip Vondricka:24.7.2018 8:24

To znamena že nepisu úplně e nahoru jako v indexu.html...
<!DOCTYPE html>

<html lang="cs-cz">
Dekujj

 
Odpovědět
24.7.2018 8:24
Avatar
Jaroslav Patrný:24.7.2018 14:21

Hned nahoru napíšeš první selektor a vlastnosti, např.

h1 {
    text-align: center;
    ....
    ....
   }
 
Odpovědět
24.7.2018 14:21
Avatar
Odpovídá na Filip Vondricka
Reaktivní uživatel:24.7.2018 14:30

Co tak abys příště místo dotazů pokračoval na další díl? Ono je to totiž mockrát i jednodušší.

Odpovědět
24.7.2018 14:30
Kdo je připraven, toho zaskočí něco jiného
Avatar
Dávid Bóna
Člen
Avatar
Dávid Bóna:6.11.2018 20:13

Ďakujem za ďalší super članok :) vedomosti sa zbieraju

 
Odpovědět
6.11.2018 20:13
Avatar
Jan Karas
Člen
Avatar
Jan Karas:24.11.2018 19:18

boží web....

 
Odpovědět
24.11.2018 19:18
Avatar
Vlada
Člen
Avatar
Vlada:11.4.2019 16:30

Díky (y)

 
Odpovědět
11.4.2019 16:30
Avatar
Ondřej Matýs:25.4.2019 13:57

Super srovnání

 
Odpovědět
25.4.2019 13:57
Avatar
MiroslavP
Člen
Avatar
MiroslavP:3.8.2019 20:43

dobrota :-)

 
Odpovědět
3.8.2019 20:43
Avatar
Nikola Tomášková:26.10.2019 0:36

Díky mockrát :)

Odpovědět
26.10.2019 0:36
Je čas z nemožného udělat možným.
Avatar
Ladislav Guldan:26. března 17:39

Nedá sa platiť zo Slovenska kartou?

 
Odpovědět
26. března 17:39
Avatar
Jakub Šprysl:28. dubna 23:17

Tak tohle nemá chybu, velký díky! Po 4 dnech tady si myslím, že znám více, než s aplikací v telefonu která je děsně nesrozumitelná, alespoň pro mě...

 
Odpovědět
28. dubna 23:17
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 65 zpráv z 65.