Zewnętrzne kaskadowe arkusze stylów css

Transkrypt

Zewnętrzne kaskadowe arkusze stylów css
Zewnętrzne kaskadowe arkusze stylów css
Na pulpicie utwórz folder o nazwie strona. Następnie stwórz pustą stronę zawierającą wyłącznie szkielet
dokumentu html. Zapisz tą stronę w folderze strona pod nazwą index.html. W sekcji <body> ….</body> dodaj
wszystkie elementy potrzebne do tego, aby Twoja strona wyglądała następująco:
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 widad powyżej Twoja 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 sposób można zmienid wygląd tej strony bez dopisywania właściwości dla znaczników w kodzie html
strony index.html?
Wykorzystujemy do tego celu zewnętrzne arkusze stylów css.
Otwórz teraz nowy notatnik i zapisz go w folderze strona pod nazwą „style.css”. Wród do notatnika „index.html”
i przed znacznikiem </head> umieśd następujący znacznik:
<link rel="stylesheet" href="style.css" type="text/css">
Zapisz zmiany na stronie.
Wród do notatnika „style.css”. W nim będziesz definiowad formatowanie dla poszczególnych elementów Twojej
strony.
1. Dla znacznika <body> w notatniku ze stylami wpisujemy następujące ustawienia:
Taki zapis oznacza, że kolor tła strony będzie w odcieniu #FFFF33. Zapisz zmiany i sprawdź, czy na stronie
zmienił się kolor jej tła. Jeśli tak, wród znów do notatnika ze stylami.
2. Dla znacznika <h1> ustalamy właściwości:
A więc kolor czcionki dla znacznika <h1> jest w odcieniu ciemnej czerwieni, natomiast rodzaj czcionki, to
Trebuchet MS. Zapisz zmiany i sprawdź wynik na stronie.
3. Dla znacznika <h2> ustalamy:
4. Znacznik tabeli <table> przyjmie właściwości:
Kolor tła tabeli będzie określony za pomocą #FFCC00, czcionka będzie pochylona (italic), kolor czcionki:
#660066, grubośd czcionki: pogrubiona.
5. Dla znacznika <td> ustalamy:
Zawartośd komórki będzie oddalona od ramek tabeli o 20px.
6. Znacznik <ul>:
Zamiast kropek w liście nieuporządkowanej pojawi nam się obrazek „punktor.png”. Pobierz go ze strony
www.ti.info.w.interia.pl z punktu 5 dotyczącego html.
Kolor czcionki w tym wypunktowaniu to #0099FF, a jej rodzaj to Comic Sans MS.
c.d. na następnej stronie
W notatniku „index.html” zmieo jeszcze napis, który jest nagłówkiem na: „To jest strona z zastosowaniem stylów css:”.
Teraz Twoja strona powinna wyglądad tak: