mozilla
Wyniki wyszukiwania

    Bloki

     

    Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.

    W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.

    Informacja: Bloki

    Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.

    W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.

    margines zewnętrzny

    ramka

    margines wewnętrzny

    element

    Jasny szary wskazuje części układu strony.

     

     

     

    element

    Tak wygląda to w przeglądarce.

    Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.

    Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.

    margines zewnętrzny

    ramka

    margines wewnętrzny

    element

    Ten element ma zielone tło.

     

     

     

    element

    Tak wygląda to w przeglądarce.

    Ramki

    Możesz użyć ramek do dekoracji elementów liniami lub blokami.

    Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności border. Określ szerokość (zwykle w pikselach), styl i kolor.

    Istnieją następujące style:

    solid
    dotted
    dashed
    double
    inset
    outset
    ridge
    groove

    Możesz także ustawić styl na none lub hidden, aby usunąć ramkę, lub ustawić kolor na transparent, aby ustawić przezroczystą ramkę bez dotykania układu.

    Aby określić osobno każdą krawędź ramki, użyj własności: border-top (góra), border-right (prawo), border-bottom (dół), border-left (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.

    Przykłady
    Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka:

    h3 {

     border-top: 4px solid #7c7; /* mid green */
     background-color: #efe;     /* pale green */
     color: #050;                /* dark green */
     }
    

    Wygląda to tak:

    Nagłówek w dobrym stylu

    Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:

    img {border: 2px solid #ccc;}

    Rezultat jest następujący:

    Obrazek: Image:Blue-rule.png

    Marginesy zewnętrzne i wewnętrzne

    Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.

    Użyj własności margin lub padding, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.

    Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).

    Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.

    Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.

    Przykład
    Ta reguła oznacza akapity z klasą remark poprzez dodanie czerwonej ramki wokół nich.

    Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.

    Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:

    p.remark {

     border: 2px solid red;
     padding: 4px;
     margin-left: 24px;
     }
    

    Wynik wygląda tak:

    Oto zwykły akapit.

    A to akapit z klasą remark.

    Więcej szczegółów
    Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany.

    Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.

    Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.

    Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału model blokowy.

    Zadanie: Dodawanie ramek

    Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:

    h3 {border-top: 1px solid gray;}

    Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:

    li {

     list-style: lower-roman;
     margin-bottom: 8px;
     }
    

    Odśwież okno przeglądarki, aby zobaczyć wynik:

    (A) Oceany

    • Arktyczny
    • Atlantycki
    • Spokojny
    • Indyjski
    • Południowy

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

     

    Wyzwanie
    Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    . . .

    (Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)

    Co dalej?

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

    Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: Układ

    Autorzy i etykiety dokumentu

    Etykiety: 
    Ostatnia aktualizacja: teoli,