Kurs WWW

Kurs WWW
CSS, część II
Paweł Rajba
[email protected]
http://pawel.ii.uni.wroc.pl/
Zawartość modułu
Więcej o tabelkach
Automatyczne generowanie treści
Formatowanie list
Pozycjonowanie i wyświetlanie
Kurs WWW
-1-
Copyright © Paweł Rajba
Tabelki raz jeszcze
Przy formatowaniu tabelek przydatne są:
border-collapse: (collapse|separate)
łączy razem sąsiednie krawędzie obramowania komórek i
obramowania tabeli (lub nie łączy)
border-spacing: 10px
odpowiednik cellspacing
empty-cells: (show|hide)
pokazuje lub nie obramowanie pustych komórek
padding: 4px
odpowiednik cellpadding
Kurs WWW
-2-
Copyright © Paweł Rajba
Przykład
kurswww-02-p01tabelki.html
Formatowanie tabelek
Kurs WWW
-3-
Copyright © Paweł Rajba
Generowanie zawartości
Najpierw o pseudo-klasach
:before
:after
Zawartość określamy przez właściwość
content, gdzie wartość to kombinacja
napisów, przy czym można użyć w napisie \A co daje
złamanie wiersza , ale widoczne jest tylko w połączeniu z
white-space: pre
linków do obrazków
liczników
Kurs WWW
-4-
Copyright © Paweł Rajba
Generowanie zawartości
Używanie liczników
Funkcja counter(). Składnie
counter(name)
counter(name, style)
name to nazwa licznika
style są następujące
●
disc | circle | square | decimal | decimal-leading-zero | lowerroman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | lower-alpha | upper-alpha | none
Inne przydatne właściwości
counter-reset: { licznik [liczba] }+
counter-increment: { licznik [liczba] }+
Kurs WWW
-5-
Copyright © Paweł Rajba
Formatowanie list
Służą do tego właściwości:
list-style-type: rodzaj wypunktowania:
wartości: disc | circle | square | decimal | decimal-leadingzero | lower-roman | upper-roman | lower-greek | lowerlatin | upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none
list-style-image: url("adres obrazka")
obrazek wypunktowania
list-style-position: { inside | outside }
pozycja treści wypunktowania
list-style: list-style-type list-style-position list-style-image
Kurs WWW
-6-
Copyright © Paweł Rajba
Przykład
kurswww-02-p02formatowanie-list.html
Generowanie zawartości
Formatowanie list
Kurs WWW
-7-
Copyright © Paweł Rajba
Pozycjonowanie i wyświetlanie
Do ustawienia pozycji mamy parametr position
Rodzaje pozycjonowanie
statyczne (domyślne)
position : static
relatywne
position : relative
absolutne
position : absolute
ustalone
position : fixed
Kurs WWW
-8-
Copyright © Paweł Rajba
Pozycjonowanie i wyświetlanie
Właściwości określające sposób wyświetlania
left, right, top, bottom – lokalizacja pudełka
z-index – kolejność rysowania warstw
overflow – co zrobić z tym co wystaje
wartości: visible, hidden, scroll
clip – określa obszar, który ma być wyświetlony
wartość: rect(lewa, góra, prawa, dół)
clear – określa, która krawędź pudełka ma nie
przylegać do krawędzi poprzednich pudełek
wartości: left, right, both
Kurs WWW
-9-
Copyright © Paweł Rajba
Pozycjonowanie i wyświetlanie
Właściwości określające sposób wyświetlania
float – określa sposób opływania pudełka
left – pudełko do lewej i opływane z prawej
right – pudełko do prawej i opływane z lewej
none – pudełko w ogóle nie jest opływane
display – sposób wyświetlania pudełka
typowe wartości: block, inline, none
visibility – czy pokazywać pudełko
wartości: visible, hidden
różnica pomiędzy display i visibility
Kurs WWW
- 10 -
Copyright © Paweł Rajba
Przykład
kurswww-02-p03pozycjonowanie.html
Pozycjonowanie
Wyświetlanie zawartości
Kurs WWW
- 11 -
Copyright © Paweł Rajba
Przykład
kurswww-02-p04menu.html
Przykłady różnych menu
Kurs WWW
- 12 -
Copyright © Paweł Rajba
Przykład
kurswww-02-p05formularze.html
Przykładowo sformatowany formularz
Kurs WWW
- 13 -
Copyright © Paweł Rajba