From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../na_pocz\304\205tek/uk\305\202ad/index.html" | 275 --------------------- 1 file changed, 275 deletions(-) delete mode 100644 "files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" (limited to 'files/pl/web/css/na_początek/układ/index.html') diff --git "a/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" "b/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" deleted file mode 100644 index d532771ddc..0000000000 --- "a/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Układ -slug: Web/CSS/Na_początek/Układ -tags: - - 'CSS:Na_początek' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

-

Ta strona opisuje kilka sposobów na modyfikację układu dokumentu. -

Nauczysz się zmieniać układ przykładowego dokumentu... -

-

Informacja: Układ

-

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. -

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. -

Ta strona opisuje proste techniki, których możesz spróbować. -

-

Struktura dokumentu

-

Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę. -

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 DIV do tworzenia struktury. -

- - -
Przykład -
W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera. -

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. -

Aby poprawić ten problem strukturalny, możesz dodać znacznik DIV wokół paragrafów. -Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut id. -

-
-
 <H3 class="numbered">Numbered paragraphs</H3>
- <DIV id="numbered">
- <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>
- </DIV>
-
-
-

Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list: -

-
-
 ul, #numbered {
- border: 1em solid #69b;
- padding-left:1em;
- }
-
-
-

Wynik wygląda tak: -

- - -

(A) The oceans

-
  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern
-
-

(B) Numbered paragraphs

-

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

-
-
-
-

Jednostki rozmiaru

-

Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (px). -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. -

W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (em). -Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m). -Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie. -

- - -
Przykład -
Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach. -

Ramka po prawej ma rozmiar określony w ems. -

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: -

- - -
ZMIEŃ MÓJ ROZMIAR
-
-
- - -
Więcej szczegółów -
Dla innych urządzeń najlepiej stosować inne jednostki miar. -

Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu. -

Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę Wartości na stronach specyfikacji CSS. -

-
-

Układ tekstu

-

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: -

- -
Określa położenie treści. Wybierz jedną z wartości: left, right, center, justify -
- -
Tworzy odstęp dla treści o określoną wartość. -
-

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. -

- - -
Przykład -
Aby wycentrować nagłówki: -
-
 h3 {
- border-top: 1px solid gray;
- text-align: center;
- }
-
-
-

Wynik: -

- - -

(A) The oceans

-
-

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ływanie (Floats)

-

Własność float wymusza umieszczenie elementu po lewej lub prawej. -Jest to prosty sposób, aby kontrolować jego położenie i rozmiar. -

Reszta dokumentu opływa wybrany element. -Możesz to kontrolować, używając własności clear na innych elementach, aby sprawić, by nie opływały elementów posiadających określony float. -

- - -
Przykład -
W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony. -

Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej: -

-
-
 ul, #numbered {float: left;}
- h3 {clear: left;}
-
-
-

Rezultat wygląda tak: -

- - -

(A) The oceans

-
  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern
-
-

(B) Numbered paragraphs

-

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

-
-
-

(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.) -

-
-

Pozycjonowanie

-

Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności position oraz podanie jednej z następujących wartości. -

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. -

- -
Pozycja elementu jest określona relatywnie do jego normalnej pozycji. -
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. -
- -
Element będzie przyczepiony. -
Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu. -
- -
Pozycja elementu jest ustawiana relatywnie do elementu rodzica. -
Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem relative, fixed lub absolute. -
-
Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu position: relative; bez podawania wartości przesunięcia. -
- -
Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie. -
-

Razem z tymi wartościami własności position (poza static) podaj jedną lub więcej własności: top, right, bottom, left, width, height, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar. -

- - -
Przykład -
Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku: -
-
 <DIV id="parent-div">
- <P id="forward">/</P>
- <P id="back">\</P>
- </DIV>
-
-
-

W swoim arkuszu stylów nadaj rodzicowi wartość relative własności position. -Nie musisz podawać żadnego przesunięcia. -Określ wartość własności position jego dzieci jako absolute: -

-
-  #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;
-  }
-
-

Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem: -

-

/

\

-
- -
-


-

-
- - -
Więcej szczegółów -
Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: Visual formatting model oraz Visual formatting model details. -

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. -

-
-

Zadanie: Definiowanie układu

-

Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji Struktura dokumentu i Pływanie. -

W przykładzie z Pływanie dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em. -

- - -
Wyzwanie -
Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed -

</BODY> -

-
-  <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz: -

- - -
Image:Yellow-pin.png -
-

Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie. -Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację. -

Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu. -

Odśwież okno przeglądarki i zmniejsz rozmiar okna. -Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument. -

-

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin
-
-
-


-

-

Co dalej?

-

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. -

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: Tabele -

{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }} -- cgit v1.2.3-54-g00ecf