Tomáš Daněk

Způsob zobrazení – display

Skrytý element na stránce nezabírá žádné místo.

h1 {display: inline;} /* zobrazi se jako radkovy element */
#menu a {display: block;} /* zobrazi se jako blokovy element */
.hidden {display: none;} /* nezobrazi se */

Viditelnost – visibility

Skrytý element na stránce stále zabírá své místo.

.skryt {visibility: hidden;}
.zobrazit {visibility: visible;}

Přetečení – overflow

Určuje jakým způsobem zacházet s obsahem, který se do elementu nevejde:

• visible – přetékající obsah se zobrazí
• hidden – přetékající obsah se nezobrazí
• scroll – posuvníky se zobrazí vždy
• auto – posuvníky se zobrazí pouze v případě nutnosti

pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

Samostatně lze zadávat i jednotlivé směry:

p {
  width: 100px;
  height: 100px;
  overflow-y: auto;
  overflow-x: scroll;
}

Pozice – position

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static:

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative:

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je posunut z původního umístění jedním nebo více směry.
3. Původní prostor po elementu zůstane zachován.
4. Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute:

1. Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
3. V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed:

1. Obsahovým blokem je zobrazovací obslat prohlížeče.
2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
3. Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

IE6- vyhodnocuje fixní umístění jako absolutní.

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* levy roh se umisti na stred nadrazeneho elementu */
}

Horní vzdálenost – top

Vzdálenost horního vnějšího okraje relativně či absolutně pozicovaného elementu od horního vnitřního okraje nadřazeného elementu.

#links {
  position: absolute;
  top: 0;
}

Pravá vzdálenost – right

Vzdálenost pravého vnějšího okraje relativně či absolutně pozicovaného elementu od pravého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  right: 0;
}

Spodní vzdálenost – bottom

Vzdálenost spodního vnějšího okraje relativně či absolutně pozicovaného elementu od spodního vnitřního okraje nadřazeného elementu.

#footer {
  position: absolute;
  bottom: 0;
}

Levá vzdálenost – left

Vzdálenost levého vnějšího okraje relativně či absolutně pozicovaného elementu od levého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  left: 10px;
}

Vrstva – z-index

Umístění absolutně pozicovaného elementu do vzdálenější (nižší číslo) nebo bližší vrstvy (vyšší číslo).

h1 img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

Ořez – clip

Ořízne absolutně pozicovaný element.

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* souradnice z leveho horniho
   rohu */
}

IE6- neumí oříznout pozadí, ale pouze obsah elementu

Plovoucí pozice – float

1. Obsahovým blokem je nejbližší nadřazený blokový element.
2. Blok elementu je možné umístit vlevo nebo vpravo v rámci obsahového bloku.
3. Následujícímu obsahu je umožněno, aby element v plovoucím umístění obtékal zprava nebo zleva.
4. Plovoucí blok elementu se snaží umístit co možná nejvýše v rámci svého obsahového bloku.
5. V nové pozici plovoucí blok ovlivňuje pozice následujících elementů v normálním toku dokumentu.
6. Původní pozice je uvolněna pro další elementy.

Hodnoty:

• left – umístí element vlevo a umožní dalšímu obsahu, aby jej obtékal zprava
• right – umístí element vpravo a umožní dalšímu obsahu, aby jej obtékal zleva
• none – běžný tok dokumentu (zrušení plovoucí pozice)

img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

Ukončení obtékání – clear

Určuje stranu, ze které se ukončí obtékání.

.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

Příklad stylování prvku blockquote

<blockquote>
  <p>Text text text text...</p>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>

blockquote {
  position: relative;
  text-align: justify;
}
blockquote p:before,
blockquote p:after {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  content: '„';
  font-size: 60px;
  color: #eee;
}
blockquote p:before {
  float: left;
  margin: -46px 0 0 -45px;
}
blockquote p:after {
  float: right;
  margin: -18px -50px 0 0;
  content: '“';
}

Sloupce

Rozdělení obsahu (např. nečíslovaného seznamu) na definovaný počet sloupců

ul.columns3 {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  -moz-column-rule:4px outset #f00; /* Firefox */
  -webkit-column-rule:4px outset #f00; /* Safari and Chrome */
  column-rule:4px outset #f00;
}