Treść

Ta strona opisuje niektóre metody, dzięki którym możesz użyć CSS-a, aby dodać treść do dokumentu w trakcie jego wyświetlania.

Zmodyfikujesz swój arkusz stylów, aby dodać treść oraz obrazek.

Informacja: Treść

Jedną z ważnych zalet CSS-a jest to, że pomaga on oddzielić warstwę prezentacyjną dokumentu od jego treści. Zdarzają się jednak sytuacje, kiedy dobrym rozwiązaniem jest określenie treści jako elementu arkusza stylów, a nie dokumentu.

Treść określona w arkuszach stylów może składać się z tekstu i obrazów. Możesz określić treść w arkuszu stylów, kiedy jest ona blisko związana ze strukturą dokumentu.

Więcej szczegółów
Wstawianie treści w arkusz stylów może spowodować komplikacje. Na przykład możesz mieć wiele wersji językowych dokumentu, które dzielą arkusz stylów.

Jeżeli jakiś fragment arkusza stylów zawiera ciągi wymagające tłumaczenia, to musisz go wyciągnąć do osobnego pliku i przygotować osobną wersję dla każdej wersji językowej.

Unikniesz takich komplikacji, jeśli treść określona w arkuszach stylów będzie zawierała tylko symbole i obrazki, które pasują do wszystkich języków i kultur.

Treść określona w arkuszu stylów nie staje się częścią DOM-u.

Teksty

CSS pozwala umieścić tekst przed i po elemencie. Stwórz regułę i dodaj :before lub :after do selektora. Ustaw własność content z tekstem jako wartością.

Przykład
Ta reguła dodaje tekst Dokumentacja: przed każdym elementem należącym do klasy ref:

.ref:before {

 font-weight: bold;
 color: navy;
 content: "Dokumentacja: ";
 }
Więcej szczegółów
Arkusz stylów domyślnie zakodowany jest jako UTF-8, ale można to zmienić w odnośniku, w samym arkuszu stylów lub w inny sposób. Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS, do rozdziału 4.4 reprezentacja arkuszy stylów CSS.

Pojedyncze znaki mogą także być zakodowane przy użyciu znaku odwróconego ukośnika. Na przykład \265B jest symbolem szachów dla czarnej królowej ♛. Aby dowiedzieć się więcej, zajrzyj do dokumentacji CSS, do rozdziałów Korzystanie ze znaków nie reprezentowanych w kodowaniu oraz Characters and case.

Obrazki

Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności content.

Przykład
Ta reguła dodaje wolną przestrzeń oraz ikonę po każdym odnośniku, który posiada klasę glossary:

a.glossary:after {content: " " url("../images/glossary-icon.gif");}

Aby dodać obrazek jako element tła, określ URL pliku obrazu jako wartość własności background. Jest to skrótowa własność, która określa kolor tła, obrazek tła, jak ten obrazek jest powielany i inne szczegóły.

Przykład
Ta reguła określa tło podanego elementu, używając URL-a do określenia pliku obrazu.

Selektor określa identyfikator elementu. Wartość no-repeat powoduje, że obrazek wyświetlany jest tylko raz:

  1. sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
Więcej szczegółów
Aby dowiedzieć się więcej o poszczególnych własnościach tła oraz innych opcjach określanych dla obrazków tła, zajrzyj do dokumentacji CSS, rozdział Tła.

Zadanie: Dodawanie obrazu tła

Poniższy obrazek to biały prostokąt z niebieską linią na dole. Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS:

Grafika:Blue-rule.png

(Na przykład wciśnij prawy klawisz myszy, aby otworzyć menu kontekstowe, i wybierz Zapisz Obraz Jako... a następnie określ katalog, którego używasz w tym kursie.)

Wyedytuj swój plik CSS i dodaj tę regułę, aby ustawić obrazek tła dla całej strony.

background: url("Blue-rule.png");

Wartość repeat jest domyślna i nie musi być określana. Obrazek jest powtarzany horyzontalnie i wertykalnie, sprawiając wrażenie, jakby strona była kartką papieru w linie:

Grafika:Blue-rule-ground.png

Cascading Style Sheets

Cascading Style Sheets

Wyzwanie
Pobierz ten obraz:
Grafika:Yellow-pin.png

Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii:

Grafika:Blue-rule-ground.png

Grafika:Yellow-pin.png Cascading Style Sheets
Grafika:Yellow-pin.png Cascading Style Sheets

Co dalej?

Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list.

Następna strona opisuje, jak określić style dla elementów listy: Listy

Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: teoli, Mgjbot, Delor, Verruckt, gandalf, Takenbot, Ptak82, Ruby, Witia, Anonymous
Ostatnia aktualizacja: teoli,