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.
bottom, <délka>, %
Co se jinam nevešlo II
Práce s bílými znaky pomocí white-space
– normal, pre, nowrap, pre-wrap, pre-line
Práce s písmem
– font-family
– font-style (normal, italic, oblique)
– font-variant (normal, small-caps)
– font-weight (100-900)
– font-size
Práce s textem
– text-indent
– text-align (left, right, center, justify)
– text-decoration (none, underline, overline, line-through, blink)
– text-transform (capitalize, uppercase, lowercase, none)
N
ĚCO NAVÍC
Nadstavby pro tvorbu CSS
Less (http://www.lesscss.cz/)
Sass
Stylus
Formátovací styly
Překladač do
CSS
Interpret CSS
(prohlížeč)
Formátovací styly
Překladač
Interpret CSS
(prohlížeč)
nebo
Co CSS chybí a nadstavby mají
Ukázky
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* Výsledné CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Vnořování
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}
/* Výsledné CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Výpočty
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/* Výsledné CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
Děkuji za pozornost