Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Transkript

1 Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro text - odstavec 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/

2 Obsah prezentace text-decoration. text-transform. text-align. text-indent. line-height. vertical-align. word-spacing letter-spacing display white-space

3 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ů.

4 Vlastnost CSS Dostupné hodnoty 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

5 text-transform Vlastnost text-transform transformuje text následujícími způsoby: text-transform none bez transformace text-transform text-transform text-transform capitalize uppercase lowercase text-transform: uppercase první písmeno ve slově velké velká písmena (tiskací) malá písmena (psací)

6 text-align Vlastnost text-align umožňuje horizontální zarovnání textu. 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

7 text-indent Vlastnost text-indent provádí odsazení prvního řádku. text-indent délka text-indent procento odsazení prvního řádku odsazení prvního řádku text-indent: 62px

8 line-height Vlastnost line-height nastaví výšku řádku. line-height normal výchozí výška line-height line-height line-height line-height: 80% výška násobek procento výška nastavená jednotkou násobek implicitní výšky nastavení výšky procentuelně

9 vertical-align Vlastnost vertical-align provádí vertikální zarovnání. vertical-align baseline na řádek vertical-align sub dolní index vertical-align super horní index vertical-align top co nejvýš vertical-align text-top vršek k vršku vertical-align middle střed na střed vertical-align bottom co nejníž vertical-align text-bottom spodek ke spodku vertical-align procento výšky procento výšky

10 word-spacing Vlastnost word-spacing nastavuje vzdálenost jednotlivých slov od sebe. word-spacing normal implicitní mezera word-spacing délka word-spacing: 12px nastavení mezislovní mezery délkou

11 letter-spacing Vlastnost letter-spacing nastavuje vzdálenost jednotlivých písmen od sebe. letter-spacing normal implicitní mezera letter-spacing letter-spacing: 5px délka nastavení vzdálenosti mezi písmeny délkou

12 display Vlastnost display říká prohlížeči o jaký typ elementu se jedná. Má význam při formátování xml dokumentů. display block blokový element display inline řádkový element display list-item seznam display none nezobrazuje se

13 white-space Vlastnost white-space určuje jak se má prohlížeč ve vztahu k textu chovat. 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