diff options
Diffstat (limited to 'files/pl/conflicting/learn/css/css_layout/index.html')
| -rw-r--r-- | files/pl/conflicting/learn/css/css_layout/index.html | 276 |
1 files changed, 276 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" } ) }} |