Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Zawartość generowana

Generowanie treści

Email Drukuj PDF

Tematy: generowanie treści | przyrost licznika | reset licznika | cudzysłowy

Dane w pigułce
Zastosowanieautomatyczne generowanie treści
Dziedziczenienie
Wartościciąg znaków, counter, url, open-quote|close-quote, no-open-quote|no-close-quote, attr(x))
Wartość domyślnabrak
Przykładp.gwiazdka:before { content: "* "; }
Uwagi
Odpowiednik w HTMLbrak

Aby zdefiniować generowaną zawartość, należy wpisać w definicji stylu content : generowana zawartość

Polecenie content jest narzędziem do automatycznego generowania treści, współpracującym z pseudoelementami :before i :after. Podanie go w stylu powoduje przywołanie jakiejś treści, np. licznika, ciągu znaków czy grafiki.

W części nagłówkowej podaj styl, natomiast w ciele dokumentu odwołaj się do klasy, która spowoduje przywołanie zdefiniowanej w stylu treści.

Przykład ciągu znaków:

Styl w HEAD
p.gwiazdka:before { content: "* "; }

Zwróć uwagę na spację po gwiazdce, która pozwoli oddzielić ją od następującego po niej akapitu.

Odwołanie w ciele dokumentu:

<p class="gwiazdka">Treść akapitu</p>

Rezultat:

Akapit poprzedzony gwiazdką

Przykład odwołania do pliku graficznego (Url):

Styl w HEAD
p.zielonakropka:before { content: url(greendot.gif)}

Odwołanie w ciele dokumentu:

<p class="zielonakropka">Treść akapitu</p>

Rezultat (problem z wyświetleniem w Joomla):

Akapit poprzedzony zieloną kropką

Odwołań przez Url do plików multimedialnych, jak np. dźwięk, przeglądarki na razie nie interpretują.

Przykład odwołania do licznika:

Styl w HEAD
p.licznik1:before { counter-increment: licznik_dziesietny; content: counter(licznik_dziesietny, decimal) }

Odwołanie w ciele dokumentu:

<p class="licznik1">Treść akapitu</p>

Rezultat:

 Akapit poprzedzony licznikiem dziesiętnym (decimal)

 Akapit poprzedzony licznikiem greckim (lower-greek)

 Akapit poprzedzony dużym licznikiem łacińskim (upper-alpha)

 Akapit poprzedzony licznikiem z wiodącym zerem (decimal-leading-zero)

Typy liczników odpowiadają markerom z listy stylów wykazów.

Przykład odwołania do cudzysłowu:

Styl w HEAD
p { quotes: "\201e" "\201d"; }
p.cudzyslow:before { content: open-quote; }
p.cudzyslow:after { content: close-quote; }

Zauważ, że definicja określa w pierwszym wierszu postać znaków cudzysłowu.

Odwołanie w ciele dokumentu:

<p class="cudzyslow">Treść akapitu</p>

Rezultat:

Akapit objęty cudzysłowem

W praktyce odwołanie do cudzysłowu można wykorzystac np. w znaczniku <blockquote>, który służy często do cytowania.

Styl w HEAD
blockquote { quotes: "\201e" "\201d"; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

Najpierw akapit, w którym podajemy jakąś treść.

A teraz jakaś cytowana treść w ramach znacznika blockquote

I ciąg dalszy akapitu.

Samodzielne użycie content:

Polecenenie content nie musi być używane z pseudoelementami :before i :after.
Można je wykorzystać jako samodzielne polecenie wywołujące jakąś treść, np. w HEAD można podać treść stylu:

div.sufi { content: url(../grafika/sufi.jpg) }

Za każdym razem, gdy wprowadzimy polecenie (Opera, Chrome):

<div class="sufi">[fotka Sufi]</div>

Na ekranie pojawi się zdefiniowany w bloku obrazek lub treść, gdy przeglądarka nie interpretuje polecenia.

[fotka Sufi]

Inny przykład, z użyciem tekstu (Opera):

span.kato {content: " ceterum censeo Carthaginem esse delendam"}

W ciele dokumentu:
<p>Jak mawiał Kato Starszy: <span class="kato">[cytat z Katona]</span></p>

I efekt:

Jak mawiał Kato Starszy: [cytat z Katona]

Oczywiście ma to sens, gdy często przywołujemy jakiś dłuższy czy trudniejszy do zapamiętania fragment tekstu.


Interpretacja (z błędami): Internet Explorer, Opera, Firefox, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V