Inne działy

 

 

CSS właściwość display

 

Definicja i Wykorzystanie

 

Właściwość CSS display jest używana do określenia, czy dany element powinien być wyświetlany, a jeśli tak, to w jaki sposób zostanie on wyświetlony.

 

Wartość domyślna: inline
Dziedziczenie: nie
Wersja: CSS1
JavaScript składnia: object.style.display="inline"

 

Właściwość display jest dostępna we wszystkich głównych przeglądarkach.

Uwaga: Wartości "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", i "inherit" nie są obsługiwane w IE7 i wcześniejszych. IE8 wymaga !DOCTYPE. IE9 obsługuje wartości.

Wartości właściwości

 

WartośćOpis
none Element nie zostanie w ogóle wyświetlony
box (or flex-box) Element jest wyświetlany jako blokowy w polu pojemnika
block Element jest wyświetlany jako element blokowy (np. akapity i nagłówki)
flex Element jest wyświetlany jako blokowy w polu pojemnika
inline To jest opcja domyślna. Element jest wyświetlany jako element inline (jak span)
inline-block Element jest umieszczony w elemencie wbudowanym (na tej samej linii, obok zawartości), ale działa jak element bloku
inline-flex Element jest wyświetlany jako inline-level
inline-table Element jest wyświetlany jako tabela inline-level
list-item Element jest wyświetlany jako list-item
table Element jest wyświetlany w postaci tabeli
table-caption Element jest wyświetlany jako tytuł tabeli
table-cell Element jest wyświetlany w komórce tabeli
table-column Element jest wyświetlany jako kolumny w tabeli
table-column-group Element jest wyświetlany jako grupa kolumn tabeli (jak <colgroup>)
table-footer-group Element jest wyświetlany w postaci tabeli grupy wiersza stopki
table-header-group Element jest wyświetlany w postaci nagłówka tabeli grupy wierszy
table-row Element jest wyświetlany jako wiersz tabeli
table-row-group Element jest wyświetlany jako grupy wierszy tabeli
inherit Wartość właściwości display będzie dziedziczona z elementu nadrzędnego

 

Przykład

.hidden  { display: none }

Przykład

 

<style type="text/css">
.hidden { display: none }
.displayed { display: inline }
</style>
<ul>
<p class="hidden">Mam sekret.</p>
<p class="displayed">Jaki jest twój sekret?</p>
</ul>

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>

<p>Te dwa akapity generuje liniowe pola, a to powoduje</p>

<p>odległość pomiędzy dwoma elementami.</p>

</body>
</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.