diff options
Diffstat (limited to 'files/pl/learn/css/howto')
| -rw-r--r-- | files/pl/learn/css/howto/css_faq/index.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/files/pl/learn/css/howto/css_faq/index.html b/files/pl/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..12a84d8c20 --- /dev/null +++ b/files/pl/learn/css/howto/css_faq/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" } ) }} |