KASKADOWE ARKUSZE STYLÓW CSS

KASKADOWE ARKUSZE STYLÓW CSS
Ć WICZE NIE 1.
1. Utwórz nowy folder o nazwie “strona ze stylami css”.
2. Otwórz program E-Net. Utwórz nową stronę html za pomocą kreatora. Wpisz tytuł strony
„style css”, ustaw elementy widoczne w znacznikach <meta> (autor, język, kodowanie, itp.).
Nie wybieraj kolorów dla odnośników, tła strony i tekstu! Te elementy pozostaw puste.
3. Zapisz stronę w folderze „strona ze stylami css” pod nazwą „index.html”.
4. Umieść na stronie następujące elementy:
5. Napis na górze jest najwyższym poziomem nagłówka <h1>, napis „Przedmioty szkolne” jest
drugim poziomem nagłówka, czyli <h2>, pod spodem mamy listę nieuporządkowaną <ul>. Jak
widać powyżej, strona jest „niesformatowana”, a więc nie pojawiają się na niej żadne kolory
z wyjątkiem czerni i beli, a rodzaj czcionki jest określony wyłącznie przez przeglądarkę.
W JAKI SP OSÓB MOŻNA ZM IE NIĆ WY GLĄD TEJ STR ONY BEZ D OPISYWANIA
WŁA ŚCIWOŚCI DLA ZNA CZNIKÓW W KOD ZIE HTML STR ONY I NDEX . HTML ?
6. W programie E-Net wybierz polecenie Plik/Nowy/Pusty dokument.
7. Zapisz teraz ten pusty dokument (Plik/Zapisz jako) w folderze „strona ze stylami css”
ustawiając następujące właściwości dla nowego pliku:
Strona 1 z 4
8. W programie E-Net powinny znajdować się teraz dwie zakładki (na górze): index.html
i style.css.
9. Przejdź do zakładki index.html. Znajdź znacznik </head> i w linijce przed tym znacznikiem
umieść następujący kod:
10. Ze strony www.ti.info.w.interia.pl/www.html pobierz obrazek punktor znajdujący się w lekcji
dotyczącej stylów css. Zapisz go w folderze „strona ze stylami css”.
11. Wróć do zakładki style.css. Wpisz następujące elementy kodu:
Taki zapis oznacza, że kolor tła strony będzie w odcieniu #FFFF33. Zapisz zmiany i sprawdź,
czy na stronie index.html zmienił się kolor jej tła. Jeśli tak, wróć znów do zakładki ze stylami.
Zwróć uwagę, że w stylach nie zapisujemy znaczników w nawiasach <…>. Wszystkie
elementy formatowania znajdują się w nawiasach {…}. Na końcu każdego wpisanego elementu
znajduje się średnik.
12. Dopisz następne formatowanie, tym razem dla znacznika h1:
Zapisz zmiany i przejdź do podglądu strony index.html. Zobacz, co się zmieniło na stronie.
13. Wróć do zakładki ze stylami i dopisz jeszcze następujące elementy dla znacznika h2:
14. Ustalimy teraz kolor tła tabeli oraz kolor, grubość i rodzaj czcionki elementów znajdujących się
w tej tabeli:
15. Chcemy, by dodatkowo tekst w komórkach był oddalony od krawędzi całej tabeli o 20 pikseli.
Dopisujemy formatowanie znacznika td:
16. Pozostało nam jeszcze określenie wyglądu listy wypunktowanej:
17. Zapisz wprowadzone zmiany. Zmień teraz w kodzie strony index.html największy nagłówek
na „To jest strona z zastosowaniem stylów css.” Sprawdź na podglądzie, czy strona wygląda
tak, jak poniżej:
Strona 2 z 4
Do samodzielnego opracowania:
1. Utwórz nowy pusty plik w E-Necie (Plik/Nowy/Pusty dokument). Zapisz go pod nazwą
style2.css i z rozszerzeniem css wybranym z typu plików przy zapisie. Plik ten ma się znaleźć
w folderze „strona ze stylami css”.
2. W pliku tym umieść następujące elementy formatowania:
Strona 3 z 4
3. Przejdź w programie E-Net do zakładki index.html i tam, gdzie był podpięty plik „style.css”,
w miejsce tej nazwy wstaw teraz „style2.css”.
4. Zapisz zmiany i sprawdź, czy strona na podglądzie wygląda tak, jak poniżej:
Strona 4 z 4