diff options
Diffstat (limited to 'files/pl/web/css/częste_pytania_o_css/index.html')
| -rw-r--r-- | files/pl/web/css/częste_pytania_o_css/index.html | 162 |
1 files changed, 0 insertions, 162 deletions
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 deleted file mode 100644 index 12a84d8c20..0000000000 --- a/files/pl/web/css/częste_pytania_o_css/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -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" } ) }} |