Selektory

Seskupení

Pokud budete chtít aplikovat styly několika elementům, můžete je seskupit a přiřadit jim stejný stylopis.
Jednotlivé selektory oddělujeme čárkou.

h1, h2, h3, h4, h5, h6 {color: red}

Dědičnost

O dědičnosti se můžete dočíst na mnoha serverech, pro pořádek uvádím, že například barva písma definovaná v "body" elementu se aplikuje na všechen text v odstavcích uzavřených elementem <body>.
Výjimkou jsou ale některé případy, jako např. margin-top. Na odstavec se budou v tomto případě aplikovat jiná pravidla než na "body" element.

Univerzální selektory

Pomocí univerzálního selektoru lze aplikovat styly na všechny dědičné selektory.
Označení: *

<head>
 <title>Univerzalni selektor</title>
  <style type="text/css" >
    * {color: blue}
  </style>
</head>

Selektory třídy

Zde se aplikují styly uřčené selektorům označeným třídou "class", popřípadě konkrétním elementům, na které chceme styl aplikovat.

<head>
 <title>Selektor třídy</title>
  <style type="text/css" >
    .green {color: green}
   p.red   {color: red}
  </style>
</head>
<body>
 <h1 class="green">Nadpis zelený</h1>
 <p class="red">Červený text.</p>
</body>

Selektory pseudotřídy

Je možno použít i tzv. selektory pseudotřídy k definování vzhledu odkazů, jak budou vypadat před a po navštívení uživatelem.
Mohou být aplikovány jen pro elementy <a>, <q> a <blockquote>. Pokud nejsou "zalinkovány", pravidlo se na ně nevztahuje.

<head>
 <title>Selektor pseudotřídy</title>
  <style type="text/css" >
    a:link {font-size: larger}
    a:visited {font-size: smaller}
  </style>
</head>

ID elektory

Zde plstí podobné pravidlo jako s selektory třídy, jen je třeba mít na paměti, že ID na jedné stránce je unikátní.

<head>
 <title>ID Selektor</title>
  <style type="text/css" >
    h1#h1-01 {color: green}
      #a0023 {color: red}
  </style>
</head>
<body>
 <h1 id="h1-01">Nadpis zelený</h1>
 <p id="a0023">Červený text.</p>
</body>

Hledání

Google
Web wapway

Doporučujeme

Solná jeskyně

Kykovo blog

Truhlářství Kralupy

Topení Vávra

Poptávky zdarma