diff options
Diffstat (limited to 'files/pl/conflicting/learn/css')
3 files changed, 479 insertions, 0 deletions
diff --git a/files/pl/conflicting/learn/css/css_layout/index.html b/files/pl/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..d60206b76e --- /dev/null +++ b/files/pl/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,276 @@ +--- +title: Układ +slug: conflicting/Learn/CSS/CSS_layout +tags: + - CSS:Na_początek +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/CSS/Na_początek/Układ +--- +<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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pl/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..d0898cdca4 --- /dev/null +++ b/files/pl/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,115 @@ +--- +title: Jak działa CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works +tags: + - CSS:Na_początek +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/CSS/Na_początek/Jak_działa_CSS +--- +<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/conflicting/learn/css/first_steps/how_css_works_21be2ff13a08a8866d772c3a5e975193/index.html b/files/pl/conflicting/learn/css/first_steps/how_css_works_21be2ff13a08a8866d772c3a5e975193/index.html new file mode 100644 index 0000000000..649013cfaa --- /dev/null +++ b/files/pl/conflicting/learn/css/first_steps/how_css_works_21be2ff13a08a8866d772c3a5e975193/index.html @@ -0,0 +1,88 @@ +--- +title: Po co używać CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_21be2ff13a08a8866d772c3a5e975193 +tags: + - CSS:Na_początek +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/CSS/Na_początek/Po_co_używać_CSS +--- +<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" } ) }} |