Tvorba webových stránek

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 seznamy
Autor:
Ing. Zelinka Pavel
Číslo:
VY_32_INOVACE_36–10
Anotace:
Pracovní list pro podporu výuky Design a vzhledové vlastnosti webových stránek. Vlastnosti CSS pro
seznamy
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: září 2013
Podpora digitalizace a využití ICT na SPŠ CZ.1.07/1.5.00/34.0632
Obsah prezentace
•
•
•
•
Typy odrážek – list-style-type
Vlastní odrážka jako obrázek – list-style-image
Umístění odrážky – list-style-position
Skupinová deklarace – list-style
Typy odrážek – list-style-type
• Pomocí této vlastnosti máme možnost využít
předdefinované typy odrážek. Typ odrážky
můžeme nadefinovat pro celý seznam nebo
samostatně pro jednotlivé úrovně.
• V případě, že používáme seznam ke
strukturování odkazů, můžeme symbol
odrážky vypustit úplně.
list-style-type:none
Vlastnost CSS
Dostupné hodnoty
Popis
list-style-type
disc
plné kolečko
list-style-type
circle
kružnice
list-style-type
square
plný čtverec
list-style-type
decimal
číslice
list-style-type
lower-roman
římské číslice
list-style-type
lower-alpha
malá písmena
list-style-type
upper-alpha
velká písmena
list-style-type
none
bez odrážky
Vlastní odrážka jako obrázek
list-style-image
• CSS nám umožňuje v rámci seznamu použít
libovolnou vlastní odrážku ve formě obrázku.
• Podporované jsou grafické formáty dostupné
pod (XJTML/CSS).
• Velikost obrázku je nutné upravit podle
plánované velikosti textu u odrážky
Vlastnost CSS
list-style-image
Dostupné
hodnoty
Popis
list-style-image:
URL('odrazka.jpg')
Zápis vlastního
grafického prvku k
odrážce.
Umístění odrážky
list-style-position
• Každá položka seznamu je tvořena vlastní
odrážkou.
• V případě, že je u odrážky umístěno více
řádků textu, můžeme odrážku předsunout
před text (běžné umístění), nebo ji
zakomponovat jako součást textu.
Vlastnost CSS
list-style-position
list-style-position
Dostupné hodnoty
Popis
outside
odrážka
předsunutá
před text
inside
odrážka jako
součást textu
<ul>
<li style=˜
“list-style-position:inside“>V případě víceřádkového<br/>
textu je odrážka součástí tohoto textu
</li>
</ul>
Skupinová deklarace – list-style
• Vlastnosti pro odrážky můžeme deklarovat
hromadně a to v pořadí: typ-pozice-obrázek
Zápis pro definici vlastností seznamu
stylopisem by pak mohl vypadat následovně:
<style type="text/css">
ol li {list-style:decimal outside none}
ul li {list-style:circle inside url ('odrazka.jpg')}
</style>