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: