CSS - kaskadowe arkusze stylu - zadania

zadanie 1 - styl zewnętrzny - pliki styl.css

zmiana stylu dokumentu przy zmianie pliku styl.css

Zakres zadania:

  • Zaprojektuj dokument html, który przy zmianie pliku stylu zmienia wygląd.
  • W pliku html zmieniamy jedynie odwołanie do pliku css - następuje zmiana wyglądu.
  • Tworzymy 5 identycznych plików html zawierających takie same klasy i identyfikatory obiektów.
  • Tworzymy 5 plików css, które przypiszemy do poszczególnych plików html.
    Pierwszy dokument html będzie posiadał przypisany pusty plik stylu.
  • Wzory stron po zastosowaniu stylu:

Polecenia i wskazówki:

  • Na dysku sieciowym utwórz folder css1
  • Utwórz główny plik html (zapisz w folderze css1 pod nazwą: index.html)
  • Wprowadź podstawowy kod html:
  • Treść strony (sekcja body) według wzoru:

    Przykładowe teksty do pobrania:
    tekst 1
    tekst 2
  • Nadaj własne nazwy klasom (class) i identyfikatorom (id)
    Zapisz pod nazwą index.html
  • Zmieniając nagłówek według wzoru: Zapisuj dokument pod nazwami: index1.html do index4.html
  • Utwórz pusty dokument i zapisz pod nazwą: styl.css
  • Zapisz dokument pod nazwami: styl1.css do styl4.css
  • W każdym dokumencie wprowadź opis stylu charakterystyczny dla poszczególnych stron.
    Uwaga: Używamy tych samych nazw klas i identyfikatorów:
    Przykładowy fragment kodu w pliku css:

zadanie 2 - menu strony

różne style menu dokumentu

Zakres zadań:

  • Zadania umieść w folderze css2.
  • Menu pionowe.
  • Menu poziome.
  • Menu zagnieżdżone.
  • Każde menu to oddzielny plik html oraz css.
  • Zastosuj własne kolory inne niż zastosowano w przykładzie, tu:
    - nagłówek: #080;
    - menu: #17a2b8;

Polecenia i wskazówki:

  • menu pionowe (index1.html - styl1.css)

    Polecenia i wskazówki:

    • Utwórz podstawową strukturę dokumentu html
    • W sekcji <body> wprowdź kod tworzący:
      - nagłówek
      - część główną z menu
      - stopkę

    • W części gółwnej wprowadź listę wypunktowaną zawierającą linki do podstron.
      np.: <li><a href="start.thml">Start</a></li>
      Efekt w przeglądarce:
    • Dodaj klasy dla elementów html
    • Dodaj opis stylu strony (czcionka, marginesy).
      Efekt w przeglądarce:
    • Zmień styl nagłówka, dodaj margines dla listy.
      Efekt w przeglądarce:
    • Zmień styl stopki - umieść ją w dolnej części strony niezależnie od wielkości okna przeglądarki.
      Efekt w przeglądarce:
    • Zmień styl listy według wzoru (pamiętaj o stylu blokowym dla odnośników,
      aby zajmowały całą powierzchnię "rodzica" li.
      Efekt w przeglądarce:
    • Dodaj obsługę pseudoklasy hover.
      Efekt w przeglądarce:
  • menu poziome (index2.html - styl2.css)
    • Wykorzystaj strukturę html z poprzedniego zadania.
      Pozostaw trzy elementy listy
    • Listę umieść w sekcji <nav> - element obejmuje całą szerokość strony
    • Zmień styl wyświetlania listy <ul> z blokowego na inline
    • Dla elementów li dodaj pozycję float:left; oraz biały kolor lewej części ramki
    • Zmiana koloru prawej ramiki, dla ostatniego elementu, następuje po dodaniu stylu dla pseudoklasy last-child
      li:last-child {border-right-color: #fff;}
    • Tak utworzone menu znajdować się będzie po lewej stronie okna.
      Centrowanie menu (stosowanie właściwości flex).
      Zajrzyj pod adres: https://www.w3schools.com/css/css3_flexbox.asp
      Efekt w przeglądarce:
    • Dodaj obsługę pseudoklasy hover.
      Pozostaje jedynie dolna część ramki (menu "nie skacze")
      Efekt w przeglądarce:
  • menu zagnieżdżone (index3.html - styl3.css)
    • Wykorzystaj strukturę html z pierwszego zadania.
    • Do pozycji szkolenia dodaj kolejną listę punktową zawierającą trzy elementy:
      - HTML
      - CSS
      - JavaScript

      Efekt w przeglądarce:
    • Dodaj pozycję relatywną dla elementów li oraz pozycję absolutną i margines dla listy podrzędnej.
      Efekt w przeglądarce:
    • Dodaj obsługę hover.
      Efekt w przeglądarce:
    • Zakładając, że głównej liście nadano identyfikator blok, przeanalizuj poniższy kod.
      Dodany jest tu efekt hover dla listy głównej i podrzędnej. Efekt w przeglądarce:
    • Dodaj menu podrzędne dla innych pozycji menu głównego.
      Przykład:

zadanie - menu responsywne

zmiana stylu menu

Zakres zadania:

  1. Zaprojektuj dokument html, który przy zmianie rozdzielczości zmienia sposób wyświetlania menu:
    • szerokość do 768px - menu pionowe
    • powyżej - menu poziome
  2. Tworzymy folder: menu responsywne
  3. W folderze umieszczamy dwa pliki: index.html oraz styl.css
  4. Kolorystyka jest dowolna
  5. Efekt do osiągnięcia: zobacz na kanale "informatyka bez tajemnic"

Polecenia i wskazówki:

  1. W arkuszu stylu zdefiniuj najpierw parametry dla dużej szerokości ekranu.
  2. Dla szerokości mniejszych niż 768px zastosuj regułę: @media only screen and (max-width:768px) {}
  3. Do pozycjonowania elementów możesz użyć właściwości flex, szczegóły znajdziesz pod adresem: https://www.w3schools.com/css/css3_flexbox_container.asp

zadania powtórzeniowe

zaprojektuj strony według poniższych wzorów:

  1. Plan lekcji (zapisz pod nazwą: plan_lekcji.html): Strukturę całej tabeli (z opisem wiersza nagłówkowego oraz łączeniem właściwych komórek) możemy wprowadzić korzystając z następującego kodu emmet:
  2. Szachownica (zapisz pod nazwą: szachownica.html):
  3. Pozycjonowanie obiektów DIV (zapisz pod nazwą: pozycjonowanie.html):

    Bez zastosowanego arkusza stylu: Po dodaniu arkusza do dokumentu:
  4. Menu strony: pionowe, poziome, zagnieżdżone:

    menu1.html: menu2.html: menu3.html:

Polecenia i wskazówki:

  1. Przypomnij materiał z działu rrogacz.pl/css-selektory
  2. Do określania kolorów komórek stosuj pseudoklasy ntch-child() wybierające określone (parzyste, nieparzyste) wiersze, kolumny.
Projekt i wykonanie: Ryszard Rogacz© 1999−2025