Instrukcja
Transkrypt
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ć