config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS display

Definicja stylu, przeznaczenie i użycie display

Właściwość display określa zachowanie wyświetlania (typ pola renderowania) elementu.

W HTML domyślna wartość właściwości wyświetlania jest pobierana ze specyfikacji HTML lub z domyślnego arkusza stylów przeglądarki / użytkownika. Domyślną wartością w XML jest inline, w tym elementy SVG.

Wartości właściwości display

Wartość Opis
inline Wyświetla element jako element liniowy (np. span). Właściwości height i width nie mają żadnego wpływu na element HTML.
block Wyświetla element jako element blokowy (np. p). Zaczyna się od nowej linii i zajmuje całą szerokość.
contents Sprawia, że kontener znika. Elementy podrzędne są dziećmi elementu o następny poziom w DOM.
flex Wyświetla element jako kontener elastyczny na poziomie bloku.
grid Wyświetla element jako kontener siatki na poziomie bloku.
inline-block Wyświetla element jako blokowo-liniowy. Sam element jest sformatowany jako element liniowy, ale możesz zastosować wartości wysokości (height) i szerokości (width).
inline-flex Wyświetla element jako liniowy w kontenerze elastycznym.
inline-grid Wyświetla jako element liniowy w kontenerze siatki.
inline-table Tworzy tabelę.
list-item Zachowowuje się jak element li.
run-in Wyświetla element jako blokowy lub w liniowy w zależności od kontekstu.
table Tworzy tabelę.
table-caption Tworzy nagłówek tabeli.
table-column-group Tworzy grupę kolumn tabeli.
table-header-group Zachowuje się jak element thead
table-footer-group Zachowuje się jak element tfoot
table-row-group Tworzy grupę rzędów tabeli.
table-cell Tworzy komórkę tabeli.
table-column Tworzy kolumnę tabeli.
table-row Tworzy rząd tabeli.
none Element jest całkowicie usunięty.
initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS display

display: value;

Wsparcie przeglądarek dla właściwości display

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość chrome edge firefox safari opera
display 4.0 8.0 3.0 3.1 7.0

 

Przykładowe zastosowania z właściwością display

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Właściwość CSS:
display:

 
Rezultat:
A span element. mySpan. Another span element.
Kod CSS:
span#mySpan {
background-color:red;
display:inline;
}
 

 

Przykłady właściwości display

display: contents;

display: inline;

display: block;

display:list-item;

display:none;

display:compact;

display:run-in;

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00