diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/css | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pl/web/css')
170 files changed, 22333 insertions, 0 deletions
diff --git a/files/pl/web/css/-moz-binding/index.html b/files/pl/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..e44145368c --- /dev/null +++ b/files/pl/web/css/-moz-binding/index.html @@ -0,0 +1,48 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-binding +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>-moz-binding</code> jest używany przez aplikacje bazujące na Mozilli, by dołączyć wiązanie <a href="/pl/XBL" title="pl/XBL">XBL</a> do elementu DOM.</p> + +<ul> + <li>Wartość początkowa: <code>none | {{ mediawiki.external(',') }}* <uri> | inherit</code></li> + <li>Dotyczy: wszystkich elementów (oprócz zawartości generowanej lub pseudoelementów)</li> + <li>Dziedziczony: nie</li> + <li>Procenty: niedostępne</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-binding: <em>uri</em> | none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>uri</dt> + <dd>Identyfikator URI dla wiązania XBL (włączając w to identyfikator fragmentaryczny).</dd> + <dt>none</dt> + <dd>Żadne wiązanie XBL nie jest stosowane do elementu.</dd> +</dl> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<pre>.exampleone { + -moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox"); +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="/pl/XBL/Dokumentacja_XBL_1.0/Binding_Attachment_and_Detachment" title="pl/XBL/Dokumentacja_XBL_1.0/Binding_Attachment_and_Detachment">Dokumentacja XBL: Binding Attachment and Detachment</a></p> + +<p><a href="/pl/Kurs_XUL/Wprowadzenie_do_XBL" title="pl/Kurs_XUL/Wprowadzenie_do_XBL">Kurs XUL:Wprowadzenie do XBL</a></p> diff --git a/files/pl/web/css/-moz-border-bottom-colors/index.html b/files/pl/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..62e5f28015 --- /dev/null +++ b/files/pl/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-bottom-colors</code> ustawia kolory dolnego obramowania. Powinna być ustawiona lista kolorów. Jeśli element ma obramowanie, które jest szersze niż pojedynczy piksel, każda linia pikseli używa następnego koloru określonego w tej własności, z zewnątrz do wewnątrz. Eliminuje to potrzebę zagnieżdżonych boksów. Jeśli obramowanie jest szersze niż liczba określonej w tej własności kolorów, pozostała część obramowania jest w kolorze określonym najbliżej środka.</p> + +<ul> + <li>Wartość początkowa: nie stosuje się</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p>Obecność <code>-moz-border-bottom-colors</code> oddziela kod rysujący obramowanie, który był zaprojektowany do rysowania obramowań elementów interfejsu użytkownika, ale nie wspiera wielu innych własności obramowania.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-border-bottom-colors: [<color> | transparent,]* <color> | transparent +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><color></dt> + <dd>Określa kolor linii pikseli dolnego obramowania</dd> + <dt>transparent</dt> + <dd>Linia pikseli nie ma własnego koloru, w zamian pokazuje kolor elementu pod spodem</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/-moz-border-left-colors">-moz-border-left-colors</a> ustawia kolory lewego obramowania</li> + <li><a href="pl/CSS/-moz-border-right-colors">-moz-border-right-colors</a> ustawia kolory prawego obramowania</li> + <li><a href="pl/CSS/-moz-border-top-colors">-moz-border-top-colors</a> ustawia kolory górnego obramowania</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + border: 5px solid #000000; + + /* Kolor dolnego obramowania będzie czerwony, zielony, niebieski i biały + zaczynając od zewnątrz */ + -moz-border-bottom-colors: #FF0000 #00FF00 #0000FF #FFFFFF; +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-border-left-colors/index.html b/files/pl/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..303bdfa747 --- /dev/null +++ b/files/pl/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-left-colors</code> ustawia kolory obramowania lewej krawędzi.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-border-bottom-colors">-moz-border-bottom-colors</a>.</p> diff --git a/files/pl/web/css/-moz-box-align/index.html b/files/pl/web/css/-moz-box-align/index.html new file mode 100644 index 0000000000..1d6c77d415 --- /dev/null +++ b/files/pl/web/css/-moz-box-align/index.html @@ -0,0 +1,77 @@ +--- +title: '-moz-box-align' +slug: Web/CSS/-moz-box-align +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-align +--- +<p>{{ CSSRef() }}</p> + +<p>{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-align</code> określa jak element XUL <code>box</code> (pudełko) wyrównuje swoją zawartość w poprzek (prostopadle) do kierunku swojego układu. Efekt tego jest widoczny tylko, jeśli w pudełku jest dodatkowa przestrzeń.</p> + +<p>Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.</p> + +<ul> + <li>Wartość początkowa: stretch</li> + <li>Dotyczy: elementy z własnością <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-align: start | center | end | baseline | stretch +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>start</dt> + <dd>Pudełko wyrównuje zawartość od początku, opuszczając dodatkową przestrzeń na końcu.</dd> + <dt>center</dt> + <dd>Pudełko wyrównuje zawartość do środka, dzieląc pustą przestrzeń odpowiednio między początek i koniec.</dd> + <dt>end</dt> + <dd>Pudełko wyrównuje zawartość do końca, opuszczając dodatkową przestrzeń na początku</dd> + <dt>baseline</dt> + <dd>Pudełko wyrównuje linie bazowe zawartości (ustawiając tekst w kolejności). Ma zastosowanie tylko, gdy orientacja pudełka jest pozioma.</dd> + <dt>stretch</dt> + <dd>Pudełko rozciąga zawartość, zatem w pudełku nie ma dodatkowej przestrzeni.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-align: end; /* przenosi zawartość do dołu */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka określona jako<em>start</em> dla celu wyrównania zależy od orientacji pudełka</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td style="text-align: right;"><strong>Pozioma</strong></td> + <td>górna</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowa</strong></td> + <td>lewa</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej jest określana jako<em>end</em></p> + +<p>Jeśli wyrównanie jest ustawione przy użyciu atrybutu align elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-pack">CSS:-moz-box-pack</a></p> diff --git a/files/pl/web/css/-moz-box-flex/index.html b/files/pl/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..bd4f192a92 --- /dev/null +++ b/files/pl/web/css/-moz-box-flex/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-flex +--- +<p>{{ CSSRef() }}</p> + +<p>{{ warning("This is a property for controlling parts of the XUL box model. It does not match either the old CSS Flexible Box Layout Module drafts for '<code>box-flex</code>' (which were based on this property) or the behavior of '<code>-webkit-box-flex</code>' (which is based on those drafts).") }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-flex</code> określa jak pudełko powiększa się, by wypełnić pudełko, które je zawiera, w kierunku układu zawierającego pudełka.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: elementy, które są bezpośrednim dzieckiem elementu z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box.</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-flex:<em>liczba</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>0</dt> + <dd>Pudełko nie powiększa się.</dd> + <dt>> 0</dt> + <dd>Pudełko rozszerza się, by wypełnić proporcjonalną część dostępnej przestrzeni.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-flex: 1; /* take up some more space */ +} +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Zawierające pudełko przydziela dodatkową dostępną przestrzeń proporcjonalnie do wartości rozciągania każdego elementu zawartości.</p> + +<p>Elementy zawartości, które mają rozciąganie ustawione na zero, nie powiększają się.</p> + +<p>Jeśli tylko jeden element zawartości ma niezerowe rozciąganie, wtedy powiększa się on do wypełnienia dostępnej wolnej przestrzeni.</p> + +<p>Elementy zawartości, które mają takie samo rozciąganie, powiększają się o tą samą bezwzględną liczbę.</p> + +<p>Jeśli wartość rozciąganie jest ustawiona przy użyciu atrybutu flex w elemencie, wtedy styl jest ignorowany.</p> + +<p>Aby zrobić element XUL w zawierającym pudełku takich samych rozmiarów, ustaw atrybut equalsize zawierającego pudełka na wartość always. Ten atrybut nie ma odpowiadającej własności CSS.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-pack">CSS:-moz-box-pack</a></p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-box-orient/index.html b/files/pl/web/css/-moz-box-orient/index.html new file mode 100644 index 0000000000..5effdac347 --- /dev/null +++ b/files/pl/web/css/-moz-box-orient/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-box-orient' +slug: Web/CSS/-moz-box-orient +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-orient +--- +<p>{{ CSSRef() }}</p> + +<p>{{ warning("This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.") }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-orient</code> określa, czy pudełko rozkłada swoją zawartość poziomo czy pionowo.</p> + +<p>Np. elementy XUL box i hbox domyślnie rozkładają swoją zawartość poziomo, zaś elementy XUL vbox domyślnie rozkładają swoją zawartość pionowo.</p> + +<ul> + <li>Wartość początkowa: horizontal</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub-moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-orient: horizontal | vertical +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>horizontal</dt> + <dd>Pudełko układa swoją zawartość w poziomie.</dd> + <dt>vertical</dt> + <dd>Pudełko układa swoją zawartość w pionie.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-orient: vertical; /* zmiana orientacji */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli orientacja jest ustawiona w elemencie przy użyciu atrybutu orient, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/direction">CSS:direction</a>, <a href="pl/CSS/-moz-box-direction">CSS:-moz-box-direction</a></p> diff --git a/files/pl/web/css/-moz-box-pack/index.html b/files/pl/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..edbbe60856 --- /dev/null +++ b/files/pl/web/css/-moz-box-pack/index.html @@ -0,0 +1,82 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-pack +--- +<p>{{ CSSRef() }}</p> + +<p>{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-pack</code> określa jak pudełko wpakowuje swoją zawartość w kierunku swojego układu. Efekt tego jest widoczny tylko wtedy, gdy w pudełku jest dodatkowa wolna przestrzeń.</p> + +<p>Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.</p> + +<ul> + <li>Wartość początkowa: start</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-pack: start | center | end | justify +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>start</dt> + <dd>Pudełko wpakowuje zawartość od początku, zostawiając dodatkową wolną przestrzeń na końcu.</dd> + <dt>center</dt> + <dd>Pudełko wpakowuje zawartość w środku, dzieląc dodatkową wolną przestrzeń pomiędzy początek i koniec.</dd> + <dt>end</dt> + <dd>Pudełko wpakowuje zawartość na końcu, zostawiając dodatkową wolną przestrzeń na początku.</dd> + <dt>justify</dt> + <dd> ?</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-box-pack: end; /* przesuwa zawartość na prawo */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka, określona jako<em>start</em> dla celów wpakowywania, zależy od orientacji i kierunku pudełka.</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td> </td> + <td><strong>Normalna</strong></td> + <td><strong>Odwrócona</strong></td> + </tr> + <tr> + <td style="text-align: right;"><strong>Poziomo</strong></td> + <td>lewa</td> + <td>prawa</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowo</strong></td> + <td>góra</td> + <td>dół</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej jest określana jako<em>end</em>.</p> + +<p>Jeśli wpakowywanie jest ustawione w atrybucie pack elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><code><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a>, <a href="pl/CSS/-moz-box-direction">CSS:-moz-box-direction</a>, <a href="pl/CSS/-moz-box-align">CSS:-moz-box-align</a></code></p> diff --git a/files/pl/web/css/-moz-image-region/index.html b/files/pl/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..8b8315df3c --- /dev/null +++ b/files/pl/web/css/-moz-image-region/index.html @@ -0,0 +1,41 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-image-region +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Dla określonych elementów i pseudoelementów XUL, które używają obrazka z własności {{ Cssxref("list-style-image") }}, ta własność określa obszar obrazka, który jest używany w miejsce całego obrazka. Pozwala to elementowi używać różnych fragmentów tego samego obrazka w celu ulepszenia wykonania.</p> + +<p>Składnia jest podobna do własności {{ Cssxref("clip") }}. Wszystkie cztery wartości są określane względem górnego lewego rogu obrazka.</p> + +<ul> + <li>Wartość początkowa <code>auto</code></li> + <li>Dotyczy: element XUL {{ XULElem("image") }} i pseudoelementy {{ Cssxref(":-moz-tree-image") }}, {{ Cssxref(":-moz-tree-twisty") }} oraz {{ Cssxref(":-moz-tree-checkbox") }}</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: Dla wartości <code>rect()</code> prostokąt składający się z czterech wyliczonych wartości; w innym przypadku jako określone.</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-image-region: rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>); +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>#example-button { + /* display only the 4x4 area from the top left of this image */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* use the 4x4 area to the right of the first for the hovered button */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +} +</pre> diff --git a/files/pl/web/css/-moz-outline-color/index.html b/files/pl/web/css/-moz-outline-color/index.html new file mode 100644 index 0000000000..bded69c35c --- /dev/null +++ b/files/pl/web/css/-moz-outline-color/index.html @@ -0,0 +1,12 @@ +--- +title: '-moz-outline-color' +slug: Web/CSS/-moz-outline-color +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-color +--- +<p>d</p> diff --git a/files/pl/web/css/-moz-outline-radius-bottomleft/index.html b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..fd55bfdfef --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,17 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-bottomleft</code> ustawia zaokrąglenie dolnego lewego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/-moz-outline-radius-bottomright/index.html b/files/pl/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..2ac8105365 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-bottomright</code> ustawia zaokrąglenie dolnego prawego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> diff --git a/files/pl/web/css/-moz-outline-radius-topleft/index.html b/files/pl/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..695c0fa28f --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius-topleft</code> ustawia zaokrąglenie górnego lewego rogu konturu.</p> + +<p>Zobacz więcej informacji we własności <a href="pl/CSS/-moz-outline-radius">-moz-outline-radius</a>.</p> diff --git a/files/pl/web/css/-moz-outline-radius/index.html b/files/pl/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..8fc9754922 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius/index.html @@ -0,0 +1,71 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-radius</code> może być używane do nadania konturowi zaokrąglonych rogów. Kontur jest linią rysowaną wokół elementu, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: wszystkie elementy</li> + <li>Dziedziczony: nie</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-outline-radius:<em><outline-radius>{1,4}</em> | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p><code><em><outline-radius></em></code> reprezentuje jedną w wartości:</p> + +<dl> + <dt><length> </dt> + <dd>długość</dd> + <dt><percentage> </dt> + <dd>procenty, względem szerokości pudełka</dd> +</dl> + +<p>Zatem używane są 4 wartości w porządku górny lewy, górny prawy, dolny prawy i dolny lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do uzupełnienia pozostałych wartości.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/-moz-outline">outline</a> ustawia kolor, styl i szerokość konturu.</li> + <li><a href="pl/CSS/-moz-outline-color">outline-color</a> ustawi kolor konturu.</li> + <li><a href="pl/CSS/-moz-outline-offset">outline-offset</a> odsuwa kontur od elementu.</li> + <li><a href="pl/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a> ustawia zaokrąglenie dolnego lewego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a> ustawia zaokrąglenie dolnego prawego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a> ustawia zaokrąglenie górnego lewego rogu.</li> + <li><a href="pl/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a> ustawia zaokrąglenie górnego prawego rogu.</li> + <li><a href="pl/CSS/-moz-outline-style">outline-style</a> ustawia styl konturu.</li> + <li><a href="pl/CSS/-moz-outline-width">outline-width</a> ustawia szerokość konturu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + -moz-outline: #000000 solid 10px; + width: 500px; + height: 500px; + /* kontur wygnie się w kształt litery 'D' */ + -moz-outline-radius: 10px 200px 200px 10px; +} +</pre> + +<h2 id="Znane_b.C5.82.C4.99dy" name="Znane_b.C5.82.C4.99dy">Znane błędy</h2> + +<p>Te błędy są takie same jak w <a href="pl/CSS/-moz-border-radius">border-radius</a>.</p> + +<ul> + <li>Obrazki tła wychodzą poza zaokrąglone obramowania {{ Bug(24998) }}</li> + <li>Zaokrąglone obramowania wspierają jedynie wartość <code>solid</code> dla <a href="pl/CSS/border-style">border-style</a>. {{ Bug(24998) }}</li> +</ul> diff --git a/files/pl/web/css/@document/index.html b/files/pl/web/css/@document/index.html new file mode 100644 index 0000000000..75889861b3 --- /dev/null +++ b/files/pl/web/css/@document/index.html @@ -0,0 +1,46 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule +translation_of: Web/CSS/@document +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Reguła <code>@-moz-document</code> jest regułą @ ograniczającą reguły zawartych w sobie stylów bazując na adresie URL dokumentu. Jest stworzona głównie dla stylów użytkownika.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p>Możesz tego użyć w swoim pliku <a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a>:</p> + +<pre>@document url(http://www.w3.org/), + url-prefix(http://www.w3.org/Style/), + domain(mozilla.org) +{ + /* Reguły CSS dotyczą tutaj: + + Strony "http://www.w3.org/". + + Strony, której URL rozpoczyna się "http://www.w3.org/Style/" + + Każdej strony, dla której URL domeny zawiera "mozilla.org" lub kończy się + ".mozilla.org" + */ + + /* zrobienie powyższych stron potwornymi */ + body { color: purple; background: yellow; } +}</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Reguły stylów użytkownika dotyczące stron</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>Dostępne od Mozilli 1.8 / <a href="pl/Firefox_1.5">Firefox 1.5</a>.</p> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/@import/index.html b/files/pl/web/css/@import/index.html new file mode 100644 index 0000000000..3ed94ea5d7 --- /dev/null +++ b/files/pl/web/css/@import/index.html @@ -0,0 +1,34 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@import +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>@import</code> pozwala użytkownikom importować reguły stylów z innych arkuszy stylów.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">@import "<i>url</i>"; +@import "<i>url</i>"<i>media1</i>,<i>media2</i>,<i>...</i>; +@import url("<i>url</i>"); +@import url("<i>url</i>")<i>media1</i>; +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>W związku z tym, że program użytkownika może pominąć wyszukiwanie zasobów dla niewspieranych typów mediów, autorzy mogą określić reguły <code>@import</code> zależne od mediów. Te warunkowe importowanie określa się przy użyciu oddzielonych przecinkami <a href="pl/CSS/@media#Media_types">typów mediów</a> po URI. W przypadku braku jakiegokolwiek typu mediów import jest bezwarunkowy. Określenie <code>all</code> dla medium przynosi ten sam efekt.</p> +<p> </p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +</pre> +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#at-import">CSS 2.1</a></li> +</ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}</p> +<p>{{ languages( { "en": "en/CSS/@import", "fr": "fr/CSS/@import" } ) }}</p> diff --git a/files/pl/web/css/@media/index.html b/files/pl/web/css/@media/index.html new file mode 100644 index 0000000000..f1f74e6374 --- /dev/null +++ b/files/pl/web/css/@media/index.html @@ -0,0 +1,193 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@media +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>@media</code> określa typ docelowych mediów (oddzielonych przecinkami) dla zestawu reguł (ograniczonych klamrami). +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">@media <i><typy mediów></i> { + /* reguły specyficzne dla medium */ +} +</pre> +<h3 id="Typy_medi.C3.B3w" name="Typy_medi.C3.B3w"> Typy mediów </h3> +<dl><dt>all +</dt><dd>Pasujące dla wszystkich urządzeń. +</dd><dt>braille +</dt><dd>Przeznaczone dla dotykowych urządzeń brailla. +</dd><dt>embossed +</dt><dd>Przeznaczone dla drukarek brailla. +</dd><dt>handheld +</dt><dd>Przeznaczone dla urządzeń kieszonkowych (przeważnie z małym ekranem, ograniczoną przepustowością). +</dd><dt>print +</dt><dd>Przeznaczone dla materiałów stronnicowanych lub dokumentów pokazywanych na ekranie w trybie podglądu wydruku. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +</dd><dt>projection +</dt><dd>Przeznaczone dla rzutowanych prezentacji, np. projektorów. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +</dd><dt>screen +</dt><dd>Przeznaczone przede wszystkim dla kolorowych ekranów komputerowych. +</dd><dt>speech +</dt><dd>Przeznaczone dla syntezatorów mowy. Uwaga: CSS2 miał do tego celu podobny typ mediów nazywany 'aural' . Zobacz w dodatku szczegóły o arkuszach stylów 'aural'. +</dd><dt>tty +</dt><dd>Przeznaczone dla mediów używających dla znaków siatki o stałej podziałce (jak np. dalekopis, terminal lub urządzenia przenośne o ograniczonych możliwościach wyświetlania). Autorzy nie powinni używać dla medium "tty" jednostek w pikselach. +</dd><dt>tv +</dt><dd>Przeznaczone dla urządzeń telewizyjnych (niska rozdzielczość, kolor, ograniczone przewijanie ekranów, dźwięk dostępny). +</dd></dl> +<p><br> +</p> +<h3 id="Grupy_medi.C3.B3w" name="Grupy_medi.C3.B3w"> Grupy mediów </h3> +<p>Typy mediów są również częścią różnych grup mediów. Poniższa tabel pokazuje, które typy są w których grupach. +</p> +<table class="standard-table"> <tbody><tr> +<td> +</td><td class="header" colspan="10" style="text-align: center;">Grupy +</td></tr> <tr> +<td class="header">Typ +</td><td class="header">continuous +</td><td class="header">paged +</td><td class="header">visual +</td><td class="header">audio +</td><td class="header">speech +</td><td class="header">tactile +</td><td class="header">grid +</td><td class="header">bitmap +</td><td class="header">interactive +</td><td class="header">static +</td></tr> <tr> +<td class="header">braille +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">embossed +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td>X +</td></tr> <tr> +<td class="header">handheld +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">print +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td>X +</td></tr> <tr> +<td class="header">projection +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td> +</td></tr> <tr> +<td class="header">screen +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">speech +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">tty +</td><td>X +</td><td> +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td> +</td><td>X +</td><td>X +</td></tr> <tr> +<td class="header">tv +</td><td>X +</td><td>X +</td><td>X +</td><td>X +</td><td> +</td><td> +</td><td> +</td><td>X +</td><td>X +</td><td>X +</td></tr> +</tbody></table> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre> @media print { + body { font-size: 10pt } + } + @media screen { + body { font-size: 13px } + } + @media screen, print { + body { line-height: 1.2 } + } +</pre> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Wielomodalny typ medium jest wciąż jednym typem medium. Np. typ medium 'tv' jest wielomodalnym typem, który prezentuje jednocześnie wizualnie i słuchowo dla jednego obrazu. +</p> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("@import") }}, {{ Cssxref("@font-face") }} +</p>{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media" } ) }} diff --git a/files/pl/web/css/@supports/index.html b/files/pl/web/css/@supports/index.html new file mode 100644 index 0000000000..1c726ccdc8 --- /dev/null +++ b/files/pl/web/css/@supports/index.html @@ -0,0 +1,123 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p><code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> zawiera grupę reguł w bloku CSS zamkniętych w klamrowych nawiasach. Składa się z deklaracji CSS (klucz-para). Do wykorzstania mamy także warunkowość zdań: koniunkcję, alternatywę oraz negację. Powyższa reguła daje nam możliwość wykrycia dostępności danej reguły.</p> + +<p>Istnieje możliwość użycia tej reguły na zewnątrz <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>, uzyskując tym samym dostęp do kontrolowania jej przy użyciu obiektowego modelu interfejsu CSS {{domxref("CSSSupportsRule")}}.<br> + </p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">@supports <em><wyrażenie></em> { + /* reguły, które zostaną zaaplikowane w przypadku gdy wyrażenie jest prawdziwe */ +} +</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Sprawdzanie_wsparcia_danej_właściowści_CSS">Sprawdzanie wsparcia danej właściowści CSS</h3> + +<pre class="brush:css;">@supports (animation-name: test) { + … /* reguły aplikowane gdy właściwość "animation-name" jest dostepna bez tzw. vendor prefixes, np. "-webkit-animation" */ + @keyframes { /* przykład użycia @supports na zewnątrz innej reguły @ */ + … + } +} +</pre> + +<h3 id="Sprawdzanie_wsparcia_danej_właściowści_CSS_wraz_z_przedrostkami">Sprawdzanie wsparcia danej właściowści CSS wraz z przedrostkami</h3> + +<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or + (-ms-perspective: 10px) or (-o-perspective: 10px) ) { + … /* reguły aplikowane są dostępne, niezależnie czy przeglądarka obsługuje wersja z przedrostkami czy bez */ +} +</pre> + +<h3 id="Sprawdzanie_czy_przeglądarka_nie_obsługuje_danej_właściwości">Sprawdzanie czy przeglądarka nie obsługuje danej właściwości</h3> + +<pre class="brush:css;">@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ + /* aplikowane reguły, jeśli powyższe wyrażenie jest prawdziwe */ +}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td> + <td>{{ Spec2('CSS3 Conditional') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarką</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>28.0</td> + <td>{{ CompatGeckoDesktop("22") }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>12.1</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("22") }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>12.1</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 17 do Gecko 21 wspierał tą cechę tylko gdy użytkownik włączył ją ustawiając wartość <code>layout.css.supports-rule.enabled</code> na <code>true</code>.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-last-node/index.html b/files/pl/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..8650cda09d --- /dev/null +++ b/files/pl/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,63 @@ +--- +title: ':last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pseudoklasa <code>:last-node</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. <code>:last-node</code> uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":last-child") }}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">selektor:-moz-last-node { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> + +<pre class="eval">span:-moz-last-node { font-weight: bold; } +</pre> + +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione obydwa słowa "<strong>drugi</strong>".</p> + +<ol> + <li>span o id <code>dsecond</code> jest ostatnim dzieckiem elementu div</li> + <li>span o id <code>second</code> jest ostatnim dzieckiem elementu body</li> +</ol> + +<p> </p> + +<pre class="eval">div:-moz-first-node:last-child { background-color: red; } +</pre> + +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.</p> + +<pre class="eval">div:-moz-first-child:last-node { background-color: red; } +</pre> + +<p>Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Pseudoklasa <code>:-moz-last-node</code> nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-last-node") }}</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-node") }}</p> diff --git a/files/pl/web/css/_colon_-moz-tree-cell-text/index.html b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..ea450f5cb5 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>font</li> + <li>visibility</li> + <li>color</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-cell/index.html b/files/pl/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..d6fb331d38 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>background</li> + <li>border</li> + <li>margin</li> + <li>outline</li> + <li>padding</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-column/index.html b/files/pl/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..9e17185510 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecol</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>visibility</li> + <li>text style</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..651ab25f65 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treerow</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-image/index.html b/files/pl/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..ae4bd01d26 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>list style</li> + <li>position</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-indentation/index.html b/files/pl/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..646d986d82 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>position</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-line/index.html b/files/pl/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..dbe7014b2f --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeitem</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>visibility</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..65442cf74e --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>margin</li> + <li>color</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-row/index.html b/files/pl/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..763aefc4bb --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p><code>-moz-tree-row</code> jest używane do wybrania wierszy i zastosowania stylu do drzewa wierszy.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treerow</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">treechildren::-moz-tree-row {<em>style properties</em> } +</pre> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>background</li> + <li>border</li> + <li>margin</li> + <li>outline</li> + <li>padding</li> + <li>display</li> + <li>-moz-appearance</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>treechildren::-moz-tree-row( foo bar ) +{ + margin: 2%; +} +</pre> + +<p>...gdzie...</p> + +<pre> <treerow properties="foo">...</treerow> +</pre> diff --git a/files/pl/web/css/_colon_-moz-tree-separator/index.html b/files/pl/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..b855c38553 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treeseparator</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>display</li> + <li>-moz-appearance</li> +</ul> diff --git a/files/pl/web/css/_colon_-moz-tree-twisty/index.html b/files/pl/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..0da422f8a2 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Aktywowany przez atrybut <code>properties</code>.</p> + +<h2 id="Powi.C4.85zane_elementy" name="Powi.C4.85zane_elementy">Powiązane elementy</h2> + +<ul> + <li>treecell</li> +</ul> + +<h2 id="W.C5.82asno.C5.9Bci_styl.C3.B3w" name="W.C5.82asno.C5.9Bci_styl.C3.B3w">Własności stylów</h2> + +<ul> + <li>border</li> + <li>margin</li> + <li>padding</li> + <li>display</li> + <li>list style</li> + <li>position</li> + <li>-moz-appearance</li> +</ul> diff --git a/files/pl/web/css/_colon_active/index.html b/files/pl/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7779ce45f6 --- /dev/null +++ b/files/pl/web/css/_colon_active/index.html @@ -0,0 +1,160 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - pseudo klasa +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<h2 id="Pseudo_klasaactive">Pseudo klasa:active</h2> + +<p><code>Właściwość :active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><code>jest używany w momencie aktywowania danego elementu przez użytkownika. Podczas interakcji z myszą zazwyczaj jest to czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.</code> Pseudo klasa <code>:active jest często używna z elementami HTML jak</code> {{HTMLElement("a")}} lub {{HTMLElement("button")}} ale nie tylko.</p> + +<p>Pseudo klasa :active może zostać zastąpiona przez inne pseudo-klasy powiązane z linkami, takie jak {{cssxref (": link")}}, {{cssxref (": hover")}} i {cssxref (": visited" )}}, które mogą się pojawić w kolejnych regułach. W celu dopasowania odpowiednich linków, należy umieścić: active we wszystkich innych regułach linków, zgodnie z definicją zlecenia LVHA:: link -: visited -: hover -: active.</p> + +<div class="note"><strong>Notatka:</strong> W systemach z wieloma przyciskami, CSS 3 określa pseudo klasę <code>:active</code> dla przycisku podstawowego.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; highlight:[3]"><body> + <h1>:active przykład selektora CSS</h1> + <p>Ten link zmieni się w czasie kliknięcia i zwolnienia<a href="#">Mozilla Developer Network</a>.</p> +</body></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 } +a:link { color: blue } /* unvisited links */ +a:visited { color: purple } /* visited links */ +a:hover { <span class="st">font-weight: bold</span> } /* user hovers */ +a:active { color: lime } /* active links */</pre> +</div> + +<div>{{EmbedLiveSample('example',600,140)}}</div> + +<h2 id="Specyfikacja"><span>Specyfikacja</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Wsparcie_przeglądarek">Wsparcie przeglądarek</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>5.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Support on non-<code><a></code> elements</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler on the relevant element or on the {{HTMLElement("body")}}.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/pl/web/css/_colon_after/index.html b/files/pl/web/css/_colon_after/index.html new file mode 100644 index 0000000000..71261c88bb --- /dev/null +++ b/files/pl/web/css/_colon_after/index.html @@ -0,0 +1,63 @@ +--- +title: ':after' +slug: 'Web/CSS/:after' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::after' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Tworzy pseudoelement, który staje się ostatnim dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest <code>inline</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre>/* składnia CSS2 */ selektor:after { własności } +/* składnia CSS3 */ selektor::after { własności }</pre> + +<p>Zapis<code> ::after</code> został wprowadzony w CSS 3 w celu ustanowienia różnicy pomiędzy <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo klasami</a>, a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo elementami</a>. Przeglądarki akceptują również notację <code>:after </code>wprowadzoną w CSS 2.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<h3 id="Prosty_przykład">Prosty przykład</h3> + +<pre><html> + <body> + <p>akapit</p> + </body> +</html> +</pre> + +<pre>p:after { + content: 'Koniec'; + display: block; + margin-top: 3em; +} +</pre> + +<hr> +<pre>body:after { content: 'Koniec dokumentu'; } +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Elementy wstawiane do dokumentu poprzez <code>:after</code> nie są widziane w drzewie dokumentu.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#before-and-after">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref("content") }}</p> + +<p> </p> + +<p>{{ languages( { "en": "en/CSS/:after", "es": "es/CSS/after", "fr": "fr/CSS/:after" } ) }}</p> diff --git a/files/pl/web/css/_colon_before/index.html b/files/pl/web/css/_colon_before/index.html new file mode 100644 index 0000000000..5c1a1f3772 --- /dev/null +++ b/files/pl/web/css/_colon_before/index.html @@ -0,0 +1,60 @@ +--- +title: ':before' +slug: 'Web/CSS/:before' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::before' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Tworzy pseudoelement, który staje się pierwszym dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest <code>inline</code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">element:before { własności } +</pre> + +<p>Najczęściej używana jest własność {{ Cssxref("content") }}, która pozwala na wstawienie treści do pseudoelementu.</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p>Zobacz przykład</p> + +<pre><html> + <body> + <p>akapit</p> + </body> +</html> +</pre> + +<pre>p:before { + content: 'Tekst przed akapitem'; + display: block; +} +</pre> + +<p> </p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Elementy wstawiane do dokumentu poprzez <code>:before</code> nie są widziane w drzewie dokumentu.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#before-and-after">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#gen-content">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":after") }}, {{ Cssxref("content") }}</p> + +<p> </p> + +<p>{{ languages( { "en": "en/CSS/:before", "es": "es/CSS/before", "fr": "fr/CSS/:before" } ) }}</p> diff --git a/files/pl/web/css/_colon_empty/index.html b/files/pl/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..5d0479f9a6 --- /dev/null +++ b/files/pl/web/css/_colon_empty/index.html @@ -0,0 +1,44 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:empty' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoklasa <code>:empty</code> odnosi się do elementów, które nie posiadają żadnych węzłów potomnych (wliczając w to węzły tekstowe).</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">selektor:empty { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">span:empty::before { content: "pusty span"; font-style:italic; } +</pre> + +<p>Powyższy przykład doda przed każdym pusty elementem span tekst "<em>pusty span</em> "</p> + +<pre class="eval">*:not(:empty) {<em>własności</em> } +</pre> + +<p>Przykład nada własności wszystkim niepustym elementom.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Jeśli wewnątrz elementu znajduje się jakikolwiek znak, wliczając w to białe znaki, element nie będzie traktowany jako <code>empty</code></p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":not") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/:empty", "es": "es/CSS/vac\u00edo", "fr": "fr/CSS/:empty" } ) }}</p> diff --git a/files/pl/web/css/_colon_first-child/index.html b/files/pl/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..25e81d027e --- /dev/null +++ b/files/pl/web/css/_colon_first-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:first-child' +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pseudoklasa <code>:first-child</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. <code>:first-child</code> ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":first-node") }}. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">selektor:first-child { własności } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> +<pre class="eval">span:first-child { font-weight: bold; } +</pre> +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "<b>pierwszy</b>": </p> +<ol><li> W pierwszym przypadku span o id <code>first</code> jest pierwszym dzieckiem elementu <code>body</code> +</li><li> W drugim przypadku span o id <code>dfirst</code> jest pierwszym dzieckiem elementu <code>div</code> +</li></ol> +<p><br> +</p> +<pre class="eval">div:first-child:last-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. +</p> +<pre><table> + <tr> + <td>Nagłówek k1</td> + <td>Nagłówek k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> + <tr> + <td>Wiersz k1</td> + <td>Wiersz k2</td> + </tr> +</table> +</pre> +<pre class="eval">table tr:first-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi). +UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa <code>:first-child</code>. +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-child") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/:first-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_first-letter/index.html b/files/pl/web/css/_colon_first-letter/index.html new file mode 100644 index 0000000000..5de2e64cbd --- /dev/null +++ b/files/pl/web/css/_colon_first-letter/index.html @@ -0,0 +1,49 @@ +--- +title: ':first-letter' +slug: 'Web/CSS/:first-letter' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::first-letter' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoelement odnoszący się do pierwszej litery w bloku.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval notranslate">element::first-letter { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval notranslate">p::first-letter { text-transform: uppercase; } +</pre> + +<p>Przykład zamieni w każdym paragrafie pierwszą literę na wielką.</p> + +<pre class="eval notranslate">p::first-letter { color: red; } +</pre> + +<p>Przykład zmieni kolor pierwszej litery na czerwony w każdym elemencie <code>p</code></p> + + + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Pseudoelementy nie mogą być negowane poprzez {{ Cssxref(":not") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#first-letter">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#first-letter">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("text-transform") }}</p> diff --git a/files/pl/web/css/_colon_first-node/index.html b/files/pl/web/css/_colon_first-node/index.html new file mode 100644 index 0000000000..123c08088b --- /dev/null +++ b/files/pl/web/css/_colon_first-node/index.html @@ -0,0 +1,58 @@ +--- +title: ':first-node' +slug: 'Web/CSS/:first-node' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:-moz-first-node' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Pseudoklasa <code>:first-node</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. <code>:first-node</code> uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":first-child") }}.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">selektor:first-node { własności } +</pre> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> + +<pre class="eval">span:first-node { font-weight: bold; } +</pre> + +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są pierwszymi dziećmi swoich rodziców. Zostanie tutaj pogrubione tylko jedno słowo "<strong>pierwszy</strong>", ponieważ span o id <code>first</code> nie jest pierwszym dzieckiem elementu <code>body</code>. Pierwszym dzieckiem elementu <code>body</code> jest węzeł tekstowy.</p> + +<pre class="eval">div:first-node:last-child { background-color: red; } +</pre> + +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.</p> + +<pre class="eval">div:first-child:last-node { background-color: red; } +</pre> + +<p>Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Pseudoklasa <code>:first-node</code> nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-first-node") }}</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-node") }}</p> diff --git a/files/pl/web/css/_colon_hover/index.html b/files/pl/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..91006dd99a --- /dev/null +++ b/files/pl/web/css/_colon_hover/index.html @@ -0,0 +1,101 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +<div> +<p>{{CSSRef}}</p> + +<h2 id="Pseudo_klasahover">Pseudo klasa:hover</h2> +</div> + +<p>Właściwość <strong><code>:hover</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> jest używana gdy użytkownik wchodzi w interakcję z elementem za pomocą urządzenia wskazującego, ale niekoniecznie go aktywuje. Generalnie wyzwalanie następuje gdy użytkownik wskaże element kursorem, np. wskaźnikiem myszy.</p> + +<pre class="brush: css no-line-numbers">/* Wybierz każdy element <a>, który zostanie najechany kursorem */ +a:hover { + color: orange; +}</pre> + +<p>Style zdefiniowane przez pseudo-klasę <code>:active</code> będą nadpisywane przez każdą kolejną powiązaną pseudo-klasę ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, lub {{ cssxref(":active") }}) która ma conajmniej taką samą specyfikację. Aby dopasować odpowiednio linki umieść <code>:hover</code> za <code>:link</code> i <code>:visited</code> ale przed <code>:active</code> zgodnie z zasadą <em>LVHA </em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Notatka</strong>: Pseudo-klasa <code>:hover</code> wykazuje problem na ekranach dotykowych. W zależności od przeglądarki <code>:hover</code> może nigdy nie być zgodna, może zmienić styl na czas wskazania elementu lub zmienić go do czasu oznaczenia innego elementu. Web developerzy powinni zadbać o to aby elementy działy również na urządzeniach z ograniczeniami obługi funkcji. </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Wskaż ten link.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h4 id="Rezultat">Rezultat</h4> + +<p>{{EmbedLiveSample("Przykład")}}</p> + +<h3 id="Galeria_obrazów">Galeria obrazów</h3> + +<p>Możesz użyć pseudo-klasy <code>:hover</code> do utworzenia galerii obrazów, gdzie pełnowymiarowe obrazy będą wyświetlae wtedy, gdy kursor przesunie się nad miniaturą. Zobacz <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">demo</a> takiego rozwiązania.</p> + +<div class="note"><strong>Notatka:</strong> Dla analogicznego efektu, ale opartego o pseudo-klasę <a class="internal" href="/en-US/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (zastostosowane dla ukrytych radio-box'ów), zobacz<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip"> demo</a>, zaczerpnięte z strony dotyczącej <a class="internal" href="/en-US/docs/Web/CSS/:checked">:checked</a>.</div> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Allows <code>:hover</code> to be applied to any pseudo-element.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilne_przeglądarki">Kompatybilne przeglądarki</h2> + +<div> + + +<p>{{Compat("css.selectors.hover")}}</p> +</div> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/pl/web/css/_colon_lang/index.html b/files/pl/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..c8bf3f144f --- /dev/null +++ b/files/pl/web/css/_colon_lang/index.html @@ -0,0 +1,31 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:lang' +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pseudoklasa <code>:lang</code> pozwala na dopasowanie własności dla elementów w określonym języku. W <code>HTML4</code> odnosi się do atrybutu <code>lang</code>. W XML-u do <code>xml:lang</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">selektor:lang(symbol) { własności } +</pre> +<p>Gdzie <code>symbol</code> to symbol języka zgodny z <a class="external" href="http://www.ietf.org/rfc/rfc3066.txt"> </a></p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Przykłady </a></h3> +<pre class="eval"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">p:lang(pl) {<i>własności</i> } +</a></pre> +<p><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Zostaną zastosowane własności dla wszystkich elementów <code>P</code>, których atrybut <code>lang</code> ustawiony jest na <code>pl</code>. </a></p> +<h3 id="Notatki" name="Notatki"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Notatki </a></h3> +<p><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Jeśli dany element nie ma przepisanego atrybutu <code>lang</code> pod uwagę brany jest język ustawiony dla całego dokumentu. </a></p> +<p> </p> +<h3 id="Specyfikacje" name="Specyfikacje"><a class="external" href="http://www.ietf.org/rfc/rfc3066.txt">Specyfikacje </a></h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#lang">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#lang-pseudo">CSS 3</a></li> +</ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":empty") }}</p> diff --git a/files/pl/web/css/_colon_last-child/index.html b/files/pl/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..c051571b1f --- /dev/null +++ b/files/pl/web/css/_colon_last-child/index.html @@ -0,0 +1,51 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:last-child' +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Pseudoklasa <code>:last-child</code> sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. <code>:last-child</code> ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":last-node") }}. +</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">selektor:last-child { własności } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre><html> + <body> + Trochę tekstu. + <span id="first">pierwszy</span> + <div> + <span id="dfirst">pierwszy</span> + <span id="dsecond">drugi</span> + </div> + <span id="second">drugi</span> + </body> +</html> +</pre> +<pre class="eval">span:last-child { font-weight: bold; } +</pre> +<p>Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów <code>span</code>, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "<b>drugi</b>": </p> +<ol><li> W pierwszym przypadku span o id <code>dsecond</code> jest ostatnim dzieckiem elementu <code>div</code> +</li><li> W drugim przypadku span o id <code>second</code> jest ostatnim dzieckiem elementu <code>body</code> +</li></ol> +<p><br> +</p> +<pre class="eval">div:first-child:last-child { background-color: red; } +</pre> +<p>Ten przykład ustawi czerwony kolor tła wszystkim elementom <code>div</code>, które są jedynymi dziećmi swojego rodzica. +</p><p><br> +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-child") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/:last-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_link/index.html b/files/pl/web/css/_colon_link/index.html new file mode 100644 index 0000000000..6fb07d5479 --- /dev/null +++ b/files/pl/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Psuedo-class + - Web +translation_of: 'Web/CSS/:link' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie"><span id="result_box" lang="pl"><span>Podsumowanie</span></span></h2> + +<p>Pseudo-klasa :link pozwala wybrać linki wewnątrz elementów. Dzięki niej możesz wybrać każdy link, który nie został jeszcze odwiedzony, nawet taki, który ma już nadane wartości za pomocą innych pseudo-klas, takich jak: {{ cssxref(":hover") }}, {{ cssxref(":active") }} lub {{ cssxref(":visited") }}. W celu odpowiedniej stylizacji linków musisz wstawić pseudo-klasę :link na początku, według kolejności LVHA:<code> :link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Pseudo-klasa {{ cssxref(":focus") }} jest zazwyczaj ustawiana przed lub po pseudo-klasie <code>:hover</code> (w zależności od oczekiwanego efektu).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: css">a:link {color: slategray;} +.external:link {background-color: lightblue;}</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#selector-link">WHATWG HTML Living Standard</a></li> + <li><a href="https://drafts.csswg.org/selectors-4/#link">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#link">Selectors Level 3</a></li> + <li><a href="https://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes">CSS Level 2 (Revision 1)</a></li> + <li><a href="https://www.w3.org/TR/CSS1/#anchor-pseudo-classes">CSS Level 1</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka </strong></td> + <td><strong>Najniższa wersja </strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>4.0</td> + </tr> + <tr> + <td>Edge</td> + <td>7.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>2.0</td> + </tr> + <tr> + <td>Safari</td> + <td>3.1</td> + </tr> + <tr> + <td>Opera</td> + <td>9.6</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li>{{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/pl/web/css/_colon_not/index.html b/files/pl/web/css/_colon_not/index.html new file mode 100644 index 0000000000..a9c87058d8 --- /dev/null +++ b/files/pl/web/css/_colon_not/index.html @@ -0,0 +1,73 @@ +--- +title: ':not' +slug: 'Web/CSS/:not' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:not' +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Pseudoklasa <code>:not</code> sprawia, iż własności są stosowane do elementów, które nie spełniają podanego kryterium.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval notranslate">selektor:not(selektor) { własności } +</pre> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval notranslate">*:not(DIV) { color: red; } +</pre> + +<p>Przykład nada czerwony kolor czcionki wszystkim elementom za wyjątkiem elementów <code>DIV</code>.</p> + +<pre class="eval notranslate">input:not([DISABLED]) { border-color: green; } +</pre> + +<p>Przykład nada wszystkim elementom <code>INPUT</code>, które są aktywne (nie są <code>DISABLED</code>), zmieni kolor obramowania na zielone.</p> + +<pre class="eval notranslate">input:not([TYPE=PASSWORD]) {<em>własności</em> } +</pre> + +<p>Przykład przydzieli własności wszystkim elementom <code>INPUT</code>, które mają atrybut <code>TYPE</code> inny niż <code>PASSWORD</code>.</p> + +<pre class="eval notranslate">*:not(P) {<em>własności</em> } +</pre> + +<p>Przykład przydzieli własności wszystkim elementom innym, niż <code>P</code>.</p> + +<pre class="eval notranslate">a:not(:hover) {<em>własności</em> } +</pre> + +<p>Przykład nada własności wszystkim elementom <code>A</code>, na których nie stoi kursor. Jest to równoważne z:</p> + +<pre class="eval notranslate">a:link:visited {<em>własności</em> } +</pre> + + + +<pre class="eval notranslate">body > input:not([disabled]):not([type=text]) {<em>własności</em> } +</pre> + +<p>Przykład przypisze własności wszystkim elementom <code>INPUT</code>, które są dziećmi <code>BODY</code> oraz, które nie mają atrybutu <code>DISABLED</code> i jednocześnie nie są typu <code>TEXT</code>.</p> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Pseudoklasa <code>:not</code> nie może być negowana przez inne <code>:not</code>.</p> + + + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#negation">CSS 3</a></li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":empty") }}</p> diff --git a/files/pl/web/css/_colon_root/index.html b/files/pl/web/css/_colon_root/index.html new file mode 100644 index 0000000000..850a9e8277 --- /dev/null +++ b/files/pl/web/css/_colon_root/index.html @@ -0,0 +1,26 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:root' +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pseudoklasa <code>:root</code> odnosi się do głównego węzła dokumentu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">selektor:root {<i>własności</i> } +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval">*:root { margin: 0; } +</pre> +<p>Przykład głównemu węzłowi dokumentu ustawi margines na zero.</p> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>W HTML4 głównym węzłem dokumentu jest zawsze element <code>HTML</code>.</p> +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> +<p><a class="external" href="http://www.w3.org/TR/css3-selectors/#root-pseudo">CSS 3</a></p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Cssxref(":empty") }}, {{ Cssxref(":not") }}</p> diff --git a/files/pl/web/css/appearance/index.html b/files/pl/web/css/appearance/index.html new file mode 100644 index 0000000000..fb3d059ffe --- /dev/null +++ b/files/pl/web/css/appearance/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-appearance' +slug: Web/CSS/appearance +tags: + - CSS + - Non-standard +translation_of: Web/CSS/appearance +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>-moz-appearance</code> jest używane przez przeglądarki bazujące na Mozilli do wyświetlania elementu przy użyciu natywnego dla platformy wyglądu, opartego na temacie systemu operacyjnego.</p> + +<ul> + <li>Wartość początkowa: none</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> + <li>Procenty: niedostępne</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-appearance:<em>appearance value</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>none</dt> + <dd>Żaden specjalny wygląd nie jest stosowany. (Domyślnie)</dd> + <dt>button</dt> + <dd>Element jest rysowany jak przycisk (<em>button</em>).</dd> + <dt>button-small</dt> + <dd>Element jest rysowany jak mały przycisk (<em>small button</em>).</dd> + <dt>checkbox</dt> + <dd>Element jest rysowany jak pole wyboru (<em>checbox</em>), uwzględniając tylko stan bieżący (<em>actual</em>) pola wyboru.</dd> + <dt>checkbox-container</dt> + <dd>Element jest rysowany jak kontener dla pola wyboru, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (<em>label</em>) oraz pole wyboru.</dd> + <dt>checkbox-small</dt> + <dt>dialog</dt> + <dd>Element jest stylizowany jak pole dialogowe (<em>dialog box</em>), które zawiera kolor tła i inne własności.</dd> + <dt>listbox</dt> + <dt>menuitem</dt> + <dd>Element jest stylizowany jak pozycja menu (<em>menu item</em>), pozycja jest podświetlana po najechaniu.</dd> + <dt>menulist</dt> + <dt>menulist-button</dt> + <dd>Element jest stylizowany jak przycisk (<em>button</em>), który może wskazywać, że listę menu (<em>menulist</em>) można otworzyć.</dd> + <dt>menulist-textfield</dt> + <dd>Element jest stylizowany jak pole tekstowe (<em>text field</em>) dla listy menu (<em>menulist</em>).</dd> + <dt>menupopup</dt> + <dt>progressbar</dt> + <dd>Element jest stylizowany jak pasek postępu (<em>progress bar</em>).</dd> + <dt>radio</dt> + <dd>Element jest stylizowany jak przycisk typu radio (<em>radio button</em>), uwzględniając tylko stan bieżący (<em>actual</em>) przycisku radio.</dd> + <dt>radio-container</dt> + <dd>Element jest rysowany jak kontener przycisku radio, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (<em>label</em>) oraz przycisk radio.</dd> + <dt>radio-small</dt> + <dt>resizer</dt> + <dt>scrollbar</dt> + <dt>scrollbarbutton-down</dt> + <dt>scrollbarbutton-left</dt> + <dt>scrollbarbutton-right</dt> + <dt>scrollbarbutton-up</dt> + <dt>scrollbartrack-horizontal</dt> + <dt>scrollbartrack-vertical</dt> + <dt>separator</dt> + <dt>statusbar</dt> + <dt>tab</dt> + <dt>tab-left-edge</dt> + <dt>tabpanels</dt> + <dt>textfield</dt> + <dt>toolbar</dt> + <dt>toolbarbutton</dt> + <dt>toolbox</dt> + <dt>tooltip</dt> + <dt>treeheadercell</dt> + <dt>treeheadersortarrow</dt> + <dt>treeitem</dt> + <dt>treetwisty</dt> + <dt>treetwistyopen</dt> + <dt>treeview</dt> + <dt>window</dt> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + -moz-appearance: toolbarbutton; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Ta własność jest często używana w arkuszach stylów <a href="pl/XUL">XUL</a> do projektowania zwyczajnych dla platformy widżetów oraz w implementacjach <a href="pl/XBL">XBL</a> widżetów, które pochodzą z platformy mozilla.</p> diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..93ffda8fec --- /dev/null +++ b/files/pl/web/css/attribute_selectors/index.html @@ -0,0 +1,238 @@ +--- +title: Selektory artybutów +slug: Web/CSS/Attribute_selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektor atrybutów </strong>CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.</p> + +<pre class="brush: css no-line-numbers">/* <a> Element z artybutem "title" */ +a[title] { + color: purple; +} + +/* <a> elemente href zawierajacy "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* <a> element href zawirający "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* <a> elementy href kończące się na ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* <a> elementy, których atrybut klasy zawiera słowo "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> +</dl> + +<p>Reprezentuje elementy z atrybutem o nazwie attr.</p> + +<dl> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is a whitespace-separated list of words, one of which is exactly <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value can be exactly <em>value</em> or can begin with <em>value</em> immediately followed by a hyphen, <code>-</code> (U+002D). It is often used for language subcode matches.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is prefixed (preceded) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value is suffixed (followed) by <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Represents elements with an attribute name of <em>attr</em> whose value contains at least one occurrence of <em>value</em> within the string.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Adding an <code>i</code> (or <code>I</code>) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).</dd> + <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> + <dd>Adding an <code>s</code> (or <code>S</code>) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + color: pink; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Links")}}</p> + +<h3 id="Languages">Languages</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ +div[lang] { + font-weight: bold; +} + +/* All divs without a `lang` attribute are italicized. */ +div:not([lang]) { + <span class="st">font-style: italic;</span> +} + +/* All divs in US English are blue. */ +div[lang~="en-us"] { + color: blue; +} + +/* All divs in Portuguese are green. */ +div[lang="pt"] { + color: green; +} + +/* All divs in Chinese are red, whether + simplified (zh-CN) or traditional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* All divs with a Traditional Chinese + `data-lang` are purple. */ +/* Note: You could also use hyphenated attributes + without double quotes */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Languages")}}</p> + +<h3 id="HTML_ordered_lists">HTML ordered lists</h3> + +<p>The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the <a href="#case-sensitive">case-sensitive</a> modifier.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="Result_3">Result</h4> + +<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{CSSxRef("attr")}}</li> + <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> +</ul> diff --git a/files/pl/web/css/azimuth/index.html b/files/pl/web/css/azimuth/index.html new file mode 100644 index 0000000000..2841b5441e --- /dev/null +++ b/files/pl/web/css/azimuth/index.html @@ -0,0 +1,97 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Archive/Web/CSS/azimuth +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W połączeniu z <code><a href="pl/CSS/elevation">elevation</a></code>, <code>azimuth</code> umożliwia ustawianie różnych źródeł audio w przestrzeni i wykorzystywanie ich do prezentacji słuchowych. Jest to ważne w związku z tym, że dostarcza to naturalnego sposobu do odtwarzania kilku głosów w oddali, przy czym każdy z nich może pojawić się w innym miejscu strefy dźwięku. Wyjście stereofoniczne wytwarza boczną strefę dźwięku, podczas gdy obuuszne słuchawki i wielogłośnikowe zestawy pozwalają na pełną trójwymiarową strefę.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: center</li> + <li>Stosowany do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: N/A</li> + <li>Media: {{cssxref("aural")}}</li> + <li>{{ Xref_csscomputed() }}: normalizowany kąt</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">azimuth:<em>angle</em> | [[ left-side | far-left | left | + center-left | center | center-right | right | + far-right | right-side ] || behind ] | leftwards | + rightwards | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>angle </dt> + <dd>Słyszalna pozycja źródła jest opisywana jako kąt z zakresu <code>-360 stopni</code> do <code>360 stopni</code>. Wartość <code>0stopni</code> znaczy dokładnie z przodu w centrum strefy dźwięku (to jest wartość domyślna). <code>90 stopni</code> jest na prawo, <code>180 stopni</code> z tyłu, i <code>270 stopni</code> lub <code>-90 stopni</code> jest na lewo.</dd> +</dl> + +<p><img alt="grafika:Azimuth.png"></p> + +<p> </p> + +<h4 id="S.C5.82owa_kluczowe_do_ustawiania_pozycji" name="S.C5.82owa_kluczowe_do_ustawiania_pozycji">Słowa kluczowe do ustawiania pozycji</h4> + +<ul> + <li><strong>left-side</strong>: Tak samo jak <code>270 stopni</code>.</li> + <li><strong>left-side behind</strong>: Tak samo jak <code>270 stopni</code>.</li> + <li><strong>far-left</strong>: Tak samo jak <code>300 stopni</code>.</li> + <li><strong>far-left behind</strong>: Tak samo jak <code>240 stopni</code>.</li> + <li><strong>left</strong>: Tak samo jak <code>320 stopni</code>.</li> + <li><strong>left behind</strong>: Tak samo jak <code>220 stopni</code>.</li> + <li><strong>center-left</strong>: Tak samo jak <code>340 stopni</code>.</li> + <li><strong>center-left behind</strong>: Tak samo jak <code>200 stopni</code>.</li> + <li><strong>center</strong>: Tak samo jak <code>0 stopni</code>.</li> + <li><strong>center behind</strong>: Tak samo jak <code>180 stopni</code>.</li> + <li><strong>center-right</strong>: Tak samo jak <code>20 stopni</code>.</li> + <li><strong>center-right behind</strong>: Tak samo jak <code>160 stopni</code>.</li> + <li><strong>right</strong>: Tak samo jak <code>40 stopni</code>.</li> + <li><strong>right behind</strong>: Tak samo jak <code>140 stopni</code>.</li> + <li><strong>far-right</strong>: Tak samo jak <code>60 stopni</code>.</li> + <li><strong>far-right behind</strong>: Tak samo jak <code>120 stopni</code>.</li> + <li><strong>right-side</strong>: Tak samo jak <code>90 stopni</code>.</li> + <li><strong>right-side behind</strong>: Tak samo jak <code>90 stopni</code>.</li> + <li><strong>behind</strong>: Tak samo jak <code>180 stopni</code>. Także używane jako modyfikator dla innych słów kluczowych do ustawiania pozycji, takich jak powyżej.</li> + <li><strong>leftwards</strong>: Przesuwa dźwięk przeciwnie do kierunku ruchu wskazówek zegara o 20 stopni, w stosunku do obecnego kąta.</li> + <li><strong>rightwards</strong>: Przesuwa dźwięk zgodnie z kierunkiem ruchu wskazówek zegara o 20 stopni, w stosunku do obecnego kąta.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre>h1 { azimuth: 30deg } +td.a { azimuth: far-right } /* 60 stopni */ +#12 { azimuth: behind far-right } /* 120 stopni */ +p.comment { azimuth: behind } /* 180 stopni */ +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<p>TBD (może być porzucone ze względu na listę centralnej zgodności)</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("elevation") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/azimuth", "es": "es/CSS/azimuth", "fr": "fr/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }}</p> diff --git a/files/pl/web/css/background-attachment/index.html b/files/pl/web/css/background-attachment/index.html new file mode 100644 index 0000000000..636e991bdf --- /dev/null +++ b/files/pl/web/css/background-attachment/index.html @@ -0,0 +1,124 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-attachment +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Jeśli {{ Cssxref("background-image") }} jest określone, <code>background-attachment</code> decyduje, czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-attachment: scroll | fixed | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>scroll </dt> + <dd>Jeśli zdefiniowane jest <code>scroll</code>, obrazek tła będzie się przewijał wewnątrz okna wraz z zawierającym go blokiem.</dd> + <dt>fixed </dt> + <dd>Jeśli zdefiniowane jest <code>fixed</code>, obrazek tła nie będzie się przewijał z zawierającym go blokiem, zamiast tego pozostanie nieruchomy względem okna.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Simple_example">Simple example</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Multiple_background_image_support">Multiple background image support</h3> + +<p>This property supports multiple background images. You can specify a different <code><attachment></code> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-color/index.html b/files/pl/web/css/background-color/index.html new file mode 100644 index 0000000000..611526f4ac --- /dev/null +++ b/files/pl/web/css/background-color/index.html @@ -0,0 +1,82 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>Właściwość CSS <strong>background-color</strong></code> ustawia kolor tła elementu, albo poprzez wartość koloru lub słowo kluczowe <em><code>transparent</code></em>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p>Właściwość <strong>background-color</strong> jest deklarowana jako pojedyncza wartość <color>.</p> + +<pre class="eval">background-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>Jest to styl CSS, który opisuje zunifikowany kolor tła. Nawet jeśli jest zdefiniowany jeden lub kilka {{cssxref("background-image")}}, kolor może być renderowany, poprzez przezroczystość o ile nie jest ustawiony jako opaque. W CSS <em>transparent</em> jest kolorem.</dd> + <dd>Kolor może być określony jako szesnastkowa wartość RGB np. #ffaac9, typowa wartość RGB np. + <pre><code>rgb(255, 255, 128);</code></pre> + lub poprzez użycie jednego z predefiniowanych słów kluczowych określających kolor.</dd> + <dt>transparent </dt> + <dd>Domyślną wartością dla <strong><code>background-color</code></strong> jest <em><code>transparent</code></em>, oznacza to, że element nie ma własnego koloru tła, zamiast tego renderowany jest kolor tła rodzica.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples","200","150")}}</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li> +</ul> diff --git a/files/pl/web/css/background-image/index.html b/files/pl/web/css/background-image/index.html new file mode 100644 index 0000000000..471909c967 --- /dev/null +++ b/files/pl/web/css/background-image/index.html @@ -0,0 +1,114 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>background-image</code> ustawia obrazek tła dla elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-image: <em>uri</em> | none | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>uri </dt> + <dd>Położenie zasobu obrazka używanego jako obrazek tła.</dd> + <dt>none </dt> + <dd>Używane do wyszczególnienia, że dany element nie powinien mieć obrazka tła.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<p>Note that the star image is partially transparent and is layered over the cat image.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Przyk%C5%82ady')}}</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Twórcy powinni się upewnić, że określili {{ Cssxref("background-color") }} do użycia w przypadku, jeśli obrazek jest niedostępny. Obrazki tła są wyświetlane nad kolorem tła.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarki</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-origin/index.html b/files/pl/web/css/background-origin/index.html new file mode 100644 index 0000000000..551703c7da --- /dev/null +++ b/files/pl/web/css/background-origin/index.html @@ -0,0 +1,52 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Background + - CSS Property +translation_of: Web/CSS/background-origin +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>w aplikacjach opartych na Mozilli <code>-moz-background-origin</code> decyduje, który boks wyznacza układ współrzędnych używanych przez wartości własności {{ Cssxref("background-position") }}.</p> + +<p><code>background-origin</code> nie stosuje się, gdy własność {{ Cssxref("background-attachment") }} ma wartość <code>fixed</code>.</p> + +<ul> + <li>Wartość początkowa: padding-box</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p> </p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-origin: border-box | padding-box | content-box +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-box</dt> + <dd>Pozycja tła jest relatywna względem obramowania, zatem obrazek może znaleźć się pod obramowaniem.</dd> + <dt>padding-box</dt> + <dd>Pozycja tła jest relatywna względem wypełnienia.</dd> + <dt>content-box</dt> + <dd>Pozycja tła jest relatywna względem zawartości.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre>hbox.example { + border: 10px double #000000; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + /* tło będzie wewnątrz padding */ + background-origin: content-box; +} +</pre> diff --git a/files/pl/web/css/background-position/index.html b/files/pl/web/css/background-position/index.html new file mode 100644 index 0000000000..6279af31f2 --- /dev/null +++ b/files/pl/web/css/background-position/index.html @@ -0,0 +1,122 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-position +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>background-position</code> ustawia początkowe położenie obrazka tła, który został zdefiniowany.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background-position: [ <percentage> | <length> | left | center | right ] + [ <percentage> | <length> | top | center | bottom ] ? ; +</pre> + +<pre class="eval">background-position: [ top | center | bottom ]; +</pre> + +<pre class="eval">background-position: inherit; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<percentage>")}} <percentage></dt> + <dd>Wraz z parą wartości '0% 0%', lewy górny róg obrazka jest wyrównany względem górnego lewego rogu dopełnienia bloku. Para wartości '100% 100%' umieszcza dolny prawy róg obrazka w dolnym prawym rogu obszaru dopełnienia. Wraz z parą wartości '14% 84%', punkt 14% wszerz i 84% w dół obrazka jest umiejscawiany w punkcie 14% wszerz i 84% w dół obszaru dopełnienia'.</dd> + <dt>{{cssxref("<length>")}} <length></dt> + <dd>Wraz z parą wartości '2cm 1cm', górny lewy róg obrazka jest umieszczony 2cm od prawego i 1cm poniżej górnego krańca obszaru dopełnienia.</dd> + <dt>top left oraz left top</dt> + <dd>Tak samo jak '0% 0%'.</dd> + <dt>top, top center, oraz center top</dt> + <dd>Tak samo jak '50% 0%'.</dd> + <dt>right top oraz top right</dt> + <dd>Tak samo jak '100% 0%'.</dd> + <dt>left, left center, oraz center left</dt> + <dd>Tak samo jak '0% 50%'.</dd> + <dt>center oraz center center</dt> + <dd>Tak samo jak '50% 50%'.</dd> + <dt>right, right center, oraz center right</dt> + <dd>Tak samo jak '100% 50%'.</dd> + <dt>bottom left oraz left bottom</dt> + <dd>Tak samo jak '0% 100%'.</dd> + <dt>bottom, bottom center, oraz center bottom</dt> + <dd>Tak samo jak '50% 100%'.</dd> + <dt>bottom right oraz right bottom</dt> + <dd>Tak samo jak '100% 100%'.</dd> +</dl> + +<p>Jeśli tylko jedna wartość jest określona, wtedy ustawia położenie poziome, z pozycją pionową 50%. W innym przypadku pierwsza wartość określa położenie w poziomie. Dozwolone są kombinacje słów kluczowych, długości i procentów, jednak, jeśli słowa kluczowe są wymieszane z innymi wartościami, wartości 'left' i 'right' mogą być używane tylko jako pierwsza wartość, zaś wartości 'top' i 'bottom' mogą być używane tylko jako druga wartość. Położenie ujemne jest dozwolone.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + background-image: url("logo.png"); + background-position: top center; +} + +.exampletwo { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.examplethree { + background-image: url("logo.png"); + background-position: 2cm bottom; +} + +.examplefour { + background-image: url("logo.png"); + background-position: center 10%; +} + +.examplefive { + background-image: url("logo.png"); + background-position: 2cm 50%; +} + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html new file mode 100644 index 0000000000..7c4383448a --- /dev/null +++ b/files/pl/web/css/background-size/index.html @@ -0,0 +1,190 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<p><code style=""><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Właściwość </span></font><strong>background-size</strong></code> określa wielkość elementu <code>background-image.</code> Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest zlokalizowane na GitHub. Jeśli chcesz wspierać projekt interaktywnych przykładów sklonuj (clone) <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam pull request.</p> + +<p>Przestrzenie nie zapełnione przez <code>background-image</code> wypełnia {{cssxref("background-color")}}, <code>background-color</code> będzie widoczny jeżeli obrazek jest przezroczysty.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Wartości słowne */ +background-size: cover; +background-size: contain; + +/* Właściwości z jedną wartością */ +/* szerokość obrazka (wysokość stanie się 'auto') */ +background-size: 50%; +background-size: 3.2em; +background-size: 12px; +background-size: auto; + +/* Właściwości z dwoma wartościami */ +/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* Wiele teł */ +background-size: auto, auto; /* Not to be confused with `auto auto` */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* Wartości globalne */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<p>Właściwość <code>background-size</code> jest określana w jeden z podanych sposobów:</p> + +<ul> + <li>Używając wartości słownych <code><a href="#contain">contain</a></code> lub <code><a href="#cover">cover</a></code>.</li> + <li>Używając tylko wartości długości, w tym przypadku wysokość jest domyślnie ustawiona na <code><a href="#auto">auto</a></code><a href="#auto">.</a></li> + <li>Używając obu wartości (width i height), każda z wartości może być określona jako długość {{cssxref("<length>")}}, w procentach {{cssxref("<percentage>")}} lub <code><a href="#auto">auto</a></code>.</li> +</ul> + +<p>Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt id="contain"><code>contain</code></dt> + <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.</dd> + <dt id="cover"><code>cover</code></dt> + <dd>Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.</dd> + <dt id="auto"><code>auto</code></dt> + <dd>Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.</dd> + <dt id="length">{{cssxref("<length>")}}</dt> + <dd>Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.</dd> + <dt id="percentage">{{cssxref("<percentage>")}}</dt> + <dd>[do przetłumaczenia na: Polski]</dd> + <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> +</dl> + +<h3 id="Intrinsic_dimensions_and_proportions">Intrinsic dimensions and proportions</h3> + +<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> + +<ul> + <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> + <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> + <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> + <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> +</div> + +<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> + +<dl> + <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> + <dd>The background image is rendered at the specified size.</dd> + <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> + <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> + <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> + <dd> + <ul> + <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> + <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> + <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> + <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> + </ul> + </dd> + <dd> + <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> + </dd> + <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> + <dd> + <ul> + <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples">Examples</h2> + +<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> + +<h2 id="Notes">Notes</h2> + +<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> + +<pre class="brush: css">.gradient-example { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* Not safe to use */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* Safe to use */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> + <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> + <li>{{cssxref("object-fit")}}</li> +</ul> diff --git a/files/pl/web/css/background/index.html b/files/pl/web/css/background/index.html new file mode 100644 index 0000000000..0fc3dea0c2 --- /dev/null +++ b/files/pl/web/css/background/index.html @@ -0,0 +1,134 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Tło + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/background +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <strong><code>background</code></strong> jest skrótem do ustawiania poszczególnych wartości tła z jednego miejsca w arkuszu stylów. Właściwość <strong><code>background</code></strong> może być stosowana do ustawiania wartości dla jednej lub więcej z wymienionych warstw własności: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">background: [ <em><background-color></em> || <em><background-image></em> || + <em><background-repeat></em> || <em><background-attachment></em> || + <em><background-position></em> + ] | {{ Cssxref("inherit") }} ; +</pre> + +<p>Właściwość <strong>background </strong>jest deklarowana przez jedną lub więcej warstw tej właściwości, oddzielonych przecinkami.</p> + +<p>Składnia każdej z warstw jest następująca:</p> + +<ul> + <li>Każda warstwa może zawierać zero lub jedno wystąpienie którejś z następujących wartości:<code></code> + + <ul> + <li><attachment></li> + <li><repeat-style></li> + <li><bg-size></li> + <li><position></li> + <li><bg-image></li> + </ul> + </li> + <li>Wartość <bg-size> może być wstawiona bezpośrednio po wartości <position>, oddzielonej znakiem '/', np. "<code>center/80%</code>".</li> + <li>Wartość <box> może być wstawiona zero, jeden lub dwa razy. Jeśli jest wstawiona raz - ustawia zarówno {{cssxref("background-origin")}} jak i {{cssxref("background-clip")}}. Jeśli wystąpi dwa razy - pierwsze wystąpienie ustawia {{cssxref("background-origin")}}, a drugie {{cssxref("background-clip")}}.</li> + <li>Wartość <background-color> może być wstawiona jedynie w specyfikacji ostatniej warstwy.</li> +</ul> + +<dl> + <dd> </dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>background-color</dt> + <dd>Zobacz <code><a href="/pl/CSS/background-color" title="pl/CSS/background-color">background-color</a></code>.</dd> + <dt>background-image </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-image" title="pl/CSS/background-image">background-image</a></code>.</dd> + <dt>background-repeat </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-repeat" title="pl/CSS/background-repeat">background-repeat</a></code>.</dd> + <dt>background-attachment </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-attachment" title="pl/CSS/background-attachment">background-attachment</a></code>.</dd> + <dt>background-position </dt> + <dd>Zobacz <code><a href="/pl/CSS/background-position" title="pl/CSS/background-position">background-position</a></code>.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css' highlight:[2,6];">.warning { + background: red; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Biorąc pod uwagę sensowność deklaracji, własność <strong><code>background</code></strong> najpierw ustawia poszczególne własności <strong>tła</strong> na ich domyślne wartości, potem przydziela jawnie wartości określone w deklaracji. Nie musisz definiować wartości dla każdej warstwy, wystarczy, że zadeklarujesz tylko te, które chcesz zmienić z wartości domyślnej.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/pl/web/css/border-bottom-color/index.html b/files/pl/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..ba88e74906 --- /dev/null +++ b/files/pl/web/css/border-bottom-color/index.html @@ -0,0 +1,149 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/border-bottom-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-color</code> ustawia kolor dolnego obramowania elementu, poprzez wartość koloru lub słowo kluczowe <code>transparent</code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: własność {{ Cssxref("color") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jeśli wzięta z własności 'color', wtedy wartość wyliczona własności 'color'; w innym przypadku jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-color: <em>color</em> | transparent | inherit +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>color </dt> + <dd>Kolor może być zdefiniowany jako szestnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.</dd> + <dt>transparent </dt> + <dd>Element nie ma własnego koloru, zamiast tego pokazuje kolor elementu pod spodem.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-left-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} + +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>6.5</td> + <td>11</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko-based browsers like Firefox also support the non-standard {{Cssxref("-moz-border-bottom-colors")}} CSS property that sets the bottom border to <strong>multiple</strong> colors.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The border-related CSS shorthand properties {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, and {{Cssxref("border-color")}}.</li> + <li>The color-related CSS properties applying to the other borders: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}}, and {{Cssxref("border-left-color")}}.</li> + <li>The other border-related CSS properties applying to the same border: {{cssxref("border-bottom-style")}} and {{cssxref("border-bottom-width")}}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom-left-radius/index.html b/files/pl/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..0047da4c13 --- /dev/null +++ b/files/pl/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomleft' +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-left-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-bottomleft</code> ustawia zaokrąglenie dolnego lewego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-bottom-left-radius", "en": "en/CSS/-moz-border-radius-bottomleft", "fr": "fr/CSS/border-bottom-left-radius", "ja": "ja/CSS/border-bottom-left-radius" } ) }}</p> diff --git a/files/pl/web/css/border-bottom-right-radius/index.html b/files/pl/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..c43c814a8c --- /dev/null +++ b/files/pl/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomright' +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-right-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-bottomright</code> ustawia zaokrąglenie dolnego prawego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-bottom-right-radius", "en": "en/CSS/-moz-border-radius-bottomright", "fr": "fr/CSS/-moz-border-radius-bottomright", "ja": "ja/CSS/border-bottom-right-radius" } ) }}</p> diff --git a/files/pl/web/css/border-bottom-style/index.html b/files/pl/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..0b212631ff --- /dev/null +++ b/files/pl/web/css/border-bottom-style/index.html @@ -0,0 +1,159 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-style</code> ustawia styl linii dolnego obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-style: <border-style> | inherit +</pre> + +<h2 id="Warto.C5.9Bci_.3Cborder-style.3E" name="Warto.C5.9Bci_.3Cborder-style.3E">Wartości <border-style></h2> + +<dl> + <dt>none </dt> + <dd>Bez obramowania.</dd> + <dt>hidden </dt> + <dd>Podobnie jak 'none', oprócz sytuacji konfliktu rozdzielczości obramowania dla elementów tabeli.</dd> + <dt>dotted </dt> + <dd>Seria kropek.</dd> + <dt>dashed </dt> + <dd>Seria krótkich kresek lub odcinków linii.</dd> + <dt>solid </dt> + <dd>Pojedyncza, prosta, ciągła linia.</dd> + <dt>double </dt> + <dd>Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako <code>border-width</code>.</dd> + <dt>groove </dt> + <dd>Efekt wyrzeźbienia.</dd> + <dt>ridge </dt> + <dd>Przeciwieństwo <code>groove</code>. Obramowanie wydaje się trójwymiarowe (zapowiadane).</dd> + <dt>inset </dt> + <dd>Sprawia wrażenie, że blok jest zapadnięty.</dd> + <dt>outset </dt> + <dd>Przeciwieństwo <code>inset</code>. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-left-style") }}</li> + <li>{{ Cssxref("border-right-style") }}</li> + <li>{{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("border-style") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-size: 1px; + border-bottom-style: dotted; + border-bottom-color: #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeżeli wartość <code>border-style</code> nie jest ustawiona, wtedy twoje obramowanie nie pojawi się, ponieważ domyślna wartość jest ustawiona na <code>none</code>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0</td> + <td>5.5</td> + <td>9.2</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>7.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}.</li> + <li>The other bottom-border-related properties: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom-width/index.html b/files/pl/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6b85e8972f --- /dev/null +++ b/files/pl/web/css/border-bottom-width/index.html @@ -0,0 +1,143 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-width +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>border-bottom-width</code> ustawia szerokość dolnego obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: długość całkowita; '0' jeśli stylem obramowania jest <code>none</code> lub <code>hidden</code></li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom-width: <border-width> | inherit +</pre> + +<h2 id="Warto.C5.9Bci_.3Cborder-width.3E" name="Warto.C5.9Bci_.3Cborder-width.3E">Wartości <border-width></h2> + +<dl> + <dt>thin</dt> + <dd>Cienkie obramowanie.</dd> + <dt>medium</dt> + <dd>Średnie obramowanie.</dd> + <dt>thick</dt> + <dd>Grube obramowanie.</dd> + <dt><length></dt> + <dd>Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("border-left-width") }}</li> + <li>{{ Cssxref("border-right-width") }}</li> + <li>{{ Cssxref("border-top-width") }}</li> + <li>{{ Cssxref("border-width") }}</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-width: thin; + border-bottom-style: solid; + border-bottom-color: #000; +} +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The other border-width-related CSS properties: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-right-width") }}, {{ Cssxref("border-top-width") }}, and {{ Cssxref("border-width") }}</li> + <li>The other border-bottom-related CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-bottom-color") }}.</li> +</ul> diff --git a/files/pl/web/css/border-bottom/index.html b/files/pl/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8ff156c730 --- /dev/null +++ b/files/pl/web/css/border-bottom/index.html @@ -0,0 +1,146 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-bottom</code> jest skróconą własnością, która ustawia wartości dla następujących własności: {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} oraz {{ Cssxref("border-bottom-width") }}. Te własności opisują dolne obramowanie elementu.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: szczegóły zobacz w indywidualnych własnościach</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: zobacz indywidualne własności</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-bottom: [ <border-width> || <border-style> || <border-color> ] | <em>inherit</em> +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>border-width </dt> + <dd>Zobacz {{ Cssxref("border-bottom-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-bottom-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-bottom-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-bottom-width: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Trzy wartości skróconej własności mogą być określone w dowolnym porządku, zaś jedna lub dwie z nich mogą być pominięte.</p> + +<p>Jak w przypadku wszystkich skróconych własności, <code>border-bottom</code> zawsze ustawia wartości wszystkich własności, które może ustawić, nawet, jeśli nie są określone. Zatem te, które nie są zdefiniowane, ustawia do ich domyślnych wartości. Oznacza to, że:</p> + +<pre> border-bottom-style: dotted; + border-bottom: thick green;</pre> + +<p>jest dokładnie tym samym, co</p> + +<pre> border-bottom-style: dotted; + border-bottom: none thick green;</pre> + +<p>i wartość {{ Cssxref("border-bottom-style") }}, nadana przed <code>border-bottom</code>, jest ignorowana.</p> + +<p>Ponieważ domyślną wartością {{ Cssxref("border-bottom-style") }} jest <code>none</code>, nieokreślenie wartości składnika <code>border-style</code> oznacza, że własność ustawi brak obramowania.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-collapse/index.html b/files/pl/web/css/border-collapse/index.html new file mode 100644 index 0000000000..24439aa553 --- /dev/null +++ b/files/pl/web/css/border-collapse/index.html @@ -0,0 +1,89 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-collapse +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność border-collapse jest używana do stworzenia połączonych obramowań. Ma ona duży wpływ na wygląd i styl komórek tabeli. Wyświetlanie obramowań tabeli jest podzielone w CSS2 na dwie kategorie - "połączone" i "rozdzielone". Własność ta definiuje, którego rodzaju wyświetlania użyć. W modelu połączonych obramowań sąsiadujące komórki tabel współdzielą obramowania. W modelu rozdzielonych obramowań sąsiadujące komórki mają swoje własne odrębne obramowania (odległość między nimi określona jest przez własność 'border-spacing').</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("separate") }}</li> + <li>{{ Xref_cssinherited() }}: Tak</li> + <li>Media : {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-collapse: value +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>inherit</strong> : Ustawia wprost wartość tej własności na wartość rodzica.</li> + <li><strong>separate</strong> : Używa modelu wyświetlania "rozdzielonych obramowań".</li> + <li><strong>collapse</strong> : Używa modelu wyświetlania "połączonych obramowań".</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border-collapse.html">Zobacz przykład</a></p> + +<pre><table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"> +</pre> + +<pre><table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"> +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>W modelu wyświetlania "połączonych obramowań" wartość 'border-style' ustawiona na "inset" zachowuje się jak "groove", zaś "outset" zachowuje się jak "ridge". CSS2 definiuje, że wartością początkową dla tej własności jest "collapse", jednak CSS2.1 oraz Mozilla/Opera określają lub zachowują się tak, że wartością początkową jest "separate".</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>5.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>7</td> + </tr> + <tr> + <td>Opera</td> + <td>5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border-spacing") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/border-collapse", "es": "es/CSS/border-collapse", "fr": "fr/CSS/border-collapse" } ) }}</p> diff --git a/files/pl/web/css/border-color/index.html b/files/pl/web/css/border-color/index.html new file mode 100644 index 0000000000..196f39d235 --- /dev/null +++ b/files/pl/web/css/border-color/index.html @@ -0,0 +1,135 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-color +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-color</code> jest skróconą własnością dla ustawienia koloru czterech krawędzi obramowania elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-color: [ <color> || transparent ]{1,4} | <em>inherit</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><color> </dt> + <dd>Kolor może być zdefiniowany jako szesnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.</dd> +</dl> + +<dl> + <dt>transparent </dt> + <dd>Obramowanie nie jest rysowane, ale zajmuje przestrzeń na stronie.</dd> +</dl> + +<p>Można ustawić do czterech wartości.</p> + +<p>Jeśli dana jest jedna wartość koloru, wtedy wszystkie cztery krawędzie są tego koloru.<br> + Jeśli dwie wartości - obramowanie górne i dolne używa pierwszej wartości, lewe i prawe używa drugiej.<br> + Jeśli trzy wartości - pierwsza jest dla górnej krawędzi, druga dla lewej i prawej, trzecia dla dolnej.<br> + Jesli cztery wartości - pierwsza dla górnego obramowania, druga dla prawego, trzecia dla dolnego i czwarta dla lewego.</p> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: 1px; + border-style: solid; + border-color: black; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>W celu zobaczenia obramowania musisz również ustawić {{ Cssxref("border-width") }} na wartość dodatnią oraz {{ Cssxref("border-style") }} na jakąś widoczną.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>The property is now a shorthand property</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }} [1]</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{ CompatGeckoMobile("1.9.2") }} [1]</td> + <td>7.0</td> + <td>11</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-left-color/index.html b/files/pl/web/css/border-left-color/index.html new file mode 100644 index 0000000000..80338c4cf0 --- /dev/null +++ b/files/pl/web/css/border-left-color/index.html @@ -0,0 +1,109 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-color +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>border-left-color</code> ustala kolor lewego obramowania elementu, poprzez konkretną wartość lub przez słowo kluczowe <code>transparent</code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: własność {{ Cssxref("color") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: gdy brane z własności 'color', wartość wyliczona 'color'; w innym przypadki, wartość podana</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-left-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>color </dt> + <dd>Kolor może zostać podany przy pomocy szesnastkowej reprezentacji RGB, zwykłej wartości RGB lub przez predefiniowane słowo klucz.</dd> + <dt>transparent </dt> + <dd>Element nie ma własnego koloru, pokazuje kolor elementu spod niego.</dd> +</dl> + +<h3 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h3> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-bottom-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} + +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> +</ul> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-left") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-width") }},</p> + +<p>{{ languages( { "de": "de/CSS/border-left-color", "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color" } ) }}</p> diff --git a/files/pl/web/css/border-left-style/index.html b/files/pl/web/css/border-left-style/index.html new file mode 100644 index 0000000000..f1bbd8935b --- /dev/null +++ b/files/pl/web/css/border-left-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-left-style</code> ustawia styl linii lewego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-left-style", "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style" } ) }}</p> diff --git a/files/pl/web/css/border-left-width/index.html b/files/pl/web/css/border-left-width/index.html new file mode 100644 index 0000000000..59ad05cd1a --- /dev/null +++ b/files/pl/web/css/border-left-width/index.html @@ -0,0 +1,19 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-width +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>border-left-width</code> ustawia szerokość lewego obramowania bloku. +</p><p>Zobacz właściwość <a href="pl/CSS/border-bottom-width">border-bottom-width</a>, aby uzyskać więcej informacji. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width" } ) }} diff --git a/files/pl/web/css/border-left/index.html b/files/pl/web/css/border-left/index.html new file mode 100644 index 0000000000..0a6ff6563a --- /dev/null +++ b/files/pl/web/css/border-left/index.html @@ -0,0 +1,123 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-left</code> jest skróconą własnością dla ustawienia szerokości stylu i koloru lewej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-left: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-radius/index.html b/files/pl/web/css/border-radius/index.html new file mode 100644 index 0000000000..ee38420619 --- /dev/null +++ b/files/pl/web/css/border-radius/index.html @@ -0,0 +1,69 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-radius +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych <code>border-radius</code> może być używany do nadawania obramowaniom zaokrąglonych rogów.</p> + +<ul> + <li>Wartość początkowa: 0</li> + <li>Dotyczy: wszystkich elementów</li> + <li>Dziedziczony: nie</li> +</ul> + +<p><code>border-radius</code> nie stosuje się do elementów tabel, kiedy własność {{ Cssxref("border-collapse") }} ustawiona jest na <code>collapse</code>.</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-border-radius: <border-radius>{1,4} | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p><border-radius> reprezentuje jedną z wartości:</p> + +<dl> + <dt><length></dt> + <dd>szerokość</dd> + <dt><percentage></dt> + <dd>procenty, względem długości boksu</dd> +</dl> + +<p>Zatem są używane 4 wartości w porządku górny-lewy, górny-prawy, dolny-prawy i dolny-lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do wypełnienia pozostałych wartości.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="/pl/CSS/-moz-border-radius-bottomleft" title="pl/CSS/-moz-border-radius-bottomleft">-moz-border-radius-bottomleft</a> ustawia zaokrąglenie dla dolnego lewego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-bottomright" title="pl/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a> ustawia zaokrąglenie dla dolnego prawego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-topleft" title="pl/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a> ustawia zaokrąglenie dla górnego lewego rogu.</li> + <li><a href="/pl/CSS/-moz-border-radius-topright" title="pl/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a> ustawia zaokrąglenie dla górnego prawego rogu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + border: 10px solid #000000; + width: 500px; + height: 500px; + /* obramowanie wygnie się w kształt 'D' */ + -moz-border-radius: 10px 200px 200px 10px; +} +</pre> + +<h2 id="Znane_b.C5.82.C4.99dy" name="Znane_b.C5.82.C4.99dy">Znane błędy</h2> + +<ul> + <li>Obrazek tła wysypuje się poza zaokrąglone obramowania. {{ Bug(24998) }}</li> + <li>Zaokrąglone obramowania wspierają tylko wartość <code>solid</code> własności {{ Cssxref("border-style") }}. {{ Bug(13944) }}</li> +</ul> diff --git a/files/pl/web/css/border-right-color/index.html b/files/pl/web/css/border-right-color/index.html new file mode 100644 index 0000000000..7b17b50b3b --- /dev/null +++ b/files/pl/web/css/border-right-color/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-color</code> ustala kolor prawego obramowania elementu.</p> +<p>Zobacz również własność <code><a href="/pl/CSS/border-bottom-color" title="pl/CSS/border-bottom-color">border-bottom-color</a></code>.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-color", "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color" } ) }}</p> diff --git a/files/pl/web/css/border-right-style/index.html b/files/pl/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eef2e15cdd --- /dev/null +++ b/files/pl/web/css/border-right-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-style</code> ustawia styl linii prawego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-style", "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style" } ) }}</p> diff --git a/files/pl/web/css/border-right-width/index.html b/files/pl/web/css/border-right-width/index.html new file mode 100644 index 0000000000..ea649dc284 --- /dev/null +++ b/files/pl/web/css/border-right-width/index.html @@ -0,0 +1,17 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie + - border width +translation_of: Web/CSS/border-right-width +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-right-width</code> ustawia szerokość prawego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-width" title="pl/CSS/border-bottom-width">border-bottom-width</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-right-width", "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width" } ) }}</p> diff --git a/files/pl/web/css/border-right/index.html b/files/pl/web/css/border-right/index.html new file mode 100644 index 0000000000..a4510f4614 --- /dev/null +++ b/files/pl/web/css/border-right/index.html @@ -0,0 +1,123 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-right</code> jest skróconą własnością dla ustawienia szerokości, stylu i koloru prawej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-right-width") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-right-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-right: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-right: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-right', 'border-right') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-spacing/index.html b/files/pl/web/css/border-spacing/index.html new file mode 100644 index 0000000000..d9085b8bfc --- /dev/null +++ b/files/pl/web/css/border-spacing/index.html @@ -0,0 +1,101 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-spacing +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>border-spacing</code> określa odległość pomiędzy obramowaniami sąsiadujących komórek (tylko dla <code><a href="pl/CSS/border-collapse">rozdzielnych obramowań</a></code>). Jest to odpowiednik atrybutu <code>cellspacing</code> w HTML-u.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: 0</li> + <li>Dotyczy: tabel i tabel zagnieżdżonych</li> + <li>{{ Xref_cssinherited() }}: Tak</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: dwie całkowite odległości</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p>border-spacing: <length> | <length> <length> | inherit</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong><length></strong> : Jednakowa odległość w pionie i poziomie.</li> + <li><strong><length> <length></strong> : Pierwsza wartość podaje poziomą odległość (przestrzeń pomiędzy komórką i sąsiednimi kolumnami), druga odległość pionową (pomiędzy komórką i sąsiadującymi z nią wierszami).</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border-spacing.html">Zobacz przykład</a></p> + +<pre>table#space { + border-collapse: separate; + border-spacing: 10px 5px; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Ta własność ma zastosowanie tylko, gdy {{ Cssxref("border-collapse") }} ma wartość "separate".</p> + +<p>Własność <code>border-spacing</code> jest również używana przy zewnętrznej krawędzi tabeli, gdzie odległość pomiędzy obramowaniem tabeli a komórkami pierwszej/ostatniej kolumny lub wiersza jest sumą istotnej (poziomej lub pionowej) odległości od obramowania i istotnej (górnej, lewej, dolnej lub prawej) krawędzi tabeli.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>7</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Mozilla</td> + <td>1</td> + </tr> + <tr> + <td>Safari</td> + <td>1</td> + </tr> + <tr> + <td>Opera</td> + <td>6</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> + +<p>{{ Cssxref("border-collapse") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/border-spacing", "es": "es/CSS/border-spacing", "fr": "fr/CSS/border-spacing" } ) }}</p> diff --git a/files/pl/web/css/border-style/index.html b/files/pl/web/css/border-style/index.html new file mode 100644 index 0000000000..948d86d8a3 --- /dev/null +++ b/files/pl/web/css/border-style/index.html @@ -0,0 +1,126 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-style +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>border-style</code> jest skróconą własnością dla ustawienia stylu linii dla wszystkich czterech stron obramowania elementów.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }} lub jak w indywidualnych własnościach</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jak w indywidualnych własnościach</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-style: [ <border-style> ]{1,4} | <em>inherit</em> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><border-style></dt> + <dd>Style linii mogą przyjąć którąś z podanych wartości.</dd> +</dl> + +<ul> + <li><strong>none</strong> : Brak obramowania, ustawia szerokość na 0. Jest to domyślna wartość.</li> + <li><strong>hidden</strong> : Tak samo jako 'none', oprócz konfliktu rozdzielczości obramowania dla elementów tabeli.</li> + <li><strong>dashed</strong> : Serie kresek lub fragmentów linii.</li> + <li><strong>dotted</strong> : Serie kropek.</li> + <li><strong>double</strong> : Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako <code>border-width</code>.</li> + <li><strong>groove</strong> : Efekt wyrzeźbienia.</li> + <li><strong>inset</strong> : Sprawia wrażenie, że blok jest zapadnięty.</li> + <li><strong>outset</strong> : Przeciwieństwo 'inset'. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).</li> + <li><strong>ridge</strong> : Przeciwieństwo 'groove'. Obramowanie wydaje się trójwymiarowe (zapowiadane).</li> + <li><strong>solid</strong> : Pojedyncza, prosta, ciągła linia.</li> +</ul> + +<p>Można podać do czterech wartości.<br> + Pierwsza wartość ustawia wszystkie cztery krawędzie.<br> + Druga ustawia lewą i prawą.<br> + Trzecia ustawia dolną.<br> + Czwarta ustawia lewą</p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: 1px; + border-style: solid; + border-color: black; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Domyślnie <code>border-style</code> jest ustawione na <code>none</code>. To oznacza, że, jeśli zmieniasz wartość {{ Cssxref("border-width") }} oraz {{ Cssxref("border-color") }}, nie zobaczysz obramowania, dopóki nie zmienisz tej wartości na inną niż <code>none</code> lub <code>hidden</code></p> + + + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-style">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Rozszerzenia_Mozilli" name="Rozszerzenia_Mozilli">Rozszerzenia Mozilli</h3> + +<p>Następujące rozszerzenia Mozilli ustawiają poszczególne strony obramowania na wielokrotny kolor dla przeglądarek opartych na silniku Gecko.</p> + +<ul> + <li>{{ Cssxref("-moz-border-bottom-colors") }}</li> + <li>{{ Cssxref("-moz-border-left-colors") }}</li> + <li>{{ Cssxref("-moz-border-right-colors") }}</li> + <li>{{ Cssxref("-moz-border-top-colors") }}</li> +</ul> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("-moz-border-radius") }}</p> + + + +<p>{{ languages( { "de": "de/CSS/border-style", "en": "en/CSS/border-style", "es": "es/CSS/border-style", "fr": "fr/CSS/border-style", "ja": "ja/CSS/border-style" } ) }}</p> diff --git a/files/pl/web/css/border-top-color/index.html b/files/pl/web/css/border-top-color/index.html new file mode 100644 index 0000000000..0f28de470d --- /dev/null +++ b/files/pl/web/css/border-top-color/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-color +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-color</code> ustawia kolor górnego obramowania elementu.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-color" title="pl/CSS/border-bottom-color">border-bottom-color</a></code>, aby uzyskać więcej informacji.</p> diff --git a/files/pl/web/css/border-top-left-radius/index.html b/files/pl/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..d35e50e7a0 --- /dev/null +++ b/files/pl/web/css/border-top-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-topleft' +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-left-radius +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>W aplikacjach opartych na Mozilli <code>-moz-border-radius-topleft</code> ustawia zaokrąglenie górnego lewego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">-moz-border-radius</a>.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-left-radius", "en": "en/CSS/-moz-border-radius-topleft", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius" } ) }}</p> diff --git a/files/pl/web/css/border-top-right-radius/index.html b/files/pl/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..1bfdcab43d --- /dev/null +++ b/files/pl/web/css/border-top-right-radius/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS +translation_of: Web/CSS/border-top-right-radius +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Mozilli <code>border-top-right-radius</code> ustawia zaokrąglenie górnego prawego rogu obramowania.</p> + +<p>Zobacz więcej informacji we własności <a href="/pl/CSS/-moz-border-radius" title="pl/CSS/-moz-border-radius">border-radius</a>.</p> diff --git a/files/pl/web/css/border-top-style/index.html b/files/pl/web/css/border-top-style/index.html new file mode 100644 index 0000000000..a6c65d9776 --- /dev/null +++ b/files/pl/web/css/border-top-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-style +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-style</code> ustawia styl linii górnego obramowania bloku.</p> +<p>Zobacz własność <code><a href="/pl/CSS/border-bottom-style" title="pl/CSS/border-bottom-style">border-bottom-style</a></code>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-style", "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style" } ) }}</p> diff --git a/files/pl/web/css/border-top-width/index.html b/files/pl/web/css/border-top-width/index.html new file mode 100644 index 0000000000..f1f68284fa --- /dev/null +++ b/files/pl/web/css/border-top-width/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-width +--- +<p>{{ CSSRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>border-top-width</code> ustawia szerokość górnego obramowania bloku.</p> +<p>Zobacz własciwość <a href="/pl/CSS/border-bottom-width" title="pl/CSS/border-bottom-width">border-bottom-width</a>, aby uzyskać więcej informacji.</p> + +<p>{{ languages( { "de": "de/CSS/border-top-width", "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width" } ) }}</p> diff --git a/files/pl/web/css/border-top/index.html b/files/pl/web/css/border-top/index.html new file mode 100644 index 0000000000..941f0a6821 --- /dev/null +++ b/files/pl/web/css/border-top/index.html @@ -0,0 +1,123 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border-top</code> jest skróconą własnością dla ustawienia szerokości, stylu i koloru górnej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-top-width") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-top-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">border-top: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + border-top: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/border-width/index.html b/files/pl/web/css/border-width/index.html new file mode 100644 index 0000000000..ec17638eff --- /dev/null +++ b/files/pl/web/css/border-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-width +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>border-width</code> ustawia szerokość obramowania bloku.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</li> + <li>Stasowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: długość całkowita; '0' jeśli stylem obramowania jest <code>none</code> lub <code>hidden</code></li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border-width: <border-width> {1,4} | inherit +</pre> + +<h3 id="Warto.C5.9Bci_.3Cborder-width.3E" name="Warto.C5.9Bci_.3Cborder-width.3E">Wartości <border-width></h3> + +<dl> + <dt><strong><border-width-value></strong></dt> + <dd><code>thin | medium | thick | </code> {{cssxref("<length>")}} <code>|</code> {{cssxref("<percentage>")}}</dd> + <dt>thin</dt> + <dd>Cienkie obramowanie.</dd> + <dt>medium</dt> + <dd>Średnie obramowanie.</dd> + <dt>thick</dt> + <dd>Grube obramowanie.</dd> + <dt><length></dt> + <dd>Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.</dd> + <dt><percentage></dt> + <dd>Grubość obramowania ma wartość procentową, w procentach szerokości zawierającego bloku. Sprecyzowane szerokości nie mogą być ujemne.</dd> +</dl> + +<p>Uwaga: Wartość <code>em</code> jest również dopuszczalna.</p> + +<h3 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h3> + +<ul> + <li>{{ Cssxref("border-bottom-width") }}</li> + <li>{{ Cssxref("border-left-width") }}</li> + <li>{{ Cssxref("border-right-width") }}</li> + <li>{{ Cssxref("border-top-width") }}</li> +</ul> + +<p> </p> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border-width: thin; + border-style: solid; + border-color: #000; +} +</pre> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td> </td> + </tr> + <tr> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td>Netscape</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }},</p> + +<p>{{ languages( { "de": "de/CSS/border-width", "en": "en/CSS/border-width", "es": "es/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width" } ) }}</p> diff --git a/files/pl/web/css/border/index.html b/files/pl/web/css/border/index.html new file mode 100644 index 0000000000..21b8f42f9a --- /dev/null +++ b/files/pl/web/css/border/index.html @@ -0,0 +1,123 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS +translation_of: Web/CSS/border +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>border</code> jest skróconą własnością dla ustawienia indywidualnych wartości własności obramowania w jednym miejscu w arkuszu stylów. <code>border</code> może być używane do ustawienia jednej lub więcej z następujących własności: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">border: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>border-width</dt> + <dd>Zobacz {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>Zobacz {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>Zobacz {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/border.html">Zobacz przykład</a></p> + +<pre>element { + border: 1px solid #000; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Podczas, gdy własności {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} oraz {{ Cssxref("border-color") }} przyjmują do czterech wartości, ta własność przyjmuje tylko jedną wartość dla każdej własności.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Technically removes the support for <code>transparent</code> as it is now a valid {{cssxref("<color>")}}; this has no practical influence.<br> + Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{cssxref("border-image")}} to its initial value (<code>none</code>).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border', 'border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/bottom/index.html b/files/pl/web/css/bottom/index.html new file mode 100644 index 0000000000..097a323292 --- /dev/null +++ b/files/pl/web/css/bottom/index.html @@ -0,0 +1,149 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/bottom +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Właściwość <code>bottom</code> określa część pozycji elementu pozycjonowanego.</p> + +<p>Dla elementów pozycjonowanych absolutnie (tych z <code>position: absolute</code> lub <code>position: fixed</code>) określa odległość między dolnym marginesem krawędzi elementu a dolną krawędzią zawierającego go bloku.</p> + +<p>Dla elementów pozycjonowanych relatywnie (tych z <code>position: relative</code>) określa wartość, o jaką element jest przesunięty powyżej jego normalnej pozycji. Jednak własność {{ Cssxref("top") }} unieważnia własność <code>bottom</code>, zatem, jeśli <code>top</code> nie jest ustawione na <code>auto</code>, wartość wyliczona <code>bottom</code> jest ujemną wartością wyliczoną <code>top</code><strong>.</strong></p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"> bottom: <length> | <percentage> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><length> </dt> + <dd>Długość, używana jak w opisano w <a href="#Podsumowanie">podsumowaniu</a>. Może mieć wartość ujemną, zero lub dodatnią.</dd> + <dt><percentage> </dt> + <dd>Procenty wysokości zawierającego bloku, używane jak opisano w <a href="#Podsumowanie">podsumowaniu</a>.</dd> + <dt><code>auto</code> </dt> + <dd>Dla elementów pozycjonowanych absolutnie pozycja elementu oparta jest na własności {{ Cssxref("top") }} i przyjmuje <code>height: auto</code> jako wysokość bazującą na zawartości. Dla elementów pozycjonowanych relatywnie przesunięcie elementu z jego oryginalnej pozycji w oparciu o własność {{ Cssxref("top") }} lub, jeśli <code>top</code> jest również ustawione na <code>auto</code>, nie przesuwa wcale.</dd> + <dt><code>inherit</code> </dt> + <dd>Dziedziczy wartość wyliczoną od elementu rodzica (który może nie być zawierającym go blokiem). Ta wartość wyliczona jest wtedy traktowana jak to było 'z <length>, <percentage> lub <code>auto</code><strong>.</strong></dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> + +<p>Poniższa przykładowa strona porównuje <code>position:absolute</code> z <code>position:fixed</code>. Kiedy normalny tekst staje się wyższy niż wyświetlana część strony (obszar okna przeglądarki), elementy blokowe pozycjonowane przy użyciu <code>position:absolute</code> przesuwają się razem ze stroną, podczas, gdy elementy blokowe pozycjonowane przy użyciu <code>position:fixed</code> nie przesuwają się. Zauważ, że IE6 nie wspiera <code>position:fixed</code>.</p> + +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> +<title>Position at bottom, absolute or fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>This<br>is<br>some<br>tall,<br>tall, + <br>tall,<br>tall,<br>tall<br>content.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html></pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Dla elementów pozycjonowanych absolutnie, których zawierający je blok jest oparty na elemencie blokowym, ta własność jest przesunięciem względem krawędzi dopełnienia tego elementu.</p> + +<p>Dla elementów pozycjonowanych absolutnie własność <code>bottom</code> nie ma widocznych efektów, jeśli wszystkie wartości {{ Cssxref("top") }}, {{ Cssxref("height") }} i {{ Cssxref("margin-top") }}<em>nie</em> są <code>auto</code> (co jest domyślną wartością dla <code>top</code> oraz <code>height</code>).</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>5<sup>[1]</sup></td> + <td>6</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Internet Explorer versions before 7.0, when both {{cssxref("top")}} and <code>bottom</code> are specified, the element position is over-constrained and the {{cssxref("top")}} property has precedence. In that case the computed value of <code>bottom</code> is set to <code>-top</code>, while its specified value is ignored.</p> diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..0bd73ac2a9 --- /dev/null +++ b/files/pl/web/css/box-decoration-break/index.html @@ -0,0 +1,202 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental +translation_of: Web/CSS/box-decoration-break +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">box-decoration-break: slice; +box-decoration-break: clone; + +box-decoration-break: initial; +box-decoration-break: inherit; +box-decoration-break: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>slice</code></dt> + <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd> + <dt><code>clone</code></dt> + <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Inline_box_fragments">Inline box fragments</h3> + +<p>An inline element that contains line-breaks styled with:</p> + +<pre class="brush:css">.example { + background: linear-gradient(to bottom right, yellow, green); + box-shadow: + 8px 8px 10px 0px deeppink, + -5px -5px 5px 0px blue, + 5px 5px 15px 0px yellow; + padding: 0em 1em; + border-radius: 16px; + border-style: solid; + margin-left: 10px; + font: 24px sans-serif; + line-height: 2; +} + +... +<span class="example">The<br>quick<br>orange fox</span></pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> + +<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> + +<pre class="brush:css"> -webkit-box-decoration-break: clone; + -o-box-decoration-break: clone; + box-decoration-break: clone; +</pre> + +<p>Results in:</p> + +<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> + +<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p> + +<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> + +<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> + +<h3 id="Block_box_fragments">Block box fragments</h3> + +<p>A block element with similar styles as above, first without any fragmentation:</p> + +<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> + +<p>Fragmenting the above block into three columns results in:</p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> + +<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> + +<p>Now the same example styled with <code>box-decoration-break:clone</code></p> + +<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> + +<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> + +<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> + <td>{{ Spec2('CSS3 Fragmentation') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support on inline elements</td> + <td>{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(32.0)}} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{property_prefix("-o")}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Support on non-inline element</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(32.0)}} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support on inline elements</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("32.0")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Support on non-inline element</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("32.0")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> +</ul> diff --git a/files/pl/web/css/box-direction/index.html b/files/pl/web/css/box-direction/index.html new file mode 100644 index 0000000000..eb85a1dad0 --- /dev/null +++ b/files/pl/web/css/box-direction/index.html @@ -0,0 +1,72 @@ +--- +title: '-moz-box-direction' +slug: Web/CSS/box-direction +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/box-direction +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>{{warning("This property reflects an old version of the specification. The <code>-moz-box-direction</code> will only be used for XUL while the standard <code>box-direction</code> has been replaced by <code>flex-direction</code> (which belongs to the CSS Flexible Box Layout Module currently under the Working Draft status).")}}</p> + +<p>W aplikacjach opartych na Mozilli <code>-moz-box-direction</code> określa, czy pudełko rozkłada swoją zawartość normalnie (od górnej lub lewej krawędzi), czy w odwróceniu (od dolnej lub prawej krawędzi).</p> + +<ul> + <li>Wartość początkowa: normal</li> + <li>Dotyczy: elementy z własnością CSS <a href="pl/CSS/display">display</a> o wartości -moz-box lub -moz-inline-box</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-box-direction: normal | reverse +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Pudełko rozkłada swoją zawartość od początku (lewej lub górnej krawędzi).</dd> + <dt>reverse</dt> + <dd>Pudełko rozkłada swoją zawartość od końca (prawej lub dolnej krawędzi).</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>vbox.example { + -moz-box-direction: reverse; /* układ od dołu do góry */ +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Krawędź pudełka określona jako<em>start</em> dla docelowego układu zależy od orientacji pudełka:</p> + +<table style="text-align: center;"> + <tbody> + <tr> + <td style="text-align: right;"><strong>Pozioma</strong></td> + <td>lewa</td> + </tr> + <tr> + <td style="text-align: right;"><strong>Pionowa</strong></td> + <td>górna</td> + </tr> + </tbody> +</table> + +<p>Krawędź przeciwna do początkowej określana jest jako<em>end</em>.</p> + +<p>Jeśli kierunek jest ustawiony przy użyciu atrybutu dir elementu, wtedy styl jest ignorowany.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/CSS/-moz-box-orient">CSS:-moz-box-orient</a></p> diff --git a/files/pl/web/css/box-shadow/index.html b/files/pl/web/css/box-shadow/index.html new file mode 100644 index 0000000000..feb07aaf0f --- /dev/null +++ b/files/pl/web/css/box-shadow/index.html @@ -0,0 +1,222 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - Adnotacja + - CSS + - CSS3 + - Grafika + - Referencja + - Tło CSS + - Tło CSS3 + - Układ + - Właściwość CSS + - sieć +translation_of: Web/CSS/box-shadow +--- +<p>{{CSSRef()}}</p> + +<p> </p> + +<div class="callout-box"> +<p><strong>Generator box-shadow</strong></p> + +<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator" title="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interaktywne narzędzie</a> pozwalające stworzyć efekt box-shadow.</p> +</div> + +<p><span class="seoSummary"><code><font face="Open Sans, sans-serif">Właściwość CSS </font>box-shadow</code> określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę.</span> Pozwala na rzucenie cienia z prawie każdego elementu. Jeśli {{ cssxref("-moz-border-radius") }} jest zadeklarowany na elemencie na którym zadeklarowany jest także <code>box-shadow</code>, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie <code>box-shadow</code> wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie <a href="/en-US/CSS/text-shadow" title="text-shadow">cienia tekstu</a> (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).</p> + +<ul> + <li><a href="/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">Wartość początkowa</a>: Szczegóły widoczne poniżej.</li> + <li>Dotyczy: Każdy element.</li> + <li><a href="/pl/docs/Web/CSS/dziedziczenie">Dziedziczona</a>: Nie.</li> + <li><a href="/pl/docs/Web/CSS/@media">@media</a>: Wizualna.</li> + <li>Wartość wyliczona: Każda długość absolutna; każdy kolor; inaczej jak zapisano poniżej.</li> + <li>Animowana: Tak, jako lista cieni.</li> + <li>Porządek kanoniczny: Unikatowy niedwuznaczny porządek określany według formalnej gramatyki. </li> +</ul> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="syntaxbox">box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#</pre> + +<h3 id="Values" name="Values">Wartości</h3> + +<dl> + <dt><code>inset</code></dt> + <dd>Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty <code>inset,</code> cień zawrze się wewnątrz elementu. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.</dd> + <dt><code><offset-x></code> <code><offset-y></code></dt> + <dd>Są dwie wartości {{ cssxref("<length>") }}, które określają odległość. <code><offset-x></code> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <code><offset-y></code> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("<length>") }} dla możliwych jednostek.<br> + Jeśli obydwie wartości przyjmują <code>0</code>, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <code><blur-radius></code> oraz/lub <code><spread-radius></code> jest określony).</dd> + <dt><code><blur-radius></code></dt> + <dd>To jest trzecia wartość {{ cssxref("<length>") }}. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną <code>0</code> (krawędź cienia jest ostra).</dd> + <dt><code><spread-radius></code></dt> + <dd>To jest czwarta wartość {{ cssxref("<length>") }}. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość <code>0</code> (cień będzie tego samego rozmiaru co element).</dd> + <dt><code><color></code></dt> + <dd>Zobacz {{cssxref("<color>")}} dla możliwych słów kluczowych oraz notacji.<br> + Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość {{ cssxref("color") }}, lecz Safari tworzy przeźroczysty cień w tej sytuacji.</dd> +</dl> + +<h2 id="Live_examples" name="Live_examples">Przykłady</h2> + +<ul> + <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Test box-shadow</a></li> + <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Kurs oraz przykłady box-shadow</a></li> +</ul> + +<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre> + +<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre> + +<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre> + +<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre> + +<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre> + +<h2 class="cleared" id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td>10.0<br> + 1.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0 (Zobacz notatki)</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 3.0 (WebKit 522){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wielokrotne cienie</td> + <td>10.0<br> + 1.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 3.0 (WebKit 522){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wartość<code> inset</code></td> + <td>10.0<br> + 4.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 5.0 (WebKit 533){{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>spread-radius</code></td> + <td>10.0<br> + 4.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.1 (WebKit 534)<br> + 5.0 (WebKit 533){{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Podstawowa obsługa</td> + <td> + <p>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p> + </td> + <td>{{ CompatUnknown }}</td> + <td>Obsługuje</td> + <td>Obsługuje (2.2 tested) {{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Wielokrotne cienie</td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + <tr> + <td>Wartość <code>inset</code></td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + <tr> + <td><code>spread-radius</code></td> + <td>5.0<br> + {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notatki">Notatki</h3> + +<ul> + <li>Od wersji 5.5, Internet Explorer obsługuje Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> i filtr <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a>. Możesz użyć tych rozszerzeń aby stworzyć cień (chociaż składnia oraz efekt różnią się od CSS3).</li> + <li>Cienie mają wpły na układ w starszych silnikach Gecko, Presto i WebKit; np. jeśli utworzomy zewnętrzny cień to przy elemencie z <code>width: 100%</code> zobaczysz pasek przewijania.</li> + <li>W Gecko 13 (Firefox 13) zostało usunięte wsparcie dla <code>-moz-box-shadow</code>. Od tego czasu, tylko wersja bez <code>-moz- jest wspierana</code>.</li> + <li>Aby uzyskać efekt <code>box-shadow</code> w IE9 lub późniejszych, musisz ustawić {{ cssxref("border-collapse") }} na <code>separate</code>.</li> +</ul> diff --git a/files/pl/web/css/box-sizing/index.html b/files/pl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..35cb212b99 --- /dev/null +++ b/files/pl/web/css/box-sizing/index.html @@ -0,0 +1,45 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS +translation_of: Web/CSS/box-sizing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>box-sizing</code> jest używane przez przeglądarki oparte na Mozilli do zmiany domyślnego modelu pudełkowego CSS, używanego do obliczania szerokości i wysokości elementów. Możliwe jest użycie tej własności do zezwolenia Mozilli na naśladowanie zachowania przeglądarek, które nieprawidłowo wspierają specyfikację modelu pudełkowego CSS, chociaż nie jest to zalecane, jako że większość przeglądarek zgodnych ze standardami nie wspiera tej własności.</p> + +<ul> + <li>Wartość początkowa: content-box</li> + <li>Dotyczy: wszystkie elementy</li> + <li>Dziedziczony: nie</li> + <li>Procenty: nie dotyczą</li> + <li>Wartość wyliczona: jako określone</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">box-sizing: content-box | border-box | padding-box +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>content-box</dt> + <dd>Jest to domyślny styl, jak określa go standard CSS. Własności <code>width</code> i <code>height</code> są wymierzane zawierając tylko zawartość, ale nie <code>border</code>, <code>margin</code> lub <code>padding</code>.</dd> + <dt>padding-box</dt> + <dd>Własności <code>width</code> i <code>height</code> zawierają rozmiar dopełnienia (<code>padding</code>), ale nie zawierają obramowania (<code>border</code>) ani marginesu (<code>margin</code>).</dd> + <dt>border-box</dt> + <dd>Własności <code>width</code> i <code>height</code> zawierają dopełnienie i obramowanie, ale nie margines. Jest to model pudełkowy używany przez Internet Explorer, kiedy dokument nie jest w trybie zgodności ze standardami <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/dndhtml/cssenhancements.asp">. </a></dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>.exampleone { + box-sizing: padding-box; +} +</pre> + +<div class="noinclude"> </div> diff --git a/files/pl/web/css/clear/index.html b/files/pl/web/css/clear/index.html new file mode 100644 index 0000000000..5948d08cc0 --- /dev/null +++ b/files/pl/web/css/clear/index.html @@ -0,0 +1,98 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clear +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Właściwość clear określa, czy dany element pojawi się obok <a href="pl/CSS/float">pływających</a> elementów, które go poprzedzają, czy też ma zostać przesunięty poniżej tychże.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: elementy blokowe (włączając pływające)</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">clear: none | left | right | both | <a href="pl/CSS/inherit">inherit</a> +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>none</strong> : Element<em>nie</em> jest przesuwany poniżej elementów pływających.</li> + <li><strong>left</strong> : Element jest przesuwany poniżej elementów pływających po lewej.</li> + <li><strong>right</strong> : Element jest przesuwany poniżej elementów pływających po prawej.</li> + <li><strong>both</strong> : Element jest przesuwany poniżej elementów pływających po obu stronach.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/clear.html">Zobacz przykład</a></p> + +<pre>h1 { clear: none } +h2 { clear: right }</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>Własność <code>clear</code> stosuje się zarówno do pływających, jak i niepływających elementów.</p> + +<p>Kiedy odnosi się do niepływających elementów blokowych, przesuwa ona krawędź obramowania elementu w dół, dopóki nie znajdzie się pod krawędzią marginesu wszystkich danych elementów pływających. To przemieszczenie (kiedy ma miejsce) nie powoduje <a href="pl/CSS/Za%c5%82amanie_marginesu">załamania marginesu</a>.</p> + +<p>Kiedy odnosi się do elementów pływających, przesuwa <a href="pl/CSS/Kraw%c4%99dzie_elementu_blokowego">krawędź marginesu</a> tego elementu poniżej <a href="pl/CSS/Kraw%c4%99dzie_elementu_blokowego">krawędzi marginesu</a> wszystkich danych elementów pływających. Wpływa to na pozycję późniejszych elementów pływających, ponieważ te nie mogą być pozycjonowane wyżej niż poprzednie.</p> + +<p>Elementy pływające, na które wpływa własność <code>clear</code> są wcześniejszymi elementami pływającymi w tym samym <a href="pl/CSS/Blok_formatowania_kontekstu">bloku formatowania kontekstu</a>.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#clear">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Mozilla</td> + <td>1</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("float") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/clear", "fr": "fr/CSS/clear" } ) }}</p> diff --git a/files/pl/web/css/clip/index.html b/files/pl/web/css/clip/index.html new file mode 100644 index 0000000000..3ade3a5941 --- /dev/null +++ b/files/pl/web/css/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clip +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność CSS <code>clip</code> określa, jaka część elementu jest widoczna.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: auto</li> + <li>Stosowana do: elementy pozycjonowane absolutnie</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: n/a</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: Dla wartości prostokątnych, prostokąt składający się z czterech wyliczonych długości, w innych przypadku - jako określone</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">clip: <shape> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{cssxref("<shape>")}}</dt> + <dd>określa kształt w formie <code>rect(<top>, <right>, <bottom>, <left>);</code></dd> + <dt>{{ Cssxref("auto") }}</dt> + <dd> </dd> + <dt>{{ Cssxref("inherit") }}</dt> + <dd> </dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre> img.clip04 { + clip: rect(10px, 20px, 20px, 10px); + } +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#clip">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + </tr> + <tr> + <td>Safari</td> + <td>1</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("overflow") }}, {{ Cssxref("position") }}</p> + +<p>{{ languages( { "en": "en/CSS/clip", "fr": "fr/CSS/clip" } ) }}</p> diff --git a/files/pl/web/css/color/index.html b/files/pl/web/css/color/index.html new file mode 100644 index 0000000000..20f670855e --- /dev/null +++ b/files/pl/web/css/color/index.html @@ -0,0 +1,62 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/color +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><code>color</code> ustawia pierwszoplanowy kolor dla zawartości tekstowej elementu. +</p> +<ul><li> {{ Xref_cssinitial() }}: zależy od programu użytkownika +</li><li> Stosowana do: wszystkich elementów +</li><li> {{ Xref_cssinherited() }}: tak +</li><li> Procenty: niedostępne +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: jako określone +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">color: <i>color</i> | inherit +</pre> +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci"> Wartości </h3> +<dl><dt> color </dt><dd> Kolor może być określony zgodnie z poniższymi zasadami: +</dd></dl> +<ul><li> jako heksadecymalna (szesnastkowa) wartość RGB +</li><li> jako regularna wartość RGB lub RGBA {{ Fx_minversion_inline(3) }} +</li><li> jako regularna wartość HSL lub HSLA {{ Fx_minversion_inline(3) }} +</li><li> jako jedna z predefiniowanych nazw kolorów +</li></ul> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<p>Poniżej są wszystkie sposoby na zrobienie czerwonego tekstu w elemencie: +</p> +<pre class="eval">element { color: red } +element { color: #f00 } +element { color: #ff0000 } +element { color: rgb(255,0,0) } +element { color: rgb(100%, 0%, 0%) } +element { color: hsl(0, 100%, 50%) } {{ Fx_minversion_inline(3) }} +</pre> +<p>Jeśli chcesz uwzględnić wartość kanału alfa by uwzględnić przezroczystość, możesz użyć kolorów w formacie RGBA lub HSLA: +</p> +<pre class="eval">element { color: rgba(255, 0, 0, 0.5) } {{ Fx_minversion_inline(3) }} +element { color: hsla(0, 100%, 50%, 0.5) } {{ Fx_minversion_inline(3) }} +</pre> +<p>Oba powyższe przykłady definiują kolor z przezroczystością ustawioną na 0.5 lub 50%. +</p> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<ul><li> <a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a> +</li></ul> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#color">CSS 1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#color">CSS 3</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/color", "es": "es/CSS/color", "fr": "fr/CSS/color", "ja": "ja/CSS/color" } ) }} diff --git a/files/pl/web/css/content/index.html b/files/pl/web/css/content/index.html new file mode 100644 index 0000000000..b9d75f21cc --- /dev/null +++ b/files/pl/web/css/content/index.html @@ -0,0 +1,107 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/content +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <strong>content</strong> określa, co jest wyświetlane wewnątrz pseudoelementów :before i :after.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> + <li>Stosowana do: pseudoelementów {{ Cssxref(":before") }} i {{ Cssxref(":after") }}</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: wszystkie</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">content : normal | none | inherit | no-open-quote | no-close-quote ; +</pre> + +<pre class="eval">content : [ <string> | <counter> | attr(<identifier>) | <uri> + | open-quote | close-quote]+ ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("none") }}</dt> + <dt>{{ Cssxref("normal") }}</dt> + <dt>{{cssxref("<string>")}}</dt> + <dt>{{cssxref("<uri>")}}</dt> + <dd>jeden lub więcej identyfikatorów URI odsyłających do zewnętrznego źródła, takiego jak obrazek.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dt>open-quote i close-quote</dt> + <dd>będzie to zamienione przez odpowiednie ciągi z własności 'quotes'.</dd> + <dt>no-open-quote i no-close-quote</dt> + <dd>zwiększa (zmniejsza) poziom zagnieżdżeń cytatów, ale nie dodaje żadnej zawartości.</dd> + <dt>attr(attribute-name)</dt> + <dd>będzie to zamienione przez wartość ciągu atrybutu węzła.</dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<pre class="eval">q:lang { quotes: '"' '"' "'" "'" } +q:before { content: open-quote } +q:after { content: close-quote } +</pre> + +<pre class="eval">h1:before { + content: "Chapter: "; +} +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#content">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/generate.html#content">W3C Cascading Style Sheets, level 2</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-content/#inserting3">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("quotes") }}</p> diff --git a/files/pl/web/css/counter-increment/index.html b/files/pl/web/css/counter-increment/index.html new file mode 100644 index 0000000000..00cdfff28b --- /dev/null +++ b/files/pl/web/css/counter-increment/index.html @@ -0,0 +1,67 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - CSS List + - CSS Property +translation_of: Web/CSS/counter-increment +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>counter-increment</code> zwiększa wartość <a href="pl/Liczniki_CSS">liczników CSS</a> o podaną wielkość.</p> + +<ul> + <li>{{ Xref_cssinitial() }}:</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">counter-increment: [<identyfikator> <liczba całkowita>?]+ | inherit | none +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>identyfikator</dt> + <dd>Nazwa licznika, którego wartość jest zwiększana.</dd> + <dt>integer</dt> + <dd>Wartość, która ma być dodana do licznika. Domyślnie 1.</dd> +</dl> + +<p>Można zwiększyć wartość dowolnej liczby liczników oddzielając wszystkie spacją.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/counter-reset">counter-reset</a> ustawia wartość danego <a href="pl/Liczniki_CSS">licznika CSS</a> na podaną</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { + counter-increment: rozdzial sekcja 2 strona; /* Zwiększa wartość liczników + rozdział i strona o 1, + oraz wartość licznika sekcja o 2 */ +} +</pre> + +<p>Powyższy zapis jest równoważny z:</p> + +<pre>h1 { + counter-increment: rozdzial 1 sekcja 2 strona 1; +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li><a href="pl/Liczniki_CSS">Liczniki CSS</a></li> +</ul> diff --git a/files/pl/web/css/counter-reset/index.html b/files/pl/web/css/counter-reset/index.html new file mode 100644 index 0000000000..ff2fcd5b91 --- /dev/null +++ b/files/pl/web/css/counter-reset/index.html @@ -0,0 +1,66 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - CSS List + - CSS Property + - Reference +translation_of: Web/CSS/counter-reset +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>counter-reset</code> ustawia wartość <a href="pl/Liczniki_CSS">liczników CSS</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}:</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">counter-reset: [ <identyfikator> <liczba całkowita>? ]+ | inherit | none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>identyfikator</dt> + <dd>Nazwa licznika, którego wartość jest ustawiana.</dd> + <dt>liczba całkowita</dt> + <dd>Wartość, którą ma przyjąć dany licznik przy każdym pojawieniu się danego elementu. Domyślnie 0.</dd> +</dl> + +<p>Można ustawić dowolną liczbę liczników oddzielając wszystkie spacją.</p> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li><a href="pl/CSS/counter-increment">counter-increment</a> zwiększa wartość danego <a href="pl/Liczniki_CSS">licznika CSS</a> o podaną wielkość.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { + counter-reset: rozdzial sekcja 1 strona; /* Ustawia wartość liczników + rozdział i strona na 0, + oraz wartość licznika sekcja na 1 */ +} +</pre> + +<p>Powyższy zapis jest równoważny z:</p> + +<pre>h1 { + counter-reset: rozdzial 0 sekcja 1 strona 0; +} +</pre> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p><a href="pl/Liczniki_CSS">Liczniki CSS</a>, {{ Cssxref("counter-increment") }}</p> diff --git a/files/pl/web/css/css_colors/index.html b/files/pl/web/css/css_colors/index.html new file mode 100644 index 0000000000..48b67295d0 --- /dev/null +++ b/files/pl/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="CSS_Data_Types">CSS Data Types</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="Guides">Guides</h2> + +<p><em>None.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li> +</ul> diff --git a/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html new file mode 100644 index 0000000000..7907144f10 --- /dev/null +++ b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html @@ -0,0 +1,3241 @@ +--- +title: Narzędzie doboru kolorów +slug: Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow +tags: + - CSS + - CSS Kolory + - HTML Kolory + - Narzędzia + - kolor + - kolory + - narzędzie + - narzędzie do wybierania kolorów + - wybieranie kolorów +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css notranslate">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">To narzędzie ułatwia tworzenie, wybieranie i eksperymentowanie z niestandadrowymi kolorami w sieci.</span> Umożliwia także konwersję pomiędzy różnymi <a href="/en-US/docs/Web/CSS/color_value">formatami kolorów</a> obsługiwanymi przez <a href="/en-US/docs/Web/CSS">CSS</a>, w tym: kolory HEXA, RGB (Red/Green/Blue) i HSL (Hue/Saturation/Lightness). Możliwa jest też kontrola kanału alpha w formatach RGB (rgba) i HSL.</p> + +<p>Każdy wybrany kolor prezentowany jest we wszystkich trzech standardowych formatach CSS . Dodatkowo, bazując na obecnie wybranym kolorze, tworzona jest paleta HSL, HSV oraz alpha. Okno wyboru koloru "zakraplacz" można przełączać pomiędzy formatami HSL i HSV. Przeciągając kolory do pojemnika na dole i poruszając nimi nad sobą możesz przetestować jak wyglądają obok siebie. Zmieniaj względną wartość z-index aby przesunąc kolor na wierzch lub schować za innym.</p> + +<p>To narzędzie pozwoli ci odnależć idealne kolory CSS do wykorzystania w twoim <a href="/en-US/docs/Web/HTML">HTML</a>.</p> + +<div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div> + +<p>Wygenerowane kolory można użyć wszędzie gdzie potrzeba w obrębie CSS i HTML, chyba że stwierdzono inaczej.</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<p>Więcej o używaniu kolrów, sprawdź:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Stosowanie kolrów do elementów HTML za pomocą CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Podstawy stylizacji czcionek</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Stylizacja krawędzi przy użyciu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Zmienianie stylów tła za pomocą CSS</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Kolor i kontrast</a></li> +</ul> diff --git a/files/pl/web/css/css_flexible_box_layout/index.html b/files/pl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ae8c92e4d8 --- /dev/null +++ b/files/pl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,156 @@ +--- +title: Elastyczny model pudełkowy CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>Elastyczny model pudełkowy CSS </strong>jest modułem <a href="/en-US/docs/Web/CSS">CSS</a> definiującym model pudełkowy CSS zoptymalizowany do projektowania interfejsów użytkownika i układania elementów wzdłuż osi. W elastycznym modelu pudełkowym dzieci elastycznego kontenera mogą być ułożone w dowolnym kierunku oraz zmieniać swoje rozmiary albo rosnąc w celu zajęcia nieużytej przestrzeni albo kurcząc się by uniknąć przepełnienia kontenera. Zarówno horyzontalne jak i wertykalne ułożenie dzieci może być łatwo kontrolowane.</p> + +<h2 id="Prosty_przykład">Prosty przykład</h2> + +<p>W poniższym przykładzie kontenerowi ustawiono <code>display: flex</code> co oznacza, że trójka dzieci stała się elastycznymi elementami. Wartość <code>justify-content</code> została ustawiona na <code>space-between</code> w celu równego rozproszenia elementów wzdłuż głównej osi. Między elementami umieszczona zostanie jednakowa ilość przestrzeni, a prawy i lewy element zostaną wypchnięte do krawędzi kontenera. Ponadto elementy są rozciągnięte na całą długość osi prostopadłej z powodu domyślnej wartości <code>align-items</code> wynoszącej <code>stretch</code>. Elementy rozciągają się do maksymanlej wysokości elastycznego kontenera sprawiając, że każdy z nich ma wysokość najwyższego.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Odnośniki">Odnośniki</h2> + +<h3 id="Atrybuty_CSS">Atrybuty CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Słownik_pojęć">Słownik pojęć</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Container">Elastyczny kontener</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Item">Element flex</a></li> + <li><a href="/en-US/docs/Glossary/Main_Axis">Oś główna</a></li> + <li><a href="/en-US/docs/Glossary/Cross_Axis">Oś poprzeczna</a></li> + <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> +</ul> +</div> + +<h2 id="Przewodniki">Przewodniki</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Podstawowe zagadnienia Flexboksa</a></dt> + <dd>Przegląd funkcji flexboksa</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Powiązania flexboksa z innymi sposobami układu</a></dt> + <dd>Jak flexbox jest powiązany z innymi rodzajami układu i innymi specyfikacjami CSS</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Rozmieszczanie elementów w elastycznym kontenerze</a></dt> + <dd>Jak atrybuty ustawiania elementów dziłają z flexboksem.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Kolejność elementów elastycznego kontenera</a></dt> + <dd>Wyjaśnienie różnych sposobów na zmienianie kolejności i kierunku elementów oraz omówienie potencjalnych problemów z tym związanych.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Kontrola proporcji elastycznych elementów wzdłuż osi głównej</a></dt> + <dd>Artykuł wyjaśniający atrybuty flex-grow, flex-shrink oraz flex-basis.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Przechodzenie elastycznych elementów do nowego wiersza</a></dt> + <dd>Tworzenie wielolinijkowych kontenerów flex oraz kontrola wyświetlania elementów w tych linijkach.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typowe zastosowania flexboksa</a></dt> + <dd>Częste wzorce projektowe będące typowymi zastosowaniami flexboksa.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Kompatybilność wsteczna flexboksa</a></dt> + <dd>Stan flexboksa w przeglądarkach, problemy "interoperability", wsparcie starszych przeglądarek i wersji specyfikacji.</dd> +</dl> + +<ul> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>tworzona przez społeczność lista błędów flexboksa w przeglądarkach i sposoby ich obejścia</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt> + <dd>Artykuł zawierający zbiór mixinów dla tych którzy chcą stworzyć wieloprzeglądarkowe rozwiązania typu flexbox działające nawet w starszych przeglądarkach nie wspierających nowoczesnej składni flexbox.</dd> +</dl> + +<p> </p> diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..eb9d550390 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,609 @@ +--- +title: Auto-placement in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p>Poza możliwością umieszczania elementów</p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Default_rules_for_auto-placement">Default rules for auto-placement</h2> + +<p>As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the <code>grid-template-rows</code> property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new <em>implicit</em> rows will be created.</p> + +<h3 id="Sizing_rows_in_the_implicit_grid">Sizing rows in the implicit grid</h3> + +<p>The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.</p> + +<p>You can however control the size of these rows with the property <code>grid-auto-rows</code>. To cause all created rows to be 100 pixels tall for example you would use:</p> + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid. <strong>Track listings are not supported in Firefox.</strong></p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Auto-placement_by_column">Auto-placement by column</h3> + +<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p> + +<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p> + +<div id="placement_5"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="The_order_of_auto_placed_items">The order of auto placed items</h2> + +<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p> + +<h3 id="Order_modified_document_order">Order modified document order</h3> + +<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p> + +<h3 id="Items_with_placement_properties">Items with placement properties</h3> + +<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3> + +<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p> + +<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Filling_in_the_gaps">Filling in the gaps</h3> + +<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p> + +<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p> + +<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Anonymous_grid_items">Anonymous grid items</h3> + +<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p> + +<pre class="brush: css"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p> + +<h3 id="Use_cases_for_auto-placement">Use cases for auto-placement</h3> + +<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p> + +<div id="placement_9"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> + <li><img src="https://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2> + +<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p> + +<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0894a70679 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid Layout</strong> jest najlepszą metodą aby podzielić strone na części lub definiowanie relacji takich jak rozmiar, pozycja i warstwa, pomiędzy podstawowymi elementami HTML.</p> + +<p>Podobnie do tabel (ang. "tables"), rozmieszczenie grid <em>(ang. "siatka")</em> pozwala autorowi wyrównać elementy w kolumny i wiersze. Jednakowoż grid pozwala na wiele więcej ułożeń niż tabele. Na przykład kontener grid potrafi spozycjonować elementy wewnątrz siebie w taki sposób aby na siebie nachodziły oraz używały warstw, podobnie jak elementy pozycjonowane przy użyciu CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Przykład</h2> + +<p>Przykład poniżej pokazuje trzy kolumnową ścieżkę siatki z utworzonymi nowymi wierszami z ustawioną własnością minimalną na 100 pikseli i wartością maksymalną ustawioną na auto. Elementy zostały ustawione na siatce przy pomocy miejsc opartych na liniach siatki.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">Jeden</div> + <div class="two">Dwa</div> + <div class="three">Trzy</div> + <div class="four">Cztery</div> + <div class="five">Pięć</div> + <div class="six">Sześć</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Reference">Reference</h2> + +<h3 id="Własności_CSS">Własności CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_functions">CSS functions</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Poradniki">Poradniki</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Zewnętrzne_źródła">Zewnętrzne źródła</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> +</ul> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html new file mode 100644 index 0000000000..93ac130fce --- /dev/null +++ b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html @@ -0,0 +1,594 @@ +--- +title: Projektowanie typowych układów za pomocą układu siatki CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<p>Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">grid-template-areas</a>, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i dla projektów, które realizujesz.</p> + +<h2 id="Responsywny_układ_strony_korzystający_z_1_do_3_kolumn_o_zmiennej_pozycji_elementów_przy_użyciu_grid-template-areas">Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu <code>grid-template-areas</code></h2> + +<p>Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.</p> + +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> + +<p>Zamierzam stworzyć taki układ korzystając z <em>nazwanych pól szablonu, </em>o których możecie dowiedzieć się więcej z kursu <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p> + +<p>Mój szkielet składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.</p> + +<div id="layout_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> + </article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> +</div> +</pre> + +<p>Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z <em>zapytań o środki dostępu</em> (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom. Nadal nie korzystając z <em>zapytań o urządzenie dostępu</em>, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout and accessibility</a></em>. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</pre> + +<p>Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się <em>zapytaniem o środek dostępu</em> i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element <code>header</code> (nagłówek) rozciąga się na dwie kolumny, tak, jak i element <code>nav </code>(menu). Wtrzecim rzędzie sąsiaduje element <code>sidebar</code> (panel boczny) oraz element <code>content </code>(zawartość strony). W czwartym rzędzie umieściłem element <code>ad</code> (blok reklamowy) zamiast panelu bocznego, a na samym końcu element <code>footer</code> (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (<em>flexbox</em>) dla menu, tak by wyświetliło się w oddalonym rzędzie.</p> + +<p>Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>The three-column layout has two <code>1fr</code> unit side columns and a middle column that has <code>4fr</code> as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.</p> + +<p>In this layout I am displaying the <code>nav</code> in the left column, alongside the <code>content</code>. In the right column we have the <code>sidebar</code> and underneath it the advertisements (<code>ad</code>). The <code>footer</code> now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.</p> + +<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> +</div> + +<p>This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that <code>ad</code> block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.</p> + +<h2 id="A_flexible_12-column_layout">A flexible 12-column layout</h2> + +<p>If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 <code>1fr</code>-unit column tracks, they all have a start line named <code>col-start</code>. This means that we will have twelve grid lines named <code>col-start</code>.</p> + +<div id="layout_2"> +<div class="hidden"> +<pre class="brush: css">.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>To demonstrate how this grid system works I have four child elements inside my wrapper.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Start column line 1, span 3 column tracks.</div> + <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div> + <div class="item3">Start row 2 column line 2, span 2 column tracks.</div> + <div class="item4">Start at column line 3, span to the end of the grid (-1).</div> +</div> +</pre> + +<p>I can then place these on the grid using the named lines, and also the span keyword.</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p> +</div> + +<p>As described in the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guide to named lines</a>, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.</p> + +<p>Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the <code>span</code> keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. It clearly demonstrates how our items are placed.</p> + +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> + +<p>There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this <em>strict</em> column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.</p> + +<h3 id="Building_a_layout_using_the_12-column_system">Building a layout using the 12-column system</h3> + +<p>To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.</p> + +<div id="layout_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"><h1>Main article area</h1> + <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> + </div> +</pre> + +<p>I can then set up our grid, as for the example 12-column layout above.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.</p> + +<p>We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.</p> + +<p>The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.</p> + +<pre class="brush: css">@media (min-width: 500px) { + + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p> +</div> + +<p>Once again the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> is useful to help us see how our layout has taken shape.</p> + +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> + +<p>Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.</p> + +<h2 id="A_product_listing_with_auto-placement">A product listing with auto-placement</h2> + +<p>Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.</p> + +<p>The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.</p> + +<div id="layout_4"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } +</pre> +</div> + +<p>We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the <code>minmax()</code> function in our repeat notation for track sizing.</p> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.</p> + +<p>I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to <code>display: flex</code> and the <code>flex-direction</code> to <code>column</code>. I can then use an auto margin on the <code>.cta</code> to push this bar down to the bottom of the box.</p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<p>This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. </p> + +<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> +</div> + +<p>This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of <code>wide</code> on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of <code>span 2</code>. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.</p> + +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> + +<p>I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}<code>: dense </code> on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">issues</a> of the tab order following the source and not your reordered display.</p> + +<div id="layout_5"> +<div class="hidden"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item One</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Two</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li class="wide"> + <h2>Item Three</h2> + <div class="body"><p>The content of this listing item goes here.</p> + <p>This one has more text than the other items.</p> + <p>Quite a lot more</p> + <p>Perhaps we could do something different with it?</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Four</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> + <li> + <h2>Item Five</h2> + <div class="body"><p>The content of this listing item goes here.</p></div> + <div class="cta"><a href="">Call to action!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } + +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> + +<p>This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p> +</div> + +<h2 id="Further_exploration">Further exploration</h2> + +<p>The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.</p> + +<ul> + <li>For inspiration see the <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> from Jen Simmons</a>, she has been creating layouts based on a range of sources.</li> + <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/css_reference/index.html b/files/pl/web/css/css_reference/index.html new file mode 100644 index 0000000000..c6b8ea66c6 --- /dev/null +++ b/files/pl/web/css/css_reference/index.html @@ -0,0 +1,56 @@ +--- +title: Dokumentacja CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +<p>Specyfikacja CSS zawiera wszystkie standardowe właściwości<span style="line-height: inherit;"> </span><a href="/pl/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a>, w tym<span style="line-height: inherit;"> </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes" title="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes"><span style="line-height: inherit;">pseudo-k</span>las</a><span style="line-height: inherit;"> i </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements" title="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements"><span style="line-height: inherit;">pseudo-e</span>lementow</a><span style="line-height: inherit;">, za</span>sad używania <a href="https://developer.mozilla.org/en-US/docs/CSS/At-rule" title="https://developer.mozilla.org/en-US/docs/CSS/At-rule">znaku @</a><span style="line-height: inherit;">, </span><span style="line-height: inherit;">i selektorów w porządku alfabetycznym. Taka organizacja specyfikacji pozwala na szybki dostęp do szczegółowych informacji o każdym elemencie specyfikacji.</span><br> + <br> + Specyfikacja CSS nie tylko opisuje ustandaryzowane właściwości CSS1 i CSS2.1, ale odnosi się również do specyfikacji najnowszej wersji - <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, zarówno elementów w fazie koncepcji jak i elementów zatwierdzonych.</p> +<div> + Zobacz także <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">rozszerzenie CSS Mozilli</a> skonstrułowanych dla programów opartych na Gecko, z prefiksem -moz; oraz <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">rozszerzenia CSS WebKit</a> dla programów opartych na tym silniku. Sprawdź <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/" title="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">zestawienie właściwości wszystko prefiksów CSS</a> autorstwa Petera Beverloo.</div> +<p> </p> +<div> + {{ CSS_Ref() }}</div> +<h2 id="Selektory">Selektory</h2> +<ul> + <li>Proste selektory + <ul> + <li><a href="/pl/docs/CSS/Type_selectors" title="Type selectors">Type selectors</a><code> elementname</code></li> + <li><a href="/pl/docs/CSS/Class_selectors" title="Class selectors">Class selectors</a> <code>.classname</code></li> + <li><a href="/pl/docs/CSS/ID_selectors" title="ID selectors">ID selectors</a> <code>#idname</code></li> + <li><a href="/pl/docs/CSS/Universal_selectors" title="Universal selectors">Universal selectors</a><code> * ns|* *|*</code></li> + </ul> + </li> + <li>Połączenia + <ul> + <li><a href="/pl/docs/CSS/Adjacent_sibling_selectors" title="Adjacent sibling selectors">Adjacent sibling selectors</a> <code>A + B</code></li> + <li><a href="/pl/docs/CSS/General_sibling_selectors" title="General sibling selectors">General sibling selectors</a> <code>A ~ B</code></li> + <li><a href="/pl/docs/CSS/Child_selectors" title="Child selectors">Child selectors</a> <code>A > B</code></li> + <li><a href="/pl/docs/CSS/Descendant_selectors" title="Descendant selectors">Descendant selectors</a> <code>A B</code></li> + </ul> + </li> + <li><a href="/pl/docs/CSS/Pseudo-elements" title="Pseudo-elements">Pseudo-elements</a></li> + <li><a href="/pl/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudo-classes</a></li> +</ul> +<h2 id="diverso">diverso</h2> +<ul> + <li>{{ Cssxref("Comments") }}</li> + <li><a href="/pl/docs/CSS/Media_queries" title="How to use media queries">Media queries</a></li> + <li><a href="/pl/docs/CSS_Counters" title="How to use CSS Counters">Counters</a></li> + <li><a href="/pl/docs/CSS/Using_CSS_gradients" title="How to use CSS gradients">Gradients</a></li> + <li><a href="/pl/docs/CSS/Using_CSS_transforms" title="How to use CSS transforms">Transforms</a></li> +</ul> +<h2 id="Pojęcia">Pojęcia</h2> +<ul> + <li><a href="/pl/docs/CSS/Syntax" title="Syntax">CSS syntax</a></li> + <li><a href="/pl/docs/CSS/At-rule" title="At-rule">At-rule</a></li> + <li><a href="/pl/docs/CSS/Comments" title='Comments"'>Comments</a></li> + <li><a href="/pl/docs/CSS/Specificity" title="Specificity">Specificity</a></li> + <li><a href="/pl/docs/CSS/initial_value" title="Initial value">Initial value</a></li> + <li><a href="/pl/docs/CSS/inheritance" title="Inheritance">Inheritance</a></li> + <li><a href="/pl/docs/CSS/specified_value" title="Specified value">Specified value</a></li> + <li><a href="/pl/docs/CSS/computed_value" title="Computed value">Computed value</a></li> + <li><a href="/pl/docs/CSS/used_value" title="Used value">Used value</a></li> + <li><a href="/pl/docs/CSS/actual_value" title="Actual value">Actual value</a></li> + <li><a href="/pl/docs/CSS/box_model" title="Box model">Box model</a></li> +</ul> diff --git a/files/pl/web/css/css_selectors/index.html b/files/pl/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a93359f339 --- /dev/null +++ b/files/pl/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - NeedsTranslation + - Overview + - Reference + - Selectors + - TopicStub +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p class="summary"><span class="seoSummary"><strong>CSS selectors</strong> define the elements to which a set of CSS rules apply.</span></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.</p> +</div> + +<h2 id="Basic_selectors">Basic selectors</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></dt> + <dd>Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.<br> + <strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> + <strong>Example:</strong> <code>*</code> will match all the elements of the document.</dd> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></dt> + <dd>Selects all elements that have the given node name.<br> + <strong>Syntax:</strong> <code><var>elementname</var></code><br> + <strong>Example:</strong> <code>input</code> will match any {{HTMLElement("input")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></dt> + <dd>Selects all elements that have the given <code>class</code> attribute.<br> + <strong>Syntax:</strong> <code>.<var>classname</var></code><br> + <strong>Example:</strong> <code>.index</code> will match any element that has a class of "index".</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a></dt> + <dd>Selects an element based on the value of its <code>id</code> attribute. There should be only one element with a given ID in a document.<br> + <strong>Syntax:</strong> <code>#<var>idname</var></code><br> + <strong>Example:</strong> <code>#toc</code> will match the element that has the ID "toc".</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></dt> + <dd>Selects all elements that have the given attribute.<br> + <strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> + <strong>Example:</strong> <code>[autoplay]</code> will match all elements that have the <code>autoplay</code> attribute set (to any value).</dd> +</dl> + +<h2 id="Grouping_selectors">Grouping selectors</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a></dt> + <dd>The <code>,</code> is a grouping method, it selects all the matching nodes.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br> + <strong>Example:</strong> <code>div, span</code> will match both {{HTMLElement("span")}} and {{HTMLElement("div")}} elements.</dd> +</dl> + +<h2 id="Combinators">Combinators</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></dt> + <dd>The <code> </code> (space) combinator selects nodes that are descendants of the first element.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> + <strong>Example:</strong> <code>div span</code> will match all {{HTMLElement("span")}} elements that are inside a {{HTMLElement("div")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></dt> + <dd>The <code>></code> combinator selects nodes that are direct children of the first element.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> + <strong>Example:</strong> <code>ul > li</code> will match all {{HTMLElement("li")}} elements that are nested directly inside a {{HTMLElement("ul")}} element.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></dt> + <dd>The <code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> + <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></dt> + <dd>The <code>+</code> combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> + <strong>Example:</strong> <code>h2 + p</code> will match all {{HTMLElement("p")}} elements that directly follow an {{HTMLElement("h2")}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt> + <dd>The <code>||</code> combinator selects nodes which belong to a column.<br> + <strong>Syntax:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> + <strong>Example:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd> +</dl> + +<h2 id="Pseudo">Pseudo</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt> + <dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br> + <strong>Example:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt> + <dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br> + <strong>Example:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br> + Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br> + Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li> +</ul> diff --git a/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html b/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html new file mode 100644 index 0000000000..ff4ec92e20 --- /dev/null +++ b/files/pl/web/css/css_selectors/użycie_pseudoklasy__colon_target_w_selektorach/index.html @@ -0,0 +1,64 @@ +--- +title: 'Użycie pseudoklasy :target w selektorach' +slug: 'Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<div>{{CSSRef}}</div> + +<p>Czasami adres URL wskazuje na konkretny fragment dokumentu, ale użytkownikowi może być ciężko to zauważyć. Sprawdź, jak można łatwo zwrócić uwagę użytkownika na target naszego adresu URL za pomocą CSS.</p> + +<h2 id="Picking_a_Target" name="Picking_a_Target">Wybór targetu</h2> + +<p><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasy</a> {{cssxref(":target")}} używa się, aby ostylować targetowany element adresu URL, który zawiera identyfikator fragmentu.</p> + +<p>Przykładowo, adres URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> zawiera identyfikator fragmentu o treści <code>#example</code>. W HTML identyfikatory fragmentu to wartości atrybutów <code>id</code> lub <code>name</code> jako że atrybuty te dzielą tę samą przestrzeń na nazwy. A więc adres URL z naszego przykładu wskazywałby nam część strony o tytule "example".</p> + +<p>Przypuśćmy, że chcesz ostylować każdy element <code>h2</code>, który jest targetem URL i nie chcesz, żeby elementy innego rodzaju dostały ostylowane w ten sposób. To proste:</p> + +<pre class="brush: css">h2:target { font-weight: bold; }</pre> + +<p>Można też stworzyć style, które dotyczą jedynie konkretnego fragmentu naszej strony. Robi się to używając tego samego identyfikatora, który znajduje się w naszym URL. Tak więc aby dodać obramowanie do fragmentu strony zawierającego element <code>#example</code>, napisalibyśmy:</p> + +<pre class="brush: css">#example:target { border: 1px solid black; }</pre> + +<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Targetowanie wszystkich elementów</h2> + +<p>Jeżeli chcemy stworzyć uniwersalne stylowanie, którego będziemy używać do wszystkich targetowanych elementów, możemy użyć uniwersalnego selektora:</p> + +<pre class="brush: css">:target { color: red; } +</pre> + +<h2 id="Example" name="Example">Przykład</h2> + +<p>W poniższym przykładzie jest pięć odnośników, które przenoszą nas do różnych elementów należących do jednego dokumentu. Wybierając link "Pierwszy" sprawi, że <code><h1 id="one"></code> zostanie naszym pierwszym targetowanym elementem. Zwróć uwagę, że dokument zostać przewinięty przewinąć do nowej pozycji, jako że targetowane elementy umieszcza się w miarę możliwości na górze okna przeglądarki.</p> + +<div id="example"> +<pre class="brush: html"><h4 id="jeden">...</h4> <p id="dwa">...</p> +<div id="trzy">...</div> <a id="cztery">...</a> <em id="piec">...</em> + +<a href="#jeden">Pierwszy</a> +<a href="#dwa">Drugi</a> +<a href="#trzy">Trzeci</a> +<a href="#cztery">Czwarty</a> +<a href="#piec">Piąty</a></pre> +</div> + +<h2 id="Conclusion" name="Conclusion">Podsumowanie</h2> + +<p>W przypadkach, gdy identyfikator fragmentu wskazuje na dany kawałek dokumentu, użytkownik może nie być pewny, którą część dokumentu ma czytać. Dzięki ostylowaniu targetu adresu URL można tego uniknąć.</p> + +<h2 id="Related_Links" name="Related_Links">Zobacz też</h2> + +<ul> + <li>{{cssxref(":target")}}</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li> + <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/pl/web/css/cursor/index.html b/files/pl/web/css/cursor/index.html new file mode 100644 index 0000000000..74575073a9 --- /dev/null +++ b/files/pl/web/css/cursor/index.html @@ -0,0 +1,156 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/cursor +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>cursor</code> określa kursor myszy wyświetlany, kiedy wskaźnik myszy jest nad elementem.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | {{ Cssxref("inherit") }} ; +</pre> + +<pre class="eval">cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><url> {{ mediawiki.external(' ') }}? </dt> + <dd>URL własnego kursora. Może być podany więcej niż jeden w wypadku, kiedy niektóre typy obrazów nie są obsługiwane. Pozostałe adresy URL muszą być podane jako ostatnie. Zobacz <a href="pl/U%c5%bcycie_warto%c5%9bci_URL_dla_w%c5%82asno%c5%9bci_cursor">Użycie wartości URL dla własności cursor</a> po więcej informacji.</dd> + <dt><std-cursor-name></dt> + <dd>Jedna z nazw kursorów podanych w poniższej tabeli.</dd> +</dl> + +<dl> + <dt><code>default</code> </dt> + <dd>domyślny kursor (zazwyczaj strzałka)</dd> + <dt><code>auto</code> </dt> + <dd>odpowiednik <code>text</code>, kiedy jest ponad tekstem i <code>default</code> w innych przypadkach</dd> + <dt><code>crosshair</code> </dt> + <dd>kursor w kształcie krzyżyka, często używany do wskazania zaznaczenia w bitmapie</dd> + <dt><code>pointer</code> </dt> + <dd>kursor używany nad linkami (zwykle ręka)</dd> + <dt><code>move</code> </dt> + <dd>kursor przenoszenia</dd> + <dt><code>e-resize</code> </dt> + <dd>kursor do zmiany rozmiaru prawej krawędzi pudełka</dd> + <dt><code>ne-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnego prawego rogu pudełka</dd> + <dt><code>nw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnego lewego rogu pudełka</dd> + <dt><code>n-resize</code> </dt> + <dd>kursor do zmiany rozmiaru górnej krawędzi pudełka</dd> + <dt><code>se-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnego prawego rogu pudełka</dd> + <dt><code>sw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnego lewego rogu pudełka</dd> + <dt><code>s-resize</code> </dt> + <dd>kursor do zmiany rozmiaru dolnej krawędzi pudełka</dd> + <dt><code>w-resize</code> </dt> + <dd>kursor do zmiany rozmiaru lewej krawędzi pudełka</dd> + <dt><code>text</code> </dt> + <dd>kursor wskazujący tekst, który może być zaznaczony (zwykle belka w kształcie I)</dd> + <dt><code>wait</code> </dt> + <dd>kursor wskazujący, że program jest zajęty (czasami klepsydra lub zegarek)</dd> + <dt><code>help</code> </dt> + <dd>kursor wskazujący, że dostępna jest pomoc</dd> + <dt><code>progress</code> </dt> + <dd>kursor wskazujący, że program jest jest zajęty, ale użytkownik może nadal oddziaływać z nim (w przeciwieństwie do <code>busy</code>)</dd> + <dt><code>copy</code> </dt> + <dd>kursor pokazujący, że coś może być skopiowane</dd> + <dt><code>alias</code> </dt> + <dd>kursor wskazujący, że alias lub skrót jest do utworzenia</dd> + <dt><code>context-menu</code> </dt> + <dd>kursor wskazujący, że menu kontekstowe jest dostępne pod kursorem</dd> + <dt><code>cell</code> </dt> + <dd>kursor wskazujący, że komórki mogą być zaznaczone</dd> + <dt><code>not-allowed</code> </dt> + <dd>kursor pokazujący, że coś nie może być zrobione</dd> + <dt><code>col-resize</code> </dt> + <dd>kursor do zmiany rozmiaru kolumn poziomo</dd> + <dt><code>row-resize</code> </dt> + <dd>kursor do zmiany rozmiaru wierszy pionowo</dd> + <dt><code>no-drop</code> </dt> + <dd>kursor pokazujący, że opuszczenie nie jest dozwolone w aktualnym położeniu</dd> + <dt><code>vertical-text</code> </dt> + <dd>kursor wskazujący, że poziomy tekst może być zaznaczony (zwykle boczna belka w kształcie I)</dd> + <dt><code>all-scroll</code> </dt> + <dd>kursor pokazujący, że coś może być przewijane w dowolnym kierunku (przesuwane)</dd> + <dt><code>nesw-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w kierunkach górny prawy lub dolny lewy</dd> + <dt><code>nwse-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w kierunkach górny lewy lub dolny prawy</dd> + <dt><code>ns-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w górę lub w dół</dd> + <dt><code>ew-resize</code> </dt> + <dd>kursor do zmiany rozmiaru w lewo lub prawo</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/cursor.html">Zobacz przykład</a></p> + +<pre>Liniowy: + +<span style="cursor: crosshair">Jakiś tekst</span> + +Zewnętrzny: + +.pointer { + cursor: pointer; +} +.move { + cursor: move; +} + +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p>Ta własność działa na starszych przeglądarkach, jednak nie wszystkie wartości są w pełni wspierane.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html b/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html new file mode 100644 index 0000000000..f6e786ee52 --- /dev/null +++ b/files/pl/web/css/cursor/użycie_wartości_url_dla_własności_cursor/index.html @@ -0,0 +1,41 @@ +--- +title: Użycie wartości URL dla własności cursor +slug: Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor +tags: + - CSS + - CSS_2.1 + - Programowanie_WWW + - Programowanie_dla_wielu_przeglądarek + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p> </p> +<p><a href="pl/Gecko">Gecko</a> 1.8 (<a href="pl/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) wspiera wartości URL dla <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">własności cursor CSS 2/2.1</a>. To pozwala używać zewnętrzne obrazki jako kursory myszy — można użyć każdego formatu wspieranego przez Gecko.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<p>Składnia dla tej własności:</p> +<pre class="eval">cursor: [<url>,]* słowo_kluczowe; +</pre> +<p>To oznacza, że można podać zero lub więcej adresów URL (oddzielonych przecinkiem), a na końcu musi pojawić się jedno ze słów kluczowych zdefiniowanych w specyfikacji <a href="pl/CSS">CSS</a>, takie jak <code>auto</code> czy <code>pointer</code>.</p> +<p>Na przykład, taka wartość jest dozwolona:</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>Najpierw nastąpi próba pobrania pliku foo.cur. Jeżeli ten plik nie istnieje, lub jest nieprawidłowy z jakiegoś powodu, nastąpi próba pobrania bar.gif, a jeśli to się nie uda, zostanie użyta wartość <code>auto</code>.</p> +<p>Wsparcie dla <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">składni</a> CSS3 dla wartości własności cursor zostało dodane w Gecko 1.8beta3 (Deer Partk Alpha 2); zatem działa ono w Firefoksie 1.5. Pozwala to na określanie punktu wiązania kursora, który <b>musi</b> być wewnątrz wymiarów obrazka kursora; koordynaty na zewnątrz obrazka będą przybliżane do krawędzi (n.p. ujemna wartość będzie interpretowana jako 0, a wartości wykraczające poza wymiary obrazka będą przycinane do najbliższego piksela w obrazku). Jeśli nie zostaną podane, dla plików CUR i XBM wartości zostaną pobrane z plików, a dla pozostałych zostanie ustalony lewy górny róg obrazka. Przykładem składni CSS3 jest:</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>Pierwsza liczba to wartość x, a drugi y. W tym przypadku punkt wiązania zostanie ustawiony w pikselu (4,12) licząc od lewego górnego rogu (0,0).</p> +<h3 id="Ograniczenia" name="Ograniczenia">Ograniczenia</h3> +<p>Można używać wszystkich formatów obrazków wspieranych przez Gecko. To oznacza, że możesz użyć BMP, JPG, CUR, GIF, itp. Jednak ANI nie jest wspierane. I nawet, jeżeli zostanie podany animowany GIF, kursor nie będzie animowany. To ograniczenie zostanie usunięte w przyszłych wersjach.</p> +<p>Gecko, samo w sobie, nie tworzy żadnych ograniczeń, co do rozmiaru kursora. Jednak powinieneś ograniczyć obrazek do 32x32 dla maksymalnej kompatybilności z różnymi systemami operacyjnymi. W szczególności kursory większe, niż podany rozmiar nie będą działały na Windows 9x (95, 98, ME).</p> +<p>Przezroczyste kursory nie są wspierane na systemie Windows w wersjach wcześniejszych niż XP. To ograniczenie systemu operacyjnego. Przezroczystość działa na pozostałych platformach.</p> +<p>Tylko wydania Mozilli na platformy Windows, OS/2 i Linux (z GTK+ 2.4 lub nowszym) wspierają wartości URL dla kursorów. Wsparcie dla innych platform może zostać dodane w przyszłości (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id="Kompatybilno.C5.9B.C4.87_z_innymi_przegl.C4.85darkami" name="Kompatybilno.C5.9B.C4.87_z_innymi_przegl.C4.85darkami">Kompatybilność z innymi przeglądarkami</h3> +<p>Microsoft Internet Explorer także wspiera wartości URI dla własności cursor. Jednak wspiera wyłącznie formaty CUR i ANI.</p> +<p>Jest także znacznie mniej restrykcyjny w zakresie składni. To oznacza, że wartości takie jak:</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>lub:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>będą działały w MSIE, ale nie będą w Gecko. Dla kompatybilności z Gecko i zgodności ze specyfikacja CSS, zawsze na początku należy podać URI, oraz użyć dokładnie jednego słowa kluczowego na końcu.</p> +<p> </p> diff --git a/files/pl/web/css/częste_pytania_o_css/index.html b/files/pl/web/css/częste_pytania_o_css/index.html new file mode 100644 index 0000000000..12a84d8c20 --- /dev/null +++ b/files/pl/web/css/częste_pytania_o_css/index.html @@ -0,0 +1,162 @@ +--- +title: Częste pytania o CSS +slug: Web/CSS/Częste_pytania_o_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<p> +</p> +<h3 id="Cz.C4.99sto_zadawane_pytania" name="Cz.C4.99sto_zadawane_pytania"> Często zadawane pytania </h3> +<h4 id="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla" name="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla"> Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla </h4> +<p>Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration). +</p><p>Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania: +</p> +<ul><li> <i>Tryb zgodności wstecznej</i> (<i>Quirks Mode</i>): tryb pozwalający prawidłowo wyświetlać strony oparte na niestandardowych metodach renderowania. Te metody były używane w przeglądarkach zanim zaimplementowano obsługę standardów W3C. +</li><li> <i>Tryb standardów</i> (<i>Standard Mode</i>): w tym trybie przeglądarka ma ściśle stosować się do standardów W3C. +</li></ul> +<p>Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej. +</p><p>Oto lista najczęściej używanych DTD: +</p> +<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</pre> +<h4 id="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class" name="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class"> Różnice między <code>id</code> i <code>class</code> </h4> +<p>Bloki i elementy HTML-a mogą mieć atrybut <code>id</code> i/lub <code>class</code>. Atrybut <code>id</code> pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut <code>class</code> pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem <code>id</code> i/lub <code>class</code>. +</p><p>Używaj styli zależnych od <code>id</code>, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu <code>id</code> jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie. +</p><p>Używaj atrybutu <code>class</code>, gdy chcesz aby ten sam styl był stosowany do grupy elementów. +</p><p>Zobacz <a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory CSS</a> +</p> +<h4 id="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci" name="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci"> Przywracanie domyślnej wartości własności </h4> +<p>W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego <i>default</i>) +</p><p>Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład <code>p</code>), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana. +</p><p>Z powodu <i>kaskadowej</i> natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz. +</p> +<h4 id="Style_pochodne" name="Style_pochodne"> Style pochodne </h4> +<p>CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu <i><b>user agents performance issues</b></i> (<a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer words about it</a>). +</p><p>W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje <i>zagnieżdżonych stylów</i>, dzięki <i>kaskadowej</i> naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W <a href="pl/HTML">HTML</a>-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas). +</p> +<h4 id="Przydzielanie_kilku_klas" name="Przydzielanie_kilku_klas"> Przydzielanie kilku klas </h4> +<p>Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie <code>class</code>, oddzielając kolejne nazwy spacjami. +</p> +<pre><style type="text/css"> +.firstclass { background: black; color: white; } +.secondclass { font-weight: bold; } +</style> + +<div class="firstclass secondclass"> +... treść ... +... treść ... +... treść ... +</div> +</pre> +<p>Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie <code>class</code> jest nieistotna. +</p> +<h4 id="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85" name="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85"> Własności stylów, które nie działają </h4> +<p>Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS. +</p><p>Najczęstsze powody ignorowania niektórych styli to: +</p> +<ul><li> hierarchia elementów HTML'a +</li><li> <i><b>jawnie</b></i> przedefiniowane reguły stylów +</li><li> <i><b>użycie skróconej formy właściwości</b></i> +</li><li> używanie selektora: <code>*</code> +</li><li> kolejność interpretacji reguł CSS +</li></ul> +<p>Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację. +</p><p><b>Hierarchia elementów HTML-a</b> +</p><p>Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego. +</p> +<pre>#section { font-weight: bold; } +.redtext { font-weight: normal; color: red; } + +<div id="section"> + To jest pogrubiony tekst + <span class="redtext"> ten ma normalną grubość, lecz jest czerwony,</span> + i znów pogrubiony +</div> +</pre> +<p>Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem. +</p><p><br> +<b>Przedefiniowywanie reguł stylów</b> +</p><p>W arkuszach stylów kolejność <b>jest</b> istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja. +</p> +<pre>#sekcja { font-weight: bold; } +.czerwony_tekst { color: red; } +/* inne reguły */ +/* inne reguły */ +/* inne reguły */ +.czerwony_tekst { font-weight: normal; } + +<div id="sekcja"> + Ten tekst jest pogrubiony, + <span class="redtext"> ten jest normalny i czerwony,</span> + a ten znów pogrubiony. +</div> +</pre> +<p>Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł. +</p><p><br> +<b>Używanie skrótów własności</b> +</p><p>Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana. +</p> +<pre>#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; } +.czerwony_tekst { font: 14px Arial; color: red; } + +<div id="sekcja"> + To jest pogrubiona 12-o pikselowa Verdana, + <span class="czerwony_tekst">to jest normalny 14-o pikselowy, czerwony Arial,</span> + i znów 12-o pikselowa Verdana +</div> +</pre> +<p>W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł <b>jest</b> istotna. +</p> +<pre>#sekcja { + font-weight: bold; + font: 12px Verdana; /* skrót nadpisuje pogrubienie i zwraca normalny */ +} +</pre> +<p><br> +<b>Używanie selektora: <code>*</code></b> +</p><p>Selektor gwiazdki (<code>*</code>) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane. +</p> +<pre>body * { font-weight: normal; } +#sekcja { font: 12px Verdana; } +.pogrubiony_tekst { font-weight: bold; } +.czerwony_tekst { color: red; } + +<div id="sekcja"> + Ten jest normalny, + <span class="pogrubiony_tekst"> + <span class="czerwony_tekst"> ten jest normalny i czerwony,</span> + </span> + i znów normalny. +</div> +</pre> +<p>W tym przykładzie <code>body *</code> pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do <i>czerwony_tekst</i>. Tak więc <code>font-weight: bold;</code> zastosowany do klasy <i>pogrubiony_tekst</i> jest nadpisane przez <code>font-weight: normal;</code> klasy <i>czerwony_tekst</i>. +</p><p><b>Starszeństwo w CSS</b> +</p><p>Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (<code>id</code>), następnie klasie (<code>class</code>) i ewentualnie znajdujące się wewnątrz elementu (<code>style=""</code>). +</p><p><br> +</p> +<pre>div { color: black; } +#pomaranczowy { color: orange; } +.zielony { color: green; } + +<div id="pomaranczowy" class="zielony" style="color: red;">To jest czerwony tekst</div> +</pre> +<p>Więcej informacji na temat działania selektorów można znaleźć w sieci → <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> +</p> +<h4 id="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F" name="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F"> Co wykonuje własność -moz-*? </h4> +<p>Zobacz: <a href="pl/Rozszerzenia_CSS_Mozilli">Rozszerzenia CSS Mozilli</a>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }} diff --git a/files/pl/web/css/direction/index.html b/files/pl/web/css/direction/index.html new file mode 100644 index 0000000000..cc214c0395 --- /dev/null +++ b/files/pl/web/css/direction/index.html @@ -0,0 +1,50 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/direction +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Własność <code>direction</code> powinna być ustawiana w celu dobrania kierunku tekstu: <code>rtl</code> dla hebrajskiego lub arabskiego tekstu oraz <code>ltr</code> dla innych pism. Normalnie powinno być to robione raczej jako cześć dokumentu (np. poprzez użycie atrybutu <code>dir</code> w HTML) niż poprzez bezpośrednie użycie CSS. +</p><p>Własność ustawia bazowy kierunek tekstu elementów blokowych oraz kierunek osadzonych utworzonych przez własność {{ Cssxref("unicode-bidi") }}. Ustawia również domyślne wyrównanie tekstu i elementów blokowych oraz kierunek, w jakim komórki następują w wierszu tabeli. +</p> +<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("ltr") }} +</li><li> Stosowana do: wszystkich elementów +</li><li> {{ Xref_cssinherited() }}: tak +</li><li> Procenty: niedostępne +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<pre class="eval">direction: [ 'ltr' | 'rtl' | inherit ] ; +</pre> +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci"> Wartości </h3> +<dl><dt> ltr </dt><dd> Domyślna wartość <code>direction</code>. Tekst i inne elementy idą od lewej do prawej, +</dd><dt> rtl </dt><dd> Tekst i inne elementy idą od prawej do lewej. +</dd></dl> +<p>Aby własność <code>direction</code> miała jakiś efekt w elementach inline, wartością własności {{ Cssxref("unicode-bidi") }} musi być 'embed' lub 'override'. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre class="eval">blockquote { + direction : rtl ; +} +</pre> +<h3 id="Notatki" name="Notatki"> Notatki </h3> +<p>W odróżnieniu od atrybutu <code>dir</code> w HTML, własność <code>direction</code> nie jest dziedziczona od kolumn tabeli do komórek tabeli, ponieważ dziedziczenie CSS spływa po drzewie dokumentu, a komórki tabeli są wewnątrz wierszy, ale nie wewnątrz kolumn. +</p> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a> +</li></ul> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("unicode-bidi") }} +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/direction", "es": "es/CSS/direction", "fr": "fr/CSS/direction" } ) }} diff --git a/files/pl/web/css/display/index.html b/files/pl/web/css/display/index.html new file mode 100644 index 0000000000..1c85584a65 --- /dev/null +++ b/files/pl/web/css/display/index.html @@ -0,0 +1,168 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/display +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Ta własność określa typ wyświetlania pudełka używanego dla elementu. W języku takim jak HTML, gdzie istniejące elementy mają dobrze określone zachowanie, domyślne wartości własności 'display' są brane z zachowań opisanych w specyfikacji HTML lub z domyślnego arkusza stylu przeglądarki/użytkownika. W językach, gdzie zachowanie 'display' nie jest zdefiniowane (jak XML), domyślną wartością jest 'inline'.</p> + +<p>Oprócz wielu różnych dozwolonych typów wyświetlania pudełka, jedna wartość, "none", pozwala wyłączyć wyświetlanie elementu; wszystkie elementy potomne również mają wyłączone wyświetlanie. Dokument jest wyświetlany jak gdyby element nie istniał w drzewie dokumentu. Ta wartość daje potężne możliwości, ale powinna być używana z ostrożnością.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("inline") }}</li> + <li>{{ Xref_cssinherited() }}: wszystkich elementów</li> + <li>Dziedziczona: nie</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone, z wyjątkiem elementu głównego, elementów <a href="pl/CSS/float">pływających</a> i elementów <a href="pl/CSS/position">pozycjonowanych absolutnie</a>.</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>display:</code> <display-value> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><display-value> </dt> + <dd>Wartością 'display' może być jedna z poniższych wartości.</dd> +</dl> + +<ul> + <li><strong>inherit</strong> : Wyraźnie ustawia wartość tej własności na odpowiadającą rodzicowi.</li> +</ul> + +<ul> + <li><strong>none</strong> : Ta wartość wyłącza wyświetlanie elementu (nie ma efektu w układzie); wszystkie elementy potomne również mają bezwarunkowo wyłączone wyświetlanie. Dokument jest wyświetlany tak jakby element nie istniał w drzewie dokumentu. Aby wyświetlić rozmiary pudełka elementu w schemacie formatowania dokumentu, gdy jego zawartość powinna być niewidoczna, zobacz własność 'visibility'.</li> +</ul> + +<ul> + <li><strong>inline</strong> : Sprawia, że element generuje jedno lub więcej pudełek elementu liniowego.</li> +</ul> + +<ul> + <li><strong>block</strong> : Sprawia, że element generuje pudełko elementu blokowego.</li> +</ul> + +<ul> + <li><strong>inline-block</strong> : Wprowadzone w CSS2.1. Sprawia, że element generuje pudełko elementu blokowego, które będzie opływane otaczającą treścią, jakby było pojedynczym pudełkiem liniowym (zachowując się tak, jakby zachowywał się zamieniany element). {{ Fx_minversion_inline(3) }}</li> +</ul> + +<ul> + <li><strong>list-item</strong> : Sprawia, że element generuje pudełko blokowe dla zawartości oraz oddzielne pudełko liniowe pozycji listy.</li> +</ul> + +<ul> + <li><strong>compact</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo blokowe albo liniowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'compact'. W kontekście elementu blokowego element 'compact' jest wyświetlany w lewym lub prawym marginesie elementu blokowego. Element 'compact' bierze udział w wyliczaniu wysokości linii dla danej linii, a wartość własności 'vertical-align' jest relatywna do elementu blokowego.</li> +</ul> + +<ul> + <li><strong>run-in</strong> : Zależnie od kontekstu ta wartość własności 'display' tworzy albo liniowe albo blokowe pudełko. W każdym przypadku odmienne własności CSS mogą stosować się do elementu 'run-in'. Własności elementu 'run-in' są dziedziczone z jego rodzica w drzewie dokumentu, nie z pudełka elementu blokowego, w którym jest zawarty.</li> +</ul> + +<ul> + <li><strong>table-header-group|table-footer-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający mu element HTML THEAD i TFOOT, od którego wartości wzięły swoją nazwę.</li> +</ul> + +<ul> + <li><strong>table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość ta jest odpowiednikiem elementu <code>table</code> w HTML.</li> +</ul> + +<ul> + <li><strong>inline-table</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML. {{ Fx_minversion_inline(3) }}</li> +</ul> + +<ul> + <li><strong>table-caption</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-cell</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-row|table-row-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<ul> + <li><strong>table-column|table-column-group</strong> : Te wartości sprawiają, że element zachowuje się jak odpowiadający element tabeli HTML, od którego te wartości wzięły nazwę. Wartość 'inline-table' nie ma dokładnego odwzorowania w HTML.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/display.html">Zobacz przykład</a></p> + +<pre>Ext/Doc: p { display: block } +In-Line: <p STYLE="display: block">text</p> +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<ul> + <li>Zgodność z CSS1: przeglądarki mogą legalnie ignorować własność 'display' i zamiast tego używać domyślnych ustawień przeglądarki dla każdego elementu.</li> + <li>W CSS1 domyślną wartością dla tej własności było "block". W CSS2 zostało to zmienione na "inline".</li> +</ul> + +<h5 id="Elementy_blokowe_kontra_elementy_liniowe" name="Elementy_blokowe_kontra_elementy_liniowe">Elementy blokowe kontra elementy liniowe</h5> + +<ul> + <li><strong>Elementy blokowe</strong> tworzą odrębne w pionie bloki zawartości (w kontekście wizualnym) - generalnie używając przełamania linii przed zawartością i po niej. Tylko ta wartość dla 'display' jest dopuszczalna do tworzenia elementu pozycjonowanego. Zachowanie blokowe jest pokazywane przez takie elementy HTML jak BLOCKQUOTE (cytaty blokowe), DIV oraz nagłówki. Wartości własności 'display', tworzące blokowy typ elementu, to: 'block', 'list-item', 'table, 'compact' oraz 'run-in'.</li> +</ul> + +<ul> + <li><strong>Elementy liniowe</strong> nie tworzą wyraźnych bloków zawartości, zawartość elementu jest wyświetlana przy użyciu pudełka liniowego (zawartość jest rozmieszczana linia po linii wewnątrz zawierającego ją fizycznego lub wirtualnego elementu blokowego). Zachowanie liniowe jest pokazywane przez takie elementy HTML, jak fizyczne i wirtualne formatowanie znaków, nieopływane obrazki i nieobjęta znacznikami zawartość. Wartości własności 'display', tworzące liniowy typ elementu, to: 'inline', 'inline-table', 'compact' oraz 'run-in'.</li> +</ul> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<p>Wartości <code>table-</code>* są wspierane w Firefoksie i ???.</p> + +<p>Wartości <code>compact</code> oraz <code>run-in</code> nie są wspierane w Firefoksie. Wspierane są w ???.</p> + +<p>Wartości <code>inline-block</code> oraz <code>inline-table</code> są wstępnie wspierane w Firefoksie 3 / Gecko 1.9. <code>inline-block</code> jest również wspierane w ???, a <code>inline-table</code> jest również wspieranie w ???.</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}</p> diff --git a/files/pl/web/css/dziedziczenie/index.html b/files/pl/web/css/dziedziczenie/index.html new file mode 100644 index 0000000000..e8049231f1 --- /dev/null +++ b/files/pl/web/css/dziedziczenie/index.html @@ -0,0 +1,50 @@ +--- +title: Dziedziczenie +slug: Web/CSS/Dziedziczenie +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/inheritance +--- +<p> +{{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie</h3> +<p>Podsumowanie każdej <a href="pl/Dokumentacja_CSS">definicji własności CSS</a> zawiera informację, czy dana własność jest dziedziczona domyślnie ("Dziedziczona: tak"), czy też nie ("Dziedziczona: nie"). Umożliwia to kontrolę nad tym, co się dzieje, gdy nie została określona żadna wartość własności elementu. +</p> +<h3 id="W.C5.82asno.C5.9Bci_dziedziczone" name="W.C5.82asno.C5.9Bci_dziedziczone"> Własności dziedziczone </h3> +<p>Gdy nie została określona wartość <b>własności dziedziczonej</b> elementu, element otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_wyliczona">wartość wyliczoną</a> własności elementu-rodzica. Tylko element główny dokumentu otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkową</a> podaną w podsumowaniu własności. +</p><p>Typowym przykładem własności dziedziczonej jest własność {{ Cssxref("color") }}. Mając następujące reguły stylu: +</p> +<pre class="eval"> p { color: green } +</pre> +<p>i znaczniki +</p> +<pre class="eval"> <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p> +</pre> +<p>wyrażenie "wyróżniony tekst" będzie miało kolor zielony, ponieważ element <code>em</code> odziedziczył wartość własności {{ Cssxref("color") }} po elemencie <code>p</code>. <i>Nie</i> otrzymuje on początkowej wartości własności (którą jest kolor użyty w elemencie głównym, gdy nie został określony dla strony żaden kolor). +</p> +<h3 id="W.C5.82asno.C5.9Bci_niedziedziczone" name="W.C5.82asno.C5.9Bci_niedziedziczone"> Własności niedziedziczone </h3> +<p>Gdy nie została określona wartość <b>własności niedziedziczonej</b> (czasami nazywanej <b>własnością reset</b> w kodzie Mozilli) elementu, element otrzymuje <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkową</a> tej własności (jak podano w podsumowaniu własności). +</p><p>Typowym przykładem własności niedziedziczonej jest własność {{ Cssxref("border") }}. Mając następujące reguły stylu: +</p> +<pre class="eval"> p { border: medium solid } +</pre> +<p>i znaczniki +</p> +<pre class="eval"> <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p> +</pre> +<p>wyrażenie "wyróżniony tekst" nie będzie posiadało ramki (ponieważ wartość początkowa własności {{ Cssxref("border-style") }} to <code>none</code>). +</p> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<p>Słowo kluczowe {{ Cssxref("inherit") }} pozwala na bezpośrednie określenie dziedziczenia. Działa ono zarówno na własnościach dziedziczonych jak i niedziedziczonych. +</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC"> Zobacz również </h3> +<p>{{ Cssxref("inherit") }}, <a href="pl/CSS/Warto%c5%9b%c4%87_pocz%c4%85tkowa">wartość początkowa</a> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/inheritance", "es": "es/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance" } ) }} diff --git a/files/pl/web/css/empty-cells/index.html b/files/pl/web/css/empty-cells/index.html new file mode 100644 index 0000000000..7c203acf00 --- /dev/null +++ b/files/pl/web/css/empty-cells/index.html @@ -0,0 +1,77 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/empty-cells +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <strong>empty-cells</strong> określa, jak program powinien wyświetlać obramowania i tła wokół komórek, które nie mają widocznej zawartości.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">empty-cells: show | hide | inherit + +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("inherit") }}</dt> + <dt><code>show</code></dt> + <dd>obramowania i tła powinny być wyświetlane jak normalne komórki</dd> + <dt><code>hide</code></dt> + <dd>obramowania i tła nie powinny być wyświetlane</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">.contentbox td { + empty-cells: show; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#empty-cells">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#empty-cells">W3C Cascading Style Sheets, level 2</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#tables">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/float/index.html b/files/pl/web/css/float/index.html new file mode 100644 index 0000000000..0c8a73f00d --- /dev/null +++ b/files/pl/web/css/float/index.html @@ -0,0 +1,116 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/float +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <strong>float</strong> określa, że element powinien być wyjęty z normalnego przepływu i umieszczony przy lewej lub prawej stronie zawierającego go kontenera, zaś tekst i elementy liniowe będą zawijały się wokół niego.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Procenty:</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone</li> +</ul> + +<p><strong>Element pływający</strong> jest jedynym, gdzie <a href="pl/CSS/warto%c5%9b%c4%87_wyliczona">wartość wyliczona</a> <code>float</code> <strong>nie</strong> jest równa <code>none</code>.</p> + +<p>Zauważ, że, jeśli odwołujesz się do tej wartości z JavaScript jako elementu obiektu <a href="pl/DOM/element.style">element.style</a>, musisz oznaczyć to <strong>cssFloat</strong> (zobacz listę na <a href="pl/DOM/CSS">DOM:CSS</a>). Zwróć też uwagę, że IE nazywa to <strong>styleFloat</strong>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p>float: left | right | none | <a href="pl/CSS/inherit">inherit</a></p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>left</strong> : Element pływa po lewej stronie zawierającego go bloku.</li> + <li><strong>right</strong> : Element pływa po prawej stronie zawierającego go bloku.</li> + <li><strong>none</strong> : Element nie pływa.</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/float.html">Zobacz przykład</a></p> + +<pre><html> + <head> + <style type="text/css"> + b + { + font-size: 25px; + float:right; + } + </style> + </head> + <body> + + <p> + <b>HELLO!</b> + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst. + </p> + +</body> +</html> +</pre> + +<h3 id="Notatki" name="Notatki">Notatki</h3> + +<p>TODO: Notatka powinna wyjaśniać, jak elementy pływające są pozycjonowane. Wzmianka o <a href="pl/CSS/block_formatting_context">block formatting context</a>.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float" } ) }}</p> diff --git a/files/pl/web/css/font-family/index.html b/files/pl/web/css/font-family/index.html new file mode 100644 index 0000000000..7a9bff6328 --- /dev/null +++ b/files/pl/web/css/font-family/index.html @@ -0,0 +1,58 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-family +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>font-family</code> dopuszcza uszeregowaną pod względem ważności listę nazw rodzin czcionek oraz/lub nazwy rodzajów czcionek do zdefiniowania dla wybranego elementu. W przeciwieństwie do większości innych własności CSS, wartości są oddzielone przecinkiem, by wskazywały, że są alternatywami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">font-family: <family-or-generic-name> [, <family-or-generic-name>]* | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><family-generic-name></dt> + <dd>jest jedną z wartości <code><family-name></code> lub <code><generic-family></code></dd> + <dt>family-name </dt> + <dd>Nazwa rodziny czcionek. Na przykład: "Times" i "Helvetica" są rodzinami czcionek. Nazwy rodziny czcionek, zawierające białe znaki, powinny być ujęte w cudzysłowy.</dd> + <dt>generic-family </dt> + <dd>Zdefiniowane są następujące rodzaje czcionek: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code>, <code>monospace</code>. Nazwy rodzajów są słowami kluczowymi i nie muszą być brane w cudzysłowy.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/font-family.html">Zobacz przykład</a></p> + +<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif } + +.receipt { font-family: Courier, "Lucida Console", monospace } +</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Powinieneś zawsze określić nazwę rodzaju jako ostatnią wartość we własności <code>font-family</code>.</p> + +<p>Własność <code>font-family</code> wyszczególnia listę czcionek, od najwyższego priorytetu do najniższego. Wybór czcionki <em>nie</em> kończy się po prostu, gdy pierwsza z wymienionych czcionek jest w systemie użytkownika. Wybór czcionki odbywa się raczej jako <em>jeden znak naraz</em>, zatem, jeśli dostępna czcionka nie ma glifu (matrycy), który może wyświetlić potrzebny znak, wypróbowywana jest kolejna dostępna czcionka.</p> + +<p>Jeśli dla czcionki dostępne są tylko niektóre własności <a href="pl/CSS/font-style">styles</a>, <a href="pl/CSS/font-variant">variants</a> lub <a href="pl/CSS/font-size">sizes</a>, mogą one również wpływać na to, które rodziny czcionek zostaną wybrane.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-family">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop">CSS 3</a></li> +</ul> diff --git a/files/pl/web/css/font-size-adjust/index.html b/files/pl/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..56561c4285 --- /dev/null +++ b/files/pl/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-size-adjust +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność {{ Cssxref("font-size-adjust") }} określa, że rozmiar czcionki powinien być wybrany raczej na podstawie wysokości małych liter niż wysokości dużych liter.</p> + +<p>Jest to użyteczne, ponieważ czytelność czcionek, zwłaszcza o małych rozmiarach, jest zdeterminowana bardziej przez rozmiar małych liter niż dużych liter. Może to powodować problemy, kiedy pierwsza czcionka zdefiniowana w {{ Cssxref("font-family") }} jest niedostępna, zaś czcionka ją zamieniająca ma znacząco odmienny stosunek proporcji (proporcję rozmiaru małych liter do rozmiaru czcionki).</p> + +<p>Zrobienie tego w sposób, który jest zgodny z przeglądarkami niewspierającymi {{ Cssxref("font-size-adjust") }}, polega na określeniu liczby, która zwielokrotnia własność {{ Cssxref("font-size") }}. Oznacza to, że wartość określona dla tej własności powinna być zasadniczo stosunkiem proporcji pierwszej deklarowanej czcionki. Na przykład, arkusz stylu, który definiuje <code><a href="pl/CSS/font-size">font-size</a>: 16px; <a href="pl/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code>, w praktyce określa, że rozmiar małych liter czcionki powinien wynosić <code>8px</code> wysokości (16px razy 0.5).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p><code>font-size-adjust:</code> <liczba> | <code>none</code> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>none</code> </dt> + <dd>Wybiera rozmiar czcionki opierając się jedynie na własności {{ Cssxref("font-size") }}.</dd> + <dt><liczba> </dt> + <dd> + <p>Wybiera rozmiar czcionki w ten sposób, że jej małe litery (jako wyznaczone przez wartość x-height czcionki) są określane liczbą zwielokrotniająca {{ Cssxref("font-size") }}.</p> + + <p>Zdefiniowana liczba powinna być zasadniczo stosunkiem proporcji (proporcja wartości x-height do rozmiaru czcionki) czcionki wybieranej w pierwszej kolejności w {{ Cssxref("font-family") }}. Będzie to oznaczało, że czcionka wybrana w pierwszej kolejności, kiedy jest dostępna, wyświetli się w tym samym rozmiarze w przeglądarkach, niezależnie, czy wspierają własność {{ Cssxref("font-size-adjust") }}.</p> + </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p><a href="/samples/cssref/font-size-adjust.html">Zobacz przykład</a></p> + +<pre>p{ + font: 12px Verdana, sans-serif; + font-size-adjust: 0.58; +} + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust">css3-fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>Wspierana na wszystkich platformach począwszy od Gecko 1.9 / Firefox 3, zaś w Windows wpierana wcześniej.</p> diff --git a/files/pl/web/css/font-size/index.html b/files/pl/web/css/font-size/index.html new file mode 100644 index 0000000000..a269accdc6 --- /dev/null +++ b/files/pl/web/css/font-size/index.html @@ -0,0 +1,339 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>font-size</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies the size of the font. Setting this property may change the size of other items, too, since it is used to compute the value of <code>em</code>, <code>ex</code>, and various other relative {{cssxref("<length>")}} units.</p> + +<pre class="brush:css no-line-numbers">/* <absolute-size> values */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; + +/* <relative-size> values */ +font-size: smaller; +font-size: larger; + +/* <length> values */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage> values */ +font-size: 80%; + +/* Global values */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<div class="hidden" id="font-size"> +<pre class="brush: html"><div id="container"> + <p id="xx-small">xx-small</p> + <p id="x-small">x-small</p> + <p id="small">small</p> + <p id="medium">medium</p> + <p id="large">large</p> + <p id="x-large">x-large</p> + <p id="xx-large">xx-large</p> + <p id="twelve-px">12px</p> + <div id="parent-twelve-px"> + 12px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> + <div id="parent-twenty-four-px"> + 24px + <p id="smaller">smaller</p> + <p id="larger">larger</p> + <p id="zero-dot-eight-em">0.8em</p> + </div> +</div> +</pre> + +<pre class="brush: css">#container { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +div > p { + border: 1px solid black; + display: flex; + align-items: center; + margin: 8px; + padding: 8px; +} + +#parent-twelve-px, +#parent-twenty-four-px { + display: flex; + border: 1px solid black; + padding: 8px; + margin: 8px; +} + +#parent-twelve-px { + font-size: 12px; +} + +#parent-twenty-four-px { + font-size: 24px; +} + +#xx-small { + font-size: xx-small; +} + +#x-small { + font-size: x-small; +} + +#small { + font-size: small; +} + +#medium { + font-size: medium; +} + +#large { + font-size: large; +} + +#x-large { + font-size: x-large; +} + +#xx-large { + font-size: xx-large; +} + +#smaller { + font-size: smaller; +} + +#larger { + font-size: larger; +} + +#twelve-px { + font-size: 12px; +} + +#zero-dot-eight-em { + font-size: 0.8em; +} +</pre> +</div> + +<p>{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The <code>font-size</code> property is specified in one of the following ways:</p> + +<ul> + <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> + <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> +</ul> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="absolute-size" name="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code></a></dt> + <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> + <dt><a id="relative-size" name="relative-size"><code>larger</code>, <code>smaller</code></a></dt> + <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd> + <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> + + <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> + </dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd> + <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Possible_approaches">Possible approaches</h2> + +<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> + +<h3 id="Keywords">Keywords</h3> + +<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> + +<h3 id="Pixels">Pixels</h3> + +<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> + +<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> + +<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> + +<h3 id="Ems">Ems</h3> + +<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> + +<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> + +<pre class="brush: plain">em = desired element pixel value / parent element font-size in pixels</pre> + +<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> + +<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> + +<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6em; +}</pre> + +<pre class="brush: html"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>The result is:</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner span's <code>font-size</code> is 1.6 em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> + +<h3 id="Rems">Rems</h3> + +<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> + +<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> + +<pre class="brush: css">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>Then we apply this CSS to the same HTML, which looks like this:</p> + +<pre class="brush: html"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Example_1">Example 1</h3> + +<pre class="brush: css">/* Sets paragraph text to be very large */ +p { font-size: xx-large; } + +/* Sets <h1> text to be 2.5 times the size + of the text around it */ +h1 { font-size: 250%; } + +/* Sets text enclosed within span tag to be 16px */ +span { font-size: 16px; } +</pre> + +<h3 id="Example_2">Example 2</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1> +<h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Example_2','600','200')}}</p> + +<h2 id="Notes">Notes</h2> + +<p><code>em</code> and <code>ex</code> units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{Cssxref("font-size")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>font-size</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/pl/web/css/font-stretch/index.html b/files/pl/web/css/font-stretch/index.html new file mode 100644 index 0000000000..751195d6e4 --- /dev/null +++ b/files/pl/web/css/font-stretch/index.html @@ -0,0 +1,77 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-stretch +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <strong>font-stretch</strong> wybiera normalny, zwężony lub poszerzony krój z rodziny czcionek.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<dl> + <dt>Wartości bezwględne</dt> + <dd> </dd> + <dd><code>font-stretch:</code> <code>normal</code> ;</dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>ultra-condensed</code> | <code>extra-condensed</code> | <code>condensed</code> | <code>semi-condensed</code>') }} ;</dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>semi-expanded</code> | <code>expanded</code> | <code>extra-expanded</code> | <code>ultra-expanded</code>') }} ;</dd> +</dl> + +<dl> + <dt>Wartości względne</dt> + <dd> </dd> + <dd><code>font-stretch:</code> {{ mediawiki.external('<code>wider</code> | <code>narrower</code>') }} ;</dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Definiuje normalną szerokość kroju czcionki.</dd> +</dl> + +<dl> + <dt>semi-condensed, condensed, extra-condensed, ultra-condensed</dt> + <dd>Definiuje krój czcionki węższy niż normalny, przy czym ultra-condensed jest najwęższy.</dd> +</dl> + +<dl> + <dt>semi-expanded, expanded, extra-expanded, ultra-expanded</dt> + <dd>Definiuje krój czcionki szerszy niż normalny, przy czym ultra-expanded jest najszerszy.</dd> +</dl> + +<dl> + <dt>wider</dt> + <dd>Wartość względna 'wider' ustawia szerszy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie szerszą niż ultra-expanded).</dd> +</dl> + +<dl> + <dt>narrower</dt> + <dd>Wartość względna 'narrower' ustawia węższy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie węższą niż ultra-condensed).</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { font-stretch: extra-expanded } +p { font-stretch: narrower} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><strong>UWAGA:</strong> Ta własność CSS <strong>NIE JEST JESZCZE ZAIMPLEMENTOWANA</strong>, zobacz {{ Bug(3512) }}, by sprawdzić aktualny status prośby o dodanie.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-stretch">CSS 2 fonts</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-stretch">CSS 3 fonts</a></li> +</ul> diff --git a/files/pl/web/css/font-style/index.html b/files/pl/web/css/font-style/index.html new file mode 100644 index 0000000000..3c04d0a8ac --- /dev/null +++ b/files/pl/web/css/font-style/index.html @@ -0,0 +1,49 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>font-style</code> definiuje kroje czcionki <code>normal</code> (określany również jako <code>upright</code> lub <code>roman</code>), <code>italic</code> oraz <code>oblique</code> spośród rodziny czcionek.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal, oblique, italic </dt> + <dd>Określa, że program powinien wybrać krój czcionki <code>normal</code>, <code>oblique</code> lub <code>italic</code> dla czcionki zdefiniowanej w {{ Cssxref("font-family") }}.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<p> </p> + +<p><a href="/samples/cssref/font-style.html">Zobacz przykład</a></p> + +<p> </p> + +<pre>h1 { font-style: italic } +p { font-style: oblique } + +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-style">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-style">css3-fonts</a></li> +</ul> diff --git a/files/pl/web/css/font-variant/index.html b/files/pl/web/css/font-variant/index.html new file mode 100644 index 0000000000..e1c3cab355 --- /dev/null +++ b/files/pl/web/css/font-variant/index.html @@ -0,0 +1,79 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-variant +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność <code>font-variant</code> wybiera z rodziny czcionek wygląd normalny lub kapitaliki.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<dl> + <dd><code>font-variant:</code> {{ mediawiki.external('<code>normal</code> | <code>small-caps</code>') }} ;</dd> +</dl> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal</dt> + <dd>Definiuje normalny krój czcionki.</dd> +</dl> + +<dl> + <dt>small-caps</dt> + <dd>Definiuje czcionkę, która jest wyróżniona kapitalikami. Jeśli kapitaliki nie są dostępne, Mozilla będzie symulowała kapitaliki, np. poprzez użycie normalnego kroju czcionki i zamianę małych liter przeskalowanymi wielkimi literami.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>h1 { font-variant: small-caps } +p { font-variant: small-caps} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-variant">CSS 2 fonts</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-variant">CSS 3 fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/font-weight/index.html b/files/pl/web/css/font-weight/index.html new file mode 100644 index 0000000000..8e4779355b --- /dev/null +++ b/files/pl/web/css/font-weight/index.html @@ -0,0 +1,107 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-weight +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność {{ Cssxref("font-weight") }} określa wagę lub grubość czcionki.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<p><code>font-weight:</code> <code>normal</code> | <code>bold</code> | <code>bolder</code> | <code>lighter</code> | <code>100</code> | <code>200</code> | <code>300</code> | <code>400</code> | <code>500</code> | <code>600</code> | <code>700</code> | <code>800</code> | <code>900</code> | {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd>Normalna waga czcionki. Identycznie jak 400.</dd> + <dt>bold </dt> + <dd>Pogrubiona czcionka. Identycznie jak 700.</dd> + <dt>lighter </dt> + <dd>Waga czcionki lżejsza o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)</dd> + <dt>bolder </dt> + <dd>Waga czcionki cięższa o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)</dd> + <dt>100, 200, 300, 400, 500, 600, 700, 800, 900 </dt> + <dd>Liczbowe wartość wag czcionek dla czcionek, które mają więcej niż tylko waga normalna i pogrubiona. Jeśli wybrana waga jest niedostępna, wtedy dla wartości 600-900 używana jest najbliższa dostępna większa wagi (lub jeśli takiej nie ma, najbliższa dostępna lżejsza waga), a dla wartości 100-500 używana jest najbliższa dostępna mniejsza waga (lub jeśli takiej nie ma, najbliższa dostępna większa waga). Oznacza to, że dla czcionek, które mają tylko wagi normalną i pogrubioną, wartości 100-500 stają się wagą normalną, a 600-900 pogrubioną.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, 'and what is the use of a book,' thought Alice 'without pictures or + conversations?' +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps darker than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Sets text enclosed within span tag + to be one step lighter than the parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","400","300")}}</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-weight">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-weight">css3-fonts</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/font/index.html b/files/pl/web/css/font/index.html new file mode 100644 index 0000000000..8e8c668216 --- /dev/null +++ b/files/pl/web/css/font/index.html @@ -0,0 +1,145 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>font</code> jest skrótową własnością do ustawienia {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} oraz {{ Cssxref("font-family") }} w jednym miejscu w arkuszu stylów.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: sprawdź indywidualne własności</li> + <li>Stosowana do: wszystkich elementów</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<p><code>font:</code> [ <{{ Cssxref("font-style") }}> || <{{ Cssxref("font-variant") }}> || <{{ Cssxref("font-weight") }}> ]? <{{ Cssxref("font-size") }}> [ / <{{ Cssxref("line-height") }}> ]? <{{ Cssxref("font-family") }}></p> + +<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p> + +<p><code>font:</code> {{ Cssxref("inherit") }}</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<p>Użycie skrótowej własności {{ Cssxref("font") }} ustawia własności pisma jako określone oraz ustawia wszystkie inne własności związane z czcionką do ich wartości początkowych.</p> + +<p>Zobacz {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }}, by sprawdzić prawidłowe wartości każdej własności.</p> + +<p>Również czcionki systemowe mogą być określone przy użyciu własności {{ Cssxref("font") }}<em>zamiast</em> określania indywidualnych własności pisma:</p> + +<dl> + <dt>caption </dt> + <dd>Czcionka używana w opisanych kontrolkach (na przykład w przyciskach, listach rozwijanych itd.).</dd> + <dt>icon </dt> + <dd>Czcionka używana do podpisywania ikon.</dd> + <dt>menu </dt> + <dd>Czcionka używana w menu (na przykład menu rozwijanym, listach menu).</dd> + <dt>message-box </dt> + <dd>Czcionka używana w oknach dialogowych.</dd> + <dt>small-caption </dt> + <dd>Czcionka używana do opisywania małych kontrolek.</dd> + <dt>status-bar </dt> + <dd>Czcionka używana w pasku stanu okna.</dd> + <dt>-moz-window </dt> + <dd> </dd> + <dt>-moz-document </dt> + <dd> </dd> + <dt>-moz-workspace </dt> + <dd> </dd> + <dt>-moz-desktop </dt> + <dd> </dd> + <dt>-moz-info </dt> + <dd> </dd> + <dt>-moz-dialog </dt> + <dd> </dd> + <dt>-moz-button </dt> + <dd> </dd> + <dt>-moz-pull-down-menu </dt> + <dd> </dd> + <dt>-moz-list </dt> + <dd> </dd> + <dt>-moz-field </dt> + <dd> </dd> +</dl> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/font.html">Zobacz przykład</a></p> + +<pre>/* Ustawia rozmiar czcionki na 12pt oraz odstęp między liniami na 14pt. +Ustawia rodzinę czcionek na bezszeryfowe */ +p { font: 12pt/14pt sans-serif } +</pre> + +<pre>/* Ustawia rozmiar czcionki na 80% rozmiaru znacznika-rodzica lub wartości domyślnej +(jeśli nie ma obecnego znacznika-rodzica) oraz ustawia rodzinę czcionek na bezszeryfowe */ +p { font: 80% sans-serif } +</pre> + +<pre>/* Ustawia wagę (grubość) czcionki na pogrubioną, styl czcionki na kursywę, +rozmiar na duży i rodzinę czcionek na szeryfowe */ +p { font: bold italic large serif } +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Składniki {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }} skrótowej własności są obowiązkowe. Pominięcie ich jest błędem składniowym i powoduje, że cała własność zostanie zignorowana.</p> + +<p>Własności, dla których nie ma podanych żadnych wartości, są ustawiane do ich wartości domyślnej, którą jest <code>normal</code> dla wszystkich własności, które mogą być pominięte ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, oraz {{ Cssxref("line-height") }}).</p> + +<p>Własność {{ Cssxref("font-size-adjust") }} jest również ustawiana do jej wartości początkowej (<code>none</code>), kiedy określona jest skrótowa własność {{ Cssxref("font") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (dla {{ Cssxref("font-size-adjust") }})</li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (dla nowych wartości czcionek systemowych)</li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}</p> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/font", "es": "es/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font" } ) }}</p> diff --git a/files/pl/web/css/grid/index.html b/files/pl/web/css/grid/index.html new file mode 100644 index 0000000000..7510f2db2c --- /dev/null +++ b/files/pl/web/css/grid/index.html @@ -0,0 +1,200 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +<p class="syntaxbox"><strong><code>grid </code></strong>jest własnością skrótową, która ustawia wszystkie wyraźne oraz domniemane własności grid przy pomocy pojedynczej deklaracji.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> + + + +<div class="note"> +<p><strong>Uwaga:</strong> Można ustawić jedynie sprecyzowane bądź domniemane wartości w jednej deklaracji własności <code>grid</code>. Podwłasności, których nie określisz zostaną ustawione na wartości początkowe. Własności odstępów nie zostaną zresetowane przez ten zapis skrótowy.</p> +</div> + +<h2 id="Własności_składowe">Własności składowe</h2> + +<p>Ta własność jest zapisem skrótowym następujących własności</p> + +<ul> + <li><a href="/pl/docs/Web/CSS/grid-auto-columns"><code>grid-auto-columns</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-auto-flow"><code>grid-auto-flow</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-auto-rows"><code>grid-auto-rows</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-areas"><code>grid-template-areas</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-columns"><code>grid-template-columns</code></a></li> + <li><a href="/pl/docs/Web/CSS/grid-template-rows"><code>grid-template-rows</code></a></li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush: css no-line-numbers notranslate">/* <'grid-template'> values */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> values */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Global values */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<h3 id="Wartości">Wartości</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>Definiuje szablon siatki strony - własności <code>grid-template-columns</code>, <code>grid-template-rows</code> oraz <code>grid-template-areas</code>.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>Ustawia auto-wyrównanie przy pomocy jawnych wierszy ustawionych własnością <code>grid-template-rows</code>, ustawieniem wartości <code>grid-template-rows</code> na <code>none</code> oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie kolumn przy pomocy <code>grid-auto-columns</code> i ustawienie wartości <code>grid-auto-rows</code> na <code>auto</code>. <code>grid-auto-flow </code>zostaje ustawione na <code>column</code>, jeśli <code>dense</code> jest określone. Wszystkie inne podwłasności <code>grid </code>są ustawiane na wartości początkowe.</dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>Ustawia auto-wyrównanie przy pomocy jawnych kolumn ustawionych własnością <code>grid-template-columns</code>, ustawieniem wartości własności <code>grid-template-rows </code>na <code>none </code>oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie wierszy przy pomocy <code>grid-auto-rows </code>i ustawienie wartości <code>grid-auto-columns </code>na <code>auto</code>.<code> grid-auto-flow </code>zostaje ustawione na <code>row</code>, jeśli <code>dense</code> jest określon. Wszystkie inne podwłasności <code>grid </code>są ustawiane na wartości początkowe.</dd> +</dl> + +<h2 id="Formalna_definicja">Formalna definicja</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formalna_składna">Formalna składna</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Tworzenie_układu_grid_układ_siatki">Tworzenie układu grid (układ siatki)</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_z_wersjami_przeglądarek">Kompatybilność z wersjami przeglądarek</h2> + + + +<p>{{Compat("css.properties.grid")}}</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/pl/web/css/height/index.html b/files/pl/web/css/height/index.html new file mode 100644 index 0000000000..a17ec96c3f --- /dev/null +++ b/files/pl/web/css/height/index.html @@ -0,0 +1,92 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/height +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Własność <code>height</code> definiuje w elemencie wysokość obszaru zawartości. Obszar zawartości znajduje się<em>wewnątrz</em> dopełnienia, obramowania i marginesów elementu.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Stosowana do: elementy blokowe i elementy podmieniane</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Procenty: odnoszą się do wysokości zawierającego bloku</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">height: <length> | <percentage> | auto | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<ul> + <li><strong>length</strong> : może być w jednostkach px, cm, in</li> + <li><strong>percentage</strong> : % określone jako procenty wysokości zawierającego bloku</li> + <li><strong>auto</strong> : przeglądarka obliczy i wybierze wysokość dla określonego elementu</li> +</ul> + +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> + +<p><a href="/samples/cssref/height.html">Zobacz przykład</a></p> + +<pre class="eval">table { height: 100%; } + +img { height: 200px; } + +form { height: auto; } +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Własności {{ Cssxref("min-height") }} i {{ Cssxref("max-height") }} nadpisują {{ Cssxref("height") }}.</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#height">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">CSS 2.1</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a href="pl/CSS/box_model">box model</a>, {{ Cssxref("width") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("min-height") }}, {{ Cssxref("max-height") }}</p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/height", "es": "es/CSS/height", "fr": "fr/CSS/height" } ) }}</p> diff --git a/files/pl/web/css/id_selectors/index.html b/files/pl/web/css/id_selectors/index.html new file mode 100644 index 0000000000..927d3795be --- /dev/null +++ b/files/pl/web/css/id_selectors/index.html @@ -0,0 +1,77 @@ +--- +title: Selektory ID +slug: Web/CSS/ID_selectors +tags: + - Beginner + - CSS + - CSS Reference + - Selektory +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef("Selectors")}}<br> +<strong>Selektor ID</strong> wyszukuje każdy element z atrybutem {{htmlattrxref("ID")}} o takiej samej nazwie w dokumencie HTML.</div> + +<div> </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">#przykladowe_id { <em>właściwości stylu</em> }</pre> + +<p>Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[id=przykladowe_id] { <em>właściwości stylu</em> }</pre> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush: css">span#mojeid { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><span id="mojeid">Przykładowy tekst.</span> +<span>Kolejny przykładowy tekst.</span> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://drafts.csswg.org/selectors-4/#id-selectors">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#id-selectors">Selectors Level 3</a></li> + <li><a href="http://www.w3.org/TR/CSS2/selector.html#id-selectors">CSS Level 2 (Revision 1)</a></li> + <li><a href="http://www.w3.org/TR/CSS1/#id-as-selector">CSS Level 1</a></li> +</ul> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka</strong></td> + <td><strong>Wsparcie</strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>Tak</td> + </tr> + <tr> + <td>Edge</td> + <td>Tak</td> + </tr> + <tr> + <td>Firefox</td> + <td>Tak</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>Tak</td> + </tr> + <tr> + <td>Opera</td> + <td>Tak</td> + </tr> + <tr> + <td>Safari</td> + <td>Tak</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/ime-mode/index.html b/files/pl/web/css/ime-mode/index.html new file mode 100644 index 0000000000..ea3fbd0d3e --- /dev/null +++ b/files/pl/web/css/ime-mode/index.html @@ -0,0 +1,9 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS +translation_of: Web/CSS/ime-mode +--- +<p>Ta strona nie ma treści. Możesz stworzyć MDC.</p> +<p>test pl</p> diff --git a/files/pl/web/css/index.html b/files/pl/web/css/index.html new file mode 100644 index 0000000000..eabf6e687b --- /dev/null +++ b/files/pl/web/css/index.html @@ -0,0 +1,95 @@ +--- +title: 'CSS: Kaskadowe arkusze stylów' +slug: Web/CSS +tags: + - CSS + - Kaskadowe arkusze stylów + - arkusze stylów + - szablony + - wygląd +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary"><strong>Kaskadowe arkusze stylów </strong>(<strong>CSS</strong>) są językiem stylów używanym do opisania warstwy prezentacji dokumentów napisanych w <a href="/en-US/docs/HTML" title="HyperText Markup Language">HTML</a></span> lub <a href="/en-US/docs/XML">XML</a> (włączając pochodne <a href="/en-US/docs/SVG">SVG</a> czy <a href="/en-US/docs/XHTML">XHTML</a>). CSS opisuje jak elementy powinny być prezentowane na ekranie, przy wydruku, w czytniku ekranowym, albo w innych mediach.</p> + +<p>CSS jest jednym z podstawowych języków <strong>otwartej sieci</strong> i jest ustandaryzowany pomiędzy przeglądarkami zgodnie ze <a href="http://w3.org/Style/CSS/#specs">specyfikacją W3C</a>. Rozwijany stopniowo, CSS1 obecnie przestarzały , CSS2.1 rekomendowany, oraz <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, obecnie rozbity na mniejsze moduły w ciągłym procesie standaryzacji.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS wstęp</span> + + <p>Jeżeli dopiero zaczynasz przygodę z web developmentem upewnij się, że przeczytałeś artykuł <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">podstawy CSS</a>, który opisuje czym jest CSS i jak go używać.</p> + </li> + <li><span>CSS poradniki</span> + <p>Nasza<a href="/en-US/docs/Learn/CSS"> strefa uczenia CSS </a>zawiera niezliczoną ilość tutoriali, które sprawnie przeprowadzą Cie z poziomu początkującego do eksperta, pokrywając wszystkie fundamentalne zagadnienia.</p> + </li> + <li><span>CSS Reference</span> + <p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Poradniki">Poradniki</h2> + +<p><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> zawiera wiele modułów, które pozwolą Ci nauczyć się CSS od podstaw bez potrzeby wcześniejszej znajomości zagadnień.</p> + +<dl> + <dt><a href="/pl/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></dt> + <dd>Ten moduł wprowadza w podstawowe zagadnienia, tłumaczy jak CSS działa, omawia selektory i właściwości, pisanie reguł CSS, dodawanie CSS do HTMLa, jednostki i kolory, kaskadowość i dziedziczenie, podstawy modelu blokowego, a także debugowania.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Stylowanie tekstu</a></dt> + <dd>Ten moduł opisuje podstawy stylowania tekstów, włączając w to ustawienia fontów, grubość, kursywe, interlinie i odstępy między literami, cienie oraz inne właściwości tekstu. Ten moduł kończy się dodaniem niestandardowych fontów na Twoją stronę oraz stylowaniem list i linków.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Stylowanie bloków</a></dt> + <dd>Moduł ten poświęcony jest stylowaniu bloków, jest to krok w przód jeżeli chodzi o ułożenie elementów na stronie. W tym module streścimy czym jest model blokowy (ang. box model), a następnie zajmiemy się kontrolą wyglądu witryny poprzez wewnętrzne i zewnętrzne marginesy, obramowania, kolorowe tła, obrazki i inne właściwści, a także rzeczy bardziej widowiskowe takie jak cienie i filtry.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>Do tej pory poznaliśmy podstawy takie jak stylowanie tekstu czy stylowanie i manipulowanie blokami z treścią. Przyszedł czas przyjrzeć się w jaki sposób umieścić dane bloki w odpowiednich miejscach m.in. w zależności od szerokości ekranu. Dzięki poznaniu niezabędnych podstaw możemy teraz wejść głębiej w tematykę szablonów CSS, omówić różne ustawienia wyświetlania, tradycyjne metody wykorzystujące <em>float </em>i <em>position</em>, a także nowe narzędzia takie jak <em>flexbox</em>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Referencje">Referencje</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: Wyczerpujący zbiór odnośników opisujących każdą właściwość i koncepcję CSS.</li> + <li>CSS kluczowe koncepcje: + <ul> + <li><a href="/en-US/docs/CSS/Syntax">Składnia i forma języka</a></li> + <li><a href="/en-US/docs/CSS/Specificity">Pierwszeństwo</a> i <a href="/en-US/docs/CSS/inheritance">dziedziczenie</a></li> + <li><a href="/en-US/docs/CSS/box_model">Model blokowy</a> i <a href="/en-US/docs/CSS/margin_collapsing">łączenie marginesów</a></li> + <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li> + <li><a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li> + <li><a href="/en-US/docs/CSS/initial_value">Initial</a>, <a href="/en-US/docs/CSS/computed_value">computed</a>, <a href="/en-US/docs/CSS/used_value">used</a>, and <a href="/en-US/docs/CSS/actual_value">actual</a> values</li> + <li><a href="/en-US/docs/CSS/Shorthand_properties">CSS skrócone właściwości</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Narzędzia_dla_developerów_CSS">Narzędzia dla developerów CSS</h2> + +<ul> + <li>Możesz użyć <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> do sprawdzenia czy Twój CSS jest poprawny. Jest to nieoceniony pomocnik przy debugowaniu kodu.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> pozwalają na podgląd i edycję na żywo kodu CSS dzięki <a href="/en-US/docs/Tools/Page_Inspector">inspektorowi</a> i <a href="/en-US/docs/Tools/Style_Editor">edytorowi stylów</a>.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Roszerzenie Web Developer</a> dla Firefoxa pozwala na śledzenie i edytowanie na żywo CSS na oglądanych stronach.</li> + <li>Społeczność stworzyła inne <a href="/en-US/docs/Web/CSS/Tools">różnorodne narzędzia CSS</a>.</li> +</ul> + +<h2 id="Meta_bugs">Meta bugs</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS przykłady</a>: Dostań kreatywnego doładowanie dzięki przeglądaniu przykładów użycia najnowszych technik CSS.</li> + <li>Języki webowe, do których CSS jest najczęściej dołączany: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a> i <a href="/en-US/docs/XML">XML</a>.</li> + <li>Technologie Mozilli, które intensywnie używają CSS : <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird rozszerzenia</a> i <a href="/en-US/Add-ons/Themes">motyw</a>y.</li> +</ul> diff --git a/files/pl/web/css/initial/index.html b/files/pl/web/css/initial/index.html new file mode 100644 index 0000000000..e6d882efe5 --- /dev/null +++ b/files/pl/web/css/initial/index.html @@ -0,0 +1,118 @@ +--- +title: initial +slug: Web/CSS/initial +translation_of: Web/CSS/initial +--- +<div>{{CSSRef}}</div> + +<p>Słowo kluczowe <code>initial</code> aplikuje w CSSie początkową wartość do właściwości danego elementu. Jest ono dozwolne w każdej właściwości CSS i powoduje ono użycie <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Warto%C5%9B%C4%87_pocz%C4%85tkowa">wartości początkowej</a>.</p> + +<div class="note"> +<p>We <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Dziedziczenie#Właściwości_dziedziczone">właściwościach dziedziczonych</a> wartość początkowa może być zaskakująca i powinieneś się zastanowić nad użyciem słów kluczowych {{cssxref("inherit")}}, {{cssxref("unset")}}, lub {{cssxref("revert")}} zamiast wartości początkowej.</p> +</div> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: css"> /* nagłówek z zieloną ramką */ + h2 { border: medium solid green } + + /* poniższy kod użyty w sidebarze przywraca kolor początkowy (initial) ramki */ + #sidebar h2 { border-color: initial; } +</pre> + +<pre class="brush: css"> <p style="color:red"> + ten tekst jest czerwony + <em style="color:initial"> + ten tekst ma kolor początkowy (initial), np. czarny + </em> + ponownie kolor czerwony + </p> </pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>No changes from Level 3.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td>Defines what an initial value is.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', "#common-keywords", "initial") }}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Defines the keyword.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Wsparcie przeglądarek</nobr></h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Podstawowe wspracie</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>15.0</td> + <td>1.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Podstawowe wsparcie</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Od wersji Firefox 1.0 wzwyż, wsparcie dla <code>-moz-initial</code> zostało dodane do każdej wersji, zakończono obsługę{{cssxref("quotes")}} od wersji Firefox 3.5 (Gecko 1.9.1). Wsparie dla niestandardowych prefiksów {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} w wersji Firefox 3.6 (Gecko 1.9.2). Wsparcie dla prefiksu <code>-moz-initial</code> zostało usunięte w <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a> na korzyść słowa kluczowego <code>initial</code>.</p> + +<h2 id="See_also" name="See_also">Zobacz również</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/initial_value">initial value</a>, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</li> +</ul> diff --git a/files/pl/web/css/inne_zasoby/index.html b/files/pl/web/css/inne_zasoby/index.html new file mode 100644 index 0000000000..8db0f7556b --- /dev/null +++ b/files/pl/web/css/inne_zasoby/index.html @@ -0,0 +1,28 @@ +--- +title: Inne zasoby +slug: Web/CSS/Inne_zasoby +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS +--- +<p> +</p> +<h3 id="Dokumenty_W3C" name="Dokumenty_W3C"> Dokumenty W3C </h3> +<ul><li> <a class="external" href="http://www.w3.org/Style/CSS/">CSS Activity Page</a> +</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 Specification</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a> +</li><li> <a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C Core Styles</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 Test Suite</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 Test Suite</a> +</li></ul> +<h3 id="Inne_zasoby" name="Inne_zasoby"> Inne zasoby </h3> +<ul><li> <a class="external" href="http://osiolki.net/tabelki/">Zmiana tabel na CSS</a> +</li><li> <a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a> +</li><li> <a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a> +</li><li> <a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a> +</li><li> <a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a> +</li><li> <a class="external" href="http://archivist.incutio.com/css-discuss/">css-discuss archives</a> +</li><li> <a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a> +</li></ul> +{{ languages( { "en": "en/CSS/Other_Resources", "fr": "fr/CSS/Autres_ressources", "ja": "ja/CSS/Other_Resources" } ) }} diff --git a/files/pl/web/css/letter-spacing/index.html b/files/pl/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..423f1e2c1d --- /dev/null +++ b/files/pl/web/css/letter-spacing/index.html @@ -0,0 +1,74 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS +translation_of: Web/CSS/letter-spacing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <code>letter-spacing</code> określa odstępy między literami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między literami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">letter-spacing: [ normal | <length> ] {1,3} +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd> </dd> + <dt>{{cssxref("<length>")}} </dt> + <dd> </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">p { + letter-spacing: .3em .6em .4em; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#letter-spacing">W3C Cascading Style Sheets, level 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#letter-spacing">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/list-style-image/index.html b/files/pl/web/css/list-style-image/index.html new file mode 100644 index 0000000000..91d05bc8bf --- /dev/null +++ b/files/pl/web/css/list-style-image/index.html @@ -0,0 +1,70 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-image +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>list-style-image</code> określa plik graficzny, który ma zostać użyty jako znacznik <a href="pl/HTML/Element/li">elementu listy</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> + <li>Stosowana do: elementów z 'display: list-item'</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: bezwzględny URI lub <code>none</code></li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">list-style-image: <uri> | none | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>uri</code></dt> + <dd>Adres pliku graficznego.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Przykłady')}}</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content0">CSS 3</a></li> +</ul> + +<h3 id="Kompatybilno.C5.9B.C4.87_z_przegl.C4.85darkami" name="Kompatybilno.C5.9B.C4.87_z_przegl.C4.85darkami">Kompatybilność z przeglądarkami</h3> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p> diff --git a/files/pl/web/css/list-style-position/index.html b/files/pl/web/css/list-style-position/index.html new file mode 100644 index 0000000000..62b79481be --- /dev/null +++ b/files/pl/web/css/list-style-position/index.html @@ -0,0 +1,99 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-position +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><code>list-style-position</code> określa pozycję znacznika listy w <a href="pl/HTML/Element/li">elemencie listy</a>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("outside") }}</li> + <li>Stosowana do: elementów z 'display: list-item'</li> + <li>{{ Xref_cssinherited() }}: tak</li> + <li>Procenty: niedostępne</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określone</li> +</ul> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">list-style-position: inside | outside | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><code>outside</code></dt> + <dd>Znacznik jest umieszczany poza <a href="pl/HTML/Element/li">elementem listy</a>.</dd> + <dt><code>inside</code></dt> + <dd>Znacznik jest umieszczany wewnątrz elementu listy. Jest on pierwszym blokiem inline i zawartość elementu go opływa.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="one"> List 1 + <li>List Item 1-1</li> + <li>List Item 1-2</li> + <li>List Item 1-3</li> + <li>List Item 1-4</li> +</ul> +<ul class="two"> List 2 + <li>List Item 2-1</li> + <li>List Item 2-2</li> + <li>List Item 2-3</li> + <li>List Item 2-4</li> +</ul> +<ul class="three"> List 3 + <li>List Item 3-1</li> + <li>List Item 3-2</li> + <li>List Item 3-3</li> + <li>List Item 3-4</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">.one { + list-style:square inside; +} + +.two { + list-style-position: outside; + list-style-type: circle; +} + +.three { + list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); + list-style-position: inherit; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","200","420")}}</p> + +<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-position">CSS 3</a></li> +</ul> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/list-style-position", "es": "es/CSS/list-style-position", "fr": "fr/CSS/list-style-position" } ) }}</p> diff --git a/files/pl/web/css/list-style-type/index.html b/files/pl/web/css/list-style-type/index.html new file mode 100644 index 0000000000..34e55005fe --- /dev/null +++ b/files/pl/web/css/list-style-type/index.html @@ -0,0 +1,108 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-type +--- +<p>{{CSSRef}}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p><code>list-style-type</code> określa wygląd znacznika <a href="/pl/HTML/Element/li" title="pl/HTML/Element/li">elementu listy</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval"> list-style-type: <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><std-list-style-name></dt> + <dd>Standardowa nazwa stylu listy <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code></dd> + <dt><code>disc</code></dt> + <dd>Wypełniony okrąg.</dd> + <dt><code>circle</code></dt> + <dd>Pusty okrąg.</dd> + <dt><code>square</code></dt> + <dd>Wypełniony kwadrat.</dd> + <dt><code>decimal</code></dt> + <dd>Liczby dziesiętne, zaczynając od 1.</dd> + <dt><code>decimal-leading-zero</code></dt> + <dd>Liczby dziesiętne poprzedzone początkowym zerem (np. 01, 02, 03, ..., 98, 99).</dd> + <dt><code>lower-roman</code></dt> + <dd>Małe cyfry rzymskie (i, ii, iii, iv, v itp.).</dd> + <dt><code>upper-roman</code></dt> + <dd>Duże cyfry rzymskie (I, II, III, IV, V itp.).</dd> + <dt><code>lower-greek</code></dt> + <dd>Małe litery z klasycznej greki: alpha, beta, gamma, ... (α, β, γ, ...).</dd> + <dt><code>lower-latin</code></dt> + <dd>Małe litery ascii (a, b, c, ... z).</dd> + <dt><code>upper-latin</code></dt> + <dd>Duże litery ascii (A, B, C, ... Z).</dd> + <dt><code>armenian</code></dt> + <dd>Tradycyjna numeracja ormiańska (Armenian) (ayb/ayp, ben/pen, gim/keem, ...).</dd> + <dt><code>georgian</code></dt> + <dd>Tradycyjna numeracja gruzińska (Georgian) (an, ban, gan, ..., he, tan, in, in-an, ...).</dd> + <dt><code>lower-alpha</code></dt> + <dd>Tak samo jak <code>lower-latin</code>.</dd> + <dt><code>upper-alpha</code></dt> + <dd>Tak samo jak <code>upper-latin</code>.</dd> + <dt><code>none</code></dt> + <dd>Bez wypunktowania.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol class="normal">List 1 + <li>Hello</li> + <li>World</li> + <li>What's up?</li> +</ol> + +<ol class="shortcut">List 2 + <li>Looks</li> + <li>Like</li> + <li>The</li> + <li>Same</li> +</ol> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Przykłady","200","300")}}</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>Ta specyfikacja nie definiuje, w jaki sposób systemy alfabetyczne zachowują się na końcu alfabetu. Na przykład, po 26 elementach listy numerowanie typu lower-latin jest niezdefiniowane (i będzie kontynuowane jako AA, AB, AC,...). Dlatego też dla długich list jest zalecane, aby autorzy określili prawidłowe numery.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#lists">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-content">CSS 3</a></li> +</ul> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p> diff --git a/files/pl/web/css/margin/index.html b/files/pl/web/css/margin/index.html new file mode 100644 index 0000000000..b5710503ad --- /dev/null +++ b/files/pl/web/css/margin/index.html @@ -0,0 +1,112 @@ +--- +title: margin +slug: Web/CSS/Margin +translation_of: Web/CSS/margin +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary" name="Summary">Podsumowanie</h2> + +<p>Własność <strong><code>margin</code></strong> określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="eval">margin: <a href="/pl/CSS/lenght" title="pl/CSS/lenght"><length></a> {1,4} | <a href="/pl/css/percentage" title="pl/css/percentage"><percentage></a> {1,4} | <a href="/pl/css/inherit" title="pl/css/inherit">inherit</a> | <a href="/pl/css/auto" title="pl/css/auto">auto</a>; +</pre> + +<h3 id="Values" name="Values">Wartości</h3> + +<dl> + <dt><length></dt> + <dd>przyjmuje konkretną odległość.</dd> + <dt><percentage></dt> + <dd>procentowa wartość <strong>szerokości</strong> zawierającego bloku</dd> + <dt>auto</dt> + <dd>przeglądarka obliczy i wybierze margines dla określonego elementu</dd> +</dl> + +<p>Jeśli podano:</p> + +<ul> + <li>jedną wartosć, zostaje ona przypisana dla wszystkich stro.</li> + <li>dwie wartości, pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.</li> + <li>trzy wartości, pierwsza odnosi się do góra, druga do: prawo i lewo, a trzecia do: dół.</li> + <li>cztery wartości, kolejno odnoszą się do: góra, prawo, dół, lewo;</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre> .content { + margin: 5%; /* wszystkie strony margines 5% */ + } + + .sidebox { + margin: 10px; /* wszystkie strony margines 10px */ + } + + .rightbox { + margin: 10px 20px; /* górny i dolny margines 10px */ + } /* lewy i prawy margines 20px */ + + + .leftbox { /* górny margines 10px */ + margin: 10px 3% 20px; /* lewy i prawy margines 3% */ + } /* dolny margines 20px */ + + + .mainbox { /* górny margines 10px */ + margin: 10px 3px 30px 5px; /* prawy margines 3px */ + } /* dolny margines 30px */ + /* lewy margines 5px */ + +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("css.properties.margin")}}</p> + +<p> </p> + +<p> </p> + +<div id="compat-mobile"> </div> diff --git a/files/pl/web/css/media_queries/index.html b/files/pl/web/css/media_queries/index.html new file mode 100644 index 0000000000..a7a793852e --- /dev/null +++ b/files/pl/web/css/media_queries/index.html @@ -0,0 +1,122 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - Media Queries + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +<p>{{CSSRef}}</p> + +<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt> + <dd>Presents what media queries are doing and explains the possible expressions.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> + <dd>Explains how to test a media query programmatically, from JavaScript.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p><br> + </p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..8944867c66 --- /dev/null +++ b/files/pl/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,643 @@ +--- +title: Using media queries +slug: Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<p><span class="seoSummary">M<strong>edia query</strong> składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. </span></p> + +<h2 id="Składnia">Składnia</h2> + +<p>Każda Media query składa się z <a href="/pl/docs/CSS/@media">typu medium docelowego</a>, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia <strong>będą prawdziwe.</strong> </p> + +<pre class="brush: html"><!-- Media query użyta na elemencie link --> +<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<!-- Media query w środku arkusza stylów --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style> +</pre> + +<p>Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika <code>link</code> będą pobierane niezależnie od tego czy media query zostanie wykonana.</p> + +<p>Dopóki nie użyjesz operatorów <code>not</code> lub <code>optional</code>, typ medium nie jest wymagany i dla danej query nadany zostanie typ <code>all</code>.</p> + +<h3 id="Operatory_logiczne">Operatory logiczne</h3> + +<p>Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - <code>not</code>, <code>and</code> oraz <code>only</code>. Operator <code>and</code> używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator <code>not</code> używany jest do zanegowanie całej media query. Celem operatora <code>only</code> jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów <code>only</code> oraz <code>not</code> musisz określić typ medium.</p> + +<p>Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem <code>or</code></p> + +<h4 id="and">and</h4> + +<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p> + +<h4 id="comma-separated_lists">comma-separated lists</h4> + +<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p> + +<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p> + +<h4 id="not">not</h4> + +<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>This means that the query is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... rather than like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>As another example, look at the following media query:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>It is evaluated like this:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> + +<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> + +<h2 id="Media_features">Media features</h2> + +<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p> + +<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.</div> + +<h3 id="color">color</h3> + +<p><strong>Value:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> + +<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div> + +<h4 id="Examples">Examples</h4> + +<p>To apply a style sheet to all color devices:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>To apply a style sheet to devices with at least 4 bits per color component:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of entries in the color look-up table for the output device.</p> + +<h4 id="Examples_2">Examples</h4> + +<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example">Example</h4> + +<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p> + +<h4 id="Example_2">Example</h4> + +<p>The following selects a special style sheet to use for widescreen displays.</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_3">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> + +<h4 id="Example_4">Example</h4> + +<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> + +<pre class="brush: html" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> + +<h3 id="grid">grid</h3> + +<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.</p> + +<h4 id="Example_5">Example</h4> + +<p>To apply a style to handheld devices with a 15-character or narrower display:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div> + +<h3 id="height">height</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> + +<h4 id="Examples_3">Examples</h4> + +<p>To apply a style sheet to all monochrome devices:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p> + +<h4 id="Example_6">Example</h4> + +<p>To apply a style sheet only in portrait orientation:</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div> + +<h3 id="resolution">resolution</h3> + +<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p> + +<h4 id="Example_7">Example</h4> + +<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Describes the scanning process of television output devices.</p> + +<h4 id="Example_8">Example</h4> + +<p>To apply a style sheet only to progressive scanning televisions:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Value:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p> + +<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> + +<h4 id="Examples_4">Examples</h4> + +<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> + +<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> + +<p><strong>Value:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> yes</p> + +<p>Gives the number of device pixels per CSS pixel.</p> + +<div class="geckoVersionNote"> +<p><strong>Do not use this feature. </strong></p> + +<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> + <br> + <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> + +<p>Example:</p> + +<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ + (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ + (min-resolution: 2dppx), /* The standard way */ + (min-resolution: 192dpi) /* dppx fallback */ </pre> + +<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> + <li><code>windows-win10</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<h4 id="Example_9">Example</h4> + +<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p> + +<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Accepts min/max prefixes:</strong> no</p> + +<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("21") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE("9.0") }}</td> + <td>{{ CompatOpera("9") }}</td> + <td>{{ CompatSafari("4") }}</td> + </tr> + <tr> + <td>grid</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>resolution</td> + <td>{{ CompatChrome("29") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> + {{ CompatGeckoDesktop("8.0") }} [3]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>scan</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} [4]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>grid</code> media type is not supported</p> + +<p>[2] Supports {{cssxref("<integer>")}} values;</p> + +<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> + +<p>[4] <code>tv</code> media type is not supported</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> + <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> + <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> +</ul> diff --git a/files/pl/web/css/mozilla_extensions/index.html b/files/pl/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..7bdbe05032 --- /dev/null +++ b/files/pl/web/css/mozilla_extensions/index.html @@ -0,0 +1,679 @@ +--- +title: Rozszerzenia Mozilli +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dodatki + - Dokumentacje + - Rozszerzenia + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/Mozilla_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Mozilla applications such as Firefox support a number of special <strong>Mozilla extensions to <a href="/en-US/docs/Web/CSS">CSS</a></strong>, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with <code>-moz</code>.</p> + +<h2 id="Mozilla-only_properties_and_pseudo-classes_(avoid_using_on_websites)">Mozilla-only properties and pseudo-classes (avoid using on websites)</h2> + +<div class="note"> +<p><strong>Note:</strong> These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> elements.</p> +</div> + +<div class="index"> +<h3 id="B">B</h3> + +<ul> + <li>{{Cssxref("-moz-binding")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-box-align")}}</li> + <li>{{Cssxref("-moz-box-direction")}}</li> + <li>{{Cssxref("-moz-box-flex")}}</li> + <li>{{Cssxref("-moz-box-ordinal-group")}}</li> + <li>{{Cssxref("-moz-box-orient")}}</li> + <li>{{Cssxref("-moz-box-pack")}}</li> +</ul> + +<h3 id="C_–_I">C – I</h3> + +<ul> + <li>{{Cssxref("-moz-context-properties")}}</li> + <li>{{Cssxref("-moz-float-edge")}}</li> + <li>{{Cssxref("-moz-force-broken-image-icon")}}</li> + <li>{{Cssxref("-moz-image-region")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{cssxref("-moz-orient")}}</li> + <li>{{cssxref("-moz-osx-font-smoothing")}}</li> + <li>{{Cssxref("-moz-outline-radius")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li> + <li>{{Cssxref("-moz-outline-radius-topleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-topright")}}</li> + <li>{{Cssxref("overflow-clip-box")}}</li> + <li>{{Cssxref("overflow-clip-box-block")}}</li> + <li>{{Cssxref("overflow-clip-box-inline")}}</li> +</ul> + +<h3 id="S_–_Z">S – Z</h3> + +<ul> + <li>{{Cssxref("-moz-stack-sizing")}}</li> + <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref("-moz-user-focus")}}</li> + <li>{{Cssxref("-moz-user-input")}}</li> + <li>{{Cssxref("-moz-user-modify")}}</li> + <li>{{cssxref("-moz-window-dragging")}}</li> + <li>{{Cssxref("-moz-window-shadow")}}</li> +</ul> +</div> + +<h2 id="Formerly_proprietary_properties_that_are_now_standard"><span class="highlight-span">Formerly proprietary</span> properties that are now standard</h2> + +<div class="note"> +<p><strong>Note:</strong> To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.</p> +</div> + +<div class="index"> +<ul> + <li> + <h3 id="A">A</h3> + </li> + <li>{{Cssxref("animation", "-moz-animation")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("-moz-appearance")}}</li> + <li> + <h3 id="B_2">B</h3> + </li> + <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li> + <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li> + <li>{{Cssxref("-moz-background-inline-policy")}} [Superseded by the standard version {{cssxref("box-decoration-break")}}]</li> + <li>{{Cssxref("background-size", "-moz-background-size")}}</li> + <li>{{Cssxref("-moz-border-end")}} [Superseded by the standard version {{cssxref("border-inline-end")}}]</li> + <li>{{Cssxref("-moz-border-end-color")}} [Superseded by the standard version {{cssxref("border-inline-end-color")}}]</li> + <li>{{Cssxref("-moz-border-end-style")}} [Superseded by the standard version {{cssxref("border-inline-end-style")}}]</li> + <li>{{Cssxref("-moz-border-end-width")}} [Superseded by the standard version {{cssxref("border-inline-end-width")}}]</li> + <li>{{Cssxref("border-image","-moz-border-image")}}</li> + <li>{{Cssxref("-moz-border-start")}} [Superseded by the standard version {{cssxref("border-inline-start")}}]</li> + <li>{{Cssxref("-moz-border-start-color")}} [Superseded by the standard version {{cssxref("border-inline-start-color")}}]</li> + <li>{{Cssxref("-moz-border-start-style")}} [Superseded by the standard version {{cssxref("border-inline-start-style")}}]</li> + <li>{{Cssxref("-moz-border-start-width")}} [Superseded by the standard version {{cssxref("border-inline-start-width")}}]</li> + <li>{{cssxref("box-sizing", "-moz-box-sizing")}} [Prefixed version still accepted]</li> + <li> + <h3 id="C">C</h3> + </li> + <li>{{Cssxref("clip-path")}} [Applying to more than SVG]</li> + <li>{{Cssxref("-moz-column-count")}}</li> + <li>{{Cssxref("-moz-column-fill")}}</li> + <li>{{Cssxref("-moz-column-gap")}}</li> + <li>{{Cssxref("-moz-column-width")}}</li> + <li>{{Cssxref("-moz-column-rule")}}</li> + <li>{{Cssxref("-moz-column-rule-width")}}</li> + <li>{{Cssxref("-moz-column-rule-style")}}</li> + <li>{{Cssxref("-moz-column-rule-color")}}</li> + <li>{{Cssxref("-moz-context-properties")}}</li> + <li> + <h3 id="F_–_M">F – M</h3> + </li> + <li>{{Cssxref("filter")}} [Applying to more than SVG]</li> + <li>{{Cssxref("-moz-font-feature-settings")}} [Prefixed version still accepted]</li> + <li>{{cssxref("-moz-font-language-override")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("-moz-hyphens")}}</li> + <li>{{Cssxref("-moz-margin-end")}} [Superseded by the standard version {{cssxref("margin-inline-end")}}]</li> + <li>{{Cssxref("-moz-margin-start")}} [Superseded by the standard version {{cssxref("margin-inline-start")}}]</li> + <li>{{Cssxref("mask")}} [Applying to more than SVG]</li> + <li> + <h3 id="O_2">O</h3> + </li> + <li>{{Cssxref("opacity","-moz-opacity")}}</li> + <li>{{Cssxref("outline","-moz-outline")}}</li> + <li>{{Cssxref("outline-color","-moz-outline-color")}}</li> + <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li> + <li>{{Cssxref("outline-style","-moz-outline-style")}}</li> + <li>{{Cssxref("outline-width","-moz-outline-width")}}</li> + <li> + <h3 id="P">P</h3> + </li> + <li>{{Cssxref("-moz-padding-end")}} [Superseded by the standard version {{cssxref("padding-inline-end")}}]</li> + <li>{{Cssxref("-moz-padding-start")}} [Superseded by the standard version {{cssxref("padding-inline-start")}}]</li> + <li>{{Cssxref("perspective", "-moz-perspective")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("pointer-events")}} [Applying to more than SVG]</li> + <li> + <h3 id="T_–_U">T – U</h3> + </li> + <li>{{cssxref("-moz-tab-size")}}</li> + <li>{{cssxref("-moz-text-align-last")}}</li> + <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li> + <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li> + <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li> + <li>{{cssxref("-moz-text-size-adjust")}}</li> + <li>{{Cssxref("transform", "-moz-transform")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Prefixed version still accepted]</li> + <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition", "-moz-transition")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-delay", "-moz-transition-delay")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-property", "-moz-transition-property")}} [Prefixed version still accepted]</li> + <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Prefixed version still accepted]</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> +</div> + +<h2 id="Values">Values</h2> + +<h3 id="Global_values">Global values</h3> + +<div class="index"> +<ul> + <li>{{cssxref("initial","-moz-initial")}}</li> +</ul> +</div> + +<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3> + +<div class="index"> +<ul> + <li><code>button</code></li> + <li><code>button-arrow-down</code></li> + <li><code>button-arrow-next</code></li> + <li><code>button-arrow-previous</code></li> + <li><code>button-arrow-up</code></li> + <li><code>button-bevel</code></li> + <li><code>checkbox</code></li> + <li><code>checkbox-container</code></li> + <li><code>checkbox-label</code></li> + <li><code>checkmenuitem</code></li> + <li><code>dialog</code></li> + <li><code>groupbox</code></li> + <li><code>listbox</code></li> + <li><code>menuarrow</code></li> + <li><code>menucheckbox</code></li> + <li><code>menuimage</code></li> + <li><code>menuitem</code></li> + <li><code>menuitemtext</code></li> + <li><code>menulist</code></li> + <li><code>menulist-button</code></li> + <li><code>menulist-text</code></li> + <li><code>menulist-textfield</code></li> + <li><code>menupopup</code></li> + <li><code>menuradio</code></li> + <li><code>menuseparator</code></li> + <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li> + <li><code>-moz-win-borderless-glass</code></li> + <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-glass</code></li> + <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-window-button-box</code></li> + <li><code>-moz-window-button-box-maximized</code></li> + <li><code>-moz-window-button-close</code></li> + <li><code>-moz-window-button-maximize</code></li> + <li><code>-moz-window-button-minimize</code></li> + <li><code>-moz-window-button-restore</code></li> + <li><code>-moz-window-titlebar</code></li> + <li><code>-moz-window-titlebar-maximized</code></li> + <li><code>progressbar</code></li> + <li><code>progresschunk</code></li> + <li><code>radio</code></li> + <li><code>radio-container</code></li> + <li><code>radio-label</code></li> + <li><code>radiomenuitem</code></li> + <li><code>resizer</code></li> + <li><code>resizerpanel</code></li> + <li><code>scale-horizontal</code></li> + <li><code>scalethumb-horizontal</code></li> + <li><code>scalethumb-vertical</code></li> + <li><code>scale-vertical</code></li> + <li><code>scrollbarbutton-down</code></li> + <li><code>scrollbarbutton-left</code></li> + <li><code>scrollbarbutton-right</code></li> + <li><code>scrollbarbutton-up</code></li> + <li><code>scrollbar-small</code></li> + <li><code>scrollbarthumb-horizontal</code></li> + <li><code>scrollbarthumb-vertical</code></li> + <li><code>scrollbartrack-horizontal</code></li> + <li><code>scrollbartrack-vertical</code></li> + <li><code>separator</code></li> + <li><code>spinner</code></li> + <li><code>spinner-downbutton</code></li> + <li><code>spinner-textfield</code></li> + <li><code>spinner-upbutton</code></li> + <li><code>statusbar</code></li> + <li><code>statusbarpanel</code></li> + <li><code>tab</code></li> + <li><code>tabpanels</code></li> + <li><code>tab-scroll-arrow-back</code></li> + <li><code>tab-scroll-arrow-forward</code></li> + <li><code>textfield</code></li> + <li><code>textfield-multiline</code></li> + <li><code>toolbar</code></li> + <li><code>toolbarbutton-dropdown</code></li> + <li><code>toolbox</code></li> + <li><code>tooltip</code></li> + <li><code>treeheadercell</code></li> + <li><code>treeheadersortarrow</code></li> + <li><code>treeitem</code></li> + <li><code>treetwisty</code></li> + <li><code>treetwistyopen</code></li> + <li><code>treeview</code></li> + <li><code>window</code></li> +</ul> +</div> + +<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3> + +<div class="index"> +<ul> + <li> + <h4 id="Gradients_Gecko_minversion_inline(1.9.2)">Gradients {{Gecko_minversion_inline("1.9.2")}}</h4> + + <ul> + <li>{{cssxref("-moz-linear-gradient")}}</li> + <li>{{cssxref("-moz-radial-gradient")}}</li> + </ul> + </li> + <li> + <h4 id="Elements_gecko_minversion_inline(2.0)">Elements {{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{cssxref("-moz-element")}}</li> + </ul> + </li> + <li> + <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4> + + <ul> + <li>{{cssxref("-moz-image-rect")}}</li> + </ul> + </li> +</ul> +</div> + +<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-use-text-color</code> {{obsolete_inline}} removed from Gecko (see {{bug(1306214)}}); use <a href="/en-US/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> instead.</li> +</ul> +</div> + +<h3 id="Cssxref(border-style)_and_Cssxref(outline-style)">{{Cssxref("border-style")}} and {{Cssxref("outline-style")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}} dropped in Gecko 1.9 (Firefox 3.0)</li> +</ul> +</div> + +<h3 id="cssxref(<color>)_keywords">{{cssxref("<color>")}} keywords</h3> + +<div class="index"> +<ul> + <li><code>-moz-activehyperlinktext</code></li> + <li><code>-moz-hyperlinktext</code></li> + <li><code>-moz-visitedhyperlinktext</code></li> + <li><code>-moz-buttondefault</code></li> + <li><code>-moz-buttonhoverface</code></li> + <li><code>-moz-buttonhovertext</code></li> + <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-cellhighlight</code></li> + <li><code>-moz-cellhighlighttext</code></li> + <li><code>-moz-field</code></li> + <li><code>-moz-fieldtext</code></li> + <li><code>-moz-dialog</code></li> + <li><code>-moz-dialogtext</code></li> + <li><code>-moz-dragtargetzone</code></li> + <li><code>-moz-mac-accentdarkestshadow</code></li> + <li><code>-moz-mac-accentdarkshadow</code></li> + <li><code>-moz-mac-accentface</code></li> + <li><code>-moz-mac-accentlightesthighlight</code></li> + <li><code>-moz-mac-accentlightshadow</code></li> + <li><code>-moz-mac-accentregularhighlight</code></li> + <li><code>-moz-mac-accentregularshadow</code></li> + <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-focusring</code></li> + <li><code>-moz-mac-menuselect</code></li> + <li><code>-moz-mac-menushadow</code></li> + <li><code>-moz-mac-menutextselect</code></li> + <li><code>-moz-menuhover</code></li> + <li><code>-moz-menuhovertext</code></li> + <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li> + <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li> +</ul> +</div> + +<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-box</code></li> + <li><code>-moz-inline-block</code> {{obsolete_inline}}</li> + <li><code>-moz-inline-box</code></li> + <li><code>-moz-inline-grid</code></li> + <li><code>-moz-inline-stack</code></li> + <li><code>-moz-inline-table</code> {{obsolete_inline}}</li> + <li><code>-moz-grid</code></li> + <li><code>-moz-grid-group</code></li> + <li><code>-moz-grid-line</code></li> + <li><code>-moz-groupbox</code></li> + <li><code>-moz-deck</code></li> + <li><code>-moz-popup</code></li> + <li><code>-moz-stack</code></li> + <li><code>-moz-marker</code></li> +</ul> +</div> + +<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-show-background</code> (default value in quirks mode)</li> +</ul> +</div> + +<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-button</code></li> + <li><code>-moz-info</code></li> + <li><code>-moz-desktop</code></li> + <li><code>-moz-dialog</code> (also a color)</li> + <li><code>-moz-document</code></li> + <li><code>-moz-workspace</code></li> + <li><code>-moz-window</code></li> + <li><code>-moz-list</code></li> + <li><code>-moz-pull-down-menu</code></li> + <li><code>-moz-field</code> (also a color)</li> +</ul> +</div> + +<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-fixed</code></li> +</ul> +</div> + +<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> +</ul> +</div> + +<h3 id="cssxref(<length>)">{{cssxref("<length>")}}</h3> + +<div class="index"> +<ul> + <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-arabic-indic</code></li> + <li><code>-moz-bengali</code></li> + <li><code>-moz-cjk-earthly-branch</code></li> + <li><code>-moz-cjk-heavenly-stem</code></li> + <li><code>-moz-devanagari</code></li> + <li><code>-moz-ethiopic-halehame</code></li> + <li><code>-moz-ethiopic-halehame-am</code></li> + <li><code>-moz-ethiopic-halehame-ti-er</code></li> + <li><code>-moz-ethiopic-halehame-ti-et</code></li> + <li><code>-moz-ethiopic-numeric</code></li> + <li><code>-moz-gujarati</code></li> + <li><code>-moz-gurmukhi</code></li> + <li><code>-moz-hangul</code></li> + <li><code>-moz-hangul-consonant</code></li> + <li><code>-moz-japanese-formal</code></li> + <li><code>-moz-japanese-informal</code></li> + <li><code>-moz-kannada</code></li> + <li><code>-moz-khmer</code></li> + <li><code>-moz-lao</code></li> + <li><code>-moz-malayalam</code></li> + <li><code>-moz-myanmar</code></li> + <li><code>-moz-oriya</code></li> + <li><code>-moz-persian</code></li> + <li><code>-moz-simp-chinese-formal</code></li> + <li><code>-moz-simp-chinese-informal</code></li> + <li><code>-moz-tamil</code></li> + <li><code>-moz-telugu</code></li> + <li><code>-moz-thai</code></li> + <li><code>-moz-trad-chinese-formal</code></li> + <li><code>-moz-trad-chinese-informal</code></li> + <li><code>-moz-urdu</code></li> +</ul> +</div> + +<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> +</ul> +</div> + +<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-center</code></li> + <li><code>-moz-left</code></li> + <li><code>-moz-right</code></li> +</ul> +</div> + +<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-anchor-decoration</code></li> +</ul> +</div> + +<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-all</code></li> + <li><code>-moz-none</code></li> +</ul> +</div> + +<h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3> + +<div class="index"> +<ul> + <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li> +</ul> +</div> + +<h2 id="Pseudo-elements_and_pseudo-classes">Pseudo-elements and pseudo-classes</h2> + +<div class="index"> +<ul> + <li> + <h3 id="A_–_D">A – D</h3> + </li> + <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li> + <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li> + <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref(":-moz-drag-over")}}</li> + <li> + <h3 id="F_–_I">F – I</h3> + </li> + <li>{{Cssxref(":-moz-first-node")}}</li> + <li>{{cssxref("::-moz-focus-inner")}}</li> + <li>{{cssxref("::-moz-focus-outer")}}</li> + <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li> + <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li> + <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref("::-moz-inline-table")}}</li> + <li> + <h3 id="Leg-_resourcegreresua.css">L<span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></h3> + </li> + <li>{{Cssxref(":-moz-last-node")}}</li> + <li>{{Cssxref(":-moz-list-bullet")}}</li> + <li>{{cssxref(":-moz-list-number")}}</li> + <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li> + <h3 id="N_–_R">N – R</h3> + </li> + <li>{{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}</li> + <li>{{Cssxref(":-moz-only-whitespace")}}</li> + <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li> + <li>{{Cssxref("::-moz-progress-bar")}}</li> + <li>{{Cssxref("::-moz-range-progress")}}</li> + <li>{{Cssxref("::-moz-range-thumb")}}</li> + <li>{{Cssxref("::-moz-range-track")}}</li> + <li>{{Cssxref(":-moz-read-only")}}</li> + <li>{{Cssxref(":-moz-read-write")}}</li> + <li> + <h3 id="S">S</h3> + </li> + <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{cssxref("::selection","::-moz-selection")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li> + <li> </li> + <li> + <h3 id="T">T</h3> + </li> + <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-tree-cell")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-checkbox")}}</li> + <li>{{Cssxref(":-moz-tree-column")}}</li> + <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li> + <li>{{Cssxref(":-moz-tree-image")}}</li> + <li>{{Cssxref(":-moz-tree-indentation")}}</li> + <li>{{Cssxref(":-moz-tree-line")}}</li> + <li>{{Cssxref(":-moz-tree-progressmeter")}}</li> + <li>{{Cssxref(":-moz-tree-row")}}</li> + <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-separator")}}</li> + <li>{{Cssxref(":-moz-tree-twisty")}}</li> + <li> + <h3 id="U_–_X">U – X</h3> + </li> + <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> +</ul> +</div> + +<h2 id="At-rules">At-rules</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("@-moz-document")}}</li> +</ul> +</div> + +<h2 id="Media_features">Media features</h2> + +<div class="index"> +<ul> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme">-moz-mac-graphite-theme</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-maemo-classic">-moz-maemo-classic</a> </code>{{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio">-moz-device-pixel-ratio</a></code> {{gecko_minversion_inline("2.0")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-os-version">-moz-os-version</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-touch-enabled">-moz-touch-enabled</a> </code>{{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-classic">-moz-windows-classic</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-compositor">-moz-windows-compositor</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-default-theme">-moz-windows-default-theme</a></code> {{gecko_minversion_inline("1.9.2")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-glass">-moz-windows-glass</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/@media/-moz-windows-theme">-moz-windows-theme</a></code> {{gecko_minversion_inline("2.0")}}</li> +</ul> +</div> + +<h2 id="Other">Other</h2> + +<div class="index"> +<ul> + <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li> +</ul> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS Extensions</a></li> + <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS Extensions</a></li> +</ul> diff --git a/files/pl/web/css/na_początek/bloki/index.html b/files/pl/web/css/na_początek/bloki/index.html new file mode 100644 index 0000000000..0835e0b145 --- /dev/null +++ b/files/pl/web/css/na_początek/bloki/index.html @@ -0,0 +1,70 @@ +--- +title: Bloki +slug: Web/CSS/Na_początek/Bloki +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks +--- +<p> </p> +<p>Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.</p> +<p>W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.</p> +<h3 id="Informacja:_Bloki" name="Informacja:_Bloki">Informacja: Bloki</h3> +<p>Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.</p> +<p>W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(238, 238, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Jasny szary wskazuje części układu strony.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(255, 255, 255);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<p>Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.</p> +<p>Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(221, 238, 221);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Ten element ma zielone tło.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(238, 255, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Możesz użyć ramek do dekoracji elementów liniami lub blokami.</p> +<p>Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności <code>border</code>. Określ szerokość (zwykle w pikselach), styl i kolor.</p> +<p>Istnieją następujące style:</p> +<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>solid</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dotted rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dotted</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dashed rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dashed</code></div> </td> <td style="width: 6em;"> <div style="border: 4px double rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>double</code></div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>inset</code></div> </td> <td style="width: 6em;"> <div style="border: 2px outset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>outset</code></div> </td> <td style="width: 6em;"> <div style="border: 4px ridge rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>ridge</code></div> </td> <td style="width: 6em;"> <div style="border: 4px groove rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>groove</code></div> </td> </tr> </tbody> +</table> +<p>Możesz także ustawić styl na <code>none</code> lub <code>hidden</code>, aby usunąć ramkę, lub ustawić kolor na <code>transparent</code>, aby ustawić przezroczystą ramkę bez dotykania układu.</p> +<p>Aby określić osobno każdą krawędź ramki, użyj własności: <code>border-top</code> (góra), <code>border-right</code> (prawo), <code>border-bottom</code> (dół), <code>border-left</code> (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykłady </caption> <tbody> <tr> <td>Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka: <div style="width: 40em;"> <p>h3 {</p> <pre class="eval"> border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> </div> <p>Wygląda to tak:</p> <table> <tbody> <tr> <td> <p style="border-top: 4px solid rgb(119, 204, 119); font-size: 133%; font-weight: bold; background-color: rgb(238, 255, 238); color: rgb(0, 85, 0); padding-right: 6em;">Nagłówek w dobrym stylu</p> </td> </tr> </tbody> </table> <p>Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:</p> <div style="width: 30em;"> <p>img {border: 2px solid #ccc;}</p> </div> <p>Rezultat jest następujący:</p> <table> <tbody> <tr> <td>Obrazek:</td> <td style="border: 2px solid rgb(204, 204, 204);"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2212/=Blue-rule.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<h4 id="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne" name="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne">Marginesy zewnętrzne i wewnętrzne</h4> +<p>Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.</p> +<p>Użyj własności <code>margin</code> lub <code>padding</code>, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.</p> +<p>Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).</p> +<p>Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.</p> +<p>Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykład </caption> <tbody> <tr> <td>Ta reguła oznacza akapity z klasą <code>remark</code> poprzez dodanie czerwonej ramki wokół nich. <p>Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.</p> <p>Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:</p> <div style="width: 30em;"> <p>p.remark {</p> <pre class="eval"> border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> </div> <p>Wynik wygląda tak:</p> <table> <tbody> <tr> <td> <p>Oto zwykły akapit.</p> <p style="border: 2px solid red; margin: 0px 0px 0px 24px; padding: 4px 6em 4px 4px;">A to akapit z klasą <code>remark</code>.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em;"> <caption>Więcej szczegółów </caption> <tbody> <tr> <td>Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany. <p>Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.</p> <p>Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.</p> <p>Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/box.html">model blokowy</a>.</p> </td> </tr> </tbody> +</table> +<h3 id="Zadanie:_Dodawanie_ramek" name="Zadanie:_Dodawanie_ramek">Zadanie: Dodawanie ramek</h3> +<p>Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:</p> +<div style="width: 30em;"> +<p>h3 {border-top: 1px solid gray;}</p> +</div> +<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:</p> +<div style="width: 30em;"> +<p>li {</p> +<pre class="eval"> list-style: lower-roman; + margin-bottom: 8px; + } +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> +<table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) Oceany</p> <ul style="list-style-type: disc;"> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Arktyczny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Atlantycki</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Spokojny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Indyjski</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Południowy</li> </ul> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody> +</table> +<p> </p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Wyzwanie </caption> <tbody> <tr> <td>Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu: <table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) The oceans</p> <div style="border: 12px solid rgb(102, 153, 187); padding-left: 1em;"> <ul style="list-style-type: lower-roman;"> <li style="margin-bottom: 8px;">Arctic</li> <li style="margin-bottom: 8px;">Atlantic</li> <li style="margin-bottom: 8px;">Pacific</li> <li style="margin-bottom: 8px;">Indian</li> <li style="margin-bottom: 8px;">Southern</li> </ul> </div> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)</p> </td> </tr> </tbody> +</table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Bloki" title="Talk:pl/CSS/Na_początek/Bloki">Dyskusji</a>.</p> +<p>Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Uk%C5%82ad" title="pl/CSS/Na_początek/Układ">Układ</a></strong></p> +<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p> diff --git a/files/pl/web/css/na_początek/czym_jest_css/index.html b/files/pl/web/css/na_początek/czym_jest_css/index.html new file mode 100644 index 0000000000..2472a575c4 --- /dev/null +++ b/files/pl/web/css/na_początek/czym_jest_css/index.html @@ -0,0 +1,132 @@ +--- +title: Czym jest CSS +slug: Web/CSS/Na_początek/Czym_jest_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> </p> + +<p>Ta strona opisuje, czym jest CSS.</p> + +<h3 id="Informacja:_Czym_jest_CSS.3F" name="Informacja:_Czym_jest_CSS.3F">Informacja: Czym jest CSS?</h3> + +<p>CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.</p> + +<p><em>Dokument</em>jest to kolekcja informacji ułożona w strukturę przy użyciu<em>języka znaczników</em>.</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Przykłady</caption> + <tbody> + <tr> + <td> + <ul> + <li>Strona, taka jak ta, jest dokumentem.<br> + Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).</li> + </ul> + + <ul> + <li>Okienko dialogowe w aplikacji Mozilli jest dokumentem.<br> + Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>W tym kursie bloki oznaczone <strong>Więcej szczegółów</strong>, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td> + <p>Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.</p> + + <p>Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.</p> + + <p>Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:</p> + + <table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="pl/HTML">HTML</a></td> + <td>o stronach internetowych</td> + </tr> + <tr> + <td><a href="pl/XML">XML</a></td> + <td>o strukturalnych dokumentach</td> + </tr> + <tr> + <td><a href="pl/SVG">SVG</a></td> + <td>o grafice</td> + </tr> + <tr> + <td><a href="pl/XUL">XUL</a></td> + <td>o interfejsie użytkownika w Mozilli</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p><em>Prezentowanie</em>dokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td>CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jest<em>agentem</em> (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce. + <p>Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definicje</a>.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Zadanie:_Tworzenie_dokumentu" name="Zadanie:_Tworzenie_dokumentu">Zadanie: Tworzenie dokumentu</h3> + +<p>Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.</p> + +<p>Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą <code>doc1.html</code></p> + +<div style="width: 40em;"> +<pre class="brush: html language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Sample document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>ascading + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>tyle + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>heets + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.</p> + +<p>Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:</p> + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.</p> + +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> + +<p>Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p> + +<p>Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: <strong><a href="pl/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}</p> diff --git a/files/pl/web/css/na_początek/czytelny_css/index.html b/files/pl/web/css/na_początek/czytelny_css/index.html new file mode 100644 index 0000000000..ca79229c4c --- /dev/null +++ b/files/pl/web/css/na_początek/czytelny_css/index.html @@ -0,0 +1,153 @@ +--- +title: Czytelny CSS +slug: Web/CSS/Na_początek/Czytelny_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p> +</p><p>Ta strona opisuje styl i gramatykę języka CSS. +</p><p>Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny. +</p> +<h3 id="Informacja:_Czytelny_CSS" name="Informacja:_Czytelny_CSS"> Informacja: Czytelny CSS </h3> +<p>Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. +Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób. +</p> +<h4 id="Bia.C5.82e_znaki" name="Bia.C5.82e_znaki"> Białe znaki </h4> +<p>Białe znaki to spacje, tabulatory i nowe linie. +Dzięki białym znakom arkusz stylów będzie bardzie czytelny. +</p><p>Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem. +</p><p>Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykłady +</caption><tbody><tr> +<td> Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa: +<pre> +.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> +<p>Inni wolą układać jedną własność-wartość na linię: +</p> +<div style="width: 45em;"> +<p>.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</p> +</div> +<p>Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator: +</p> +<div style="width: 45em;"> +<p>.carrot { +</p> +<pre class="eval"> color: orange; + text-decoration: underline; + font-style: italic; +</pre> +<p>} +</p> +</div> +<p>Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu): +</p> +<div style="width: 45em;"> +<p>.carrot +</p> +<pre class="eval"> { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> +</div> +<p>Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji. +</p> +</td></tr></tbody></table> +<h4 id="Komentarze" name="Komentarze"> Komentarze </h4> +<p>Komentarze w CSS zaczynają się od <code>/*</code>, a kończą się na <code>*/</code>. +</p><p>Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do <i>wykomentowywania</i> części aktualnie nieużywanych. +</p><p>Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. +Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. +Dalsza część arkusza stylów musi mieć poprawną składnię. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td><div style="width: 45em;"> +<p>/* styl dla początkowej litery C w pierwszym paragrafie */ +.carrot { +</p> +<pre class="eval"> color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> +</td></tr></tbody></table> +<h4 id="Grupy_Selektor.C3.B3w" name="Grupy_Selektor.C3.B3w"> Grupy Selektorów </h4> +<p>Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. +Deklaracja zostanie zastosowana do wszystkich wybranych elementów. +</p><p>W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguł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 sprawia, że elementy <small>H1</small>, <small>H2</small> oraz <small>H3</small> są tego samego koloru. +<p>Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany. +</p> +<div style="width: 30em;"> +<p>/* kolory nagłówków */ +h1, h2, h3 {color: navy;} +</p> +</div> +</td></tr></tbody></table> +<h3 id="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu" name="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu"> Zadanie: Dodawanie komentarzy i poprawianie układu </h3> +<p>Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności): +</p> +<div style="width: 30em;"> +<p>strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +</p> +<ol><li>first {font-style: italic;} +</li></ol> +<p>p {color: blue;} +</p> +</div> +<p>Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy. +</p><p>Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona: +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p>(Jest więcej niż jeden sposób, aby to zrobić.) +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument używa kursywy oraz podkreślenia. +Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/pl/web/css/na_początek/dane_xml/index.html b/files/pl/web/css/na_początek/dane_xml/index.html new file mode 100644 index 0000000000..3352d21184 --- /dev/null +++ b/files/pl/web/css/na_początek/dane_xml/index.html @@ -0,0 +1,191 @@ +--- +title: Dane XML +slug: Web/CSS/Na_początek/Dane_XML +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p> +</p><p>Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML. +</p><p>Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce. +</p> +<h3 id="Informacja:_Dane_XML" name="Informacja:_Dane_XML"> Informacja: Dane XML </h3> +<p><i><a href="pl/XML">XML</a></i> (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych. +</p><p>Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML. +Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych. +</p><p>Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go. +Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Dane w dokumencie XML używają tagu <code><INFO></code>. Chcesz, aby wszystkie elementy <small>INFO</small> w dokumencie były wyświetlane jak HTML-owe akapity. +<p>W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy <small>INFO</small>: +</p> +<div style="width: 30em;"> +<pre class="eval">INFO { + display: block; + margin: 1em 0; + } +</pre> +</div> +</td></tr></tbody></table> +<p>Najczęstszymi wartościami własności <code>display</code> są: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="padding-right: 2em;"><code>block</code></td><td>Wyświetlane jak HTML-owy <small>DIV</small> (nagłówki, akapity itp.) +</td></tr> +<tr> +<td><code>inline</code></td><td>Wyświetlany jak HTML-owy <small>SPAN</small> (dla typów tekstowych) +</td></tr></tbody></table> +<p>Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Inne wartości własności <code>display</code> pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli. +<p>Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>. +</p><p>Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu. +Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM. +</p><p>Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę <a href="pl/XML">XML</a> w tym wiki. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XML-a" name="Zadanie:_Demonstracja_XML-a"> Zadanie: Demonstracja XML-a </h3> +<p>Stwórz nowy plik XML, <code>doc9.xml</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style9.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> +<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> +<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br> +Area: 13,000 million km²<br> +Mean depth: 1,200 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br> +Area: 87,000 million km²<br> +Mean depth: 3,900 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p> +</div> +</td></tr></tbody></table> +<p><br> +Uwagi dotyczące tej demonstracji: +</p> +<ul><li>Indeks górny 2 (w "miliony km²") jest znakiem Unicode, zakodowanym jako <code>\B2</code> w pliku CSS. +</li><li> Nagłówek "Oceany" ma ujemny górny margines zewnętrzny, przesuwający go w górę, dzięki czemu jest wyświetlany nad ramką. +</li></ul> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień arkusz stylów, aby wyświetlał dokument jako tabelę. +<p>(Zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> w specyfikacji CSS, aby znaleźć przykłady.) +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>To jest ostatnia strona tego kursu. +Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie <a href="pl/CSS">CSS</a>-a na tym wiki. +</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }} diff --git a/files/pl/web/css/na_początek/grafika_svg/index.html b/files/pl/web/css/na_początek/grafika_svg/index.html new file mode 100644 index 0000000000..1581fbdcd8 --- /dev/null +++ b/files/pl/web/css/na_początek/grafika_svg/index.html @@ -0,0 +1,195 @@ +--- +title: Grafika SVG +slug: Web/CSS/Na_początek/Grafika_SVG +tags: + - 'CSS:Na_początek' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p> +</p><p>Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. +</p><p>Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG. </p> +<h3 id="Informacja:_SVG" name="Informacja:_SVG"> Informacja: SVG </h3> +<p><i>SVG</i> (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. +</p><p>Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. +</p><p>Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości. +</p><p>Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek. +Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności <code>background</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. +<p>Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>. +</p><p>Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę <a href="pl/SVG">SVG</a> w tym wiki. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_SVG" name="Zadanie:_Demonstracja_SVG"> Zadanie: Demonstracja SVG </h3> +<p>Stwórz nowy dokument SVG jako czysty plik tekstowy, <code>doc8.svg</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style8.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre></div> +<p>Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. +</p><p>To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. +Grafika wygląda mniej więcej tak: +</p> +<table style="border: 2px outset #36b;"> +<tbody><tr> +<td><img alt="Demonstracja SVG"> +</td></tr></tbody></table> +<p>Uwagi dotyczące tej demonstracji: +</p> +<ul><li>Dokument SVG posiada odnośniki do arkusza stylów. +</li><li>SVG posiada własne własności i wartości CSS. Niektóre z nich są podobne do własności CSS dla HTML-a. +</li></ul> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków. +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG. +Arkusz stylów modyfikuje tylko sposób wyświetlania elementów. +Tak samo dzieje się z dokumentami HTML i XUL. +Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów. +Następna strona omawia ten temat: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }} diff --git a/files/pl/web/css/na_początek/index.html b/files/pl/web/css/na_początek/index.html new file mode 100644 index 0000000000..dd8cd83dcb --- /dev/null +++ b/files/pl/web/css/na_początek/index.html @@ -0,0 +1,63 @@ +--- +title: Na początek +slug: Web/CSS/Na_początek +tags: + - CSS + - 'CSS:Na_początek' + - Wszystkie_kategorie +translation_of: Learn/CSS/First_steps +--- +<p> </p> +<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3> +<p>Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).</p> +<p>Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.</p> +<ul> + <li>Część I ilustruje podstawowe funkcje CSS, które działają w Mozilli oraz innych nowoczesnych przeglądarkach.</li> +</ul> +<ul> + <li>Część II zawiera przykłady specjalnych funkcji działających w Mozilli, ale niekoniecznie działających w innych środowiskach.</li> +</ul> +<p>Ten kurs bazuje na <a class="external" href="http://www.w3.org/TR/CSS21/">specyfikacji CSS 2.1</a>.</p> +<h4 id="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F" name="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F">Kto może skorzystać z tego kursu?</h4> +<p>Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.</p> +<p>Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.</p> +<p>Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.</p> +<p>Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.</p> +<h4 id="Czego_potrzebujesz.2C_zanim_zaczniesz.3F" name="Czego_potrzebujesz.2C_zanim_zaczniesz.3F">Czego potrzebujesz, zanim zaczniesz?</h4> +<p>Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.</p> +<p>Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.</p> +<p>Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.</p> +<p><strong>Uwaga: </strong> CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.</p> +<h4 id="Jak_korzysta.C4.87_z_tego_kursu" name="Jak_korzysta.C4.87_z_tego_kursu">Jak korzystać z tego kursu</h4> +<p>Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.</p> +<p>Na każdej stronie sekcja <i>Informacja</i> opisuje, jak działa CSS. Dzięki sekcji <i>Zadanie</i> będziesz mógł wypróbować użycie CSS na swoim komputerze.</p> +<p>Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.</p> +<p>Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych <i>Więcej szczegółów</i>. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.</p> +<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza">Kurs – część pierwsza</h3> +<p>Podstawowy kurs CSS, krok po kroku.</p> +<ol> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czym_jest_CSS">Czym jest CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Jak_dzia%c5%82a_CSS">Jak działa CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czytelny_CSS">Czytelny CSS</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Media">Media</a></b></li> +</ol> +<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga">Kurs – część druga</h3> +<p>Przykłady wykorzystania CSS w Mozilli.</p> +<ol> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b></li> + <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b></li> +</ol> +<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}</p> diff --git a/files/pl/web/css/na_początek/jak_działa_css/index.html b/files/pl/web/css/na_początek/jak_działa_css/index.html new file mode 100644 index 0000000000..f660589f31 --- /dev/null +++ b/files/pl/web/css/na_początek/jak_działa_css/index.html @@ -0,0 +1,113 @@ +--- +title: Jak działa CSS +slug: Web/CSS/Na_początek/Jak_działa_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> +</p><p>Ta strona wyjaśnia, jak działa CSS w przeglądarce. +Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów. +</p> +<h3 id="Informacja:_Jak_dzia.C5.82a_CSS" name="Informacja:_Jak_dzia.C5.82a_CSS"> Informacja: Jak działa CSS </h3> +<p>Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy: +</p> +<ul><li> W pierwszym Mozilla zmienia język znaczników oraz CSS w <i>DOM</i> (Model Obiektowy Dokumentu). DOM jest reprezentacją dokumentu w pamięci komputera. Wiąże on treść dokumentu z jego stylem. +</li></ul> +<ul><li> W drugim etapie Mozilla wyświetla ten DOM. +</li></ul> +<p>Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki. +</p><p>DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się <i>węzłem</i> w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci. +</p><p>Węzły, które odpowiadają znacznikom, znane są także jako <i>elementy</i>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> W Twoim przykładowym dokumencie znacznik <code><P></code> i jego znacznik <code></P></code> tworzą kontener: +<div style="width: 24em;"> +<pre class="eval"><P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets +</P> +</pre> +</div> +<p>W DOM odpowiadający węzeł P jest rodzicem. +Jego dzieci to węzły <small>STRONG</small> oraz węzły tekstowe. +Węzły <small>STRONG</small> same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci: +</p> +<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> +<p><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">C</span>" +│ +├─"<span style="color: black;">ascading</span>" +│ +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">S</span>" +│ +├─"<span style="color: black;">tyle</span>" +│ +├─<span style="color: black;">STRONG</span> +│ │ +│ └─"<span style="color: black;">S</span>" +│ +└─"<span style="color: black;">heets</span>" +</p> +</div> +</td></tr></tbody></table> +<p>Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS. +</p> +<h3 id="Zadanie:_Analiza_DOM" name="Zadanie:_Analiza_DOM"> Zadanie: Analiza DOM </h3> +<p>Do analizy DOM potrzebny jest specjalny program. +Służy do tego na przykład <a href="pl/Inspektor_DOM">Inspektor DOM</a> Mozilli. +</p><p>Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu. +</p><p>Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM. +</p> +<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Jeżeli Twoja przeglądarka Mozilli nie posiada Inspektora DOM, możesz zainstalować przeglądarkę ponownie, zaznaczając przy instalacji komponent narzędzi programistycznych. Potem wróć do tego kursu. +<p><small><b>DevmoPL</b>: Możesz też zainstalować DOMi jako rozszerzenie</small> +</p><p>Jeżeli nie chcesz instalować Inspektora DOM, możesz pominąć ten rozdział i przejść do następnej strony. Pominięcie tej sekcji nie wpłynie na resztę kursu. +</p> +</td></tr></tbody></table> +<p>W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki. +</p><p><b>Notka: </b> Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować. +</p><p>Część wyniku może wyglądać tak: +</p> +<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> +<tbody><tr> +<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> +<p>│ +<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> +│ │ +│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> +│ │ +</p> +</div> +</td></tr></tbody></table> +<p>Kiedy wybierasz jakikolwiek węzeł, możesz dowiedzieć się o nim więcej, używając prawej kolumny Inspektora DOM. +Na przykład po wybraniu węzła tekstowego Inspektor DOM pokazuje jego zawartość w prawej kolumnie. +</p><p>Kiedy zaznaczasz węzeł elementu, Inspektor DOM analizuje go i podaje w prawym panelu ogromną liczbę informacji. Informacje o stylu są tylko częścią informacji, jakie można tam znaleźć. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> W Inspektorze DOM wybierz węzeł <small>STRONG</small>. +<p>Skorzystaj z prawego panelu Inspektora, aby dowiedzieć się, gdzie kolor węzła ustawiony został na czerwony i gdzie jego wygląd jest ustawiany na grubszy niż normalny tekst. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu. +</p><p>Następna strona wyjaśnia więcej na temat tych interakcji: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "it": "it/Conoscere_i_CSS/Come_funzionano_i_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha", "zh-cn": "cn/CSS/Getting_Started/How_CSS_works" } ) }} diff --git a/files/pl/web/css/na_początek/javascript/index.html b/files/pl/web/css/na_początek/javascript/index.html new file mode 100644 index 0000000000..68a2900407 --- /dev/null +++ b/files/pl/web/css/na_początek/javascript/index.html @@ -0,0 +1,126 @@ +--- +title: JavaScript +slug: Web/CSS/Na_początek/JavaScript +tags: + - 'CSS:Na_początek' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p> +</p><p>Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. +</p><p>Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami. +Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii. +Jeśli chcesz je poznać, skorzystaj z innych kursów. +</p><p>Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS. +Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii. +</p> +<h3 id="Informacja:_JavaScript" name="Informacja:_JavaScript"> Informacja: JavaScript </h3> +<p>JavaScript jest <i>językiem programowania</i>. +Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. +</p><p>JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. +</p><p>Istnieją na to trzy sposoby: +</p> +<ul><li>Przez pracę z listę arkuszy stylów dokumentu — na przykład: dodawanie, usuwanie i zmienianie arkusza stylów. +</li><li>Przez pracę z regułami w arkuszu stylów — na przykład: dodawanie, usuwanie lub modyfikowanie reguł. +</li><li>Przez pracę z pojedynczymi elementami w DOM — modyfikowanie jego stylu niezależnie od arkusza stylów dokumentu. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę <a href="pl/JavaScript">JavaScript</a> na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_wykorzystania_Javascript-u" name="Zadanie:_Demonstracja_wykorzystania_Javascript-u"> Zadanie: Demonstracja wykorzystania Javascript-u </h3> +<p>Stwórz nowy dokument HTML, <code>doc5.html</code>. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>JavaScript sample</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON> + +</BODY> +</HTML> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style5.css</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>script5.js</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +</p><p>To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj. +Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku: +</p> +<table> +<tbody><tr> +<td style="padding-right: 2em;"> +<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> +<tbody><tr> +<td><p><b>JavaScript demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> +<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> +<tbody><tr> +<td><p><b>JavaScript demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> +<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument HTML ma podpięty arkusz stylów, a także plik ze skryptem. +</li><li>Skrypt operuje na niezależnych elementach w DOM-ie. Modyfikuje styl obiektów bezpośrednio. Modyfikuje styl przycisku pośrednio, zmieniając jego atrybut. +</li><li>W JavaScripcie <code>document.getElementById("square")</code> jest podobne w działaniu do selektora CSS <code>#square</code>. +</li><li>W JavaScripcie <code>backgroundColor</code> odpowiada własności <code>background-color</code> w CSS. +</li><li>Twoja przeglądarka posiada wbudowaną regułę CSS dla <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>, która zmienia wygląd przycisku, kiedy zostaje on wyłączony. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego. +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku. +Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami. +Następna strona opisuje to: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} diff --git a/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html b/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html new file mode 100644 index 0000000000..dbf53074b0 --- /dev/null +++ b/files/pl/web/css/na_początek/kaskadowość_i_dziedziczenie/index.html @@ -0,0 +1,96 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p> +</p><p>Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +</p><p>Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +</p> +<h3 id="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie" name="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie"> Informacja: Kaskadowość i dziedziczenie </h3> +<p>Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. +Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. +</p><p>Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +</p> +<ul><li>Domyślny styl przeglądarki dla danego języka znaczników +</li><li>Styl określony przez użytkownika czytającego stronę +</li><li>Styl podpięty do dokumentu przez jego autora +</li></ul> +<p>Styl użytkownika modyfikuje domyślny styl przeglądarki. +Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. +W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +<p>Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku <code>userContent.css</code> w profilu przeglądarki. +</p><p>Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +</p> +</td></tr></tbody></table> +<p>Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. +</p><p>Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +</p><p>Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. +</p><p>Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +</p><p>Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +</p><p>Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego <code>!important</code>. +<p>Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +</p><p>Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie</a> w specyfikacji CSS. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_U.C5.BCywanie_dziedziczenia" name="Zadanie:_U.C5.BCywanie_dziedziczenia"> Zadanie: Używanie dziedziczenia </h3> +<p>Wyedytuj Twój przykładowy plik CSS. +</p><p>Dodaj tę linię poprzez skopiowanie i wklejenie jej. +Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. +Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: +</p> +<pre>p {color: blue; text-decoration: underline;} +</pre> +<p>Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. +Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. +Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. +</p><p>Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. +</p> +<table> +<tbody><tr> +<td> +<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> +<caption>Przed +</caption><tbody><tr> +<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 1em;"> +<caption>Po +</caption><tbody><tr> +<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Twój przykładowy arkusz stylów opisuje style dla znaczników <code>P</code> oraz <code>STRONG</code>, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} diff --git a/files/pl/web/css/na_początek/kolor/index.html b/files/pl/web/css/na_początek/kolor/index.html new file mode 100644 index 0000000000..2edc0a662c --- /dev/null +++ b/files/pl/web/css/na_początek/kolor/index.html @@ -0,0 +1,208 @@ +--- +title: Kolor +slug: Web/CSS/Na_początek/Kolor +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p> +</p><p>Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. +</p><p>W swoim przykładowym arkuszu stylów, dodasz kolory tła. +</p> +<h3 id="Informacja:_Kolor" name="Informacja:_Kolor"> Informacja: Kolor </h3> +<p>Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. +CSS 2 definiuje 17 nazwanych kolorów. +Niektóre z nazw mogą nie być tym, czego się spodziewasz: +</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> +<tbody><tr> +<td> </td><td> black </td><td style="width: 2em; height: 2em; background-color: black;"> </td><td> gray </td><td style="width: 2em; height: 2em; background-color: gray;"> </td><td> silver </td><td style="width: 2em; height: 2em; background-color: silver;"> </td><td> white </td><td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> +</td></tr> +<tr> +<td> podstawowe </td><td> red </td><td style="width: 2em; height: 2em; background-color: red;"> </td><td> lime </td><td style="width: 2em; height: 2em; background-color: lime;"> </td><td> blue </td><td style="width: 2em; height: 2em; background-color: blue;"> +</td></tr> +<tr> +<td> drugorzędne </td><td> yellow </td><td style="width: 2em; height: 2em; background-color: yellow;"> </td><td> aqua </td><td style="width: 2em; height: 2em; background-color: aqua;"> </td><td> fuchsia </td><td style="width: 2em; height: 2em; background-color: fuchsia;"> +</td></tr> +<tr> +<td> </td><td>maroon</td><td style="width: 2em; height: 2em; background-color: maroon;"> </td><td> orange</td><td style="width: 2em; height: 2em; background-color: orange;"> </td><td> olive</td><td style="width: 2em; height: 2em; background-color: olive;"> </td><td> purple</td><td style="width: 2em; height: 2em; background-color: purple;"> </td><td> green</td><td style="width: 2em; height: 2em; background-color: green;"> </td><td> navy</td><td style="width: 2em; height: 2em; background-color: navy;"> </td><td> teal</td><td style="width: 2em; height: 2em; background-color: teal;"> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: +<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> +<tbody><tr> +<td> dodgerblue</td><td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td><td> peachpuff </td><td style="width: 2em; height: 2em; background-color: peachpuff;"> </td><td> tan </td><td style="width: 2em; height: 2em; background-color: tan;"> </td><td> firebrick </td><td style="width: 2em; height: 2em; background-color: firebrick;"> </td><td> aquamarine </td><td style="width: 2em; height: 2em; background-color: aquamarine;"> +</td></tr></tbody></table> +<p>Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji +<a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">słowa kluczowe kolorów w SVG</a>. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. +</p> +</td></tr></tbody></table> +<p>Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech <i>heksadecymalnych</i> liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td><code>#000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#f00</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#0f0</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#00f</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#fff</code> +</td></tr></tbody></table> +<p>Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td> <code>#000000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#ff0000</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#00ff00</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#0000ff</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#ffffff</code> +</td></tr></tbody></table> +<p>Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykłady +</caption><tbody><tr> +<td> Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od czystej czerwieni: </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td><code>#f00</code> +</td></tr> +<tr> +<td>Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego: </td><td style="width: 2em; height: 2em; background-color: #f77;"> </td><td><code>#f77</code> +</td></tr> +<tr> +<td>Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego: </td><td style="width: 2em; height: 2em; background-color: #fa7;"> </td><td><code>#fa7</code> +</td></tr> +<tr> +<td>Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów: </td><td style="width: 2em; height: 2em; background-color: #c74;"> </td><td><code>#c74</code> +</td></tr> +<tr> +<td>Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów: </td><td style="width: 2em; height: 2em; background-color: #c98;"> </td><td><code>#c98</code> +</td></tr> +<tr> +<td>Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary: </td><td style="width: 2em; height: 2em; background-color: #ccc;"> </td><td><code>#ccc</code> +</td></tr></tbody></table> +</td></tr> +<tr> +<td> Aby uzyskać pastelowy odcień, taki jak blady niebieski: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od białego: </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td><code>#fff</code> +</td></tr> +<tr> +<td>Zredukuj trochę wartości komponentów innych, niż niebieski: </td><td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td><td><code>#eef</code> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. +<p>Na przykład to jest kasztanowaty (ciemnoczerwony): +</p> +<div style="width: 24em;"><pre> +rgb(128, 0, 0) +</pre></div> +<p>Więcej szczegółów na temat określania kolorów znajdziesz w sekcji +<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Kolory</a> w specyfikacji CSS. +</p><p>Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: +<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 Kolory Systemowe</a> specyfikacji CSS. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="W.C5.82asno.C5.9Bci_kolor.C3.B3w" name="W.C5.82asno.C5.9Bci_kolor.C3.B3w"> Własności kolorów </h4> +<p>Korzystałeś(aś) już z własności <code>color</code> dla tekstu. +</p><p>Możesz też użyć własności <code>background-color</code>, aby zmienić tła elementów. +</p><p>Jeżeli ustawisz wartość tła na <code>transparent</code>, będzie ono przezroczyste i pokaże tło elementu rodzica. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Boksy <b>Przykład</b> w tym kursie używają bladożółtego tła: +<div style="width: 24em;"><pre> +background-color: #fffff4; +</pre></div> +<p>Boksy <b>Więcej szczegółów</b> używają bladoszarego: +</p> +<div style="width: 24em;"><pre> +background-color: #f4f4f4; +</pre></div> +</td></tr></tbody></table> +<h3 id="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w" name="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w"> Zadanie: Korzystanie z kodów kolorów </h3> +<p>Wyedytuj swój plik CSS. +</p><p>Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. +(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. +Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). +</p> +<div style="width: 32em;"> +<pre class="eval">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphs */ +p {color: blue;} +#first {font-style: italic;} + +/* initial letters */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik: +</p> +<table> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><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 +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><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 +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. +<p>(To nie jest do końca możliwe, ale możesz być blisko ideału. +Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. +</p><p>Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} diff --git a/files/pl/web/css/na_początek/listy/index.html b/files/pl/web/css/na_początek/listy/index.html new file mode 100644 index 0000000000..18c61f4bce --- /dev/null +++ b/files/pl/web/css/na_początek/listy/index.html @@ -0,0 +1,268 @@ +--- +title: Listy +slug: Web/CSS/Na_początek/Listy +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p> +</p><p>Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. +</p><p>Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. +</p> +<h3 id="Informacja:_Listy" name="Informacja:_Listy"> Informacja: Listy </h3> +<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. +</p><p>CSS posiada specjalne własności stworzone dla list. +Staraj się z nich korzystać, jeśli masz możliwość. +</p><p>Aby określić styl dla listy, użyj własności <code>list-style</code> do określenia typu znacznika. +</p><p>Selektor w regule CSS może określać elementy listy (np. <code>LI</code>) lub element rodzica list (np. <code>UL</code>), z którego elementy listy będą dziedziczyły te style. +</p> +<h4 id="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29" name="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29"> Listy nieuporządkowane (unordered lists) </h4> +<p>W liście <i>nieuporządkowanej</i> każdy element jest oznaczony w ten sam sposób. +</p><p>W CSS występują trzy typy oznaczeń. +Wyświetlane są w następujący sposób: +</p> +<ul style="padding-left: 2em;"> +<li style=""><code>disc</code></li> +<li style=""><code>circle</code></li> +<li style=""><code>square</code></li> +</ul> +<p>Alternatywnie możesz określić URL do obrazka. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Te reguły określają różne oznaczenia dla różnych klas elementów listy: +<div style="width: 30em;"> +<p>li.open {list-style: circle;} +li.closed {list-style: disc;} +</p> +</div> +<p>Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: +</p> +<div style="width: 30em;"> +<p><UL> +</p> +<pre class="eval"> <LI class="open">Lorem ipsum</LI> + <LI class="closed">Dolor sit</LI> + <LI class="closed">Amet consectetuer</LI> + <LI class="open">Magna aliquam</LI> + <LI class="closed">Autem veleum</LI> +</pre> +<p></UL> +</p> +</div> +<p>Wynik może wyglądać na przykład tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><ul style="padding-right: 6em;"> +<li style="">Lorem ipsum</li> +<li style="">Dolor sit</li> +<li style="">Amet consectetuer</li> +<li style="">Magna aliquam</li> +<li style="">Autem veleum</li> +</ul> +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Listy_uporz.C4.85dkowane_.28ordered_lists.29" name="Listy_uporz.C4.85dkowane_.28ordered_lists.29"> Listy uporządkowane (ordered lists) </h4> +<p>W przypadku list <i>uporządkowanych</i> każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. +</p><p>Użyj własności <code>list-style</code>, aby określić typ oznaczenia: +</p> +<ul style="padding-left: 2em;"> +<li style=""><code>decimal</code></li> +<li style=""><code>lower-roman</code></li> +<li style=""><code>upper-roman</code></li> +<li style=""><code>lower-latin</code></li> +<li style=""><code>upper-latin</code></li> +</ul> +<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, że w bloku <small>OL</small> z klasą <code>info</code> elementy są oznaczane dużymi literami. +<div style="width: 30em;"> +<p>ol.info {list-style: upper-latin;} +</p> +</div> +<p>Elementy <small>LI</small> dziedziczą ten styl: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><ul> +<li style="padding-right: 6em;">Lorem ipsum</li> +<li style="padding-right: 6em;">Dolor sit</li> +<li style="padding-right: 6em;">Amet consectetuer</li> +<li style="padding-right: 6em;">Magna aliquam</li> +<li style="padding-right: 6em;">Autem veleum</li> +</ul> +</td></tr></tbody></table> +</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> Własność <code>list-style</code> jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Listy</a> w dokumentacji CSS. +<p>Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (<small>UL</small>) i uporządkowanych (<small>OL</small>), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić <small>UL</small> jako posortowaną, a <small>OL</small> jako nieposortowaną, jeśli wolisz. +</p><p>Różne przeglądarki w różny sposób obsługują te style dla list. +Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. +</p> +</td></tr></tbody></table> +<h4 id="Liczniki" name="Liczniki"> Liczniki </h4> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>Notatka: </strong> Niektóre przeglądarki nie obsługują liczników.</p> +</div> +<p>Możesz używać liczników do różnych elementów, nie tylko list. +Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. +</p><p>Aby określić numerację, musisz zadeklarować <i>counter</i> z określoną nazwą. +</p><p>W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości <code>counter-reset</code> i nazwą Twojego licznika. +Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. +</p><p>W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość <code>counter-increment</code>. Jako wartość podaj nazwę licznika. +</p><p>Aby wyświetlić wartość licznika, dodaj <code>:before</code> lub <code>:after</code> do selektora i użyj własności <code>content</code> (tak jak na poprzedniej stronie <b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>). +</p><p>Jako wartość własności <code>content</code> wstaw <code>counter()</code> z nazwą swojego licznika. +Opcjonalnie określ typ. +Typy są takie same jak w sekcji '<i>listy uporządkowane</i>. +</p><p>Zwykle element, który wyświetla licznik, inkrementuje go. +</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 inicjalizuje licznik w każdym elemencie <small>H3</small> z klasą <code>numbered</code>: +<div style="width: 30em;"> +<p>h3.numbered {counter-reset: mynum;} +</p> +</div> +<p>Ta reguła wyświetla i inkrementuje licznik dla każdego elementu <small>P</small> z klasą <code>numbered</code>: +</p> +<div style="width: 30em;"> +<p>p.numbered:before { +</p> +<pre class="eval"> content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> +<p>Wynik wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> +<tbody><tr> +<td><b>Heading</b><br> +<p><b>1: </b>Lorem ipsum</p> +<p><b>2: </b>Dolor sit</p> +<p><b>3: </b>Amet consectetuer</p> +<p><b>4: </b>Magna aliquam</p> +<p><b>5: </b>Autem veleum</p> +</td></tr></tbody></table> +</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> Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. +<p>Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. +</p><p>Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. +Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatyczne liczniki i numerowanie</a>. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Style_list" name="Zadanie:_Style_list"> Zadanie: Style list </h3> +<p>Stwórz nowy dokument HTML, <code>doc2.html</code>. +Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"> +<p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Sample document 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">The oceans</H3> +<UL> +<LI>Arctic</LI> +<LI>Atlantic</LI> +<LI>Pacific</LI> +<LI>Indian</LI> +<LI>Southern</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +</p> +</div> +<p>Stwórz nowy arkusz stylów, <code>style2.css</code>. +Skopiuj i wklej poniższą treść: +</p> +<div style="width: 48em;"> +<p>/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { +</p> +<pre class="eval"> content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> +<p>Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. +</p><p>Otwórz ten dokument w swojej przeglądarce. +Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. +Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): +</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> +<ul style=""> +<li>Arctic</li> +<li>Atlantic</li> +<li>Pacific</li> +<li>Indian</li> +<li>Southern</li> +</ul> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> +<p><b>1: </b>Lorem ipsum</p> +<p><b>2: </b>Dolor sit</p> +<p><b>3: </b>Amet consectetuer</p> +<p><b>4: </b>Magna aliquam</p> +<p><b>5: </b>Autem veleum</p> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> +<caption>Wyzwania +</caption><tbody><tr> +<td> Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> +<ul style=""> +<li>Arctic</li> +<li>Atlantic</li> +<li>Pacific</li> +<li>Indian</li> +<li>Southern</li> +</ul> +</td></tr></tbody></table> +<p>Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: +</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> +<p><b>. . .</b> +</p> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> +<p><b>. . .</b> +</p> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. +</p><p>Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} diff --git a/files/pl/web/css/na_początek/media/index.html b/files/pl/web/css/na_początek/media/index.html new file mode 100644 index 0000000000..ef6c87f8cf --- /dev/null +++ b/files/pl/web/css/na_początek/media/index.html @@ -0,0 +1,318 @@ +--- +title: Media +slug: Web/CSS/Na_początek/Media +tags: + - 'CSS:Na_początek' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p> +</p><p>Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. +</p><p>Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. +</p> +<h3 id="Informacja:_Media" name="Informacja:_Media"> Informacja: Media </h3> +<p>Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. +Prezentacja może przyjąć wiele różnych form. +</p><p>Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. +To są różne media o różnych charakterystykach. +CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. +</p><p>Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj <code>@media</code> z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. +<p>W języku znaczników element rodzica pola nawigacyjnego ma id <code>nav-area</code>. +</p><p>Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: +</p> +<div style="width: 30em;"> +<p>@media print { +</p> +<pre class="eval"> #nav-area {display: none;} + } +</pre> +</div> +</td></tr></tbody></table> +<p>Niektóre z popularnych typów mediów: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td><code>screen</code></td><td>Kolorowy wyświetlacz komputera +</td></tr> +<tr> +<td><code>print</code></td><td>Wyświetlanie na stronach +</td></tr> +<tr> +<td style="padding-right: 1em;"><code>projection</code></td><td>Wyświetlane podczas projekcji +</td></tr> +<tr> +<td><code>all</code></td><td>Wszystkie media (domyślne) +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Istnieją też inne sposoby określenia docelowych mediów. +<p>Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie <code>media</code> w znaczniku <code>LINK</code>. +</p><p>W CSS możesz użyć <code>@import</code> na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. +</p><p>Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. +</p><p>Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> w specyfikacji CSS. +</p><p>Istnieje więcej przykładów wykorzystania własności <code>display</code> na dalszej stronie kursu: <a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a>. +</p> +</td></tr></tbody></table> +<h4 id="Drukowanie" name="Drukowanie"> Drukowanie </h4> +<p>CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. +</p><p>Reguła <code>@page</code> może ustawiać marginesy strony. +Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla <code>@page:left</code> oraz <code>@page:right</code>. +</p><p>Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (<code>in</code>), punkty (<code>pt</code>) = 1/72 cala), centymetry (<code>cm</code>) lub milimetry (<code>mm</code>). Równie dobrze możesz używać ems (<code>em</code>), aby dopasować się do rozmiaru czcionki, oraz procentów (<code>%</code>). +</p><p>Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności <code>page-break-before</code>, <code>page-break-after</code> i <code>page-break-inside</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ta reguła ustawia margines strony na jeden cal dla każdej strony: +<div style="width: 30em;"> +<p>@page {margin: 1in;} +</p> +</div> +<p>Ta reguła zapewnia, że każdy element <small>H!</small> zaczyna się na nowej stronie: +</p> +<div style="width: 30em;"> +<p>h1 {page-break-before: always;} +</p> +</div> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Media stronicowe</a> w specyfikacji CSS. +<p>Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. +Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. +Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. +</p> +</td></tr></tbody></table> +<h4 id="Interfejsy_u.C5.BCytkownika" name="Interfejsy_u.C5.BCytkownika"> Interfejsy użytkownika </h4> +<p>CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. +</p><p>Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. +</p><p>Istnieje pięć specjalnych selektorów: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong> +</td></tr> +<tr> +<td><code>E:hover</code></td><td>Dowolny element E, nad którym znajduje się wskaźnik +</td></tr> +<tr> +<td><code>E:focus</code></td><td>Dowolny element E, który jest w danym momencie aktywny dla interfejsu +</td></tr> +<tr> +<td><code>E:active</code></td><td>Element E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika +</td></tr> +<tr> +<td><code>E:link</code></td><td>Dowolny element E, który jest odnośnikiem do strony której użytkownik <i>nie</i> odwiedzał ostatnio +</td></tr> +<tr> +<td><code>E:visited</code></td><td>Dowolny element E, który jest odnośnikiem do adresu URL, który użytkownik <i>odwiedził</i> niedawno +</td></tr></tbody></table> +<p>Własność <code>cursor</code> określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="width: 10em;"><strong>Selektor</strong></td><td><strong>Wybiera</strong> +</td></tr> +<tr style="cursor: pointer;"> +<td><code>pointer</code></td><td>Wskazuje odnośnik +</td></tr> +<tr style="cursor: wait;"> +<td><code>wait</code></td><td>Wskazuje, że program nie może przyjmować danych +</td></tr> +<tr style="cursor: progress;"> +<td><code>progress</code></td><td>Wskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika +</td></tr> +<tr style="cursor: default;"> +<td><code>default</code></td><td>Domyślny (zazwyczaj strzałka) +</td></tr></tbody></table> +<p>Własność <code>outline</code> tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. +Jej wartości są podobne do własności <code>border</code>, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. +</p><p>Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut <code>disabled</code> lub <code>readonly</code>. +Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: <code>{{ mediawiki.external('disabled') }}</code> lub <code>{{ mediawiki.external('readonly') }}</code>. +</p><p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Przykład +</caption><tbody><tr> +<td> Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: +<div style="width: 30em;"><pre> +.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre></div> +<p>To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: #fff;"> +<tbody><tr> +<td> +<table> +<tbody><tr> +<td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span> +</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span> +</td><td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span> +</td></tr> +<tr style="line-height: 25%;"> +<td> +</td></tr> +<tr style="font-style: italic;"> +<td>disabled</td><td>normal</td><td>active +</td></tr></tbody></table> +</td></tr></tbody></table> +<p>W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. +</p> +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> w specyfikacji CSS. +<p>Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Drukowanie_dokumentu" name="Zadanie:_Drukowanie_dokumentu"> Zadanie: Drukowanie dokumentu </h3> +<p>Stwórz nowy dokument HTML, <code>doc4.html</code>. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Print sample</TITLE> +<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> +</HEAD> + +<BODY> +<H1>Section A</H1> +<P>This is the first section...</P> + +<H1>Section B</H1> +<P>This is the second section...</P> + +<DIV id="print-head"> +Heading for paged media +</DIV> + +<DIV id="print-foot"> +Page: +</DIV> + +</BODY> +</HTML> +</pre></div> +<p>Stwórz nowy arkusz stylów, <code>style4.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre></div> +<p>Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. +</p><p>Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. +</p> +<table> +<tbody><tr> +<td> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> +<table style="width: 15em; margin-right: 2em;"> +<tbody><tr> +<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div> +<div style="font-size: 150%; font-weight: bold;">Section A</div> +<div style="font-size: 75%;">This is the first section...</div> +<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> +<table style="width: 15em; margin-right: 2em;"> +<tbody><tr> +<td><div style="font-size: 150%; text-align: center; margin-bottom: .5em;">Heading</div> +<div style="font-size: 150%; font-weight: bold;">Section B</div> +<div style="font-size: 75%;">This is the second section...</div> +<div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. +<p>Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. +</p><p>Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: <b><a href="pl/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git a/files/pl/web/css/na_początek/po_co_używać_css/index.html b/files/pl/web/css/na_początek/po_co_używać_css/index.html new file mode 100644 index 0000000000..73fb92e4cb --- /dev/null +++ b/files/pl/web/css/na_początek/po_co_używać_css/index.html @@ -0,0 +1,85 @@ +--- +title: Po co używać CSS +slug: Web/CSS/Na_początek/Po_co_używać_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> +</p><p>Ta strona tłumaczy, do czego dokumenty wykorzystują CSS. +Używając CSS dodasz do swojego dokumentu arkusz stylów. +</p> +<h3 id="Informacja:_Po_co_u.C5.BCywa.C4.87_CSS.3F" name="Informacja:_Po_co_u.C5.BCywa.C4.87_CSS.3F"> Informacja: Po co używać CSS? </h3> +<p>CSS pomaga utrzymać treść dokumentu oddzieloną od informacji o tym, jak należy ją wyświetlać. Szczegóły opisujące, jak należy wyświetlać dokument, są znane jako <i>styl</i>. Utrzymywanie rozdzielenia treści od wyglądu: +</p> +<ul><li> pozwala uniknąć powtórzeń, +</li><li> ułatwia zarządzanie dokumentem, +</li><li> umożliwia wykorzystywanie różnych stylów do różnych celów w jednym dokumencie. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Twoja strona WWW może mieć wiele dokumentów wyglądających podobnie. Korzystając z CSS, przechowujesz informacje o wyglądzie w osobnych plikach używanych we wszystkich dokumentach. +<p>Kiedy użytkownik ogląda stronę WWW, przeglądarka pobiera informacje o stylach równolegle z treścią strony. +</p><p>Kiedy użytkownik drukuje stronę, można mu dostarczyć inne informacje o stylu, które sprawią, że wydrukowany dokument będzie bardziej czytelny. +</p> +</td></tr></tbody></table> +<p>Ogólnie rzecz biorąc, dzięki CSS język znaczników jest wykorzystywany wyłącznie do opisu treści dokumentu, a nie jego stylu. CSS jest zaś używany do opisu stylu, nie treści. (Dalej w tym kursie będzie można zobaczyć pewne wyjątki od tej reguły.) +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Język znaczników, taki jak HTML, również dostarcza pewnych mechanizmów opisu stylów. Na przykład w HTML-u można użyć znacznika <code><B></code>, aby pogrubić tekst albo określić kolor tła strony w znaczniku <code><BODY></code>. +<p>Kiedy używasz CSS, zazwyczaj unikasz stosowania tych funkcji języka znaczników, aby trzymać wszystkie informacje o stylu dokumentu w jednym miejscu. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Tworzenia_arkusza_styl.C3.B3w" name="Zadanie:_Tworzenia_arkusza_styl.C3.B3w"> Zadanie: Tworzenia arkusza stylów </h3> +<p>Stwórz inny plik tekstowy w tym samym katalogu, co poprzednio. +Ten plik będzie arkuszem stylów. +Nazwij go: <code>style1.css</code> +</p><p>Skopiuj poniższą linię i wklej ją do pliku CSS, a następnie zapisz ten plik: +</p> +<div style="width: 40em;"> +<p>strong {color: red;} +</p> +</div> +<h4 id="Wi.C4.85zanie_arkusza_styl.C3.B3w_do_dokumentu" name="Wi.C4.85zanie_arkusza_styl.C3.B3w_do_dokumentu"> Wiązanie arkusza stylów do dokumentu </h4> +<p>Aby powiązać swój dokument z arkuszem stylów, wyedytuj plik HTML. +Dodaj pogrubioną linię: +</p> +<div style="width: 40em; color: gray;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + <HEAD> + <TITLE>Sample document</TITLE> + <strong style="color: black;"><LINK rel="stylesheet" type="text/css" href="style1.css"></strong> + </HEAD> + <BODY> + <P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets + </P> + </BODY> +</HTML> +</pre> +</div> +<p>Zapisz ten plik i odśwież widok w swojej przeglądarce. +Ten arkusz stylów sprawia, że pierwsze litery są czerwone: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td> <strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Poza czerwonym, CSS pozwala używać innych nazw kolorów. +<p>Bez patrzenia w dokumentację znajdź pięć innych nazw kolorów, które działają w Twoim arkuszu stylów. +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Teraz masz już przykładowy dokument powiązany z osobnym arkuszem stylów, jesteś zatem gotów do zrozumienia, jak przeglądarka wiąże je podczas wyświetlania dokumentu: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Jak_dzia%c5%82a_CSS">Jak działa CSS</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }} diff --git a/files/pl/web/css/na_początek/selektory/index.html b/files/pl/web/css/na_początek/selektory/index.html new file mode 100644 index 0000000000..521a92b641 --- /dev/null +++ b/files/pl/web/css/na_początek/selektory/index.html @@ -0,0 +1,259 @@ +--- +title: Selektory +slug: Web/CSS/Na_początek/Selektory +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>Ta strona jest częścią piątą kursu <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.</p> + +<h3 id="Informacja:_Selektory" name="Informacja:_Selektory">Informacja: Selektory</h3> + +<p>CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:</p> + +<div style="width: 30em;"> +<pre>strong { + color: red; +} +</pre> +</div> + +<p>W terminologii CSS cała ta linia jest <em>regułą</em>. Ta reguła zaczyna się od <code>strong</code>, który jest <em>selektorem</em>. Wybiera, które elementy w drzewie DOM będą używały tej reguły.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Więcej szczegółów</strong><br> + Część wewnątrz nawiasów klamrowych nazywamy się <em>deklaracją</em>.</p> + + <p>Słowo kluczowe <code>color</code> jest <em>własnością</em>, a <code>red</code> jest <em>wartością</em>.</p> + + <p>Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.</p> + + <p>Ten kurs odwołuje się do selektorów takich jak <code>strong</code> jako selektorów <em>znaczników</em>. Specyfikacja CSS odwołuje się do nich jako selektorów <em>typu</em>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.</p> + +<p>Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.</p> + +<p>Dwa atrybuty posiadają specjalny status w CSS. Są to <code>class</code> oraz <code>id</code>.</p> + +<h3 id="Selektor_class">Selektor class</h3> + +<p>Użycie atrybutu <code>class</code> w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.</p> + +<p>W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.</p> + +<h3 id="Selektor_ID">Selektor ID</h3> + +<p>Użycie atrybutu <code>id</code> w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie <code>id</code> mu nadasz. Nazwa <code>id</code> musi być unikalna w dokumencie.</p> + +<p>W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym <code>id</code>, kiedy używasz go w selektorze.</p> + +<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Przykłady</strong><br> + Ten znacznik HTML posiada zarówno atrybut <code>class</code>, jak i <code>id</code>:</p> + + <div style="width: 30em;"> + <pre> +<p class="key" id="principal"> +</pre> + </div> + + <p>Id, <code>principal</code>, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy <code>key</code>.</p> + + <p>W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy <code>key</code> staną się zielone. (Nie wszystkie muszą być elementami <small>P</small>.)</p> + + <div style="width: 30em;"> + <pre> +.key { + color: green; +} +</pre> + </div> + + <p>Ta reguła powoduje, że jeden element o id <code>principal</code> zostanie pogrubiony:</p> + + <div style="width: 30em;"> + <pre> +#principal { + font-weight: bolder; +} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td>Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. + <p>Na przykład selektor <code>.key</code> wybiera wszystkie elementy, które mają klasę o nazwie <code>key</code>. Selektor <code>p.key</code> wybiera tylko elementy P, które mają klasę o nazwie <code>key</code>.</p> + + <p>Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, <code>class</code> i <code>id</code>. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor <code>{{ mediawiki.external('type=button') }}</code> wybiera wszystkie elementy, które mają atrybut <code>type</code> o wartości <code>button</code>.</p> + + <p>W dalszej części kursu (<a href="/pl/CSS/Na_pocz%C4%85tek/Tabele" title="pl/CSS/Na_początek/Tabele">Tabele</a>) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.</p> + + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a> w specyfikacji CSS.</p> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.</p> + +<p>Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.</p> + +<h3 id="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id" name="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id">Zadanie: Używanie selektorów class i id</h3> + +<p>1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.<br> + 2. Następnie dodaj atrybuty <strong>id</strong> i <strong>class</strong> do pierwszej kopii, a potem <strong>id</strong> do drugiej:</p> + +<div style="width: 48em; color: gray;"> +<pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html</code></pre> +</div> + +<p>Teraz wyedytuj swój plik CSS. Zamień całą treść na:</p> + +<div style="width: 40em;"> +<pre><code>strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; }</code></pre> +</div> + +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.</p> + +<p>Selektory klas <code>.carrot</code> oraz <code>.spinach</code> mają priorytety nad selektorem znaczników <code>strong</code>.</p> + +<p>Selektor id <code>#first</code> ma priorytet nad selektorami klas i znaczników.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Wyzwanie</caption> + <tbody> + <tr> + <td>Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:</p> + + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="Zadanie_użycie_pseudo_selectorów">Zadanie: użycie pseudo selectorów</h2> + +<ol> + <li>Utwórz plik HTML z następują treścią: + <pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html></code></pre> + </li> + <li>Edytuj plik CSS. Zamień jego treść na: + <pre><code>a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +}</code></pre> + </li> + <li>Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): + <table> + <tbody> + <tr> + <td>Go to our <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory$edit#" title="Home page">Home page</a></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> + +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Selektory" title="Talk:pl/CSS/Na_początek/Selektory">Dyskusji</a>.</p> + +<p>Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Czytelny_CSS" title="pl/CSS/Na_początek/Czytelny_CSS">Czytelny CSS</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}</p> diff --git a/files/pl/web/css/na_początek/style_tekstowe/index.html b/files/pl/web/css/na_początek/style_tekstowe/index.html new file mode 100644 index 0000000000..170f28ef88 --- /dev/null +++ b/files/pl/web/css/na_początek/style_tekstowe/index.html @@ -0,0 +1,115 @@ +--- +title: Style tekstowe +slug: Web/CSS/Na_początek/Style_tekstowe +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p> +</p><p>Na tej stronie znajdziesz więcej przykładów stylów tekstowych. +</p><p>Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. +</p> +<h3 id="Informacja:_Style_tekstowe" name="Informacja:_Style_tekstowe"> Informacja: Style tekstowe </h3> +<p>CSS posiada kilka własności do określania stylu tekstu. +</p><p>Istnieje wygodna, krótka własność <code>font</code>, której można użyć do określenia kilku cech na raz — na przykład: +</p> +<ul><li>pogrubienia, ustawienia kursywy oraz małych znaków, +</li><li>rozmiaru, +</li><li>wysokości linii, +</li><li>typu fontu. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> <div style="width: 40em;"> +<p>p {font: italic 75%/125% "Comic Sans MS", cursive;} +</p> +</div> +<p>Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. +</p><p>Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). +</p><p>Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). +</p><p>Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na <code>normal</code>): +</p> +</td></tr></tbody></table> +<h4 id="Typy_font.C3.B3w" name="Typy_font.C3.B3w"> Typy fontów </h4> +<p>Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. +Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. +</p><p>Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> lub <code>monospace</code>, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). +</p><p>Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. +</p><p>Aby określić wyłącznie typ fontu, użyj własności <code>font-family</code>. +</p> +<h4 id="Rozmiary_font.C3.B3w" name="Rozmiary_font.C3.B3w"> Rozmiary fontów </h4> +<p>Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. +</p><p>Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak <code>small</code>, <code>medium</code> czy <code>large</code>. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: <code>smaller</code>, <code>larger</code>, <code>150%</code> lub <code>1.5</code>. +</p><p>Jeżeli trzeba, możesz określić bezpośredni rozmiar: <code>12px</code> (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. +</p><p>Aby określić sam rozmiary fontu, użyj własności <code>font-size</code>. +</p> +<h4 id="Wysoko.C5.9B.C4.87_linii" name="Wysoko.C5.9B.C4.87_linii"> Wysokość linii </h4> +<p>Wysokość linii określa odstępy między liniami. +Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. +</p><p>Aby określić samą wysokość linii, użyj własności <code>line-height</code>. +</p> +<h4 id="Ozdobniki" name="Ozdobniki"> Ozdobniki </h4> +<p>Odrębna własność <code>text-decoration</code> może określać inne style, jak <code>underline</code> (podkreślenie) lub <code>line-through</code> (przekreślenie). +Ustawiając tę własność na <code>normal</code>, usuniesz wszystkie ozdobniki. +</p> +<h4 id="Inne_w.C5.82asno.C5.9Bci" name="Inne_w.C5.82asno.C5.9Bci"> Inne własności </h4> +<p>Aby ustawić kursywę, użyj <code>font-style: italic;</code><br> +Aby ustawić pogrubienie, użyj <code>font-weight: bold;</code><br> +Aby określić, że wszystkie litery mają być małymi literami, użyj <code>font-variant: small-caps;</code> +</p><p>Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na <code>normal</code> lub +<code>inherit</code> (dziedzicz). +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Możesz określić style tekstowe na kilka innych sposobów. +<p>Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. +</p><p>W złożonym arkuszu stylów unikaj używania skrótowej własności <code>font</code>, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). +</p><p>Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonty</a> w specyfikacji CSS. +Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Tutaj</a>. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Okre.C5.9Blanie_fontu" name="Zadanie:_Okre.C5.9Blanie_fontu"> Zadanie: Określanie fontu </h3> +<p>W prostych dokumentach możesz określić font elementu <small>BODY</small>, a reszta dokumentu będzie dziedziczyć jego ustawienia. +</p><p>Wyedytuj swój plik CSS. +Dodaj regułę, która zmieni font. +Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: +</p> +<div style="width: 40em;"> +<p>body {font: 16px "Comic Sans MS", cursive;} +</p> +</div> +<p>Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. +</p><p>Odśwież okno przeglądarki, aby zobaczyć efekt. +Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p>Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: +<table> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. +Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git a/files/pl/web/css/na_początek/tables/index.html b/files/pl/web/css/na_początek/tables/index.html new file mode 100644 index 0000000000..78f9c67236 --- /dev/null +++ b/files/pl/web/css/na_początek/tables/index.html @@ -0,0 +1,596 @@ +--- +title: Tabele +slug: Web/CSS/Na_początek/Tables +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p> </p> +<p>Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.</p> +<p>Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.</p> +<h3 id="Informacja:_Wi.C4.99cej_o_selektorach" name="Informacja:_Wi.C4.99cej_o_selektorach">Informacja: Więcej o selektorach</h3> +<p>CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.</p> +<p>Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selektor</strong></td> + <td><strong>Wybiera</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Dowolny element E, który jest <b>potomkiem</b> elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, <i>itp</i>.))</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Dowolny element E, który jest dzieckiem elementu A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Dowolny element E, który jest pierwszym dzieckiem swojego rodzica</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Dowolny element E, który jest następnym z <i>rodzeństwa</i> elementu B (to znaczy: następnym dzieckiem tego samego rodzica)</td> + </tr> + </tbody> +</table> +<p>Możesz łączyć te selektory w złożone relacje.</p> +<p>Możesz też użyć symbolu <code>*</code> (gwiazdka), który znaczy "dowolny element".</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela HTML posiada atrybut <code>id</code>, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: + <div style="width: 30em;"> + <p><TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...</p> + </div> + <p>Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:</p> + <div style="width: 45em;"> + <ol> + <li>data-table-1 td:first-child {font-weight: bolder;}</li> + <li>data-table-1 td:first-child + td {font-family: monospace;}</li> + </ol> + </div> + <p>Wygląda to tak:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefiks</strong></td> + <td><tt>0001</tt></td> + <td>domyślnie</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </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>Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. + <p>Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu <code>class</code> lub <code>id</code> w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.</p> + <p>W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.</p> + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a>.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Informacja:_Tabele" name="Informacja:_Tabele">Informacja: Tabele</h3> +<p>Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.</p> +<p>Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.</p> +<p>Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (<a href="pl/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a>) nadają się do tego znacznie lepiej.</p> +<h4 id="Struktura_tabeli" name="Struktura_tabeli">Struktura tabeli</h4> +<p>W tabeli każdy kawałek informacji jest wyświetlany w <i>komórce</i>.</p> +<p>Komórki wyświetlane w jednej linii tworzą <i>wiersz</i>.</p> +<p>W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się <i>nagłówkiem</i>. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się <i>stopką</i>. Główne wiersze w tabeli tworzą jej <i>ciało</i> i one również mogą być łączone w grupy.</p> +<p>Komórki ułożone w pionowej linii tworzą <i>kolumnę</i>, ale użyteczność kolumn w tabelach CSS jest ograniczona.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. + <p>Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.</p> + <p>Ma natomiast dwie kolumny.</p> + </td> + </tr> + </tbody> +</table> +<p><br> + Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.</p> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Komórki nie posiadają marginesów zewnętrznych.</p> +<p>Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności <code>border-spacing</code> tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności <code>border-collapse</code> tabeli na wartość <code>collapse</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniżej widać trzy tabele. + <p>Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Opis" name="Opis">Opis</h4> +<p><i>Opis</i> jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.</p> +<p>Aby przesunąć opis na dół, ustaw jego własność <code>caption-side</code> na <code>bottom</code>. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.</p> +<p>Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Ta tabela posiada opis na dole: + <div style="width: 30em;"> + <ol> + <li>demo-table > caption {</li> + </ol> + <pre class="eval"> + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Puste_kom.C3.B3rki" name="Puste_kom.C3.B3rki">Puste komórki</h4> +<p>Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie <code>empty-cells: show;</code> dla elementu tabeli.</p> +<p>Możesz je ukryć, określając <code>empty-cells: hide;</code>. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. + <p>W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<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 tabelach, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tabele</a> w specyfikacji CSS. + <p>Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli" name="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli">Zadanie: Ustawianie stylów dla tabeli</h3> +<p>Stwórz nowy dokument HTML, <code>doc3.html</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Przykładowy dokument 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Oceans</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Area</TH> +<TH>Mean depth</TH> +</TR> +<TR> +<TH></TH> +<TH>million km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Arctic</TH> +<TD>13,000</TD> +<TD>1,200</TD> +</TR> +<TR> +<TH>Atlantic</TH> +<TD>87,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Pacific</TH> +<TD>180,000</TD> +<TD>4,000</TD> +</TR> +<TR> +<TH>Indian</TH> +<TD>75,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Southern</TH> +<TD>20,000</TD> +<TD>4,500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361,000</TD> +<TD></TD> +</TR> +<TR> +<TH>Mean</TH> +<TD>72,000</TD> +<TD>3,800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> +<p>Stwórz nowy arkusz stylów, <code>style3.css</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Styl dla doc3.html (Tabele) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; + } + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: ":"; + } + + +/* footer */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: ":"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> +<p>Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:</p> +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<p>Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.</p> +<p>Poniżej znajduje się kilka uwag dotyczących tej tabeli:</p> +<ul> + <li>Opis znajduje się poza ramką tabeli.</li> + <li>Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km<sup>2</sup>.</li> + <li>Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.</li> + <li>Dwukropki zostały dodane przez arkusz stylów.</li> +</ul> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Wyzwania</caption> + <tbody> + <tr> + <td>Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p> +<p>Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> w specyfikacji CSS.</p> +<p>Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: <b><a href="pl/CSS/Na_pocz%c4%85tek/Media">Media</a></b></p> diff --git a/files/pl/web/css/na_początek/układ/index.html b/files/pl/web/css/na_początek/układ/index.html new file mode 100644 index 0000000000..9499cdcdcd --- /dev/null +++ b/files/pl/web/css/na_początek/układ/index.html @@ -0,0 +1,274 @@ +--- +title: Układ +slug: Web/CSS/Na_początek/Układ +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/CSS_layout +--- +<p> +</p><p>Ta strona opisuje kilka sposobów na modyfikację układu dokumentu. +</p><p>Nauczysz się zmieniać układ przykładowego dokumentu... +</p> +<h3 id="Informacja:_Uk.C5.82ad" name="Informacja:_Uk.C5.82ad"> Informacja: Układ </h3> +<p>Możesz użyć CSS-u do określenia wielu efektów wizualnych, które zmieniają układ Twojego dokumentu. +Niektóre z technik tworzenia układu są bardziej zaawansowane, wykraczające poza zakres podstawowego kursu. +</p><p>Kiedy modelujesz układ strony, który ma wyglądać podobnie w wielu przeglądarkach, Twój arkusz stylów łączy się z domyślnym arkuszem stylów przeglądarki oraz silnikiem układu stron w sposób, który może być bardzo złożony. +To także wykracza poza zakres tego kursu. +</p><p>Ta strona opisuje proste techniki, których możesz spróbować. +</p> +<h4 id="Struktura_dokumentu" name="Struktura_dokumentu"> Struktura dokumentu </h4> +<p>Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę. +</p><p>Język składni Twojego dokumentu może posiadać znaczniki ogólnego przeznaczenia do tworzenia struktury. +Na przykład w HTML-u możesz użyć znacznika <code>DIV</code> do tworzenia struktury. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera. +<p>Twój arkusz stylów nie może narysować ramki wokół tych paragrafów, ponieważ nie istnieje element, dla którego można stworzyć selektor. +</p><p>Aby poprawić ten problem strukturalny, możesz dodać znacznik <code>DIV</code> wokół paragrafów. +Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut <code>id</code>. +</p> +<div style="width: 40em; color: gray;"> +<pre class="eval"> <H3 class="numbered">Numbered paragraphs</H3> + <strong style="color: black;"><DIV id="numbered"></strong> + <P class="numbered">Lorem ipsum</P> + <P class="numbered">Dolor sit</P> + <P class="numbered">Amet consectetuer</P> + <P class="numbered">Magna aliquam</P> + <P class="numbered">Autem veleum</P> + <strong style="color: black;"></DIV></strong> +</pre> +</div> +<p>Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list: +</p> +<div style="width: 30em;"> +<pre class="eval"> ul, #numbered { + border: 1em solid #69b; + padding-left:1em; + } +</pre> +</div> +<p>Wynik wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> +<div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> +</div> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> +<div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> +</div> +</td></tr></tbody></table> +</td></tr></tbody></table> +<h4 id="Jednostki_rozmiaru" name="Jednostki_rozmiaru"> Jednostki rozmiaru </h4> +<p>Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (<code>px</code>). +Jest to rozsądny wybór w pewnych przypadkach, dla wyświetlaczy takich jak monitor komputera. +Jednak jeżeli użytkownik zmieni rozmiar kroju, Twój układ może przestać wyglądać dobrze. +</p><p>W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (<code>em</code>). +Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m). +Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach. +<p>Ramka po prawej ma rozmiar określony w ems. +</p><p>Zmień teraz rozmiary kroju w swojej przeglądarce, aby zobaczyć, jak ramka po prawej dopasowuje się do rozmiaru, a jak zachowa się ramka po lewej: +</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td><div style="">ZMIEŃ MÓJ ROZMIAR</div> +</td></tr></tbody></table> +</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> Dla innych urządzeń najlepiej stosować inne jednostki miar. +<p>Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu. +</p><p>Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Wartości</a> na stronach specyfikacji CSS. +</p> +</td></tr></tbody></table> +<h4 id="Uk.C5.82ad_tekstu" name="Uk.C5.82ad_tekstu"> Układ tekstu </h4> +<p>Układ treści dokumentu jest określany przez dwie własności. +Możesz ich użyć, aby wstępnie określić układ: +</p> +<ul><li><code>text-align</code> +</li></ul> +<dl><dd>Określa położenie treści. Wybierz jedną z wartości: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code> +</dd></dl> +<ul><li><code>text-indent</code> +</li></ul> +<dl><dd>Tworzy odstęp dla treści o określoną wartość. +</dd></dl> +<p>Te własności dotyczą wszelkiej treści tekstowej w elemencie, nie tylko tekstu. +Pamiętaj też, że są one dziedziczone przez elementy dzieci, zatem będzie trzeba bezpośrednio wyłączyć je dla dzieci, aby uniknąć dziwnych rezultatów. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Aby wycentrować nagłówki: +<div style="width: 30em;"> +<pre class="eval"> h3 { + border-top: 1px solid gray; + text-align: center; + } +</pre> +</div> +<p>Wynik: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> +</td></tr></tbody></table> +<p>W dokumencie HTML treść wyświetlana pod nagłówkiem nie jest strukturalnie przynależna do nagłówka. +Zatem kiedy określasz nagłówek w taki sposób, znaczniki poniżej nagłówka nie dziedziczą stylu. +</p> +</td></tr></tbody></table> +<h4 id="P.C5.82ywanie_.28Floats.29" name="P.C5.82ywanie_.28Floats.29"> Pływanie (Floats) </h4> +<p>Własność <code>float</code> wymusza umieszczenie elementu po lewej lub prawej. +Jest to prosty sposób, aby kontrolować jego położenie i rozmiar. +</p><p>Reszta dokumentu opływa wybrany element. +Możesz to kontrolować, używając własności <code>clear</code> na innych elementach, aby sprawić, by nie opływały elementów posiadających określony <code>float</code>. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td>W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony. +<p>Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej: +</p> +<div style="width: 30em;"> +<pre class="eval"> ul, #numbered {float: left;} + h3 {clear: left;} +</pre> +</div> +<p>Rezultat wygląda tak: +</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> +<tbody><tr> +<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> +</div> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> +<div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> +</div> +</td></tr></tbody></table> +<p>(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.) +</p> +</td></tr></tbody></table> +<h4 id="Pozycjonowanie" name="Pozycjonowanie"> Pozycjonowanie </h4> +<p>Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności <code>position</code> oraz podanie jednej z następujących wartości. +</p><p>Są to własności zaawansowane. +Można ich używać w prosty sposób — dlatego są tutaj wymienione. +Jednak korzystanie z nich w bardziej złożony sposób może być skomplikowane. +</p> +<ul><li><code>relative</code> +</li></ul> +<dl><dd>Pozycja elementu jest określona relatywnie do jego normalnej pozycji. +</dd><dd>Użyj tej wartości, aby przesunąć element o określoną wartość. Czasem możesz użyć marginesu zewnętrznego, aby osiągnąć ten sam efekt. +</dd></dl> +<ul><li><code>fixed</code> +</li></ul> +<dl><dd>Element będzie przyczepiony. +</dd><dd>Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu. +</dd></dl> +<ul><li><code>absolute</code> +</li></ul> +<dl><dd>Pozycja elementu jest ustawiana relatywnie do elementu rodzica. +</dd><dd>Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem <code>relative</code>, <code>fixed</code> lub <code>absolute</code>. +</dd></dl> +<dl><dd>Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu <code>position: relative;</code> bez podawania wartości przesunięcia. +</dd></dl> +<ul><li><code>static</code> +</li></ul> +<dl><dd>Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie. +</dd></dl> +<p>Razem z tymi wartościami własności <code>position</code> (poza <code>static</code>) podaj jedną lub więcej własności: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Przykład +</caption><tbody><tr> +<td> Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku: +<div style="width: 30em;"> +<pre class="eval"> <DIV id="parent-div"> + <P id="forward">/</P> + <P id="back">\</P> + </DIV> +</pre> +</div> +<p>W swoim arkuszu stylów nadaj rodzicowi wartość <code>relative</code> własności <code>position</code>. +Nie musisz podawać żadnego przesunięcia. +Określ wartość własności <code>position</code> jego dzieci jako <code>absolute</code>: +</p> +<div style="width: 30em;"><pre> + #parent-div { + position: relative; + font: bold 200% sans-serif; + } + + #forward, #back { + position: absolute; + margin:0px; + top: 0px; + left: 0px; + } + + #forward { + color: blue; + } + + #back { + color: red; + } +</pre></div> +<p>Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem: +</p> +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div><table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + +<tbody><tr><td></td></tr></tbody></table> +<p><br> +</p> +</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> Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>. +<p>Jeżeli tworzysz arkusze stylów, które mają działać w wielu przeglądarkach, musisz także wziąć pod uwagę różnice w sposobie interpretacji standardów oraz prawdopodobne błędy w obsłudze standardów występujące w różnych przeglądarkach. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_Definiowanie_uk.C5.82adu" name="Zadanie:_Definiowanie_uk.C5.82adu"> Zadanie: Definiowanie układu </h3> +<p>Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji <b>Struktura dokumentu</b> i <b>Pływanie</b>. +</p><p>W przykładzie z <b>Pływanie</b> dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed +<p><code></BODY></code> +</p> +<pre> + <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> +<p>Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz: +</p> +<table style="border: 2px solid #ccc;"> +<tbody><tr> +<td><img alt="Image:Yellow-pin.png"> +</td></tr></tbody></table> +<p>Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie. +Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację. +</p><p>Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu. +</p><p>Odśwież okno przeglądarki i zmniejsz rozmiar okna. +Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument. +</p> +<div style="position: relative; width: 29.5em; height: 18em;"> <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> <ul style=""> <li>Arctic</li> <li>Atlantic</li> <li>Pacific</li> <li>Indian</li> <li>Southern</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> <p><b>1: </b>Lorem ipsum</p> <p><b>2: </b>Dolor sit</p> <p><b>3: </b>Amet consectetuer</p> <p><b>4: </b>Magna aliquam</p> <p><b>5: </b>Autem veleum</p> </div> <p style=""> </p> <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin"></div> </div> +</div> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Właśnie poznałeś(aś) wszystkie zagadnienia należące do podstawowego kursu CSS. +Następna strona dokładniej opisze zaawansowane selektory dla reguł CSS oraz trochę szczegółów dotyczących tabel: <b><a href="pl/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }} diff --git a/files/pl/web/css/na_początek/wiązania_xbl/index.html b/files/pl/web/css/na_początek/wiązania_xbl/index.html new file mode 100644 index 0000000000..9218b33797 --- /dev/null +++ b/files/pl/web/css/na_początek/wiązania_xbl/index.html @@ -0,0 +1,176 @@ +--- +title: Wiązania XBL +slug: Web/CSS/Na_początek/Wiązania_XBL +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +<p> +</p><p>Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia. +</p><p>Wykorzystasz te techniki w przykładowej demonstracji. +</p> +<h3 id="Informacja:_Wi.C4.85zania_XBL" name="Informacja:_Wi.C4.85zania_XBL"> Informacja: Wiązania XBL </h3> +<p>Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu. +</p><p>Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do <i>przed</i> i <i>za</i> wybranym elementem. +</p><p>Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: <i>XBL</i> (Język Wiązań XML). +Możesz używać XBL-a do wiązania wybranych elementów: +</p> +<ul><li>arkuszy stylów, +</li><li>zawartości, +</li><li>właściwości i metod, +</li><li>uchwytów zdarzeń. +</li></ul> +<p>Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o <a href="pl/XBL">XBL</a> na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XBL-a" name="Zadanie:_Demonstracja_XBL-a"> Zadanie: Demonstracja XBL-a </h3> +<p>Stwórz nowy dokument HTML, <code>doc6.html</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style6.css"></strong> +</HEAD> + +<BODY> +<H1>XBL demonstration</H1> +<DIV id="square">Click Me</DIV> +</BODY> + +</HTML> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style6.css</code>. +Ten arkusz stylów zawiera style dokumentu. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +#square { + -moz-binding: url("square.xbl#square"); + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>square.xbl</code>. +Ten plik zawiera wiązanie XBL. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<!DOCTYPE bindings> +<bindings xmlns="http://www.mozilla.org/xbl"> + +<binding id="square"> + + <resources> + <stylesheet src="bind6.css"/> + </resources> + + <content xmlns="http://www.w3.org/1999/xhtml"> + <div anonid="square"/> + <button anonid="button" type="button"> + <xbl:children/> + </button> + </content> + + <implementation> + + <field name="square"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "square") + ]]></field> + + <field name="button"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "button") + ]]></field> + + <method name="doDemo"> + <body><![CDATA[ + this.square.style.backgroundColor = "#cf4" + this.square.style.marginLeft = "20em" + this.button.setAttribute("disabled", "true") + setTimeout(this.clearDemo, 2000, this) + ]]></body> + </method> + + <method name="clearDemo"> + <parameter name="me"/> + <body><![CDATA[ + me.square.style.backgroundColor = "transparent" + me.square.style.marginLeft = "0" + me.button.removeAttribute("disabled") + ]]></body> + </method> + + </implementation> + + <handlers> + <handler event="click" button="0"><![CDATA[ + if (event.originalTarget == this.button) this.doDemo() + ]]></handler> + </handlers> + + </binding> + +</bindings> +</pre></div> +<p>Stwórz nowy plik CSS, <code>bind6.css</code>. +Ten arkusz stylów zawiera style do wiązań. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +[anonid="square"] { + width: 20em; + height: 20em; + border: 2px inset gray; + } + +[anonid="button"] { + margin-top: 1em; + padding: .5em 2em;" + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +</p><p>To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. +Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku: +</p> +<table> +<tbody><tr> +<td style="padding-right: 2em;"> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;"> +<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;"> +<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript. +</li><li>Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie. +</li><li>Arkusz stylów dokumentu posiada odnośnik do wiązania. +</li><li>Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor. +<p>Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość. +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji obiekt square oraz przycisk tworzą kompletną <i>kontrolkę</i>, która działa wewnątrz dokumentu HTML. +</p><p>Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. +Demonstruje to następna strona: +<b><a href="pl/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }} diff --git a/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html new file mode 100644 index 0000000000..c185657258 --- /dev/null +++ b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html @@ -0,0 +1,299 @@ +--- +title: XUL-owe interfejsy użytkownika +slug: Web/CSS/Na_początek/XUL-owe_interfejsy_użytkownika +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +<p> +</p><p>Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów. +</p><p>Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko. +</p> +<h3 id="Informacja:_Interfejsy_u.C5.BCytkownika" name="Informacja:_Interfejsy_u.C5.BCytkownika"> Informacja: Interfejsy użytkownika </h3> +<p>Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji. +</p><p>Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: <i>XUL</i> (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "<i>zool</i>"). +</p><p>W XUL-u, wiele często używanych funkcji interfejsu użytkownika jest wbudowanych. Na przykład, XUL dostarcza wyspecjalizowane typy okien jak okna dialogowe czy kreatory (wizards), oraz paski statusu, menu, paski narzędziowe, a nawet przeglądarki. +</p><p>Bardziej wyspecjalizowane funkcje, mogą zostać zbudowane z elementów przy użyciu XUL-a i innych technologii, które poznałeś(aś) w tym kursie: stylów CSS, kodu JavaScript, wiązań XBL. +</p><p>Jak inne języki XML-owe, XUL używa arkuszy stylów CSS. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o <a href="pl/XUL">XUL</a>-u na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XUL-a" name="Zadanie:_Demonstracja_XUL-a"> Zadanie: Demonstracja XUL-a </h3> +<p>Stwórz nowy dokument XUL jako czysty plik tekstowy, <code>doc7.xul</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<?xml-stylesheet type="text/css" href="style7.css"?> +<!DOCTYPE window> + +<window + xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + title="CSS Getting Started - XUL demonstration" + onload="init();"> + +<script type="application/x-javascript" src="script7.js"/> + +<label class="head-1" value="XUL demonstration"/> + +<vbox> + + <groupbox class="demo-group"> + <caption label="Day of week calculator"/> + <grid> + <columns> + <column/> + <column/> + </columns> + <rows> + <row> + <label class="text-prompt" value="Date:" + accesskey="D" control="date-text"/> + <textbox id="date-text" type="timed" + timeout="750" oncommand="refresh();"/> + </row> + <row> + <label value="Day:"/> + <hbox id="day-box"> + <label class="day" value="Sunday" disabled="true"/> + <label class="day" value="Monday" disabled="true"/> + <label class="day" value="Tuesday" disabled="true"/> + <label class="day" value="Wednesday" disabled="true"/> + <label class="day" value="Thursday" disabled="true"/> + <label class="day" value="Friday" disabled="true"/> + <label class="day" value="Saturday" disabled="true"/> + </hbox> + </row> + </rows> + </grid> + <hbox class="buttons"> + <button id="clear" label="Clear" accesskey="C" + oncommand="clearDate();"/> + <button id="today" label="Today" accesskey="T" + oncommand="setToday();"/> + </hbox> + </groupbox> + + <statusbar> + <statusbarpanel id="status"/> + </statusbar> + +</vbox> + +</window> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style7.css</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XUL demonstration ***/ +window { + -moz-box-align: start; + background-color: -moz-dialog; + font: -moz-dialog; + padding: 2em; + } + +.head-1 { + font-weight: bold; + font-size: 200%; + padding-left: 5px; + } + + +/* the group box */ +.demo-group { + padding: 1em; + } + +.demo-group grid { + margin-bottom: 1em; + } + +.demo-group column { + margin-right: .5em; + } + +.demo-group row { + margin-bottom: .5em; + } + +.demo-group .buttons { + -moz-box-pack: end; + } + + +/* the day-of-week labels */ +.day { + margin-left: 1em; + } + +.day[disabled] { + color: #777; + } + +.day:first-child { + margin-left: 4px; + } + + +/* the left column labels */ +.text-prompt { + padding-top: .25em; + } + + +/* the date input box */ +#date-text { + max-width: 8em; + } + + +/* the status bar */ +statusbar { + width: 100%; + border: 1px inset -moz-dialog; + margin: 4px; + padding: 0px 4px; + } + +#status { + padding: 4px; + } + +#status[warning] { + color: red; + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>script7.js</code>. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>// XUL demonstration + +var dateBox, dayBox, currentDay, status; // elements + +// called by window onLoad +function init() { + dateBox = document.getElementById("date-text") + dayBox = document.getElementById("day-box") + status = document.getElementById("status") + setToday(); + } + +// called by Clear button +function clearDate() { + dateBox.value = "" + refresh() + } + +// called by Today button +function setToday() { + var d = new Date() + dateBox.value = (d.getMonth() + 1) + + "/" + d.getDate() + + "/" + d.getFullYear() + refresh() + } + +// called by Date textbox +function refresh() { + var d = dateBox.value + var theDate = null + + showStatus(null) + if (d != "") { + try { + var a = d.split("/") + var theDate = new Date(a[2], a[0] - 1, a[1]) + showStatus(theDate) + } + catch (ex) {} + } + setDay(theDate) + } + +// internal +function setDay(aDate) { + if (currentDay) currentDay.setAttribute("disabled", "true") + if (aDate == null) currentDay = null + else { + var d = aDate.getDay() + currentDay = dayBox.firstChild + while (d-- > 0) currentDay = currentDay.nextSibling + currentDay.removeAttribute("disabled") + } + dateBox.focus() + } + +function showStatus(aDate) { + if (aDate == null) { + status.removeAttribute("warning") + status.setAttribute("label", "") + } + else if (aDate === false || isNaN(aDate.getTime())) { + status.setAttribute("warning", "true") + status.setAttribute("label", "Date is not valid") + } + else { + status.removeAttribute("warning") + status.setAttribute("label", aDate.toLocaleDateString()) + } + } +</pre></div> +<p>Aby zobaczyć właściwy wynik, użyj domyślnego motywu w swojej przeglądarce. +Jeżeli użyjesz innego, może on zmieniać trochę style interfejsu użytkownika i demonstracja może wyglądać dziwnie. +</p><p>Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu. +</p><p>To wiki nie obsługuje XUL-a ani JavaScript-u na stronach, nie jest więc możliwe pokazanie demonstracji tutaj. +Wygląda ona mniej więcej tak: +</p> +<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;"> +<tbody><tr> +<td><p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> +<div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> +<p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;"> +Day of week calculator</p> +<table style="background-color: threedface; margin: .5em; padding-right: .5em;"> +<tbody><tr> +<td style="padding-right: .5em;"><u>D</u>ate: +</td><td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005 +</td></tr> +<tr> +<td>Day:</td><td style="color: graytext;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday +</td></tr> +<tr> +<td> +</td><td><div style="float: right; margin-top: .5em;"> +<p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> +<span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span> +</p> +</div> +</td></tr></tbody></table> +</div> +<div style="border: 1px inset threedface; margin-top: 1em;"> +<p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> +</div> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument XUL posiada odnośniki do arkuszy stylów, a także do skryptów. +</li><li>Skrypt nie jest zbyt ważny w tej demonstracji. +</li><li>Większość stylu, który widzisz, jest określona przez motyw graficzny przeglądarki. +</li></ul> +<p>Sprawdź arkusz stylów dokumentu, aby upewnić się, że rozumiesz wszystkie reguły w nim zawarte. +Jeżeli jest jakaś reguła, której nie rozumiesz, wykomentuj ją i odśwież przeglądarkę, aby zobaczyć różnicę. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL. +<p>Znajdź <i>klasę</i> elementu <code>html:input</code>. To jest element, który przyjmuje dane od użytkownika. +</p><p>Korzystając z tej wiedzy, dodaj regułę do arkusza stylów, która sprawia, że tło pola Date będzie jasno niebieskie kiedy jest ono aktywne dla klawiatury (ale białe kiedy jest nieaktywne). +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji, widzisz standardowe, prostokątne kształty, które są wspólne dla większości interfejsów użytkownika. +Mozilla wspiera także specjalny język graficzny do tworzenia kształtów, którego styl tworzy się w CSS-ie. +</p><p>Demonstruje to następna strona: <b><a href="pl/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }} diff --git a/files/pl/web/css/opacity/index.html b/files/pl/web/css/opacity/index.html new file mode 100644 index 0000000000..9b3e1504ff --- /dev/null +++ b/files/pl/web/css/opacity/index.html @@ -0,0 +1,180 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/opacity +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Parametr<code> opacity</code> ustala przezroczystość elementu, czyli stopień, w jakim są widoczne elementy za określonym elementem.</p> + +<ul> + <li><span class="lang lang-en">Wartość początkowa: 1 (nieprzezroczysty)</span></li> + <li>Dotyczy: wszystkie elementy</li> + <li><span class="lang lang-en">Dziedziczone: nie</span></li> + <li>Media: <span class="lang lang-en"> <code><a href="../../en/CSS/Media/Visual" rel="custom">visual</a></code> </span></li> + <li><span class="lang lang-en">Wartość obliczona</span>: ustalona liczba (w zakresie [<code>0.0</code>, <code>1.0</code>])</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="eval">opacity: <em>number</em> | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>0 (lub mniej)</dt> + <dd>Element jest w pełni przezroczysty (niewidoczny)</dd> + <dt>0 < liczba < 1</dt> + <dd>Element jest półprzezroczysty (tło może być widoczne)</dd> + <dt>1 (lub więcej)</dt> + <dd>Element jest w pełni nieprzezroczysty (jednolity)</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + opacity: 0.5; /* zobacz tło poprzez hbox */ +} +</pre> + +<h4 id="Przykład_kompatybilny_z_różnymi_przeglądarkami">Przykład kompatybilny z różnymi przeglądarkami</h4> + +<pre style="">pre { /* make the box translucent (20% nieprzezroczystości) */ + border: solid red; + opacity: 0.2; + filter: alpha(opacity=20); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<pre style="">pre { /* make the box translucent (50% nieprzezroczystości) */ + border: solid red; + opacity: 0.5; + filter: alpha(opacity=50); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<pre style="">pre { /* make the box translucent (80% nieprzezroczystości) */ + border: solid red; + opacity: 0.8; + filter: alpha(opacity=80); /* IE8 i starsze */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +} +</pre> + +<h4 id="Różna_nieprzezroczystość_z_hover">Różna nieprzezroczystość z :hover</h4> + +<pre class="deki-transform"><html> +<head> +<style> +img.opacity { + opacity: 1; + filter: alpha(opacity=50); + zoom: 1; + } + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=100); + zoom: 1; + } +</style> +</head> + +<body> +<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /> +</body> +</html> +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Kompatybilność z przeglądarkami</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Element</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td rowspan="3">Podstawowe wsparcie</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">1.2 (125)</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (oba to synonimy)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 156px; width: 827px;"> + <tbody> + <tr> + <th>Element</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td rowspan="3">Podstawowe wsparcie</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">3.2</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (oba to synonimy)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>Przed wersją 9, Internet Explorer nie wspierał <code>opacity</code>, zamiast tego należało używać <code>filter</code>.</li> + <li>IE supports also the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. This is needless, so don't use it.</li> + <li>IE8 wprowadził <code>-ms-filter</code>, jednak jest to synonim do <code>filter</code>. Nie używaj wersji z prefiksem.</li> + <li><code>-moz-opacity</code>, <code>-khtml-opacity</code> nie są wspierane od początku 2004 roku.<br> + Konqueror zaczął wspierać <code>opacity</code> od wersji 4.0. Nie używaj więcej <code>-khtml-opacity</code> ani <code>-moz-opacity</code>.</li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}</li> +</ul> diff --git a/files/pl/web/css/outline-offset/index.html b/files/pl/web/css/outline-offset/index.html new file mode 100644 index 0000000000..025d8295a1 --- /dev/null +++ b/files/pl/web/css/outline-offset/index.html @@ -0,0 +1,42 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-offset +--- +<div>{{CSSRef}}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach Mozilli <code>-moz-outline-offset</code> jest używane do ustawienia odstępu między konturem a krawędzią lub obramowaniem elementu. Kontur jest linią rysowaną wokół elementów, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<p>{{cssinfo}}</p> + +<p>Odstęp będzie przezroczysty (rodzic określi tło).</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">-moz-outline-offset: <liczba> | inherit +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt><number></dt> + <dd>Szerokość odstępu.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>hbox.example { + /* Odsuwa kontur 2px od obramowania */ + -moz-outline-offset: 2px; +} +</pre> + +<p> </p> diff --git a/files/pl/web/css/outline/index.html b/files/pl/web/css/outline/index.html new file mode 100644 index 0000000000..42bf295b72 --- /dev/null +++ b/files/pl/web/css/outline/index.html @@ -0,0 +1,57 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline +--- +<div> +<div>{{CSSRef}}</div> +</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>W aplikacjach opartych na Gecko <code>-moz-outline</code> jest używany do ustawiania konturu elementu. Kontur jest linią rysowaną na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">-moz-outline: [<em>-moz-outline-color</em> || <em>-moz-outline-style</em> || <em>-moz-outline-width</em> | inherit]; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>-moz-outline-color</dt> + <dd>Ustawia kolor konturu. Zobacz {{ Cssxref("-moz-outline-color") }}.</dd> + <dt>-moz-outline-style</dt> + <dd>Ustawia styl konturu. Zobacz {{ Cssxref("-moz-outline-style") }}.</dd> + <dt>-moz-outline-width</dt> + <dd>Ustawia szerokość konturu. Zobacz {{ Cssxref("-moz-outline-width") }}.</dd> +</dl> + +<h2 id="Powi.C4.85zane_w.C5.82asno.C5.9Bci" name="Powi.C4.85zane_w.C5.82asno.C5.9Bci">Powiązane własności</h2> + +<ul> + <li>{{ Cssxref("-moz-outline-color") }} ustawia kolor konturu.</li> + <li>{{ Cssxref("-moz-outline-offset") }} odsuwa kontur od elementu.</li> + <li>{{ Cssxref("-moz-outline-radius") }} ustawia zaokrąglenie rogów konturu.</li> + <li>{{ Cssxref("-moz-outline-radius-bottomleft") }} ustawia zaokrąglenie dolnego lewego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-bottomright") }} ustawia zaokrąglenie dolnego prawego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-topleft") }} ustawia zaokrąglenie górnego lewego rogu.</li> + <li>{{ Cssxref("-moz-outline-radius-topright") }} ustawia zaokrąglenie górnego prawego rogu.</li> + <li>{{ Cssxref("-moz-outline-style") }} ustawia styl konturu.</li> + <li>{{ Cssxref("-moz-outline-width") }} ustawia szerokość konturu.</li> +</ul> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="brush:css">hbox.example { + /* ciągły czerwony kontur o szerokości 10px */ + -moz-outline: red solid 10px; +}</pre> diff --git a/files/pl/web/css/page-break-after/index.html b/files/pl/web/css/page-break-after/index.html new file mode 100644 index 0000000000..b8b3dbbb63 --- /dev/null +++ b/files/pl/web/css/page-break-after/index.html @@ -0,0 +1,101 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - druk +translation_of: Web/CSS/page-break-after +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Akapit podsumowania. Właściwość CSS <code>page-break-after</code> dostosowuje łamanie stron CSS <em>po</em> bieżącym elemencie.</p> + +<ul class="cssprop"> + <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("auto") }}</li> + <li><dfn>Stosowana do</dfn> elementów blokowych</li> + <li><dfn>{{ Xref_cssinherited() }}</dfn> nie</li> + <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li> + <li><dfn>{{ Xref_csscomputed() }}</dfn> według życzenia</li> +</ul> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">page-break-after: auto | always | avoid | left | right | inherit +</pre> + +<h2 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h2> + +<dl> + <dt>auto</dt> + <dd>{{ Xref_cssinitial() }}. Samoczynne łamanie stron (dozwolone ale nie wymuszone).</dd> + <dt>always</dt> + <dd>Zawsze wymusza łamanie strony po elemencie.</dd> + <dt>avoid {{ Unimplemented_inline() }}</dt> + <dd>Unika łamania stron po elemencie.</dd> + <dt>left {{ Unimplemented_inline() }}</dt> + <dd>Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako lewa.</dd> + <dt>right {{ Unimplemented_inline() }}</dt> + <dd>Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako prawa.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre>/* przejdź do następnej strony po przypisach */ +DIV.footnotes { page-break-after:always; }</pre> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>---</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1">W3C Cascading Style Sheets, level 1</a> (secondary)</li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>(Próbna tabela kompatybilności)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>7.0</td> + </tr> + <tr> + <td>Safari</td> + <td>1.2</td> + </tr> + <tr> + <td>Konqueror</td> + <td>4.7.2</td> + </tr> + </tbody> +</table> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<ul> + <li>(zastąp własność) {{ Cssxref("page-break-before") }}, {{ Cssxref("page-break-inside") }}, {{ Cssxref("orphans") }}, {{ Cssxref("widows") }}, {{ bug("132035") }}</li> +</ul> diff --git a/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html new file mode 100644 index 0000000000..fad2ac55d1 --- /dev/null +++ b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html @@ -0,0 +1,68 @@ +--- +title: 'Prywatność i znacznik :visited' +slug: 'Web/CSS/Prywatnosc_i_znacznik_:visited' +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +<div>{{cssref}}</div> + +<p>Przed mniej więcej rokiem 2010, <a href="/en-US/docs/Web/CSS">CSS</a>-owy znacznik {{ cssxref(":visited") }} pozwalał stronom WWW na ujawnianie historii przeglądania użytkownika i które ze stron odwiedził. Było to możliwe przez {{domxref("window.getComputedStyle")}} i inne techniki. Proces ten działał błyskawicznie i pozwalał nie tylko na ujawnienie, co użytkownik robił w sieci, ale również pozwalał na dowiedzenie się wielu informacji o jego tożsamości.</p> + +<p>By załagodzić ten problem, w {{ Gecko("2") }} zaimplementowano aktualizacje dot. prywatności celem ograniczenia ilości informacji zbieranych przez odwiedzone linki. W przypadku innych przeglądarek dokonano podobnych zmian.</p> + +<h2 id="Małe_białe_kłamstewka">Małe, białe kłamstewka</h2> + +<p>By chronić prywatność użytkowników, Firefox i inne przeglądarki będą kłamać aplikacjom webowym w przypadku zaistnienia poniższych okoliczności:</p> + +<ul> + <li>Metoda <code>window.getComputedStyle</code> i podobne funkcje, jak {{ domxref("element.querySelector") }} zawsze zwrócą wartości wykazujące, jakoby użytkownik nigdy nie odwiedził żadnego z linku danej strony.</li> + <li>Jeśli użyjesz selektora rodzeństwa, jak <code>:visited + span</code>, element sąsiedni (w omawianym przypadku <code>span</code>) zostanie ostylowany w sposób właściwy dla linka nieodwiedzonego.</li> + <li>W rzadkich przypadkach, jeśli zastosujesz zagnieżdżone elementy linków i okaże się, że dobrany element jest inny, niż link, którego obecność w historii jest testowana, element zostanie wyrenderowany również, jakby nigdy nie był wcześniej odwiedzany.</li> +</ul> + +<h2 id="Limits_to_visited_link_styles">Limits to visited link styles</h2> + +<p>You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:</p> + +<ul> + <li>{{ cssxref("color") }}</li> + <li>{{ cssxref("background-color") }}</li> + <li>{{ cssxref("border-color") }} (and its sub-properties)</li> + <li>{{ cssxref("column-rule-color") }}</li> + <li>{{ cssxref("outline-color") }}</li> + <li>The color parts of the {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} attributes</li> +</ul> + +<p>In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using <code><a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba()</a></code>, <code><a href="/en-US/docs/Web/CSS/color_value#hsla()">hsla()</a></code>, or the <code><a href="/en-US/docs/Web/CSS/color_value#transparent">transparent</a></code> keyword.</p> + +<p>Here is an example of how to use styles with the aforementioned restrictions:</p> + +<pre class="brush: css">:link { + outline: 1px dotted blue; + background-color: white; + /* The default value of background-color is `transparent`. You need to + specify a different value, otherwise changes on :visited won't apply. */ +} + +:visited { + outline-color: orange; /* Visited links have an orange outline */ + background-color: green; /* Visited links have a green background */ + color: yellow; /* Visited links have yellow colored text */ +} +</pre> + +<h2 id="Impact_on_web_developers">Impact on web developers</h2> + +<p>Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:</p> + +<ul> + <li>Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.</li> + <li>Colors that are otherwise transparent will fail to appear if styled in a <code>:visited</code> selector.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/" title="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">privacy-related changes coming to CSS :visited</a> on Mozilla Hacks</li> + <li><a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/" title="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Plugging the CSS History Leak</a> on the Mozilla Security Blog</li> + <li><a class="external" href="http://dbaron.org/mozilla/visited-privacy">Preventing attacks on a user's history through CSS :visited selectors</a></li> +</ul> diff --git a/files/pl/web/css/right/index.html b/files/pl/web/css/right/index.html new file mode 100644 index 0000000000..8ba4fb3b11 --- /dev/null +++ b/files/pl/web/css/right/index.html @@ -0,0 +1,148 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS Property + - Własność CSS + - border +translation_of: Web/CSS/right +--- +<div>{{CSSRef}}</div> + +<p>Własność <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <code>right</code> pełni ważną rolę w określaniu pionowej pozycji pozycjonowanego elementu. Nie ma wpływu na elementy z nieokreślonym położeniem.</p> + +<p>{{EmbedInteractiveExample("pages/css/right.html")}}</p> + + + +<p>Efekt <code>right</code> jest zależny od pozycji elementu (czyli od własności <code>position </code>elementu).</p> + +<ul> + <li>When <code>position</code> is set to <code>absolute</code> or <code>fixed</code>, the <code>right</code> property specifies the distance between the element's right edge and the right edge of its containing block.</li> + <li>When <code>position</code> is set to <code>relative</code>, the <code>right</code> property specifies the distance the element's right edge is moved to the left from its normal position.</li> + <li>When <code>position</code> is set to <code>sticky</code>, the <code>right</code> property behaves like its <code>position</code> is <code>relative</code> when the element is inside the viewport, and like its <code>position</code> is <code>fixed</code> when it is outside.</li> + <li>When <code>position</code> is set to <code>static</code>, the <code>right</code> property has <em>no effect</em>.</li> +</ul> + +<p>When both {{cssxref("left")}} and <code>right</code> are defined, and the element cannot stretch to satisfy both, the position of the element is<em> overspecified</em>. When this is the case, the <code>left</code> value has precedence when the container is left-to-right; the <code>right</code> value has precedence when the container is right-to-left.</p> + +<h2 id="Syntax" name="Syntax">Składnia</h2> + +<pre class="brush:css no-line-numbers">/* Wartość liczbowa (długość) */ +right: 3px; +right: 2.4em; + +/* Wartość procentowa */ +right: 10%; + +/* Wartość kluczowa */ +right: auto; + +/* Wartości globalne */ +right: inherit; +right: initial; +right: unset; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Negatywna, pozytywna lub o wartości <code>null </code>długość, która dla:</dd> + <dd> + <ul> + <li>elementów z <code>position: absolute</code>, określa odległość do prawej krawędzi rodzica</li> + <li>elementów z <code>position: relative</code>, określa czy element jest przeniesiony do lewej krawędzi jej normalnej (domyślnej) pozycji</li> + </ul> + </dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Wartość procentowa określa procentową odległość w stosunku do szerokości rodzica. </dd> + <dt></dt> + <dt><code>auto</code></dt> + <dd>Specifies that: + <ul> + <li>for <em>absolutely positioned elements</em>, the position of the element is based on the {{Cssxref("left")}} property, while <code>width: auto</code> is treated as a width based on the content; or if <code>left</code> is also <code>auto</code>, the element is positioned where it should horizontally be positioned if it were a static element.</li> + <li>for <em>relatively positioned elements</em>, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if <code>left</code> is also <code>auto</code>, the element is not moved horizontally at all.</li> + </ul> + </dd> + <dt><code>inherit</code></dt> + <dd>Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or the <code>auto</code> keyword.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Przykłady</h2> + +<pre class="brush: css; highlight:[16]">#example_3 { + width: 100px; + height: 100px; + background-color: #FFC7E4; + position: relative; + top: 20px; + left: 20px; +} + +#example_4 { + width: 100px; + height: 100px; + background-color: #FFD7C2; + position: absolute; + bottom: 10px; + right: 20px; +}</pre> + +<pre class="brush: html"><div id="example_3">Example 3</div> +<div id="example_4">Example 4</div> +</pre> + +<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p> + +<h2 id="Specifications" name="Specifications">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiuje <code>right </code>jako animatable (możliwy do animowania)</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td> + <p>Określa zachowanie dla <code>sticky position</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> + <p>Initial definition.</p> + </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarkami</h2> + + + +<p>{{Compat("css.properties.right")}}</p> + +<h2 id="Zobacz_jeszcze">Zobacz jeszcze</h2> + +<ul> + <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li> +</ul> diff --git a/files/pl/web/css/rozszerzenia_webkit/index.html b/files/pl/web/css/rozszerzenia_webkit/index.html new file mode 100644 index 0000000000..0b60bd4475 --- /dev/null +++ b/files/pl/web/css/rozszerzenia_webkit/index.html @@ -0,0 +1,358 @@ +--- +title: Rozszerzenia WebKit +slug: Web/CSS/Rozszerzenia_WebKit +tags: + - CSS + - Referencje CSS +translation_of: Web/CSS/WebKit_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Webkit wspiera wiele rozszerzeń dedykowanych <a href="/en-US/docs/Web/CSS">CSS</a> opatrzonych prefiksem <code>-webki</code>t. Wszystkie właściwości opatrzone prefiksem <code>-webkit</code> działają również z prefiksem <code>-apple</code>.</p> + +<p>Niektóre z tych właściwości zostały zawarte w szkicu specyfikacji CSS w celu włączenia do ostatecznej rekomendacji, ale są one jeszcze eksperymentalne. Niektóre z tych niestandardowych właściwości nie wchodzą w skład linii standardowo obowiązującej.</p> + +<h2 id="Jednostki_z_prefiksem_WebKit_obowiązującego_standardu">Jednostki z prefiksem WebKit obowiązującego standardu</h2> + +<div class="index"> +<h3 id="A_–_C">A – C</h3> + +<ul> + <li>{{cssxref("-webkit-column-count")}}</li> + <li>{{cssxref("-webkit-column-gap")}}</li> + <li>{{cssxref("-webkit-column-width")}}</li> + <li>{{cssxref("-webkit-column-rule")}}</li> + <li>{{cssxref("-webkit-column-rule-width")}}</li> + <li>{{cssxref("-webkit-column-rule-style")}}</li> + <li>{{cssxref("-webkit-column-rule-color")}}</li> + <li>{{cssxref("-webkit-columns")}}</li> + <li>{{cssxref("-webkit-column-span")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{cssxref("-webkit-font-feature-settings")}}</li> + <li>{{cssxref("-webkit-font-kerning")}}</li> + <li>{{cssxref("-webkit-font-size-delta")}}</li> + <li>{{cssxref("-webkit-font-variant-ligatures")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{cssxref("-webkit-grid-column")}}</li> + <li>{{cssxref("-webkit-grid-row")}}</li> +</ul> + +<h3 id="H_–_O">H – O</h3> + +<ul> + <li>{{cssxref("-webkit-hyphens")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{cssxref("-webkit-mask")}}</li> + <li>{{cssxref("-webkit-mask-clip")}}</li> + <li>{{cssxref("-webkit-mask-composite")}}</li> + <li>{{cssxref("-webkit-mask-image")}}</li> + <li>{{cssxref("-webkit-mask-origin")}}</li> + <li>{{cssxref("-webkit-mask-position")}}</li> + <li>{{cssxref("-webkit-mask-position-x")}}</li> + <li>{{cssxref("-webkit-mask-position-y")}}</li> + <li>{{cssxref("-webkit-mask-repeat")}}</li> + <li>{{cssxref("-webkit-mask-repeat-x")}}</li> + <li>{{cssxref("-webkit-mask-repeat-y")}}</li> + <li>{{cssxref("-webkit-mask-size")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{cssxref("-webkit-perspective")}}</li> + <li>{{cssxref("-webkit-perspective-origin")}}</li> +</ul> + +<h3 id="Q_–_Z">Q – Z</h3> + +<ul> + <li>{{cssxref("-webkit-region-fragment")}}</li> + <li>{{cssxref("-webkit-shape-outside")}}</li> + <li>{{cssxref("-webkit-text-emphasis")}}</li> + <li>{{cssxref("-webkit-text-emphasis-color")}}</li> + <li>{{cssxref("-webkit-text-emphasis-position")}}</li> + <li>{{cssxref("-webkit-text-emphasis-style")}}</li> + <li>{{cssxref("-webkit-transform")}}</li> + <li>{{cssxref("-webkit-transform-origin")}}</li> + <li>{{cssxref("-webkit-transform-style")}}</li> + <li>{{cssxref("-epub-word-break")}}</li> + <li>{{cssxref("-epub-writing-mode")}}</li> +</ul> +</div> + +<h2 id="Jednostki_z_prefiksem_WebKit_z_odpowiednikiem_bez_prefiksu">Jednostki z prefiksem WebKit z odpowiednikiem bez prefiksu</h2> + +<p>W celu maksymalizacji kompatybilności z Twoim CSS powinienneś/powinnaś stosować właściwości standardu bez prefiksu zamiast opcji z prefiksem. Poniżej znajduje się lista wszystkich wariantów:</p> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{cssxref("-webkit-animation")}}</li> + <li>{{cssxref("-webkit-animation-delay")}}</li> + <li>{{cssxref("-webkit-animation-direction")}}</li> + <li>{{cssxref("-webkit-animation-duration")}}</li> + <li>{{cssxref("-webkit-animation-fill-mode")}}</li> + <li>{{cssxref("-webkit-animation-iteration-count")}}</li> + <li>{{cssxref("-webkit-animation-name")}}</li> + <li>{{cssxref("-webkit-animation-play-state")}}</li> + <li>{{cssxref("-webkit-animation-timing-function")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{cssxref("-webkit-backface-visibility")}}</li> + <li>{{cssxref("-webkit-background-clip")}}</li> + <li>{{cssxref("-webkit-background-origin")}}</li> + <li>{{cssxref("-webkit-background-size")}}</li> + <li>{{cssxref("-webkit-border-bottom-left-radius")}}</li> + <li>{{cssxref("-webkit-border-bottom-right-radius")}}</li> + <li>{{cssxref("-webkit-border-image")}}</li> + <li>{{cssxref("-webkit-border-radius")}}</li> + <li>{{cssxref("-webkit-border-top-left-radius")}}</li> + <li>{{cssxref("-webkit-border-top-right-radius")}}</li> + <li>{{cssxref("-webkit-box-sizing")}}</li> +</ul> + +<h3 id="C_–_N">C – N</h3> + +<ul> + <li>{{cssxref("-epub-caption-side")}}</li> +</ul> + +<h3 id="O_–_S">O – S</h3> + +<ul> + <li>{{cssxref("-webkit-opacity")}}</li> +</ul> + +<h3 id="T_–_Z">T – Z</h3> + +<ul> + <li>{{cssxref("-epub-text-transform")}}</li> + <li>{{cssxref("-webkit-transition")}}</li> + <li>{{cssxref("-webkit-transition-delay")}}</li> + <li>{{cssxref("-webkit-transition-duration")}}</li> + <li>{{cssxref("-webkit-transition-property")}}</li> + <li>{{cssxref("-webkit-transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Firmowe_jednostki_z_prefiksem_WebKit_(nie_do_używania_na_stronach_internetowych)">Firmowe jednostki z prefiksem WebKit (nie do używania na stronach internetowych)</h2> + +<div class="index"> +<h3 id="A_2">A</h3> + +<ul> + <li>{{cssxref("-webkit-appearance")}}</li> + <li>{{cssxref("-webkit-aspect-ratio")}}</li> + <li>{{cssxref(":-webkit-autofill")}}</li> +</ul> + +<h3 id="B_2">B</h3> + +<ul> + <li>{{cssxref("-webkit-background-composite")}}</li> + <li>{{cssxref("background-origin-x")}} (unprefixed!)</li> + <li>{{cssxref("background-origin-y")}} (unprefixed!)</li> + <li>{{cssxref("-webkit-border-after")}}</li> + <li>{{cssxref("-webkit-border-after-color")}}</li> + <li>{{cssxref("-webkit-border-after-style")}}</li> + <li>{{cssxref("-webkit-border-after-width")}}</li> + <li>{{cssxref("-webkit-border-before")}}</li> + <li>{{cssxref("-webkit-border-before-color")}}</li> + <li>{{cssxref("-webkit-border-before-style")}}</li> + <li>{{cssxref("-webkit-border-before-width")}}</li> + <li>{{cssxref("-webkit-border-end")}}</li> + <li>{{cssxref("-webkit-border-end-color")}}</li> + <li>{{cssxref("-webkit-border-end-style")}}</li> + <li>{{cssxref("-webkit-border-end-width")}}</li> + <li>{{cssxref("-webkit-border-fit")}}</li> + <li>{{cssxref("-webkit-border-horizontal-spacing")}}</li> + <li>{{cssxref("-webkit-border-start")}}</li> + <li>{{cssxref("-webkit-border-start-color")}}</li> + <li>{{cssxref("-webkit-border-start-style")}}</li> + <li>{{cssxref("-webkit-border-start-width")}}</li> + <li>{{cssxref("-webkit-border-vertical-spacing")}}</li> + <li>{{cssxref("-webkit-box-align")}}</li> + <li>{{cssxref("-webkit-box-direction")}}</li> + <li>{{cssxref("-webkit-box-flex")}}</li> + <li>{{cssxref("-webkit-box-flex-group")}}</li> + <li>{{cssxref("-webkit-box-lines")}}</li> + <li>{{cssxref("-webkit-box-ordinal-group")}}</li> + <li>{{cssxref("-webkit-box-orient")}}</li> + <li>{{cssxref("-webkit-box-pack")}}</li> + <li>{{cssxref("-webkit-box-reflect")}}</li> + <li>{{cssxref("-webkit-box-shadow")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{cssxref("-webkit-column-axis")}}</li> + <li>{{cssxref("-webkit-column-break-after")}}</li> + <li>{{cssxref("-webkit-column-break-before")}}</li> + <li>{{cssxref("-webkit-column-break-inside")}}</li> +</ul> + +<h3 id="D_E">D E</h3> + +<ul> + <li>{{cssxref("-webkit-dashboard-region")}}</li> +</ul> + +<h3 id="F_2">F</h3> + +<ul> + <li>{{cssxref("-webkit-filter")}}</li> + <li>{{cssxref("-webkit-font-smoothing")}}</li> +</ul> + +<h3 id="G_2">G</h3> + +<ul> + <li>{{cssxref("-webkit-grid-columns")}}</li> + <li>{{cssxref("-webkit-grid-rows")}}</li> +</ul> + +<h3 id="H_–_K">H – K</h3> + +<ul> + <li>{{cssxref("-webkit-highlight")}}</li> + <li>{{cssxref("-webkit-hyphenate-charset")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-after")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-before")}}</li> + <li>{{cssxref("-webkit-hyphenate-limit-lines")}}</li> + <li>{{cssxref("-webkit-image-set")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{cssxref("-webkit-line-align")}}</li> + <li>{{cssxref("-webkit-line-box-contain")}}</li> + <li>{{cssxref("-webkit-line-break")}}</li> + <li>{{cssxref("-webkit-line-clamp")}}</li> + <li>{{cssxref("-webkit-line-grid")}}</li> + <li>{{cssxref("-webkit-line-snap")}}</li> + <li>{{cssxref("-webkit-locale")}}</li> + <li>{{cssxref("-webkit-logical-height")}}</li> + <li>{{cssxref("-webkit-logical-width")}}</li> +</ul> + +<h3 id="M_2">M</h3> + +<ul> + <li>{{cssxref("-webkit-margin-after")}}</li> + <li>{{cssxref("-webkit-margin-after-collapse")}}</li> + <li>{{cssxref("-webkit-margin-before")}}</li> + <li>{{cssxref("-webkit-margin-before-collapse")}}</li> + <li>{{cssxref("-webkit-margin-bottom-collapse")}}</li> + <li>{{cssxref("-webkit-margin-collapse")}}</li> + <li>{{cssxref("-webkit-margin-end")}}</li> + <li>{{cssxref("-webkit-margin-start")}}</li> + <li>{{cssxref("-webkit-margin-top-collapse")}}</li> + <li>{{cssxref("-webkit-marquee")}}</li> + <li>{{cssxref("-webkit-marquee-direction")}}</li> + <li>{{cssxref("-webkit-marquee-increment")}}</li> + <li>{{cssxref("-webkit-marquee-repetition")}}</li> + <li>{{cssxref("-webkit-marquee-speed")}}</li> + <li>{{cssxref("-webkit-marquee-style")}}</li> + <li>{{cssxref("-webkit-mask-attachment")}}</li> + <li>{{cssxref("-webkit-mask-box-image")}}</li> + <li>{{cssxref("-webkit-mask-box-image-outset")}}</li> + <li>{{cssxref("-webkit-mask-box-image-repeat")}}</li> + <li>{{cssxref("-webkit-mask-box-image-slice")}}</li> + <li>{{cssxref("-webkit-mask-box-image-source")}}</li> + <li>{{cssxref("-webkit-mask-box-image-width")}}</li> + <li>{{cssxref("-webkit-mask-position-x")}}</li> + <li>{{cssxref("-webkit-mask-position-y")}}</li> + <li>{{cssxref("-webkit-mask-repeat-x")}}</li> + <li>{{cssxref("-webkit-mask-repeat-y")}}</li> + <li>{{cssxref("-webkit-match-nearest-mail-blockquote-color")}}</li> + <li>{{cssxref("-webkit-max-logical-height")}}</li> + <li>{{cssxref("-webkit-max-logical-width")}}</li> + <li>{{cssxref("-webkit-min-logical-height")}}</li> + <li>{{cssxref("-webkit-min-logical-width")}}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{cssxref("-webkit-nbsp-mode")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{cssxref("-webkit-overflow-scrolling")}}</li> +</ul> + +<h3 id="P_Q">P Q</h3> + +<ul> + <li>{{cssxref("-webkit-padding-after")}}</li> + <li>{{cssxref("-webkit-padding-before")}}</li> + <li>{{cssxref("-webkit-padding-end")}}</li> + <li>{{cssxref("-webkit-padding-start")}}</li> + <li>{{cssxref("-webkit-perspective-origin-x")}}</li> + <li>{{cssxref("-webkit-perspective-origin-y")}}</li> + <li>{{cssxref("-webkit-print-color-adjust")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{cssxref("-webkit-region-break-after")}}</li> + <li>{{cssxref("-webkit-region-break-before")}}</li> + <li>{{cssxref("-webkit-region-break-inside")}}</li> + <li>{{cssxref("-webkit-rtl-ordering")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{cssxref("-webkit-shape-inside")}}</li> + <li>{{cssxref("-webkit-svg-shadow")}}</li> +</ul> + +<h3 id="T_–_Z_2">T – Z</h3> + +<ul> + <li>{{cssxref("-webkit-tap-highlight-color")}}</li> + <li>{{cssxref("-webkit-text-combine")}}</li> + <li>{{cssxref("-epub-text-combine")}}</li> + <li>{{cssxref("-webkit-text-decorations-in-effect")}}</li> + <li>{{cssxref("-epub-text-emphasis")}}</li> + <li>{{cssxref("-epub-text-emphasis-color")}}</li> + <li>{{cssxref("-epub-text-emphasis-style")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> + <li>{{cssxref("-epub-text-orientation")}}</li> + <li>{{cssxref("-webkit-text-security")}}</li> + <li>{{cssxref("-webkit-text-size-adjust")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-touch-callout")}}</li> +</ul> +</div> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">Styling Form Controls on the WebKit Trac</a></li> + <li>Rozszerzenia nie wymienione powyżej: <a href="https://gist.github.com/afabbro/3759334">https://gist.github.com/afabbro/3759334</a></li> +</ul> diff --git a/files/pl/web/css/selektor_klasy/index.html b/files/pl/web/css/selektor_klasy/index.html new file mode 100644 index 0000000000..12f8d4f5c8 --- /dev/null +++ b/files/pl/web/css/selektor_klasy/index.html @@ -0,0 +1,86 @@ +--- +title: Selektor klasy +slug: Web/CSS/Selektor_klasy +tags: + - CSS + - Klasy + - Reference + - Selektory +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<div> </div> + +<div>Selektor klasy wyszukuje każdy element z atrybutem {{htmlattrxref("class")}} w dokumencie HTML. Atrybut {{htmlattrxref("class")}} jest zdefiniowany jako lista przedmiotów oddzielonych ze sobą spacją, jeden z nich musi zgadzać się z podaną klasą w selektorze (CSS).</div> + +<div> </div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">.nazwaklasy { <span class="short_text" id="result_box" lang="pl"><span>właściwości</span> <span>stylu</span></span> }</pre> + +<p>Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[class~=nazwaklasy] { <span class="short_text" id="result_box" lang="pl"><span>właściwości</span> <span>stylu</span></span> }</pre> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span.classy { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span class="classy">Przykładowy tekst.</span> +<span>Kolejny przykładowy tekst.</span> +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a href="https://drafts.csswg.org/selectors-4/#class-html">Selectors Level 4</a></li> + <li><a href="https://drafts.csswg.org/selectors-3/#class-html">Selectors Level 3</a></li> + <li><a href="http://www.w3.org/TR/CSS2/selector.html#class-html">CSS Level 2 (Revision 1)</a></li> + <li><a href="http://www.w3.org/TR/CSS1/#class-as-selector">CSS Level 1</a></li> +</ul> + +<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Przeglądarka</strong></td> + <td><strong>Wsparcie</strong></td> + </tr> + <tr> + <td>Chrome</td> + <td>Tak</td> + </tr> + <tr> + <td>Edge</td> + <td>Tak</td> + </tr> + <tr> + <td>Firefox</td> + <td>Tak</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>Tak</td> + </tr> + <tr> + <td>Opera</td> + <td>Tak</td> + </tr> + <tr> + <td>Safari</td> + <td>Tak</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pl/web/css/selektor_uniwersalny/index.html b/files/pl/web/css/selektor_uniwersalny/index.html new file mode 100644 index 0000000000..c3c4952f06 --- /dev/null +++ b/files/pl/web/css/selektor_uniwersalny/index.html @@ -0,0 +1,104 @@ +--- +title: Selektor uniwersalny +slug: Web/CSS/Selektor_uniwersalny +tags: + - CSS + - Selektory +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektor uniwersalny</strong> (<code>*</code>) dopasowuje elementy wszystkich typów.</p> + +<pre class="brush: css no-line-numbers">/* Wybierz wszystkie elementy */ +* { + color: green; +}</pre> + +<p>Począwszy od CSS3, gwiazdka może być używana w połączeniu z {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - dopasowuje wszystkie elementy w przestrzeni nazw <em>ns</em></li> + <li><code>*|*</code> - dopasowuje wszystkie elementy</li> + <li><code>|*</code> - dopasowuje wszystkie elementy bez zdefiniowanej przestrzeni nazw</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">* { własności }</pre> + +<p>Gwiazdka jest opcjonalna w przypadku prostych selektorów. Np.: <code>*.warning</code> i <code>.warning</code> są równoważne.</p> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=pl] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* automatycznie czyści opływanie dla rodzeństwa znajdującego się bezpośrednio po elemencie z klasą .floating */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="pl">Zielony span</span> w czerwonym akapicie. +</p> +<p id="maincontent" lang="pl"> + <span class="warning">czerwony span</span> w zielonym akapicie. +</p></pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample('Przykłady')}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/pl/web/css/selektory_typu/index.html b/files/pl/web/css/selektory_typu/index.html new file mode 100644 index 0000000000..13dc191bb1 --- /dev/null +++ b/files/pl/web/css/selektory_typu/index.html @@ -0,0 +1,80 @@ +--- +title: Selektory typu +slug: Web/CSS/Selektory_typu +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p><strong>Selektory typu</strong> dopasowują wszystkie elementy mające taką samą nazwę jak dany selektor. Własności zostaną zastosowane do każdego elementu danego typu niezależnie od tego, gdzie znajduje się w drzewie dokumentu.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="eval">selektor {<em>własności</em> } +</pre> + +<p><code>selektor</code> jest do dowolnym elementem np. <code>p</code>, <code>div</code>, <code>a</code>, <code>table</code>.</p> + +<h2 id="Przykłady" name="Przykłady">Przykład</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Span z tekstem.</span> +<p>Akapit z tekstem.</p> +<span>Span z większą ilością tekstu.</span> +</pre> + +<h3 id="Rezultat">Rezultat</h3> + +<p>{{EmbedLiveSample('Przykład', '100%', 150)}}</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + + + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/pl/web/css/skrócone_deklaracje_css/index.html b/files/pl/web/css/skrócone_deklaracje_css/index.html new file mode 100644 index 0000000000..fa244eb571 --- /dev/null +++ b/files/pl/web/css/skrócone_deklaracje_css/index.html @@ -0,0 +1,56 @@ +--- +title: Skrócone deklaracje CSS +slug: Web/CSS/Skrócone_deklaracje_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/Shorthand_properties +--- +<p> +</p> +<h2 id="Dlaczego_skracamy_deklaracje_CSS.3F" name="Dlaczego_skracamy_deklaracje_CSS.3F"> Dlaczego skracamy deklaracje CSS? </h2> +<p>Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów. +</p> +<h2 id="W.C5.82asno.C5.9Bci_t.C5.82a" name="W.C5.82asno.C5.9Bci_t.C5.82a"> Własności tła </h2> +<p>Tło określone za pomocą następujących własności: +</p> +<pre>background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> +<p>Można zapisać w jednej deklaracji jako: +</p> +<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre> +<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>background-attachment: scroll</code> oraz kilku dodatkowych własności w CSS3) +</p> +<h2 id="W.C5.82asno.C5.9Bci_czcionki" name="W.C5.82asno.C5.9Bci_czcionki"> Własności czcionki </h2> +<p>Następujące deklaracje: +</p> +<pre>font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> +<p>Mogą zostać skrócone do następującej deklaracji: </p> +<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre> +<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>font-variant: normal</code> i <code>font-size-adjust: none</code> (CSS2.0 / css3), <code>font-stretch: normal</code> (css3).) +</p> +<h2 id="W.C5.82asno.C5.9Bci_obramowania" name="W.C5.82asno.C5.9Bci_obramowania"> Własności obramowania </h2> +<p>Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład: +</p> +<pre>border-width: 1px; +border-style: solid; +border-color: #000;</pre> +<p>Możemy zapisać jako: +</p> +<pre>border: 1px solid #000;</pre> +<h2 id="W.C5.82asno.C5.9Bci_margin.2Fpadding" name="W.C5.82asno.C5.9Bci_margin.2Fpadding"> Własności margin/padding </h2> +<p>Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS: </p> +<pre>margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> +<p>Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble")) +</p> +<pre>margin: 10px 5px 10px 5px;</pre> +{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }} diff --git a/files/pl/web/css/text-transform/index.html b/files/pl/web/css/text-transform/index.html new file mode 100644 index 0000000000..1e3bcc1ac1 --- /dev/null +++ b/files/pl/web/css/text-transform/index.html @@ -0,0 +1,81 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/text-transform +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS 'text-transform' definiuje, czy tekst w elemencie powinien być wyświetlony kapitalikami lub wielkimi literami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">text-transform : capitalize | uppercase | lowercase| none +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>capitalize</dt> + <dd>Pierwsza litera każdego słowa jest zmieniana na wielką, inne zostają bez zmian.</dd> + <dt>uppercase</dt> + <dd>Wszystkie litery są przekształcane na wielkie.</dd> + <dt>lowercase</dt> + <dd>Wszystkie litery są przekształcane na małe.</dd> + <dt>none</dt> + <dd>Żadne zmiany wielkości liter nie są dokonywane.</dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="eval">p::first-line { + text-transform: uppercase; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#text-transform">CSS level 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/">W3C Cascading Style Sheets, level 3</a> (jeszcze niegotowa)</li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/transform-function/index.html b/files/pl/web/css/transform-function/index.html new file mode 100644 index 0000000000..9a384bb869 --- /dev/null +++ b/files/pl/web/css/transform-function/index.html @@ -0,0 +1,201 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Reference + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p>The <code><transform-function></code> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.</p> + +<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2> + +<p>There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p> + +<h3 id="Cartesian_coordinates">Cartesian coordinates</h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p> + +<p>In <a class="external" href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinates</a> each point of the <a class="external" href="https://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values, the abscissa and the ordinate. The origin, the <code>(0, 0)</code> is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation <code>(x,y)</code>.</p> + +<p>Each linear function is described using a 2x2 matrix like:</p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>Applying the transformation consists in doing, for each point, the matrix multiplication between both:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div> + +<p>It is possible to apply several transformations in a row:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div> + +<p>With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.</p> + +<p><a class="external" href="https://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p> + +<h2 id="Functions_defining_transformations">Functions defining transformations</h2> + +<p>Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:</p> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</dd> + <dd><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</dd> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.</dd> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>The <code>rotateX()</code>CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>The <code>rotateY()</code>CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>The <code>rotateZ()</code>CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</dd> + <dd><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleX(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleY(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. <code>scaleZ(-1)</code> defines an <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).</dd> + <dd><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</dd> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</dd> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves horizontally.</dd> + <dd><code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves vertically.</dd> + <dd><code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.</dd> + <dd><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5</td> + <td>3.2</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<p>Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.</p> + +<p>[2] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as <code>-ms-transform: rotate(10deg) translateZ(0);</code>, will prevent the entire property from being applied.</p> diff --git a/files/pl/web/css/transform-function/matrix()/index.html b/files/pl/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..85a951052a --- /dev/null +++ b/files/pl/web/css/transform-function/matrix()/index.html @@ -0,0 +1,58 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +tags: + - CSS + - Funkcje CSS + - Referencje + - Transformacje CSS + - wymagaPrzykładu +translation_of: Web/CSS/transform-function/matrix() +--- +<div>{{CSSRef}}</div> + +<p>CSS-owa funkcja <code>matrix() </code>określa jednolitą macierz (matrix) transformacji 2D i składa się z sześciu określonych wartości. Wartości stałe tych macierzy są implementowane oraz nie działają jak parametry; pozostałe parametry są opisywane w porządku głównej kolumny.</p> + +<p><code>matrix(a, b, c, d, tx, ty)</code> to shorthand dla <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p> + +<div class="note"><strong>Adnotacja</strong>: Od Firefoxa 16, Gecko akceptuje wartośc {{cssxref("<length>")}} dla <strong>tx </strong>oraz <strong>ty</strong>.</div> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>) +</pre> + +<h2 id="Wartości">Wartości</h2> + +<dl> + <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt> + <dd>{{cssxref("<number>")}} opisują transformacje linearne.</dd> + <dt><em>tx</em> <em>ty</em></dt> + <dd>{{cssxref("<number>")}} opisują transformacje do zastosowania.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Współrzędne kartezjańskie na ℝ<sup>2</sup></th> + <th scope="col">Współrzędne jednorodne na ℝℙ<sup>2</sup></th> + <th scope="col">Współrzędne kartezjańskie na ℝ<sup>3</sup></th> + <th scope="col">Współrzędne jednorodne na ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Przykłady">Przykłady</h2> + +<p>TBD</p> diff --git a/files/pl/web/css/using_css_custom_properties/index.html b/files/pl/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..c9b7089b07 --- /dev/null +++ b/files/pl/web/css/using_css_custom_properties/index.html @@ -0,0 +1,244 @@ +--- +title: Użycie zmiennych CSS +slug: Web/CSS/Using_CSS_custom_properties +translation_of: Web/CSS/Using_CSS_custom_properties +--- +<div>{{SeeCompatTable}}</div> + +<div></div> + +<p><strong>Zmienne CSS </strong>to zdefiniowane jednostki zawierające specyficzne wartości, reużywalne w całym dokumencie. Zmienne są ustawiane przy użyciu notacji właściwości niestandardowych (np. <strong><code>--kolor-glowny: black;</code></strong>) i mają dostęp do funkcji <code>var() (np. kolor: <strong>var(--kolor-glowny)</strong>;</code>) .</p> + +<p>Skomplikowane strony internetowe mają bardzo dużo powtarzającego się kodu CSS. Dla przykładu, taki sam kolor może być użyty setki razy w różnych miejscach, co w przypadku zmiany wymana globalnego wyszukiwania i zmian w wielu miejsach. Zmienne CSS pozwalają na przechowywanie wartości w jednym miejscu, zmiast wielu. Używają one również semantycznych identyfikatorów. Na przykład <code>--glowny-kolor-tekstu</code> jest łatwiejszy do zrozumienia niż <code>#00ff00</code> szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.</p> + +<p>Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.</p> + +<h2 id="Podstawowe_użycie">Podstawowe użycie</h2> + +<p>Deklarowanie zmiennych:</p> + +<pre class="brush:css; highlight:[2] language-css">element { + --glowny-kolor-tla: brown; +} +</pre> + +<p>Użycie zmiennych:</p> + +<pre class="brush:css; highlight:[2] language-css">element { + background-color: var(--glowny-kolor-tla); +} +</pre> + +<div class="note"> +<p><strong>Notatka:</strong> Niestandardowy prefix <code>var-</code> istniał we wcześniejszych wersjach, jednak później został zmieniony na <code>--</code>. Firefox 31 i wyższy posiada nową specyfikację. ({{bug(985838)}})</p> +</div> + +<h2 id="Zmienne_CSS_-_pierwsze_kroki">Zmienne CSS - pierwsze kroki</h2> + +<p>Zacznijmy od prostego kodu CSS z różnymi klasami, których elementy posiadają różne kolory:</p> + +<div id="sample1"> +<pre class="brush:css; highlight:[3,20,26,32]">.jeden { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dwa { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.trzy { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.cztery { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.piec { + background-color: brown; +} + +</pre> + +<p>Implementujemy to w HTML'u:</p> + +<pre class="brush:html"><div> + <div class="jeden"></div> + <div class="dwa">Tekst <span class="cztery">- wiecej tekstu</span></div> + <input class="trzy"> + <textarea class="piec">Lorem Ipsum</textarea> +</div> +</pre> + +<p>co w efekcie daje nam:</p> + +<p>{{EmbedLiveSample("sample1",600,180)}}</p> + +<p><br> + Zauważ powtarzalność kodu CSS. Kolor tła jest ustawiony na brązowy w kilku miejscach.W niektórych przypadkach możemy zadeklarować kolor do wszystkich elementów, co rozwiązuje problem. Jednak w przypadku złożonych projektów, nie zawsze jest to możliwe. Deklarując zmienną przy pomocy pseudo-klasy :root, możemy przechowywać zmienną i używać jej według potrzeb.</p> +</div> + +<div id="sample2"> +<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root { + --glowny-kolor-tla: brown; +} + +.jeden { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dwa { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.trzy { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 75px; +} +.cztery { + color: white; + background-color: var(--glowny-kolor-tla); + margin: 10px; + width: 100px; +} + +.piec { + background-color: var(--glowny-kolor-tla); +} + +</pre> + +<div style="display: none;"> +<pre class="brush:html"><div> + <div class="one"></div> + <div class="two">Text <span class="five">- more text</span></div> + <input class="three"> + <textarea class="four">Lorem Ipsum</textarea> +</div> +</pre> +</div> + +<p>Powyższy kod daje taki sam rezultat jak we wcześniejszym przykładzie. </p> + +<h2 id="Dziedziczenie_zmiennych_CSS">Dziedziczenie zmiennych CSS</h2> + +<p>Niestandardowe właściwości mogą być dziedziczone. Oznacza to, że jeśli dany element nie ma wartości, może użyć tej odziedziczonej od rodzica:</p> + +<pre class="brush: html"><div class="jeden"> + <div class="dwa"> + <div class="trzy"> + </div> + <div class="cztery"> + </div> + <div> +</div></pre> +</div> + +<p>z następującym kodem CSS:</p> + +<pre class="brush: css">.dwa { + --test: 10px; +} + +.trzy { + --test: 2em; +} +</pre> + +<p>W tym przykładzie wynikiem dla <code>var(--test)</code> jest:</p> + +<ul> + <li><code>class="dwa"</code> element: <code>10px</code></li> + <li><code>class="trzy"</code> element: <code>2em</code></li> + <li><code>class="cztery"</code> element: <code>10px</code> (odziedziczone od rodzica)</li> + <li><code>class="jeden"</code> element: <em>nieprawidłowa wartość</em>, która jest wartością domyślą każdej właściwości.</li> +</ul> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 33.0<br> + {{CompatNo}} 34.0<sup>[2]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(36.0)}}</td> + <td>9.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9.1</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Przeglądarka Chrome początkowo zaimplementowała zmienne CSS ze zmienioną składną, która wymagała niestandardowego prefixu przed nazwą zmiennej <code>-webkit-var-</code>. Można jej było następnie użyć przy pomocy funkcji <code>-webkit-var()</code>. Dodatkowo implementacja została ukryta pod flagą <em>Eksperymentalne funkcje platformy internetowej </em>pod <code>chrome://flags.</code></p> + +<p>[2] Chrome 34.0 usunął zmienne CSS ze względu na problemy z wydajnością.</p> + +<p>[3] Zmienne CSS są zaimplementowane w preferencjach <code>layout.css.variables.enabled</code>, standardowo ustawione na <code>false</code> i używające stare składnia <code>var-<var>variablename</var></code> w Gecko 29. Rozpoczynając od Gecko 31 implementacja jest włączona i używa nowej składni <code>--<var>variablename</var></code>.</p> diff --git a/files/pl/web/css/vertical-align/index.html b/files/pl/web/css/vertical-align/index.html new file mode 100644 index 0000000000..8e34977446 --- /dev/null +++ b/files/pl/web/css/vertical-align/index.html @@ -0,0 +1,66 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/vertical-align +--- +<p> {{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p>Własność <code>vertical-align</code> określa wyrównanie pionowe elementów <i>inline</i> lub komórek tabeli. +</p> +<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("baseline") }} +</li><li> Stosowana do: elementy <i>inline</i> i komórki tabeli +</li><li> {{ Xref_cssinherited() }}: nie +</li><li> Media: {{ Xref_cssvisual() }} +</li><li> {{ Xref_csscomputed() }}: +</li></ul> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3> +<p><code>vertical-align:</code> <code>baseline</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code> | <code>middle</code> | <code>top</code> | <code>bottom</code> | <percentage> | <a href="pl/CSS/length"><length></a> | {{ Cssxref("inherit") }} +</p> +<h3 id="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29" name="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29"> Wartości (dla elementów inline) </h3> +<p>Większość wartości wyrównuje element w pionie w stosunku do jego rodzica: +</p> +<dl><dt>baseline </dt><dd>Wyrównuje linię bazową elementu z linią bazową jego rodzica. +</dd><dt>sub </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu dolnego jego rodzica. +</dd><dt>super </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu górnego jego rodzica. +</dd><dt>text-top </dt><dd>Wyrównuje górę elementu z górą czcionki elementu rodzica. +</dd><dt>text-bottom </dt><dd>Wyrównuje dół elementu z dołem czcionki elementu rodzica. +</dd><dt>middle </dt><dd>Wyrównuje środek elementu ze środkiem małych liter rodzica. +</dd><dt><a href="pl/CSS/length"><length></a> </dt><dd>Ustawia linię bazową elementu o daną wartość powyżej linii bazowej jego rodzica. +</dd><dt><percentage> </dt><dd>podobnie jak wartość <length> z procentami będącymi procentem własności {{ Cssxref("line-height") }} +</dd></dl> +<p>Dla elementów, które nie mają linii bazowej, używana jest w zamian dolna krawędź marginesu. +</p><p>Natomiast dwie wartości wyrównują element w pionie raczej względem całkowitej linii niż względem jego rodzica: +</p> +<dl><dt>top </dt><dd>Wyrównuje górę elementu i jego potomków z górą całkowitej linii. +</dd><dt>bottom </dt><dd>Wyrównuje dół elementu i jego potomków z dołem całkowitej linii. +</dd></dl> +<p>Wartości ujemne są dozwolone. +</p> +<h3 id="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29" name="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29"> Wartości (dla komórek tabeli) </h3> +<dl><dt>baseline (oraz sub, super, text-top, text-bottom, <length>, i <percentage>) </dt><dd> Wyrównuje linię bazową komórki z linią bazową wszystkich innych komórek w wierszu, które są wyrównane względem linii bazowej. +</dd><dt>top</dt><dd> Wyrównuje górną krawędź dopełnienia komórki z górą wiersza. +</dd><dt>middle</dt><dd> Centruje obszar dopełnienia komórki względem wiersza. +</dd><dt>bottom</dt><dd> Wyrównuje dolną krawędź dopełnienia komórki z dołem wiersza. +</dd></dl> +<p>Wartości ujemne są dozwolone. +</p> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3> +<pre>img { + vertical-align: bottom; +} +</pre> +<h3 id="Uwagi" name="Uwagi"> Uwagi </h3> +<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#vertical-align">CSS 1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">CSS 2.1</a> +</li></ul> +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3> +<p>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (<code>auto</code>) +</p>{{ languages( { "en": "en/CSS/vertical-align", "fr": "fr/CSS/vertical-align" } ) }} diff --git a/files/pl/web/css/wartość_początkowa/index.html b/files/pl/web/css/wartość_początkowa/index.html new file mode 100644 index 0000000000..8144cb37ba --- /dev/null +++ b/files/pl/web/css/wartość_początkowa/index.html @@ -0,0 +1,25 @@ +--- +title: Wartość początkowa +slug: Web/CSS/Wartość_początkowa +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/initial_value +--- +<p>{{ CSSRef() }} +</p> +<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3> +<p><b>Wartość początkowa</b> podana w podsumowaniu <a href="pl/Dokumentacja_CSS">każdej własności CSS</a> ma odmienne znaczenie <a href="pl/CSS/Dziedziczenie">własności dziedziczonych i własności niedziedziczonych</a>. +</p><p>Dla <a href="pl/CSS/Dziedziczenie#W.C5.82asno.C5.9Bci_dziedziczone">własności dziedziczonych</a> wartość początkowa używana jest <b>tylko</b> dla elementu źródłowego, gdy nie określono wartości elementu. +</p><p>Dla <a href="pl/CSS/Dziedziczenie#W.C5.82asno.C5.9Bci_niedziedziczone">własności niedziedziczonych</a> wartość początkowa używana jest dla <b>każdego</b> elementu, gdy nie określono wartości elementu. +</p><p>W CSS3 dodano wartość <code><a href="pl/CSS/initial">initial</a></code>, by pozwolić autorom na wyraźne określenie wartości początkowej. +</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC"> Zobacz również </h3> +<p><a href="pl/CSS/Dziedziczenie">Własności dziedziczone i niedziedziczone</a>, <code><a href="pl/CSS/initial">initial</a></code> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/initial_value", "es": "es/CSS/Valor_inicial", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value" } ) }} diff --git a/files/pl/web/css/white-space/index.html b/files/pl/web/css/white-space/index.html new file mode 100644 index 0000000000..fc891b4ce1 --- /dev/null +++ b/files/pl/web/css/white-space/index.html @@ -0,0 +1,93 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/white-space +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS <code>white-space</code> jest używana do opisu sposobu, w jaki białe znaki są traktowane wewnątrz elementu.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">white-space: normal | pre | nowrap | pre-wrap | -moz-pre-wrap | pre-line | inherit ; +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>{{ Cssxref("normal") }}</dt> + <dd>wszystkie sekwencje białych znaków i zakończenia linii będą skracane. Zakończenia linii nie likwidują zawijania zawartości.</dd> + <dt>{{ Cssxref("pre") }}</dt> + <dd>wszystkie białe znaki w źródle będą zachowane, linie są przełamane tylko na znakach nowej linii w źródle.</dd> + <dt>{{ Cssxref("nowrap") }}</dt> + <dd>wszystkie sekwencje białych znaków i zakończenia linii będą skracane, również przełamania linii (zawijanie tekstu) są zlikwidowane wewnątrz zawartości.</dd> + <dt>{{ Cssxref("pre-wrap") }} {{ Fx_minversion_inline(3) }}</dt> + <dd>wszystkie białe znaki w źródle będą zachowane, linie są przełamane na znakach nowej linii i w razie konieczności zawijają zawartość.</dd> + <dt>{{ Cssxref("-moz-pre-wrap") }} {{ Deprecated_inline() }}</dt> + <dd>identyczne jak <code>pre-wrap</code>, jest to rozszerzenie Mozilli, które stało się własnością CSS 2.1 <code>pre-wrap</code>, która powinna być używana zamiast niego.</dd> + <dt>{{ Cssxref("pre-line") }}</dt> + <dd>wszystkie sekwencje białych znaków będą skrócone, linie są przełamane na znakach nowej linii i również w razie potrzeby zawartość jest zawijana.</dd> + <dt>{{ Cssxref("inherit") }}</dt> + <dd>dziedziczy po rodzicu.</dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">code { + white-space: pre; +} +</pre> + +<h2 id="Notatki" name="Notatki">Notatki</h2> + +<p><code>pre-line</code> nie jest jeszcze zaimplementowane w Mozilli.</p> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">CSS 2.1 text</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#white-space">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#white-space-summary">CSS 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<p>(Próbna tabela zgodności)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>0</td> + </tr> + <tr> + <td>Firefox</td> + <td>0</td> + </tr> + <tr> + <td>Netscape</td> + <td>0</td> + </tr> + <tr> + <td>Opera</td> + <td>0</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/width/index.html b/files/pl/web/css/width/index.html new file mode 100644 index 0000000000..0e5abadd9f --- /dev/null +++ b/files/pl/web/css/width/index.html @@ -0,0 +1,207 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<p>Właściwość <strong><code>width</code></strong>CSS ustawia szerokość elementu. Domyślnie ustawia szerokość <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">obszaru zawartości</a> , ale jeśli {{cssxref ("box-sizing")}} jest ustawione na <code>border-box</code>, ustawia szerokość <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">obszaru border</a> .</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + +<p class="hidden">Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. Jeśli chcesz przyczynić się do interaktywnego projektu przykładów, sklonuj <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> i wyślij nam żądanie ściągnięcia.</p> + +<p>Właściwości {{cssxref ("min-width")}} i {{cssxref ("max-width")}} przesłaniają {{cssxref ("width")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush:css no-line-numbers">/ * <length> wartości * / +szerokość: 300px; +szerokość: 25em; + +/ * <wartość procentowa> * / +szerokość: 75%; + +/ * Wartości słów kluczowych * / +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Global values */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p>Właściwość <code>width</code> przyjmuje wartości:</p> + +<ul> + <li>jedno ze słów kluczowych: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li> + <li><code><a href="#<length>"><length></a></code> lub <code><a href="#<percentage>"><percentage></a></code>. Opcjonalnie można po nich dodać jedno ze słów kluczowych: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li> +</ul> + +<h3 id="Wartości">Wartości</h3> + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd>Ustala absolutną wartość szerokości.</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd>Określa szerokość jako procentową wartość względem szerokości obejmującego bloku. Jeśli szerokość bloku obejmującego zależy od szerokości elementu, układ końcowy jest niezdefiniowany.</dd> + <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt> + <dd>Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} są aplikowane do <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">obszaru border</a> elementu.</dd> + <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt> + <dd>Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} jest aplikowana do <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">obszaru zawartości</a> elementu.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Przeglądarka sama wylicza i wybiera szerokość elementu.</dd> + <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt> + <dd>Używa liniowej wielkości <code>fill-available</code> lub blokowej wielkości <code>fill-available</code>, odpowiednio do trybu pisania (<em>writing mode</em>).</dd> + <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt> + <dd>Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie <em>soft wrap</em>).</dd> + <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt> + <dd>Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie <em>soft wrap</em>).</dd> + <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt> + <dd>Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.</dd> + <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt> + <dd>Większa z wartości: + <ul> + <li>naturalna minimalna szerokości (min-content)</li> + <li>mniejsza z wartości: naturalna preferowana szerokość (max-content) i dostępna szerokość (available)</li> + </ul> + </dd> +</dl> + +<h3 id="Formalna_składnia">Formalna składnia</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Domyślna_szerokość">Domyślna szerokość</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p> + +<h3 id="Piksele_i_emy">Piksele i emy</h3> + +<pre class="brush: css">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="px_length">Width measured in px</div> +<div class="em_length">Width measured in em</div></pre> + +<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p> + +<h3 id="Procentowo">Procentowo</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">Width in percentage</div></pre> + +<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p> + +<h3 id="max-content_2">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p> + +<h3 id="min-content_2">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p> + +<h2 id="Dostępność">Dostępność</h2> + +<p>Upewnij się, że elementy z ustaloną szerokością <code>width</code> nie są przycinane ani nie zasłaniają pozostałej zawartości, kiedy strona jest przybliżana (<em>zoom</em>) aby zwiększyć rozmiar tekstu. </p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Dodanie słów kluczowych <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Dodanie <code>width</code> jako animowanego.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Doprecyzowanie do jakich elementów własność jest stosowana.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Oryginalna definicja.</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Działanie_w_przeglądarkach">Działanie w przeglądarkach</h2> + +<div class="hidden">Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do danych, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam prośbę o wycofanie.</div> + +<p>{{Compat ("css.properties.width")}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">model pudełkowy</a> , {{cssxref ("height")}}, {{cssxref ("box-sizing")}}, {{cssxref ("min-width")}}, {{cssxref ("max-width") }}</li> +</ul> diff --git a/files/pl/web/css/word-spacing/index.html b/files/pl/web/css/word-spacing/index.html new file mode 100644 index 0000000000..0c8e87b786 --- /dev/null +++ b/files/pl/web/css/word-spacing/index.html @@ -0,0 +1,78 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje +translation_of: Web/CSS/word-spacing +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> + +<p>Własność CSS 'word spacing' określa odstęp pomiędzy słowami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między słowami.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> + +<pre class="eval">word-spacing: [ normal | <length> | <percentage> ] {1,3} +</pre> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>normal </dt> + <dd> </dd> + <dt>{{cssxref("<length>")}} </dt> + <dd> </dd> + <dt>{{cssxref("<percentage>")}} </dt> + <dd> </dd> +</dl> + +<h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> + +<pre class="eval">p { + word-spacing: 1em 3em 2em; +} +</pre> + +<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing">W3C Cascading Style Sheets, level 2 revision 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS1#word-spacing">W3C Cascading Style Sheets, level 1</a> (secondary)</li> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#word-spacing">W3C Cascading Style Sheets, level 3</a></li> +</ul> + +<h2 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Przeglądarka</th> + <th>Najniższa wersja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>?</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> diff --git a/files/pl/web/css/z-index/index.html b/files/pl/web/css/z-index/index.html new file mode 100644 index 0000000000..fd454242be --- /dev/null +++ b/files/pl/web/css/z-index/index.html @@ -0,0 +1,128 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<p>Własność <strong><code>z-index</code></strong> określa kolejność elementów wzdłuż osi z. Kiedy elementy nachodzą na siebie, kolejność osi <code>z</code> decyduje, który element przykrywa inny. Element z większym indeksem <code>z</code> zazwyczaj przykrywa element z mniejszym.</p> + +<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Stosowana do: {{ Cssxref("position", "elementów pozycjonowanych") }}</li> + <li>{{ Xref_cssinherited() }}: nie</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: jako określona</li> +</ul> + +<h2 id="Składnia">Składnia</h2> + +<pre class="brush:css no-line-numbers">/* Właściwość wartość */ +z-index: auto; + +/* wartość jako liczba */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* wartość ujemna w celu zmniejszenia priorytetu */ + +/* globalne wartości */ +z-index: inherit; +z-index: initial; +z-index: unset; +</pre> + +<p>Wartość <code>z-index</code> jest określona słowem kluczowym <code><a href="#auto">auto</a></code> lub jako <code><a href="#<liczba>"><liczba></a></code>.</p> + +<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> + +<dl> + <dt>auto </dt> + <dd>Element jest rysowany w takiej samej kolejności względem osi z jak element z <code>z-index: 0</code>.<em>Nie</em> tworzy nowego kontekstu nakładania.</dd> + <dt><a id="<liczba" name="<liczba>"><code><liczba></code></a></dt> + <dd>Element jest rysowany w podanej kolejności względem osi z. Tworzy również nowy kontekst nakładania, co oznacza, że wszystkie jego elementy potomne również są rysowane z takim samym indeksem z. Oznacza to również, że indeksy z elementów potomnych nie są porównywane do indeksów z elementów na zewnątrz danego elementu.</dd> +</dl> + +<h2 id="Przykład">Przykład</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="dashed-box">Dashed box + <span class="gold-box">Gold box</span> + <span class="green-box">Green box</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* put .gold-box above .green-box and .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* put .green-box above .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h3 id="Wynik">Wynik</h3> + +<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> + +<h2 id="Specifikacja">Specifikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>z-index</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3> +<p>{{Compat("css.properties.z-index")}}</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p>{{ Cssxref("position") }}</p> + +<p>{{ languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index" } ) }}</p> |