Treść generowana przez CSS
Wypunktowania list oraz cudzysłowy? są również generowane przez CSS, ale w nieco inny sposób.
CSS pozwala dodawać niewielkie ilości tekstu i obrazki do dokumentu. Każdy element dokumentu może mieć dodany na początku i na końcu swojej zawartości po jednym pseudo-elemencie.
Pseudo-elementy before
i after
Pseudo-elementy wskazuje się odpowiednim selektorem. Tworzy się w nich treść za pomocą właściwości content
.
Pseudo-elementy przyjmują prawie wszystkie właściwości, co zwykłe elementy (czyli można nadać im kolory, obramowanie, marginesy, itp.)
<element>
treść</element>
element:before {content: "dodatek";}
da w rezultacie efekt przypominający ten fikcyjny kod:
<element><:before>
dodatek</:before>
treść</element>
Z tym, że dodatkowa treść nie jest dodawana do dokumentu, a jedynie dokument jest wyświetlany tak, jakby tam była (np. nie da się jej „zobaczyć” z poziomu DOM/JavaScript).
Zawartość: content
Właściwość content
przyjmuje fragmenty tekstu lub obrazek.
Obrazek: url()
Podaje się ścieżkę za pomocą funkcji url()
. Niestety w CSS2 nie ma możliwości podania tekstu
zastępczego dla tak wstawionych obrazków.
a[href$=".pdf"]:after {content:url(/ikona_pdf.png);}
Na końcu każdego odnośnika (<a>
) mającego ścieżkę (href
) kończącą się na ".pdf" ($=".pdf"
) zostanie dodana grafika z pliku "/ikona_pdf.png".
Tekst
Tekst musi być w cudzysłowiu.
W CSS nie są rozpoznawane encje XHTML. Specjalne znaki wstawia się przez \numer
, gdzie numer to
szesnastkowy numer znaku Unicode.
h2.rozdzial:before {content: "Rozdział: ";}
Doda napis „Rozdział: ” przed każdy nagłówek<h2>
mający klasęrozdzial
.ul>li {list-style:none;}
ul>li:before {content:"- ";}
Usunie z listy "tradycyjną" kropkę i zamiast niej doda myślnik przed każdym elementem listy.
Tekst atrybutów: attr()
Można dodawać fragmenty tekstu pobrane z atrybutów elementu, do którego dodawane są pseudo-elementy.
Funkcja attr(nazwaAtrybutu)
zostanie wyświetlona jako tekst zawarty w podanym atrybucie.
Fragmenty tekstu i funkcje attr()
zapisane obok siebie zostaną połączone razem.
a:after {content: " [" attr(href) "] ";}
Dostawi wartość atrybutuhref
za każdym odnośnikiem. Wartość będzie w nawiasach kwadratowych (przydatne przy drukowaniu dokumentu).
Liczniki: counter()
Można też generować treść na podstawie liczników?.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 21.08.2006, 09:15