Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1
Šablona:
Inovace a zkvalitnění výuky prostřednictvím ICT
Název:
Design a vzhledové vlastnosti webových stránek
Téma:
Vlastnosti CSS pro text - odstavec
Autor:
Ing. Zelinka Pavel
Číslo:
VY_32_INOVACE_36 – 05
Anotace:
Pracovní list pro podporu výuky Design a vzhledové vlastnosti webových stránek. - Vlastnosti CSS pro text – odstavec. Určeno pro 3. ročník oborů Strojírenství, Ekonomika a podnikání, Výtvarné zpracování kovů. Určeno pro 2. ročník oboru Technické lyceum. Vytvořeno: červenec 2013
Podpora digitalizace a využití ICT na SPŠ CZ.1.07/1.5.00/34.0632
Obsah prezentace • • • • • • • • • •
text-decoration. text-transform. text-align. text-indent. line-height. vertical-align. word-spacing letter-spacing display white-space
text-decoration • Vlastnost text-decoration umožňuje nastavení dekorací textu. Dekoracemi je myšlené podtržení, čára nad textem, přeškrtnutí, blikání a zrušení dekorace. Právě hodnota zrušení (none) je často využívána k zrušení implicitního podtržení odkazů.
Vlastnost CSS
Dostupné hodnoty
Popis
text-decoration
none
bez dekorace
text-decoration
underline
podtržení
text-decoration
overline
čára nad
text-decoration
line-through
přeškrtnutí
text-decoration
blink
blikání
text-decoration: underline
text-transform • Vlastnost text-transform transformuje text následujícími způsoby: Vlastnost CSS Dostupné hodnoty text-transform
none
text-transform
capitalize
text-transform
uppercase
text-transform
lowercase
text-transform: uppercase
Popis bez transformace první písmeno ve slově velké velká písmena (tiskací) malá písmena (psací)
text-align • Vlastnost text-align umožňuje horizontální zarovnání textu. Vlastnost CSS Dostupné hodnoty
Popis
text-align
left
zarovnání doleva
text-align
right
zarovnání doprava
text-align
center
zarovnání na střed
text-align
justify
zarovnání do bloku
text-align: justify
text-indent • Vlastnost text-indent provádí odsazení prvního řádku. Vlastnost CSS Dostupné hodnoty text-indent
délka
text-indent
procento
text-indent: 62px
Popis odsazení prvního řádku odsazení prvního řádku
line-height • Vlastnost line-height nastaví výšku řádku. Vlastnost CSS Dostupné hodnoty line-height
normal
line-height
výška
line-height
násobek
line-height
procento
line-height: 80%
Popis výchozí výška výška nastavená jednotkou násobek implicitní výšky nastavení výšky procentuelně
vertical-align • Vlastnost vertical-align provádí vertikální zarovnání. Vlastnost CSS Dostupné hodnoty vertical-align vertical-align vertical-align vertical-align vertical-align vertical-align vertical-align vertical-align vertical-align
baseline sub super top text-top middle bottom text-bottom procento výšky
Popis na řádek dolní index horní index co nejvýš vršek k vršku střed na střed co nejníž spodek ke spodku procento výšky
word-spacing • Vlastnost word-spacing nastavuje vzdálenost jednotlivých slov od sebe. Vlastnost CSS Dostupné hodnoty word-spacing word-spacing
Popis
normal
implicitní mezera
délka
nastavení mezislovní mezery délkou
word-spacing: 12px
letter-spacing • Vlastnost letter-spacing nastavuje vzdálenost jednotlivých písmen od sebe. Vlastnost CSS Dostupné hodnoty letter-spacing letter-spacing
Popis
normal
implicitní mezera
délka
nastavení vzdálenosti mezi písmeny délkou
letter-spacing: 5px
display • Vlastnost display říká prohlížeči o jaký typ elementu se jedná. Má význam při formátování xml dokumentů. Vlastnost CSS Dostupné hodnoty
Popis
display
block
blokový element
display
inline
řádkový element
display
list-item
seznam
display
none
nezobrazuje se
white-space • Vlastnost white-space určuje jak se má prohlížeč ve vztahu k textu chovat. Vlastnost CSS Dostupné hodnoty
Popis
white-space
normal
normální text
white-space
pre
předformátovaný text
white-space
nowrap
nezalamovat
U předformátovaného textu přebírá prohlížeč formát textu z editoru webových stránek, v případě nowrap nedojde k zalomení textu na konci řádky.
white-space: pre
