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 pseudoelemencie.

Pseudoelementy before i after Bug w IE

Pseudoelementy wskazuje się odpowiednim selektorem. Tworzy się w nich treść za pomocą właściwości content.

Pseudoelementy 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 Bug w IE

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łowie.

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ą pseudoelementy.

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ść atrybutu href 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: 22.11.2008, 16:37
submit