mozilla
Wyniki wyszukiwania

    Układ

    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: 
    Contributors to this page: Anonymous, Takenbot, Sheppy, Delor, Verruckt, Ptak82, gandalf, teoli, Witia
    Ostatnia aktualizacja: teoli,