diff options
Diffstat (limited to 'files/pl/web/css/na_początek/selektory/index.html')
| -rw-r--r-- | files/pl/web/css/na_początek/selektory/index.html | 259 |
1 files changed, 259 insertions, 0 deletions
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> |