magazín
odkazy

CSS

Před tím než začnete s CSS byste již měli dobře znát html nebo xhtml. CSS kaskádové styly se používají k úpravě obsahu html stránky. Jejich možnosti jsou téměř neomezené. Dokáží formátovat text a pozadí, používat barvy, upravovat velikost a zarovnání jednotlivých tagů v html stránce.


Do HTML je můžete zapisovat třemi způsoby:

  • Přímo do tagu v html
  • Určit je v tagu styl v hlavičce stránky
  • Určit je v externím souboru připojeném k stránce

Přímo do tagu jej zapisujeme pomocí příkazu style = "". V příkazu style určíme CSS styly pro tento tag. V HTML to může vypadat nějak takto:

<p style="color: red;"> Text červeným písmem </ p>

Tento zápis je ze všech zápisů nejméně používá. Příkaz color: red znamená, že barva písma bude červená (color-barva, red-červená).


Zápis v tagu <style> se používá trochu více než zápis přímo do tagu a vypadá nějak takto:

<head>

<style>

</style>

</head>

<p> Text s červeným písmem </p>


Posledním a nejpoužívanějším zápisem je zápis do externího souboru. V html se už jen připojí tento soubor do hlavičky. Príklad:

Externí soubor - soubor.css

p (color: red)

HTML webová stránka

<head>

<link rel="stylesheet" href="soubor.css">

</head>

<p> Text s červeným písmem </p>

Jak vidíte externí soubor se připojí do html pomocí tagu link. Do tagu link umístíme příkazy rel = "stylesheet", což znamená že zadáváme cestu k CSS kaskádovým stylem. Další příkaz href obsahuje cestu k souboru, kde se nacházejí CSS styly.

Po ukázce jak se CSS mohou vložit do html si ukážeme jejich syntaxi. Syntaxe si můžeme ukázat na příkladu V příkladu je vidět že po slově color se nachází dvojtečka, ta odděluje příkaz color od jeho hodnoty red. Na konci každého příkazu se nachází středník. Ta zase odděluje jednotlivé příkazy i s hodnotami od sebe. Příkaz Background-color s hodnotou blue znamená, že pozadí tagu p bude modré. Color: red znamená, že písmo v tagu p bude červené.

p (color: red; background-color: blue;)


Nahoru ↑

www.webtvorba.cz

www.jaknaweb.cz

www.interval.cz

www.builder.cz

www.jakpsatweb.cz

Ověřit CSS! Valid XHTML 1.0 Strict

Copyright © 2010 Hosman Ondřej