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.
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.
| 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. |
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ą.
Ta reguła dodaje tekst Dokumentacja: przed każdym elementem należącym do klasy ref:
.ref:before { font-weight: bold; color: navy; content: "Dokumentacja: "; } |
| 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. |
Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności content.
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.
| 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ść
|
| 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. |
Poniższy obrazek to biały prostokąt z niebieską linią na dole. Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS:
(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:
| Pobierz ten obraz:
Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii: |
Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list.
Następna strona opisuje, jak określić style dla elementów listy: Listy