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 | 260 |
1 files changed, 0 insertions, 260 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 deleted file mode 100644 index bf3edca6f9..0000000000 --- a/files/pl/web/css/na_początek/selektory/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Selektory -slug: Web/CSS/Na_początek/Selektory -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/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> |