Úvod do CSS | Tutorialy.com - tvorba webu, photoshop, grafika, programování

Reklama

Úvod do CSS

CSS = Cascading style sheet = Kaskádové styly

Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Dnes máme dva různé způsoby jak fomátovat:

Pomocí HTML značek (například <i> kurzíva </i>), které se dnes již považují za zastaralé. V kódu moderního webu tyto značky již určitě nenajdete, protože pomocí nich prostě některé věci neuděláme.
Kaskádovými styly, které jsou sice trochu složitější, ale nabízejí velmi široké spektrum možností.

Kaskádové styly tedy vlastně slouží k formátování obsahu HTML. Formátováním máme na mysli třeba barvu a velikost písma, pozadí, zarovnání, formátování nadpisu atd.

Zápis kaskádových stylů

Máme hned několik možností jak zapisovat CSS do HTML. Je na vás, který si vyberete. Mě osobně příjde nejlepší zápis stylopisem do hlavičky, protože je nejpřehlednější a snadno se upravuje.

Přímý zápis
HTML tagům se přímo zapisují styly.

<div style="width: 200px; align: center">Formátovaný blok</div>

Tento blok bude mít šířku 200px a bude zarovnaný na střed.

Stylopisem
CSS se zapisuje do hlavičky HTML dokumentu mezi tagy <style></style>

<html>
  <head>
  <title>Jméno webu</title>
  <style>
   div {width: 200px; align: center}
  </style>
  </head>
  <body>
   Obsah webu
  </body>
</html>

Následně budou všechny bloky mít šířku 200px a budou zarovnané na střed.

Externím stylopisem
Styly se zapisují do nového souboru, který si pojmenujem třeba style.css.

div {width: 200px; align: center}

V hlavičce HTML dokumentu ještě musíme odkázat na stylopis.

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

Opět všehny bloky budou mít šířku 200px a budou zarovnané na střed.

Vlastní styly

V HTML existuje jenom málo podporovaných tagů, například nadpisy, seznamy, nebo definice. Tyto tagy se dají pomocí CSS přizpůsobit k obrazu svém (třeba jako blok v příkladech nahoře). Aby si tvůrce webu mohl opravdu dělat „co chce“, existuje v CSS možnost vytvoření vlastních stylů.

Je několik možností jak zapisovat vlastní styly:

Pomocí tříd .nazev {vlastnosti}. Při zápisu pomocí tříd se element se stejnou vlastností může v HTML dokumentu vyskytoval mnohokrát.
Pro jednoznačný popis elementu, který se na stránce vyskytuje jen jednou se používá identifikátor #nazev {vlastnosti}
Jestliže chceme hromadně nadefinovat několik elementů najednou použijeme hromadnou deklaraci h1, h2, h3 {vlastnosti}
Kontextová deklarace – příklad: h1 a {color: blue}. Tato deklarace znamená, že všechny odkazy v nadpisu H1 budou mít modrou barvu.

Na ukázku si vytvoříme třídu „modrepismo“.

.modrepismo {color: blue}

V HTML dokumentu určíme, že text patří do třídy „modrepismo“, zápis vypadá takhle:

<span class="modrepismo">modré písmo</span>

A v prohlížeči se zobrazí krásně modré písmo.

Hodnocení tutoriálu: 1.4 (hodnotilo 91 uživatelů)