Instrukcja

Laboratorium Informatyki
CSS (ang. Cascading Style Sheets)
kaskadowe arkusze styli
Ćwiczenie 5.
1. Tabele
Formatowanie tekstu w tabeli za pomocą CSS realizuje się analogicznie
jak w bloku.
Lp.
1
Styl i składnia
caption-side:top;
caption-side:bottom;
table-layout:auto;
table-layout:fixed;
2
3
4
border-collapse:colapse;
border-collapse:separate;
border-spacing: XXX;
border-spacing: XXX xxx;
empty-cells: show;
empty-cells: hide;
5
6
width:xxx;
height:xxx;
Opis
Ustawia miejsce wyświetlenia podpisu tabeli. Styl
znacznika <caption>……</caption>
Definiuje rozplanowanie tabeli:
auto - szerokość tabeli zależy od zawartości komórek
(domyślnie)
fixed - szerokość tabeli nie zależy od zawartości
komórek
Styl znacznika <table>…</table>
Ustawia obramowania w tabeli:
collapse - pojedyncze obramowanie
separate - komórki są od siebie odseparowane
Styl znaczników <table>…</table> i <td>…</td>
Odstęp pomiędzy komórkami w tabeli.
Pojedyncza wartość określa odstęp w wierszach i
kolumnach, podwójna wartość ustawia osobo odstęp w
wierszach i kolumnach
Ustawia realizacje wyświetlania pustych komórek w
tabeli:
show - pokaż obramowanie wokół pustych komórek
hide - schowaj obramowanie wokół pustych komórek
Styl przeznaczony dla znaczników <table>…</table>,
<th>…</th> i <td>…</td>
Ustawia rozmiar elementów tabeli, szerokość i
wysokość. Wymiar w pikselach, procentach i em.
2. Bloki
Bloki są obiektami które można
interpretować jako akapit
tekstu. Jednakże blok może
zawierać tylko grafikę.
Stosowanie bloków (<p>, <div>)
ułatwia formatowanie ich
zawartości. Każdy element
umieszczony w dokumencie
generuje tak zwane pudełko.
Elementy takie jak: otaczający
margines wewnętrzny zwany
"padding", obramowanie określane
jako "border" i marginesy zwane "margin". Te trzy elementy można
dowolnie modyfikować.
1
Lp.
1
2
3
4
5
6
Styl i składnia
margin:xxxx;
margin-top:xxxx;
margin-left:xxxx;
margin-right:xxxx;
margin-bottom:xxxx;
padding:xxxx;
padding-top:xxxx;
padding-left:xxxx;
padding-right:xxxx;
padding-bottom:xxxx;
border-color:xxxx;
border-top-color:xxxx;
border-style:xxxx;
border-left-style:xxxx;
border-width:xxxx;
border-bottom-width:xxxx;
border:xxxx;
border-right:xxxx;
width:xxxx;
height:xxxxx;
top:xxxx;
left:xxxx;
right:xxxx;
bottom:xxxx;
opacity:xx
Opis
Ustawia wielkość marginesu w pikselach, procentach
lub em. Można zdefiniować naraz wszystkie marginesy
lub każdy z osobna.
Ustawia
wielkość
marginesu
otaczającego
w
pikselach, procentach lub em. Można zdefiniować
naraz wszystkie marginesy lub każdy z osobna.
Ustawia parametry obramowania, kolor
Można kolor wybranego brzegu
Ustawienie stylu: none, dotted, dashed, solid,
double itp. Można też każdy brzeg definiować osobno
Ustawia grubość brzegu
Można także każdy z brzegów ustawiać indywidualnie
Uniwestalny
styl
umożliwiający
samodzielne
definiowanie wszystkich parametrów brzegu
Ustawia szerokość i wysokość bloku
Ustawia
odległość
dokumentu
bloku
od
wybranego
brzegu
Ustawia przeźroczystość obiektu
0 – całkowita przeźroczystość
1 – obiekt nie przeźroczysty
Zestawione w instrukcji definicje styli oczywiście nie wyczerpują
wszystkich dostępnych rozwiązań. Całość dostępna w dokumentacji. Można
ewentualnie korzystać z dostępnych samouczków: LINK.
3. Zadanie
Korzystając z utworzonego wcześniej
stronę za pomocą wybranych styli CSS.
2
dokumentu
CV,
sformatować