Zawartość anonimowa

Karta pracy 2014/2015

Dokument:
http://www.plotkarka.eu/kp/zawartoscanonimowa.html
Autor:
Radosław Kowaluk

Generowanie treści

 

Skopiuj plik zawartoscanonimowa.zip rozpakuj go do folderu WWW.

Otwórz plik zawartoscanonimowa.html w przeglądarce internetowej. Zapoznaj się ze źródłem pliku.

Wstawianie zawartości1 przed2 elementem

W elemencie style dodaj kod:

<style type="text/css">
p:before {
content: "START ";
}
</style>

Zapisz zmiany i odśwież podgląd.

Wstawianie zawartości po3 elemencie

W elemencie style dodaj kod:

p:after {
content: " KONIEC";
color: silver;
}

Zapisz zmiany i odśwież podgląd.

Definiowanie licznika4

W elemencie style dodaj kod:

body {
counter-reset: licznik;
}

Zapisz zmiany i odśwież podgląd.

Właściwości licznika5

W elemencie style dodaj kod:

h1:before {
content: counter(licznik) ". ";
 counter-increment: licznik;
}

Zapisz zmiany i odśwież podgląd.

Cytaty 6

W elemencie style dodaj kod:

q {
quotes: "," "\2019";
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść pliki witryny na serwerze.


  1. Styl CSS {content:} – definiuje wtawianą zawartość. Wartości stylu może być równa: łańcuch znakowy - tekst, URL - adres pliku, counter - licznik, counters - liczniki, attr(X) - wartością atrybutu X, open-quote - cudzysłow początkowy, close-quote - cudzysłowów końcowy, no-open-quote - brak cudzysłowów początkowych , no-close-quote brak cudzysłowów końcowych
  2. Pseudoelement CSS :before – definiuje miejsce wtawianej zawartości - przed elementem.
  3. Pseudoelement CSS :after – definiuje miejsce wtawianej zawartości - po elemencie.
  4. Styl CSS {counter-reset:} – definiuje nazwę, identyfikator licznika lub liczników i zeruje go.
  5. Styl CSS {counter-increment:} – definiuje przyrost określonego licznika.
  6. Styl CSS {quotes:} – definiuje znaki cudzysłowu.

Drukowanie

Marginesy strony (kartki) wydruku 1

W elemencie style dodaj kod:

}
@page {
margin: 3cm;
}
</style>

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Właściwości strony lewej 2, prawej 3 i pierwszej 4 wydruku

W elemencie style dodaj kod:

}
@page :left {
margin-right: 5cm;
}
@page :right {
margin-left: 5cm;
}
@page :first {
margin-top: 1cm;
margin-bottom: 1cm;
}
</style>

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Właściwości łamania stron przed 5, po 6, w 7.

W elemencie style dodaj kod:

}
h2 {
page-break-before: always;
}
h3 {
page-break-after: avoid;
}
h2, h3 {
page-break-inside: avoid;
}
</style>

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Kotrola wdów 8 i sierot 9up>.

W elemencie style dodaj kod:

}
p, li {
orphans: 3;
widows: 3;
}
</style>

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Wgrywanie plików na serwer

Umieść pliki witryny na serwerze.


  1. Reguła CSS @page – definiuje włąściwości strony (kartki) wydruku.
    Style: {margin-top:}, {margin-right:}, {margin-bottom:}, {margin-left:} i {margin:} umieszczone w regule @page odnoszą się do strony (kartki) wydruku.
    Styl {margin:} - definiuje margines elementu. Wartościami mogą być: liczby z jednostka długości, procent lub auto. Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala tę wartość dla wszystkich marginesów strony.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy strony.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny strony.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines strony.
    Styl {margin-top:} - definiuje margines górny strony.
    Styl {margin-right:} - definiuje margines lewy strony.
    Styl {margin-bottom:} - definiuje margines dolny strony.
    Styl {margin-left:} - definiuje margines lewy strony.
  2. Selektor CSS @page :left – definiuje lewą stronę kartki wydruku.
  3. Selektor CSS @page :right – definiuje prawą stronę kartki wydruku.
  4. Selektor CSS @page :first – definiuje pierwszą stronę wydruku.
  5. Styl CSS {page-break-before:} – definiuje rozpoczęcie nowej strony wydruku przed elementem. Wartościami są: auto - niewymuszone łamanie stron, always - wymusza łamanie strony, avoid - unikanie łamania stron, left - wymusza takie łamanie strony, że następna strona złoży się jako lewa, right - wymusza takie łamanie strony, że następna strona złoży się jako prawa.
  6. Styl CSS {page-break-after:} – definiuje rozpoczęcie nowej strony wydruku po elemencie. Wartościami są: auto, always, avoid, left, right.
  7. Styl CSS {page-break-inside:} – definiuje rozpoczęcie nowej strony wydruku wewnątrz elementu. Wartościami są: auto, avoid.
  8. Styl CSS {orphans:} – definiuje definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na końcu strony. Wartościa stylu jest liczba.
  9. Styl CSS {widows:} – definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na początku strony. Wartościa stylu jest liczba.