1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: Treść
slug: Learn/CSS/Howto/Generated_content
tags:
- 'CSS:Na_początek'
translation_of: Learn/CSS/Howto/Generated_content
---
<p>
</p><p>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.
</p><p>Zmodyfikujesz swój arkusz stylów, aby dodać treść oraz obrazek.
</p>
<h3 id="Informacja:_Tre.C5.9B.C4.87" name="Informacja:_Tre.C5.9B.C4.87"> Informacja: Treść </h3>
<p>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.
</p><p>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.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> 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.
<p>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.
</p><p>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.
</p><p>Treść określona w arkuszu stylów nie staje się częścią DOM-u.
</p>
</td></tr></tbody></table>
<h4 id="Teksty" name="Teksty">Teksty</h4>
<p>CSS pozwala umieścić tekst przed i po elemencie. Stwórz regułę i dodaj
<code>:before</code> lub <code>:after</code> do selektora. Ustaw własność <code>content</code> z tekstem jako wartością.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Ta reguła dodaje tekst <span style="font-weight: bold; color: navy;">Dokumentacja:</span> przed każdym elementem należącym do klasy <code>ref</code>:
<div style="width: 30em;">
<p>.ref:before {
</p>
<pre class="eval"> font-weight: bold;
color: navy;
content: "Dokumentacja: ";
}
</pre>
</div>
</td></tr></tbody></table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> 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 <a class="external" href="http://...">4.4 reprezentacja arkuszy stylów CSS</a>.
<p>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 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Korzystanie ze znaków nie reprezentowanych w kodowaniu</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>.
</p>
</td></tr></tbody></table>
<h4 id="Obrazki" name="Obrazki">Obrazki</h4>
<p>Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności <code>content</code>.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Ta reguła dodaje wolną przestrzeń oraz ikonę po każdym odnośniku, który posiada klasę <code>glossary</code>:
<div style="width: 45em;">
<p>a.glossary:after {content: " " url("../images/glossary-icon.gif");}
</p>
</div>
</td></tr></tbody></table>
<p>Aby dodać obrazek jako element tła, określ URL pliku obrazu jako wartość własności <code>background</code>. 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.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Ta reguła określa tło podanego elementu, używając URL-a do określenia pliku obrazu.
<p>Selektor określa identyfikator elementu.
Wartość <code>no-repeat</code> powoduje, że obrazek wyświetlany jest tylko raz:
</p>
<div style="width: 50em;">
<ol><li>sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
</li></ol>
</div>
</td></tr></tbody></table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> 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ł <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">Tła</a>.
</td></tr></tbody></table>
<h3 id="Zadanie:_Dodawanie_obrazu_t.C5.82a" name="Zadanie:_Dodawanie_obrazu_t.C5.82a"> Zadanie: Dodawanie obrazu tła </h3>
<p>Poniższy obrazek to biały prostokąt z niebieską linią na dole.
Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS:
</p>
<table style="border: 2px solid #ccc;">
<tbody><tr>
<td><img alt="Grafika:Blue-rule.png">
</td></tr></tbody></table>
<p>(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.)
</p><p>Wyedytuj swój plik CSS i dodaj tę regułę, aby ustawić obrazek tła dla całej strony.
</p>
<div style="width: 40em;">
<p>background: url("Blue-rule.png");
</p>
</div>
<p>Wartość <code>repeat</code> 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:
</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
</p>
</div>
<div style="font-style: normal; padding-top: 2px; height: 8em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
</p>
</div>
</div>
</div>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Pobierz ten obraz:
<table style="border: 2px solid #ccc;">
<tbody><tr>
<td><img alt="Grafika:Yellow-pin.png">
</td></tr></tbody></table>
<p>Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii:
</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="Grafika:Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
</div>
<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="Grafika:Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
</div>
</div>
</div>
</td></tr></tbody></table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list.
</p><p>Następna strona opisuje, jak określić style dla elementów listy:
<b><a href="pl/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/Getting_Started/Content", "fr": "fr/CSS/Premiers_pas/Contenu", "ja": "ja/CSS/Getting_Started/Content", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }}
|
