CSS – Kaskádní styly
Níže je uveden pouze náhled materiálu. Kliknutím na tlačítko 'Stáhnout soubor' stáhnete kompletní formátovaný materiál ve formátu PDF.
ul li
{} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li
{} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red
{} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level
{} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y
{} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""
/* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
Formátovací model – Box model
Content
Padding
Margin
Border
top
bottom
right
left
MT
MB
ML
PR
MR
PL
PB
PT
BT
BB
BL
BR
– Pozadí zasahuje až do orámování (border),
okraje (margin) jsou vždy průhledné.
Formátovací model II
LI Content 1
LI Padding
LI Margin
LI Padding
LI Margin
LI Content 2
over several
lines
UL Padding
UL Margin
max
(MB,
MT)
<ul>
<li>
LI 1
</li>
<li>
LI 2
over...
</li>
</ul>
Orámování - Borders
border-width
– <délka>
– thin
– medium
– thick
border-color
– <color>
– transparent
border-style
– none
– dotted
– double
– ridge
– outset
– hidden– solid– groove– inset
h1 { border-width: thin }
h1 { border-width: thin thick}
h1 { border-width: thin thick medium }
h1 { border-width: thin thick medium 5px}
1 2 3 4
2
1
2
1
1
1
1
1
2
3
2
1
4
3
2
1
h1 { border: 0.5em solid silver }
Vizuální formátování I
vlastnost
display
– block
– inline-block
– inline
– list-item
– none
– run-in
b1
b2
b1
b2
b1
b2
b3
• b1
• b2
b1
b2
b3
b4
– table
– inline-table
– table-column
– table-caption
– table-row
– table-cell ...
Vizuální formátování II
vlastnost
position
– static
– relative
– absolute
– fixed
offset (kromě static)
– top
– right
– bottom
– left
float
– left
– right
– none