Výuka Informatiky - WWW - Publikování na WWW

<< Rozložení obsahu | WWW - obsah | Přístupnost webu >>

Základní pojmy

CSS - Cascading Style Sheets - česky "kaskádové styly"

- systém pravidel pro úpravu designu webových strínek

- pravidla lze seskupovat do tzv. kaskád

Aplikace CSS

1. Přímý zápis stylu

zápis do HTML zdroje pomocí atributu style

<p style="color: red">Tento odstavec bude červený.</p>

<span style="color: #00ff00">Tato část textu bude zelená.</span>

<span style="color: #0000ff">Tato část textu bude modrá.</span>

<div style="background-color: silver; text-align: center">Šedý centrovaný blok</div>

<p style="color: red">Tento odstavec bude červený.</p> <span style="color: #00ff00">Tato část textu bude zelená.</span> <span style="color: #0000ff">Tato část textu bude modrá.</span> <div style="background-color: silver; text-align: center">Šedý centrovaný blok</div>

2. Interní definice v hlavičce stránky

využití tagu <style></style>
syntaxe zápisu

<style> 
selektor1 {vlastnost1: hodnota; vlastnost2: hodnota;}
selektor2 {vlastnost1: hodnota; vlastnost2: hodnota;}
</style>

příklad začlenění definice do hlavičky

<head>
  <style>
    p {line-height: 200%;} /* tag odstavec - dvojnásobné řádkování */
    .red {color: red;} /* třída (class) - červená barva textu */
    .pozadi-seda {background-color: #eeeeee;} /* třída (class) modrá barva pozadí */
    #blik {text-decoration: blink;} /* identifikátor (id) blikající text */
  </style>
  ...(další tagy v hlavičce dokumentu)
</head>

identifikace stylů v HTML kódu

<body>
    <p class="red">Odstavec s písmem červené barvy  - řádkování 200%
    <span class="pozadi-seda">pokračování odstavce - šedé pozadí</span>
    </p>
    <div class="pozadi-seda">blok textu - šedé pozadí textu - 
    <span id="blik">*** blikající text ***</span>
    </div>
  </body>

3. Externí definice v souboru CSS

definice externího souboru design.css v hlavičce stránky

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

příklad části souboru

body {
  font-family: Arial,sans-serif;
  line-height: 1.2em;
  font-size: 0.7em;	color: #333;
  }
p {
  padding-left: 4px;
  margin-top: 2px;
  margin-bottom: 3px;
  text-align: justify;
  }
a:link, a:visited {
  text-decoration: none;
  font-weight: normal;
  }
a:hover {
  text-decoration: underline;
  font-weight: normal;
  }

Formátování pomocí css

formát písma

<span style="font-family: Times New Roman, serif; font-size: 2em">Font Times</span>

<span style="background-color: #cccccc; color: red; font-weight: bold">Šedé pozadí, červené a tučné písmo</span>

<span style="font-family: Times New Roman, serif; font-size: 2em">Font Times</span> <span style="background-color: #cccccc; color: red; font-weight: bold">Šedé pozadí, červené a tučné písmo</span>