Tworzenie stron WWW 1 Zajęcia stacjonarne. Arkusze CSS

Tworzenie stron WWW
1
Zajęcia stacjonarne. Arkusze CSS.
Przygotowania : Wykonać kopię stworzonego przez siebie pliku Wizytowka3.html i nazwać
ją Wizytowka4.html . Na tym pliku będziemy dalej pracować. (W zasobach kursu Przykłady
znajdują się też gotowe pliki Wizytowka3g.html i Wizytowka3h.html)
Zadanie 1. (Styl w nagłówku) Przenieść do nagłówka elementy prezentacyjne strony
Wizytowka4.html (znaczniki style, font, b,...) zagnieżdżone w tekście.
Np. <style>
.wiesc {color: red; font-family: Verdana, Arial;}
td.wyrozn {background-color: orange; font-style: italic;}
</style>
<!-- koniec nagłówka, poniższe w korpusie -->
Przewidujemy <span class="wiesc">duże zmiany</span>
<table><tr>
<td>króliczki</td>
<td class="wyrozn">już podrosły</td>
</tr></table>
Zadanie 2. (Styl w arkuszu) Przenieść zawartość stylu z nagłówka strony Wizytowka4.html
do osobnego arkusza mojstyl kno888.css . W źródle strony utworzyć stosowne połączenie wywołujące nasz arkusz stylu.
Zadanie 3. (Styl korpusu) Ustawić w arkuszu mojstyl kno888.css tło, kolor, czcionkę,
marginesy i rozlokowanie tekstu na stronie oraz styl tytułów sekcji (<h1>, <h2>).
Np. body {
background-color: #7bf0d9; color: #605a44;
font-size: 16pt; font-family: Tahoma, Arial;
text-align: center; margin: 3em 8em 3em 8em;}
Zadanie 4. (Wygląd odnośników)
(a) Wystylizować odnośniki tak, aby były składane bez podkreślenia, ale w kolorze. Przy
najeździe myszką link powinien zmieniać kolor liter i swe tło.
(b) Spowodować, aby odnośniki e-mail migały w reakcji na wskaźnik myszki.
Np. a { text-decoration: none; font-weight: bold; color: blue; }
a:hover {
text-decoration: none; font-weight: bold; color: yellow; background-color: blue;}
.poczta a { text-decoration: none; }
.poczta a:hover { text-decoration: blink; }
Zadanie 5. (Wygląd tabel) Zdefiniować klasę .ludzie podającą styl składania tabeli. Dodatkową klasą poprawić tabelę tak, aby jej wiersze na przemian były jaśniejsze i ciemniejsze
(efekt zebry).
Np. table.tematy {
border: 2px solid #c0c0c0; border-collapse: collapse; background-color: #0af3bf;
margin-left: auto; margin-right: auto; width: 85%;
font-size: medium; font-weight: normal; color: #4f526a; }
tr.tematyzebra { background-color: #adfcea; }
.tematy td { padding: 6px 10px 8px 10px; text-align: left; }
much, 17 xi 2007