Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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:

  • text-align
Określa położenie treści. Wybierz jedną z wartości: left, right, center, justify
  • text-indent
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.

  • relative
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.
  • fixed
Element będzie przyczepiony.
Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu.
  • absolute
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.
  • static
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

Autorzy i etykiety dokumentu

Etykiety: 
 Autorzy tej strony: teoli, Sheppy, Delor, Verruckt, Witia, gandalf, Takenbot, Ptak82, Anonymous
 Ostatnia aktualizacja: teoli,