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

CSS – 1. lekceCSS – 1. lekce

 

CSS – 1. lekce

Google       zatím neprovedena       23. 5. 2005       23 314×

Co to je CSS? Proč je lepší je používat? ..

Reklama
Reklama

1.1 - Co je to CSS?

CSS, nebo-li Cascading Style Sheets, česky „kaskádové styly“, vzniklo kolem roku 1997. K čemu CSS slouží si teď rozebereme. Dejme tomu, že děláte HTML stránku, na které máte normální text a několik (např. 12) nadpisů h1. Chcete, aby se nadpisy zobrazily modrou barvou a fontem Verdana. Budete muset u každého nadpisu samostatně definovat font a barvu. Není to trochu nemotorné? Přiznejme si, že to minimálně hodně zdržuje a výsledný kód nevypadá zrovna nejlépe. Díky CSS jen nadefinujete, že všechny nadpisy h1 se mají zobrazit modře a fontem Verdana. A je to na jeden řádek!

Toto je nejjednodušší forma CSS. Později se dozvíte, jaké různé fígle se s CSS dají udělat a také se naučíte, jak CSS zapsat do externího souboru, což je to nejefektivnější řešení. Jen na okraj se ještě zmíním, že na světě je už i návrh CSS 2, o něco víc „hi-tech CSS“ :), ale v IE to prý moc nefunguje. Ono se taky není moc čemu divit, že?;)

1.2 - Jak se dá CSS deklarovat?

CSS se dá uvařit na několik způsobů. Konkrétně na tři.

Za prvé, můžete ho umístit hned k prvku, který chcete formátovat. To atributem style=“.....“. Tato varianta je hodně nešikovná a moc se nepoužívá.

Za druhé, dá se umístit do hlavičky celého kódu. Říká se tomu stylopis, angl. „stylesheet“. Tato varianta je už lepší a používá se tak, že se jednotlivé atributy vkládají mezi tágy <style> a </style>.

A do třetice všeho dobrého - je použití externího souboru (např. whizzzkey.css). Na samotné strance je jen odkaz (tág <link>). Tahle možnost je prakticky stejná, jako možnost druhá, rozdíl je v tom, že je externí a tím pádem může mít efekt na více stránek!

1.3 - Deklarace prakticky

1.3.a - Zápis přímý - dejte ho hned k textu, který chcete formátovat. Ukážeme si to u odstavce:

<p style="color: green">Cely tento odstavec bude zeleny.</p>

Pomoci stejného zápisu píšu nyní modrou. Ale jen tento odstavec.

1.3.b - Stylesheet - dáme ho pěkně do hlavičky celého dokumentu:

<style> p   {color: green} </style>

A všechny odstavce budou zelené.

1.3.c - Externí CSS soubor - Této variantě se budeme věnovat, až váš skill v CSS trochu stoupne, a doufám, že to bude brzy.

1.4 - Na závěr malý úkol

Vaším úkolem v první lekci je poslat mi zdroják, ve kterém jste aplikovali první dva způsoby používání CSS. Tak se snažte, budeme známkovat!

×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 se věnuje technologiím XHTML, CSS a JavaScriptu. Mezi další záliby patří 2D a 3D grafika.

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý