Identifikátor (id), třída (class) a kontextuální definice stylů

Máme-li ve stránce více bloků téže značky a mají-li být různě formátovány, musíme je odlišit pomocí parametru id nebo class nebo ve stylech využít kontextuální definice.

• Identifikátor (id) představuje jednoznačný název, žádný jiný prvek ve stránce nesmí mít stejné id.
• Třída (class) naproti tomu říká, že prvek patří do určité skupiny (třídy) prvků, mající společné vlastnosti stylů.
• Kontextuální definice stylu je založena na tom, že daný prvek leží uvnitř jiného prvku, zatímco ostatní prvky stejné značky leží v jiném rodičovském elementu. Kontextuální definice bývá často kombinována s třídami stylů.
• První, n-tý a poslední prvek ve skupině, vnořené v rodičovském prvku, mohou být v css stylech formátovány pomocí pseudotříd first-child, nth-child(n) a last-child.

div {
  /* vlastnosti pro všechny bloky div */
}
#prvni {
  /* vlastnosti pro jediný blok s id prvni <div id="prvni"> */
}
.sloupec {
  /* vlastnosti pro všechny bloky třídy sloupec <div class="sloupec"> */
}
.sloupec.barva {  /* zapsáno bez mezery! */
  /* vlastnosti pro všechny bloky mající obě třídy <div class="sloupec barva"> */
}

body > div {
  /* vlastnosti pro jediný blok div, který je vnořen přímo v body
}

.sloupce div {
  /* vlastnosti bloku div, který je uvnitř bloku třídy sloupce
     <div class="sloupec">
       <div></div>
     </div>
     vlastnosti, které zde nebudeme definovat, získá blok z obecné definice div
     nebo je zdědí z vlastností třídy sloupec */
}
.sloupce .banner {  /* zapsáno s mezerou! */
  /* vlastnosti bloku třídy banner, který je uvnitř bloku třídy sloupce
     <div class="sloupec">
       <div class="banner"></div>
     </div> */
}
.sloupce .banner:first-child {  /* dvojtečka zapsána bez mezery */
  /* vlastnosti prvního bloku třídy banner, který je uvnitř bloku třídy sloupce
     <div class="sloupec">
       <div class="banner">první banner</div>
       <div class="banner">druhý banner</div>
       <div class="banner">třetí banner</div>
     </div> */
}

Rozměry bloku

Celkové rozměry bloku standatně určují všechny tyto vlastnosti:

• width - vnitřní šířka bloku - šířka vlastního obsahu bloku (není-li určeno vlastností box-sizing jinak)
• height - vnitřní výška bloku - obdobně jako šířka
• padding - vnitřní okraj - odsazení obsahu bloku od okraje
• border - rámeček
• margin - vnější okraj

Grafické znázornění těchto vlastností

margin: 30px

border: 15px

padding: 20px

width: 150px
height: 60px

280px

220px

190px

150px

margin: 30px

border: 15px

padding: 20px

width: 150px
height: 60px

Vliv těchto vlastností na celkové rozměry bloku

150px

190px

230px

width: 150px
height: 60px
padding: 0px

width: 150px
height: 60px
padding: 20px

width: 150px
height: 60px
padding: 20px
border: 20px

Při stejných hodnotách width a height vidíme, jak se blok zvětšuje po přidání vnitřního okraje a rámečku.

Box-sizing

Způsob chápání rozměrů bloku mění vlastnost box-sizing. Není-li zadána, je implicitně nastavena na content-box, tzn. že width je šířka obsahu (content) a padding a border ovlivňují celkovou šířku bloku - viz výše.

Zásadní vliv box-sizing na chápání velikosti width

Při zadání box-sizing: border-box určuje width celkovou šířku bloku až po rámeček:

• width - celková šířka bloku včetně rámečku
• height - celková výška bloku včetně rámečku
• padding - vnitřní odsazení obsahu bloku od okraje - je započítáno ve width (height)
• border - rámeček - je započítán ve width (height)
• margin - vnější okraj - není započítán

Neměnné celkové rozměry bloku při box-sizing: border-box

150px

150px

150px

width: 150px
height: 140px
padding: 0px

width: 150px
height: 140px
padding: 20px

width: 150px
height: 140px
padding: 20px
border: 20px

S vlastností box-sizing zůstává blok stejně velký i po přidání vnitřního okraje a rámečku.
Zmenšuje se vnitřní prostor bloku pro text.

Tento způsob zjednodušuje počítání celkové šířky vedle sebe umístěných bloků - především lze prostor stránky jednoduše rozdělit procentuálně - viz kapitola Responzivní layout.

Obtékání bloků - float

• float:none  - bez obtékání
  Dva bloky bez obtékání jsou umístěny pod sebe. Mohou být vycentrovány pomocí margin: auto. Nemají-li zadanou šířku, mají šířku 100%.
• float:left  - s obtékáním, blok umístěn vlevo - vedle může být text či další blok (pokud se vejde - záleží na šířce bloků)
• float:right  - s obtékáním, blok umístěn vpravo
  Blokům s obtékáním je třeba zadat šířku, jinak budou mít minimální šířku závislou na obsahu.

Jsou-li bloky vnořeny do obalovacího bloku, který nemá obtékání (aby mohl být vycentrován), musí mít vnitřní bloky float:left nebo float:right, jinak se mezi nimi a obalovacím blokem, dělá mezera. Obalovací blok pak musí mít overflow:auto.

Umístění bloku pod jinými bloky - clear

• clear:left  - umístěn pod bloky, které mají float:left
• clear:right - umístěn pod bloky, které mají float:right
• clear:both - umístěn pod všemi předchozími bloky s libovolným obtékáním

Základní css vlastnosti pro bloky

Vlastnosti písma, textu, rámečky, barvy a okraje jsou stejné jako pro předchozí html značky.