30.08.2006 | Radek | | Programujeme | Žádné komentáře | 

CSS styly – úvod

V dnešním článku si povíme něco o technologii CSS – technologii pro formátování webových stránek.

Tak jako normální stránka má formu a obsah, webová stránka má podobně také
formu (vizuální vzhled stránky) a obsah (samotné texty uvedené na webové
stránce). Samotný jazyk HTML má pro formátování textu vlastní, i když
místy dost neobratné prostředky, jak jednoduchého formátování dosáhnout. To jsou
například značky <i> pro skloněné písmo nebo <b> pro písmo tučné. Styly CSS
naopak tomu používají úplně jiný způsob formátování, který se zapisuje do
samostatné definice. Je to sice oproti HTML složitější, ale při větším
počtu stránek rozhodně lepší.

A co vlastně vše jde v CSS dělat?

  • Zformátovat nadpisy pro všechny stránky najednou
  • Nastavit pozadí stránky, tabulky, buňky a všeho ostatního, co může mít
    pozadí
  • Nastavit si vlastní vzhled rolovacích lišt
  • Všemožně formátovat písmo – o mnoho více než v HTML
  • Zvýrazňovat odkazy při přejetí kurzorem myši
  • Vytvořit vlastní odrážky pro odrážkový seznam
  • Zprůhlednit, zviditelnit a naopak zneviditelnit části stránky
  • A ještě mnoho a mnoho dalších vychytávek

Jak je vidět, dokáží toho CSS styly daleko více, než obyčejné HTML.
A jak se takové styly ve stránce používají a odkud se berou? Jsou tři možnosti,
jak na webovou stránku CSS styly dostat:

  1. Pomocí tzv. sylopisu přímo v hlavičce stránky. Píše se do sekce <head>
    mezi značky <style>
  2. Přímo v elementu pomocí atributu style="…"
  3. Použitím externího stylopisu, který je uložen v souboru styly.css

1. Styly pomocí stylopisu v hlavičce stránky

Do sekce <head> vložíte mezi značky <style> a </style>
např. toto: (modré tučné písmo):

{
   p {color: blue;
font-weight:bold;
}

2. Pomocí atributu style v elementu

<p style="color:blue; font-weigth:bold;">Modrý tučný text</p>

3. Pomocí externího stylopisu

Do souboru styly.css (soubor si můžete pojmenovat podle sebe, přípona
však musí být css) napíšete:

p {
   color: blue;
   font-weight:bold;
   }

a pak do stránky stylopis naimportujete pomocí odkazu:

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

Ve všech třech případech bude text mezi značkami <p> a </p> modrý a tučný

A to je o CSS stylech pro dnešek vše. Příště si ukážeme názorně, jak pomocí
stylů formátovat text a elementy na webové stránce





Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *


Novinky a oznámení

15.10.2016 - Do menu byla přidána nová sekce Stream, kde naleznete jak veškěré informace ohledně Fantomasmag TV, což jsou online streamy na Twitch.tv, tak i přímo online stream a chat.

Partnerské weby

Statistika

Naši fanoušci na Facebooku

Další...