Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Przetrwać, przetrwać życie, potem damy już sobie radę!

Zajęcia specjalizacyjne: III klasa TI
CSS

Ćwiczenie 14 - Obramowanie i wykazy

Wprowadzenie:

W tym ćwiczeniu omówione zostaną kolejne własności CSS. Tym razem będą to: obramowanie i wykazy.

  1. zadania do wykonania
  1. spakowane pliki do zadań: pliki_14.zip (9KB)

Własności obramowania:


  1. styl obramowania:
  2. styl obramowania - górna krawędź
  3. styl obramowania - dolna krawędź
  4. styl obramowania - lewa krawędź
  5. styl obramowania - prawa krawędź
  6. łączenie atrybutów stylu obramowania
  7. wielkość obramowania:
  8. wielkość obramowania - górna krawędź
  9. wielkość obramowania - dolna krawędź
  10. wielkość obramowania - lewa krawędź
  11. wielkość obramowania - prawa krawędź
  12. łączenie atrybutów wielkości obramowania
  13. kolor obramowania:
  14. kolor obramowania - górna krawędź
  15. kolor obramowania - dolna krawędź
  16. kolor obramowania - lewa krawędź
  17. kolor obramowania - prawa krawędź
  18. łączenie atrybutów koloru obramowania
  19. przykład:
  20. przykład ze wszystkimi atrybutami obramowania

Własności wykazów:


  1. styl wykazu
  2. znaki obrazkowe w wykazie
  3. pozycja znaków w wykazie
  4. wykazy zagnieżdżone
  5. łączenie własności wykazu


Obramowanie

Styl obramowania

Styl obramowania - górna krawędź

Składnia reguły:


  1. selektor {border-top-style: styl;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. styl:
  2. "dotted" - obramowanie w postaci kropek
  3. "dashed" - obramowanie w postaci kresek
  4. "solid" - obramowanie w postaci linii
  5. "double" - obramowanie w postaci podwójnej linii
  6. "groove" - obramowanie w postaci linii z rowkiem
  7. "ridge" - obramowanie w postaci linii z grzbietem
  8. "inset" - obramowanie w postaci linii zagłębionej
  9. "outset" - obramowanie w postaci linii wypukłej
  10. "none" - usunie obramowanie

Dzięki temu poleceniu można ustalić górne obramowanie dla danego elementu.

Przykład:

To jest akapit z górnym obramowaniem typu dotted: border-top-style: dotted;.

To jest akapit z górnym obramowaniem typu dashed: border-top-style: dashed;.

To jest akapit z górnym obramowaniem typu solid: border-top-style: solid;.

To jest akapit z górnym obramowaniem typu double: border-top-style: double;.

To jest akapit z górnym obramowaniem typu groove: border-top-style: groove;.

To jest akapit z górnym obramowaniem typu ridge: border-top-style: ridge;.

To jest akapit z górnym obramowaniem typu inset: border-top-style: inset;.

To jest akapit z górnym obramowaniem typu outset: border-top-style: outset;.

do góry



Styl obramowania - dolna krawędź

Składnia reguły:


  1. selektor {border-bottom-style: styl;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. styl:
  2. "dotted" - obramowanie w postaci kropek
  3. "dashed" - obramowanie w postaci kresek
  4. "solid" - obramowanie w postaci linii
  5. "double" - obramowanie w postaci podwójnej linii
  6. "groove" - obramowanie w postaci linii z rowkiem
  7. "ridge" - obramowanie w postaci linii z grzbietem
  8. "inset" - obramowanie w postaci linii zagłębionej
  9. "outset" - obramowanie w postaci linii wypukłej
  10. "none" - usunie obramowanie

Dzięki temu poleceniu można ustalić dolne obramowanie dla danego elementu.

Przykład:

To jest akapit z dolnym obramowaniem typu dotted: border-bottom-style: dotted;.

To jest akapit z dolnym obramowaniem typu dashed: border-bottom-style: dashed;.

To jest akapit z dolnym obramowaniem typu solid: border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem typu double: border-bottom-style: double;.

To jest akapit z dolnym obramowaniem typu groove: border-bottom-style: groove;.

To jest akapit z dolnym obramowaniem typu ridge: border-bottom-style: ridge;.

To jest akapit z dolnym obramowaniem typu inset: border-bottom-style: inset;.

To jest akapit z dolnym obramowaniem typu outset: border-bottom-style: outset;.

do góry



Styl obramowania - lewa krawędź

Składnia reguły:


  1. selektor {border-left-style: styl;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. styl:
  2. "dotted" - obramowanie w postaci kropek
  3. "dashed" - obramowanie w postaci kresek
  4. "solid" - obramowanie w postaci linii
  5. "double" - obramowanie w postaci podwójnej linii
  6. "groove" - obramowanie w postaci linii z rowkiem
  7. "ridge" - obramowanie w postaci linii z grzbietem
  8. "inset" - obramowanie w postaci linii zagłębionej
  9. "outset" - obramowanie w postaci linii wypukłej
  10. "none" - usunie obramowanie

Dzięki temu poleceniu można ustalić lewą krawędź obramowania dla danego elementu.

Przykład:

To jest akapit z lewą krawędzią obramowania typu dotted: border-left-style: dotted;.

To jest akapit z lewą krawędzią obramowania typu dashed: border-left-style: dashed;.

To jest akapit z lewą krawędzią obramowania typu solid: border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania typu double: border-left-style: double;.

To jest akapit z lewą krawędzią obramowania typu groove: border-left-style: groove;.

To jest akapit z lewą krawędzią obramowania typu ridge: border-left-style: ridge;.

To jest akapit z lewą krawędzią obramowania typu inset: border-left-style: inset;.

To jest akapit z lewą krawędzią obramowania typu outset: border-left-style: outset;.

do góry



Styl obramowania - prawa krawędź

Składnia reguły:


  1. selektor {border-right-style: styl;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. styl:
  2. "dotted" - obramowanie w postaci kropek
  3. "dashed" - obramowanie w postaci kresek
  4. "solid" - obramowanie w postaci linii
  5. "double" - obramowanie w postaci podwójnej linii
  6. "groove" - obramowanie w postaci linii z rowkiem
  7. "ridge" - obramowanie w postaci linii z grzbietem
  8. "inset" - obramowanie w postaci linii zagłębionej
  9. "outset" - obramowanie w postaci linii wypukłej
  10. "none" - usunie obramowanie

Dzięki temu poleceniu można ustalić prawą krawędź obramowania dla danego elementu.

Przykład:

To jest akapit z prawą krawędzią obramowania typu dotted: border-right-style: dotted;.

To jest akapit z prawą krawędzią obramowania typu dashed: border-right-style: dashed;.

To jest akapit z prawą krawędzią obramowania typu solid: border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania typu double: border-right-style: double;.

To jest akapit z prawą krawędzią obramowania typu groove: border-right-style: groove;.

To jest akapit z prawą krawędzią obramowania typu ridge: border-right-style: ridge;.

To jest akapit z prawą krawędzią obramowania typu inset: border-right-style: inset;.

To jest akapit z prawą krawędzią obramowania typu outset: border-right-style: outset;.

do góry



Łączenie atrybutów stylu obramowania

Składnia reguły:


  1. selektor {border-style: określenia stylów;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. określenia stylów:
  2. "dotted" - obramowanie w postaci kropek
  3. "dashed" - obramowanie w postaci kresek
  4. "solid" - obramowanie w postaci linii
  5. "double" - obramowanie w postaci podwójnej linii
  6. "groove" - obramowanie w postaci linii z rowkiem
  7. "ridge" - obramowanie w postaci linii z grzbietem
  8. "inset" - obramowanie w postaci linii zagłębionej
  9. "outset" - obramowanie w postaci linii wypukłej
  10. "none" - usunie obramowanie
  12. jedno określenie stylu:
  13. wszystkie cztery krawędzie będą takie same
  15. dwa określenia stylów (oddzielone spacją):
  16. pierwsze oznacza: górną i dolną krawędź
  17. drugie oznacza: lewą i prawą krawędź
  19. cztery określenia stylów (oddzielone spacjami):
  20. oznaczają kolejno krawędzie:
  21. górna
  22. prawa
  23. dolna
  24. lewa

Przykład - jedno określenie stylu obramowania:

To jest akapit ze wszystkimi krawędziami obramowania typu dotted: border-style: dotted;.

To jest akapit ze wszystkimi krawędziami obramowania typu dashed: border-style: dashed;.

To jest akapit ze wszystkimi krawędziami obramowania typu solid: border-style: solid;.

To jest akapit ze wszystkimi krawędziami obramowania typu double: border-style: double;.

To jest akapit ze wszystkimi krawędziami obramowania typu groove: border-style: groove;.

To jest akapit ze wszystkimi krawędziami obramowania typu ridge: border-style: ridge;.

To jest akapit ze wszystkimi krawędziami obramowania typu inset: border-style: inset;.

To jest akapit ze wszystkimi krawędziami obramowania typu outset: border-style: outset;.

Przykład - dwa określenia stylów obramowania:

To jest akapit z dwoma określeniami stylów obramowania typu dotted dashed: border-style: dotted dashed;.

To jest akapit z dwoma określeniami stylów obramowania typu dashed solid: border-style: dashed solid;.

To jest akapit z dwoma określeniami stylów obramowania typu solid double: border-style: solid double;.

To jest akapit z dwoma określeniami stylów obramowania typu double groove: border-style: double groove;.

To jest akapit z dwoma określeniami stylów obramowania typu groove ridge: border-style: groove ridge;.

To jest akapit z dwoma określeniami stylów obramowania typu ridge inset: border-style: ridge inset;.

To jest akapit z dwoma określeniami stylów obramowania typu inset outset: border-style: inset outset;.

To jest akapit z dwoma określeniami stylów obramowania typu outset dotted: border-style: outset dotted;.

Przykład - cztery określenia stylów obramowania:

To jest akapit z czterema określeniami stylów obramowania typu dotted dashed solid double: border-style: dotted dashed solid double;.

To jest akapit z czterema określeniami stylów obramowania typu dashed solid double groove: border-style: dashed solid double groove;.

To jest akapit z czterema określeniami stylów obramowania typu solid double groove ridge: border-style: solid double groove ridge;.

To jest akapit z czterema określeniami stylów obramowania typu double groove ridge inset: border-style: double groove ridge inset;.

To jest akapit z czterema określeniami stylów obramowania typu groove ridge inset outset: border-style: groove ridge inset outset;.

To jest akapit z czterema określeniami stylów obramowania typu ridge inset outset dotted: border-style: ridge inset outset dotted;.

To jest akapit z czterema określeniami stylów obramowania typu inset outset dotted dashed: border-style: inset outset dotted dashed;.

To jest akapit z czterema określeniami stylów obramowania typu outset dotted dashed solid: border-style: outset dotted dashed solid;.

do góry



Wielkość obramowania

Wielkość obramowania - górna krawędź

Składnia reguły:


  1. selektor {border-top-width: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość - wartości względne:
  2. "thin" - cienkie obramowanie
  3. "medium" - średnie obramowanie
  4. "thick" - grube obramowanie

Na przykład:

To jest akapit z górnym obramowaniem wielkości thin, typu solid: border-top-width: thin; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości medium, typu solid: border-top-width: medium; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości thick, typu solid: border-top-width: thick; border-top-style: solid;.


  1. wielkość - jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. cale - in (1in=2.54cm)

Na przykład:

To jest akapit z górnym obramowaniem wielkości 5px, typu solid: border-top-width: 5px; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości 5pt, typu solid: border-top-width: 5pt; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości 1ex, typu solid: border-top-width: 1ex; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości 1em, typu solid: border-top-width: 1em; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości 0.1cm, typu solid: border-top-width: 0.1cm; border-top-style: solid;.

To jest akapit z górnym obramowaniem wielkości 0.1in, typu solid: border-top-width: 0.1in; border-top-style: solid;.

do góry



Wielkość obramowania - dolna krawędź

Składnia reguły:


  1. selektor {border-bottom-width: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość - wartości względne:
  2. "thin" - cienkie obramowanie
  3. "medium" - średnie obramowanie
  4. "thick" - grube obramowanie

Na przykład:

To jest akapit z dolnym obramowaniem wielkości thin, typu solid: border-bottom-width: thin; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości medium, typu solid: border-bottom-width: medium; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości thick, typu solid: border-bottom-width: thick; border-bottom-style: solid;.


  1. wielkość - jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. cale - in (1in=2.54cm)

Na przykład:

To jest akapit z dolnym obramowaniem wielkości 5px, typu solid: border-bottom-width: 5px; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości 5pt, typu solid: border-bottom-width: 5pt; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości 1ex, typu solid: border-bottom-width: 1ex; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości 1em, typu solid: border-bottom-width: 1em; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości 0.1cm, typu solid: border-bottom-width: 0.1cm; border-bottom-style: solid;.

To jest akapit z dolnym obramowaniem wielkości 0.1in, typu solid: border-bottom-width: 0.1in; border-bottom-style: solid;.

do góry



Wielkość obramowania - lewa krawędź

Składnia reguły:


  1. selektor {border-left-width: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość - wartości względne:
  2. "thin" - cienkie obramowanie
  3. "medium" - średnie obramowanie
  4. "thick" - grube obramowanie

Na przykład:

To jest akapit z lewą krawędzią obramowania wielkości thin, typu solid: border-left-width: thin; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości medium, typu solid: border-left-width: medium; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości thick, typu solid: border-left-width: thick; border-left-style: solid;.


  1. wielkość - jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. cale - in (1in=2.54cm)

Na przykład:

To jest akapit z lewą krawędzią obramowania wielkości 5px, typu solid: border-left-width: 5px; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości 5pt, typu solid: border-left-width: 5pt; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości 1ex, typu solid: border-left-width: 1ex; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości 1em, typu solid: border-left-width: 1em; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości 0.1cm, typu solid: border-left-width: 0.1cm; border-left-style: solid;.

To jest akapit z lewą krawędzią obramowania wielkości 0.1in, typu solid: border-left-width: 0.1in; border-left-style: solid;.

do góry



Wielkość obramowania - prawa krawędź

Składnia reguły:


  1. selektor {border-right-width: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. wielkość - wartości względne:
  2. "thin" - cienkie obramowanie
  3. "medium" - średnie obramowanie
  4. "thick" - grube obramowanie

Na przykład:

To jest akapit z prawą krawędzią obramowania wielkości thin, typu solid: border-right-width: thin; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości medium, typu solid: border-right-width: medium; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości thick, typu solid: border-right-width: thick; border-right-style: solid;.


  1. wielkość - jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. cale - in (1in=2.54cm)

Na przykład:

To jest akapit z prawą krawędzią obramowania wielkości 5px, typu solid: border-right-width: 5px; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości 5pt, typu solid: border-right-width: 5pt; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości 1ex, typu solid: border-right-width: 1ex; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości 1em, typu solid: border-right-width: 1em; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości 0.1cm, typu solid: border-right-width: 0.1cm; border-right-style: solid;.

To jest akapit z prawą krawędzią obramowania wielkości 0.1in, typu solid: border-right-width: 0.1in; border-right-style: solid;.

do góry



Łączenie atrybutów wielkości obramowania

Składnia reguły:


  1. selektor {border-width: określenia wielkości;}

Wyraz selektor ma zastosowanie do wszystkich elementów.


  1. określenia wielkości - wartości względne:
  2. "thin" - cienkie obramowanie
  3. "medium" - średnie obramowanie
  4. "thick" - grube obramowanie

  1. określenia wielkości - jednostki miary:
  2. piksele - px
  3. punkty edytorskie - pt
  4. wysokość litery "x" - ex
  5. wysokość aktualnej czcionki - em
  6. centymetry lub milimetry - cm, mm
  7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
  8. cale - in (1in=2.54cm)

  1. określenia wielkości - trzy sposoby:
  2. jedno określenie wielkości:
  3. wszystkie cztery krawędzie będą takie same
  5. dwa określenia wielkości (oddzielone spacją):
  6. pierwsze oznacza: górną i dolną krawędź
  7. drugie oznacza: lewą i prawą krawędź
  9. cztery określenia wielkości (oddzielone spacjami):
  10. oznaczają kolejno krawędzie:
  11. górna
  12. prawa
  13. dolna
  14. lewa

Przykład - jedno określenie wielkości obramowania:

To jest akapit ze wszystkimi krawędziami obramowania wielkości thin, stylem typu solid: border-width: thin; border-style: solid;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości medium, stylem typu solid: border-width: medium; border-style: solid;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości thick, stylem typu solid: border-width: thick; border-style: solid;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 5px, stylem typu dotted: border-width: 5px; border-style: dotted;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 5pt, stylem typu dashed: border-width: 5pt; border-style: dashed;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 1ex, stylem typu double: border-width: 1ex; border-style: double;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 1em, stylem typu groove: border-width: 1em; border-style: groove;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 3mm, stylem typu ridge: border-width: 3mm; border-style: ridge;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 0.3cm, stylem typu inset: border-width: 0.3cm; border-style: inset;.

To jest akapit ze wszystkimi krawędziami obramowania wielkości 0.1in, stylem typu outset: border-width: 0.1in; border-style: outset;.

Przykład - dwa określenia wielkości obramowania:

To jest akapit z dwoma określeniami wielkości obramowania thin medium, stylem typu solid: border-width: thin medium; border-style: solid;.

To jest akapit z dwoma określeniami wielkości obramowania medium thick, stylem typu solid: border-width: medium thick; border-style: solid;.

To jest akapit z dwoma określeniami wielkości obramowania thick thin, stylem typu solid: border-width: thick thin; border-style: solid;.

To jest akapit z dwoma określeniami wielkości obramowania 3px 3pt, stylem typu dotted: border-width: 3px 3pt; border-style: dotted;.

To jest akapit z dwoma określeniami wielkości obramowania 3pt 1ex, stylem typu dashed: border-width: 3pt 1ex; border-style: dashed;.

To jest akapit z dwoma określeniami wielkości obramowania 1ex 1em, stylem typu double: border-width: 1ex 1em; border-style: double;.

To jest akapit z dwoma określeniami wielkości obramowania 1em 1mm, stylem typu groove: border-width: 1em 1mm; border-style: groove;.

To jest akapit z dwoma określeniami wielkości obramowania 1mm 0.3cm, stylem typu ridge: border-width: 1mm 0.3cm; border-style: ridge;.

To jest akapit z dwoma określeniami wielkości obramowania 0.1cm 0.1in, stylem typu inset: border-width: 0.1cm 0.1in; border-style: inset;.

To jest akapit z dwoma określeniami wielkości obramowania 0.1in 3px, stylem typu outset: border-width: 0.1in 3px; border-style: outset;.

Przykład - cztery określenia wielkości obramowania:

To jest akapit z czterema określeniami wielkości obramowania thin medium thick 3px, stylem typu solid: border-width: thin medium thick 3px; border-style: solid;.

To jest akapit z czterema określeniami wielkości obramowania medium thick 3px 3pt, stylem typu solid: border-width: medium thick 3px 3pt; border-style: solid;.

To jest akapit z czterema określeniami wielkości obramowania thick 3px 3pt 1ex, stylem typu solid: border-width: thick 3px 3pt 1ex; border-style: solid;.

To jest akapit z czterema określeniami wielkości obramowania 3px 3pt 1ex 1em, stylem typu dotted: border-width: 3px 3pt 1ex 1em; border-style: dotted;.

To jest akapit z czterema określeniami wielkości obramowania 3pt 1ex 1em 1mm, stylem typu dashed: border-width: 3pt 1ex 1em 1mm; border-style: dashed;.

To jest akapit z czterema określeniami wielkości obramowania 1ex 1em 1mm 0.3cm, stylem typu double: border-width: 1ex 1em 1mm 0.3cm; border-style: double;.

To jest akapit z czterema określeniami wielkości obramowania 1em 1mm 0.3cm 0.1in, stylem typu groove: border-width: 1em 1mm 0.3cm 0.1in; border-style: groove;.

To jest akapit z czterema określeniami wielkości obramowania 1mm 0.3cm 0.1in 3px, stylem typu ridge: border-width: 1mm 0.3cm 0.1in 3px; border-style: ridge;.

To jest akapit z czterema określeniami wielkości obramowania 0.1cm 0.1in thin medium, stylem typu inset: border-width: 0.1cm 0.1in thin medium; border-style: inset;.

To jest akapit z czterema określeniami wielkości obramowania 0.1in 3px medium thick, stylem typu outset: border-width: 0.1in 3px medium thick; border-style: outset;.

do góry



Kolor obramowania

Kolor obramowania - górna krawędź

Składnia reguły:


  1. selektor {border-top-color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor obramowania dla górnej krawędzi danego elementu.

Przykład:

Górna krawędź obramowania koloru #c0c0c0; (silver), stylu solid: border-top-color: #c0c0c0; border-top-style: solid;.

Górna krawędź obramowania koloru #800000; (maroon), stylu solid: border-top-color: #800000; border-top-style: solid;.

Górna krawędź obramowania koloru #ff0000; (red), stylu solid: border-top-color: #ff0000; border-top-style: solid;.

Górna krawędź obramowania koloru #800080; (purple), stylu solid: border-top-color: #800080; border-top-style: solid;.

Górna krawędź obramowania koloru #008000; (green), stylu solid: border-top-color: #008000; border-top-style: solid;.

Górna krawędź obramowania koloru #ffff00; (yellow), stylu solid: border-top-color: #ffff00; border-top-style: solid;.

Górna krawędź obramowania koloru #000080; (navy), stylu solid: border-top-color: #000080; border-top-style: solid;.

Górna krawędź obramowania koloru #00ffff; (aqua), stylu solid: border-top-color: #00ffff; border-top-style: solid;.

do góry



Kolor obramowania - dolna krawędź

Składnia reguły:


  1. selektor {border-bottom-color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor obramowania dla dolnej krawędzi danego elementu.

Przykład:

Dolna krawędź obramowania koloru #c0c0c0; (silver), stylu solid: border-bottom-color: #c0c0c0; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #800000; (maroon), stylu solid: border-bottom-color: #800000; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #ff0000; (red), stylu solid: border-bottom-color: #ff0000; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #800080; (purple), stylu solid: border-bottom-color: #800080; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #008000; (green), stylu solid: border-bottom-color: #008000; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #ffff00; (yellow), stylu solid: border-bottom-color: #ffff00; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #000080; (navy), stylu solid: border-bottom-color: #000080; border-bottom-style: solid;.

Dolna krawędź obramowania koloru #00ffff; (aqua), stylu solid: border-bottom-color: #00ffff; border-bottom-style: solid;.

do góry



Kolor obramowania - lewa krawędź

Składnia reguły:


  1. selektor {border-left-color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor obramowania dla lewej krawędzi danego elementu.

Przykład:

Lewa krawędź obramowania koloru #c0c0c0; (silver), stylu solid: border-left-color: #c0c0c0; border-left-style: solid;.

Lewa krawędź obramowania koloru #800000; (maroon), stylu solid: border-left-color: #800000; border-left-style: solid;.

Lewa krawędź obramowania koloru #ff0000; (red), stylu solid: border-left-color: #ff0000; border-left-style: solid;.

Lewa krawędź obramowania koloru #800080; (purple), stylu solid: border-left-color: #800080; border-left-style: solid;.

Lewa krawędź obramowania koloru #008000; (green), stylu solid: border-left-color: #008000; border-left-style: solid;.

Lewa krawędź obramowania koloru #ffff00; (yellow), stylu solid: border-left-color: #ffff00; border-left-style: solid;.

Lewa krawędź obramowania koloru #000080; (navy), stylu solid: border-left-color: #000080; border-left-style: solid;.

Lewa krawędź obramowania koloru #00ffff; (aqua), stylu solid: border-left-color: #00ffff; border-left-style: solid;.

do góry



Kolor obramowania - prawa krawędź

Składnia reguły:


  1. selektor {border-right-color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić kolor obramowania dla prawej krawędzi danego elementu.

Przykład:

Prawa krawędź obramowania koloru #c0c0c0; (silver), stylu solid: border-right-color: #c0c0c0; border-right-style: solid;.

Prawa krawędź obramowania koloru #800000; (maroon), stylu solid: border-right-color: #800000; border-right-style: solid;.

Prawa krawędź obramowania koloru #ff0000; (red), stylu solid: border-right-color: #ff0000; border-right-style: solid;.

Prawa krawędź obramowania koloru #800080; (purple), stylu solid: border-right-color: #800080; border-right-style: solid;.

Prawa krawędź obramowania koloru #008000; (green), stylu solid: border-right-color: #008000; border-right-style: solid;.

Prawa krawędź obramowania koloru #ffff00; (yellow), stylu solid: border-right-color: #ffff00; border-right-style: solid;.

Prawa krawędź obramowania koloru #000080; (navy), stylu solid: border-right-color: #000080; border-right-style: solid;.

Prawa krawędź obramowania koloru #00ffff; (aqua), stylu solid: border-right-color: #00ffff; border-right-style: solid;.

do góry



Łączenie atrybutów koloru obramowania

Składnia reguły:


  1. selektor {border-color: określenia koloru;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Jako kolor należy podać definicję koloru.


  1. określenia koloru - trzy sposoby:
  2. jedno określenie koloru:
  3. wszystkie cztery krawędzie będą takie same
  5. dwa określenia koloru (oddzielone spacją):
  6. pierwsze oznacza: górną i dolną krawędź
  7. drugie oznacza: lewą i prawą krawędź
  9. cztery określenia koloru (oddzielone spacjami):
  10. oznaczają kolejno krawędzie:
  11. górna
  12. prawa
  13. dolna
  14. lewa

Przykład - jedno określenie koloru obramowania:

To jest akapit ze wszystkimi krawędziami obramowania koloru #c0c0c0; (silver), stylem typu solid: border-color: #c0c0c0; border-style: solid;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #800000; (maroon), stylem typu dotted: border-color: #800000; border-style: dotted;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #ff0000; (red), stylem typu dashed: border-color: #ff0000; border-style: dashed;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #800080; (purple), stylem typu double: border-color: #800080; border-style: double;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #008000; (green), stylem typu groove: border-color: #008000; border-style: groove;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #ffff00; (yellow), stylem typu ridge: border-color: #ffff00; border-style: ridge;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #000080; (navy), stylem typu inset: border-color: #000080; border-style: inset;.

To jest akapit ze wszystkimi krawędziami obramowania koloru #00ffff; (aqua), stylem typu outset: border-color: #00ffff; border-style: outset;.

Przykład - dwa określenia koloru obramowania:

To jest akapit z dwoma określeniami koloru obramowania #c0c0c0 #800000; (silver maroon), stylem typu solid: border-color: #c0c0c0 #800000; border-style: solid;.

To jest akapit z dwoma określeniami koloru obramowania #800000 #ff0000; (maroon red), stylem typu solid: border-color: #800000 #ff0000; border-style: dotted;.

To jest akapit z dwoma określeniami koloru obramowania #ff0000 #800080; (red purple), stylem typu solid: border-color: #ff0000 #800080; border-style: dashed;.

To jest akapit z dwoma określeniami koloru obramowania #800080 #008000; (purple green), stylem typu dotted: border-color: #800080 #008000; border-style: double;.

To jest akapit z dwoma określeniami koloru obramowania #008000 #ffff00; (green yellow), stylem typu dashed: border-color: #008000 #ffff00; border-style: groove;.

To jest akapit z dwoma określeniami koloru obramowania #ffff00 #000080; (yellow navy), stylem typu double: border-color: #ffff00 #000080; border-style: ridge;.

To jest akapit z dwoma określeniami koloru obramowania #000080 #00ffff; (navy aqua), stylem typu groove: border-color: #000080 #00ffff; border-style: inset;.

To jest akapit z dwoma określeniami koloru obramowania #00ffff #c0c0c0; (aqua silver), stylem typu ridge: border-color: #00ffff #c0c0c0; border-style: outset;.

Przykład - cztery określenia koloru obramowania:

To jest akapit z czterema określeniami koloru obramowania #c0c0c0 #800000 #ff0000 #800080; (silver maroon red purple), stylem typu solid: border-color: #c0c0c0 #800000 #ff0000 #800080; border-style: solid;.

To jest akapit z czterema określeniami koloru obramowania #800000 #ff0000 #800080 #008000; (maroon red purple green), stylem typu dotted: border-color: #800000 #ff0000 #800080 #008000; border-style: dotted;.

To jest akapit z czterema określeniami koloru obramowania #ff0000 #800080 #008000 #ffff00; (red purple green yellow), stylem typu dashed: border-color: #ff0000 #800080 #008000 #ffff00; border-style: dashed;.

To jest akapit z czterema określeniami koloru obramowania #800080 #008000 #ffff00 #000080; (purple green yellow navy), stylem typu double: border-color: #800080 #008000 #ffff00 #000080; border-style: double;.

To jest akapit z czterema określeniami koloru obramowania #008000 #ffff00 #000080 #00ffff; (green yellow navy aqua), stylem typu groove: border-color: #008000 #ffff00 #000080 #00ffff; border-style: groove;.

To jest akapit z czterema określeniami koloru obramowania #ffff00 #000080 #00ffff #c0c0c0; (yellow navy aqua silver), stylem typu ridge: border-color: #ffff00 #000080 #00ffff #c0c0c0; border-style: ridge;.

To jest akapit z czterema określeniami koloru obramowania #000080 #00ffff #c0c0c0 #800000; (navy aqua silver maroon), stylem typu inset: border-color: #000080 #00ffff #c0c0c0 #800000; border-style: inset;.

To jest akapit z czterema określeniami koloru obramowania #00ffff #c0c0c0 #800000 #ff0000; (aqua silver maroon red), stylem typu outset: border-color: #00ffff #c0c0c0 #800000 #ff0000; border-style: outset;.

do góry



Przykład ze wszystkimi atrybutami obramowania

Oczywiście, można nadać każdej krawędzi inny atrybut stylu, inny wielkości i inny koloru obramowania:

Po wpisaniu na przykład takiej reguły w arkuszu CSS:


  1. p {border-style: dotted solid dashed double; border-width: 7px 3mm 2ex 0.2in; border-color: #ff0000 #800080 #008000 #000080;}

tekst w akapicie będzie otoczony takim obramowaniem:

To jest akapit z obramowaniem każdej krawędzi w innym stylu, innej wielkości i innego koloru. Górna krawędź jest w stylu dotted, wielkości 7px i koloru #ff0000; (red). Prawa krawędź jest w stylu solid, wielkości 3mm i koloru #800080; (purple). Dolna krawędź jest w stylu dashed, wielkości 2ex i koloru #008000; (green). Lewa krawędź jest w stylu double, wielkości 0.2in i koloru #000080; (navy). Ponadto jest jeszcze wstawiony dookoła margines wewnętrzny - padding: 10px;.

do góry



Wykazy

Styl wykazu

Składnia reguły:


  1. selektor {list-style-type: styl;}

Wyraz selektor ma zastosowanie do elementów dotyczących wykazów.

Jako styl należy podać jeden z rodzajów znaku dla wykazu.


  1. styl:
  2. "decimal" - znakiem dla wykazu będą cyfry arabskie
  3. "lower-roman" - znakiem dla wykazu będą małe cyfry rzymskie
  4. "upper-roman" - znakiem dla wykazu będą duże cyfry rzymskie
  5. "lower-alpha" - znakiem dla wykazu będą małe litery alfabetu
  6. "upper-alpha" - znakiem dla wykazu będą duże litery alfabetu
  7. "disc" - znakiem dla wykazu będzie koło
  8. "circle" - znakiem dla wykazu będzie okrąg
  9. "square" - znakiem dla wykazu będzie kwadrat
  10. "none" - brak znaku dla wykazu

Dzięki temu poleceniu, w połączeniu ze znacznikami list wyliczeniowych, można nadać formatowanie wykazom.

Przykład:

Cyfry arabskie:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Małe cyfry rzymskie:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Duże cyfry rzymskie:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Małe litery alfabetu:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Duże litery alfabetu:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Koło:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Okrąg:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Kwadrat:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

Brak znaku dla wykazu:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

do góry



Znaki obrazkowe w wykazie

Składnia reguły:


  1. selektor {list-style-image: url(adres);}

Wyraz selektor ma zastosowanie do elementów dotyczących wykazów.


  1. adres:
  2. względna ścieżka dostępu z miejsca w miejsce
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem
  7. jeżeli jest to zewnętrzny arkusz CSS, to ścieżkę podajemy względem niego
  8. "none" - usunie obrazek

Dzięki temu poleceniu można jako znak dla wykazu ustalić dowolny obrazek.

Wspólnie z tą własnością można również podać dodatkowo styl wykazu. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, wykaz przyjmie podany typ.

źródło: www.kurshtml.boo.pl


Na przykład:

  1. punkt pierwszy
  2. punkt drugi
  3. punkt trzeci

do góry



Pozycja znaków w wykazie

Składnia reguły:


  1. selektor {list-style-position: pozycja;}

Wyraz selektor ma zastosowanie do elementów dotyczących wykazów.


  1. pozycja:
  2. "outside" - znaki na zewnątrz wykazu (domyślnie)
  3. "inside" - znaki wewnątrz wykazu

Dzięki temu poleceniu można ustalić czy znaki w wykazie będą wysunięte poza wykaz, czy będą wewnątrz wykazu.

Na przykład:

Na zewnątrz wykazu:

  1. punkt pierwszy - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  2. punkt drugi - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  3. punkt trzeci - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu

Wewnątrz wykazu:

  1. punkt pierwszy - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  2. punkt drugi - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  3. punkt trzeci - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu

do góry



Wykazy zagnieżdżone

Można również stosować dla zagnieżdżonych wykazów różne style dla każdego poziomu zagnieżdżenia.

Na przykład:

Zwykłe znaki mieszane:

  1. rozdział pierwszy
  2. rozdział drugi
    1. punkt pierwszy
    2. punkt drugi
      1. podpunkt pierwszy
      2. podpunkt drugi
      3. podpunkt trzeci
      4. podpunkt czwarty
    3. punkt trzeci
    4. punkt czwarty
  3. rozdział trzeci
  4. rozdział czwarty

Obrazki jako znaki dla wykazu:

  1. rozdział pierwszy
  2. rozdział drugi
    1. punkt pierwszy
    2. punkt drugi
      1. podpunkt pierwszy
      2. podpunkt drugi
      3. podpunkt trzeci
      4. podpunkt czwarty
    3. punkt trzeci
    4. punkt czwarty
  3. rozdział trzeci
  4. rozdział czwarty

do góry



Łączenie własności wykazu

Składnia reguły:


  1. selektor {list-style: wartości atrybutów;}

Wyraz selektor ma zastosowanie do elementów dotyczących wykazów.

Jako wartości atrybutów wpisać należy zgodnie z podaną poniżej kolejnością, oddzielając spacjami, konkretne wartości, które opisują poszczególne atrybuty wykazu.


  1. wartości atrybutów:
  2. styl wykazu
  3. pozycja znaków w wykazie
  4. znak obrazkowy dla wykazu

Dzięki temu poleceniu można za pomocą jednej reguły ustalić własności formatowania wykazu.

Przykład:

Po wpisaniu na przykład takiej reguły w arkuszu CSS:

  1. ol {list-style: square inside url(../../grafiki/cwiczenie_14/image_3.png);}

wykaz będzie wyglądał następująco:

  1. punkt pierwszy - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  2. punkt drugi - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu
  3. punkt trzeci - te zdania muszą być dłuższe, aby można było zobaczyć pozycję znaku względem wykazu

do góry



Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS dotyczące obramowania i wykazów do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą wszystkie własności dotyczące obramowania i wykazów. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.

1. Należy zacząć od przygotowania struktury folderów i plików:


  1. foldery:
  2. cw_14 - główny
  3. pliki - zawarty w głównym
  4. style - zawarty w głównym
  5. grafiki - zawarty w głównym

  1. pliki:
  2. plik_1.html - w folderze pliki
  3. plik_2.html - w folderze pliki
  4. style.css - w folderze style
  5. grafiki - w folderze grafiki
  6. spakowane pliki do zadań: pliki_14.zip (9KB)

2. W obu plikach HTML należy umieścić taką samą treść:


  1. zawartość plików HTML:
  2. szablon HTML 4.01 Transitional
  3. w sekcji <head>...</head>:
  4. łącze do arkusza stylów - patrz tutaj
  5. w znaczniku <title>...</title> nazwa pliku
  6. w sekcji <body>...</body>:
  7. znacznik <div>...</div> z klasą: klasa_1
  8. w nim wzajemne łącza do plików
  9. znacznik <div>...</div> z klasą: klasa_2
  10. w nim wykaz z trzema poziomami zagnieżdżenia
  11. każdemu poziomowi zagnieżdżenia przydzielić klasę
  12. w znacznikach <ul>...</ul> lub <ol>...</ol>
  13. czyli: klasa_3, klasa_4, klasa_5,
  14. w każdym punkcie wykazu zdanie na tyle długie
  15. by przechodziło do drugiego wiersza
  16. znacznik <div>...</div> z klasą: klasa_6
  17. w nim wykaz z pięcioma poziomami zagnieżdżenia
  18. każdemu poziomowi zagnieżdżenia przydzielić klasę
  19. w znacznikach <ul>...</ul> lub <ol>...</ol>
  20. czyli: klasa_7, klasa_8, klasa_9,klasa_10, klasa_11
  21. w każdym punkcie wykazu zdanie na tyle długie
  22. by przechodziło do drugiego wiersza

Spakowane pliki do zadań: pliki_14.zip (9KB).

Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez żadnego formatowania:

Krok 1 - menu

Krok 1 - wykaz 1

Krok 1 - wykaz 2

3. W pliku CSS należy przygotować dla wszystkich jedenastu klas, jedenaście różnych reguł formatujących obramowanie i wykazy, uwzględniających wszystkie ich właściwości.


  1. zawartość pliku CSS:
  2. klasa_1:
  3. obramowanie:
  4. wszystkie krawędzie: 10px groove #c0c0c0; (silver)
  5. marginesy:
  6. górny i dolny: 50px;
  7. lewy i prawy: 40px;
  8. marginesy wewnętrzne:
  9. górny i dolny: 15px;
  10. lewy i prawy: 10px;
  11. wyrównanie tekstu: na środek;
  12. tak wyglądają pliki HTML po formatowaniu: klasa_1
  14. klasa_2:
  15. wielkość obramowania:
  16. krawędź górna: 16px;
  17. krawędź prawa: 14px;
  18. krawędź dolna: 12px;
  19. krawędź lewa: 18px;
  20. styl obramowania:
  21. krawędź górna: double;
  22. krawędź prawa: dotted;
  23. krawędź dolna: solid;
  24. krawędź lewa: dashed;
  25. kolor obramowania:
  26. krawędź górna: #ff0000; (red)
  27. krawędź prawa: #0000ff; (blue)
  28. krawędź dolna: #808000; (olive)
  29. krawędź lewa: #000080; (navy)
  30. marginesy:
  31. górny i dolny: 20px;
  32. lewy i prawy: 30px;
  33. marginesy wewnętrzne:
  34. wszystkie krawędzie: 20px;
  35. tak wyglądają pliki HTML po formatowaniu: klasa_2
  37. klasa_3:
  38. styl wykazu: square;
  39. pozycja znaku: outside;
  40. tak wyglądają pliki HTML po formatowaniu: klasa_3
  42. klasa_4:
  43. styl wykazu: disc;
  44. pozycja znaku: outside;
  45. tak wyglądają pliki HTML po formatowaniu: klasa_4
  47. klasa_5:
  48. styl wykazu: circle;
  49. pozycja znaku: outside;
  50. tak wyglądają pliki HTML po formatowaniu: klasa_5
  52. klasa_6:
  53. wielkość obramowania:
  54. krawędź górna: 8mm;
  55. krawędź prawa: 4mm;
  56. krawędź dolna: 7mm;
  57. krawędź lewa: 6mm;
  58. styl obramowania:
  59. krawędź górna: ridge;
  60. krawędź prawa: groove;
  61. krawędź dolna: inset;
  62. krawędź lewa: outset;
  63. kolor obramowania:
  64. krawędź górna: #00ff00; (green)
  65. krawędź prawa: #ff00ff; (fuchsia)
  66. krawędź dolna: #ffff00; (yellow)
  67. krawędź lewa: #00ffff; (aqua)
  68. marginesy:
  69. górny: 150px;
  70. prawy: 30px;
  71. dolny: 130px;
  72. lewy: 30px;
  73. marginesy wewnętrzne:
  74. wszystkie krawędzie: 35px;
  75. tak wyglądają pliki HTML po formatowaniu: klasa_6
  77. klasa_7:
  78. styl wykazu: decimal;
  79. pozycja znaku: inside;
  80. tak wyglądają pliki HTML po formatowaniu: klasa_7
  82. klasa_8:
  83. styl wykazu: upper-alpha;
  84. pozycja znaku: inside;
  85. tak wyglądają pliki HTML po formatowaniu: klasa_8
  87. klasa_9:
  88. styl wykazu: upper-roman;
  89. pozycja znaku: inside;
  90. tak wyglądają pliki HTML po formatowaniu: klasa_9
  92. klasa_10:
  93. styl wykazu: lower-alpha;
  94. pozycja znaku: inside;
  95. tak wyglądają pliki HTML po formatowaniu: klasa_10
  97. klasa_11:
  98. styl wykazu: lower-roman;
  99. pozycja znaku: inside;
  100. tak wyglądają pliki HTML po formatowaniu: klasa_11

Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane. Wygląda to następująco:

oba pliki - klasa_1

oba pliki - klasa_2

oba pliki - klasa_3

oba pliki - klasa_4

oba pliki - klasa_5

oba pliki - klasa_6

oba pliki - klasa_7

oba pliki - klasa_8

oba pliki - klasa_9

oba pliki - klasa_10

oba pliki - klasa_11

4. W pliku: plik_2.html należy dokonać lokalnych wewnątrzwierszowych modyfikacji:


  1. wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
  2. klasa_2:
  3. zmienić wielkość obramowania na:
  4. krawędź górna i dolna: 22px;
  5. krawędź lewa i prawa: 16px;
  6. zmienić styl obramowania na:
  7. krawędź górna i dolna: double;
  8. krawędź lewa i prawa: solid;
  9. zmienić kolor obramowania na:
  10. krawędź górna i dolna: #00ffff; (aqua)
  11. krawędź lewa i prawa: #0000ff; (blue)
  12. tak wygląda plik_2.html po modyfikacji: klasa_2
  14. klasa_3:
  15. zmienić pozycję znaku na: inside;
  16. wstawić znak obrazkowy: image_1.png;
  17. tak wygląda plik_2.html po modyfikacji: klasa_3
  19. klasa_4:
  20. zmienić pozycję znaku na: inside;
  21. wstawić znak obrazkowy: image_2.png;
  22. tak wygląda plik_2.html po modyfikacji: klasa_4
  24. klasa_5:
  25. zmienić pozycję znaku na: inside;
  26. wstawić znak obrazkowy: image_3.png;
  27. tak wygląda plik_2.html po modyfikacji: klasa_5
  29. klasa_6:
  30. zmienić wielkość obramowania na:
  31. wszystkie krawędzie: 25px;
  32. zmienić styl obramowania na:
  33. wszystkie krawędzie: ridge;
  34. zmienić kolor obramowania na:
  35. wszystkie krawędzie: #ff00ff; (fuchsia)
  36. tak wygląda plik_2.html po modyfikacji: klasa_6
  38. klasa_7:
  39. zmienić pozycję znaku na: outside;
  40. wstawić znak obrazkowy: image_4.png;
  41. tak wygląda plik_2.html po modyfikacji: klasa_7
  43. klasa_8:
  44. zmienić pozycję znaku na: outside;
  45. wstawić znak obrazkowy: image_5.png;
  46. tak wygląda plik_2.html po modyfikacji: klasa_8
  48. klasa_9:
  49. zmienić pozycję znaku na: outside;
  50. wstawić znak obrazkowy: image_6.png;
  51. tak wygląda plik_2.html po modyfikacji: klasa_9
  53. klasa_10:
  54. zmienić pozycję znaku na: outside;
  55. wstawić znak obrazkowy: image_7.png;
  56. tak wygląda plik_2.html po modyfikacji: klasa_10
  58. klasa_11:
  59. zmienić pozycję znaku na: outside;
  60. wstawić znak obrazkowy: image_8.png;
  61. tak wygląda plik_2.html po modyfikacji: klasa_11

Spakowane pliki do zadań: pliki_14.zip (9KB).

Po wszystkich zmianach plik plik_2.html powinien wyglądać następująco:

plik_2.html - klasa_2

plik_2.html - klasa_3

plik_2.html - klasa_4

plik_2.html - klasa_5

plik_2.html - klasa_6

plik_2.html - klasa_7

plik_2.html - klasa_8

plik_2.html - klasa_9

plik_2.html - klasa_10

plik_2.html - klasa_11


Oceniany będzie folder cw_14 z trzema podfolderami: pliki, style i grafiki, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html i plik_2.html, w folderze style plik: style.css, a w folderze grafiki pliki graficzne.

Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje obramowanie i wykazy - użyte są wszystkie własności formatowania tych dwóch elementów. Ponadto w pliku plik_2.html dokonana ma zostać lokalna wewnątrzwierszowa modyfikacja wyżej wspomnianych elementów.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki