Autor publikacji
Virtual Patriot - Administrator

display

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości display

Za pomocą właściwości display możemy określić typ interesującego nas elementu HTML.

Typ elementu HTML ma wpływ między innymi na:

  • sposób układania się elementu HTML względem sąsiadujących elementów HTML lub tekstu
  • możliwość reagowania elementu HTML na poszczególne właściwości CSS

Typami elementu HTML, na które najczęściej natrafiamy są:

Informacje dodatkowe

jeżeli decydujemy się zmienić domyślny typ interesującego nas elementu HTML, wtedy należy korzystać z następujących typów: inline, block, none, inline-block, table, inline-table, list-item, flex, inline-flex, grid, inline-grid. Każdy inny typ może powodować wystąpienie różnych niepożądanych efektów w różnych sytuacjach.

Informacje techniczne o właściwości display

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

inline

wyjątki initial
animowanie

tak (animacja schodkowa)

Interpretacja właściwości display

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Safari

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Opera

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Internet Explorer

tak

Interpretuje wartość table, inline-table, table-caption, table-column-group, table-column, table-header-group, table-row-group, table-footer-group, table-row oraz table-cell, lecz od wersji "8".

Nie interpretuje wartości flex, inline-flex, grid, inline-grid, ruby, ruby-base, ruby-text oraz ruby-text-container.

Edge

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Opis wartości właściwości display

inline

Wyjaśnienie

Wartość inline jest domyślną wartością właściwości display.

Wartość inline właściwości display sprawia, że element HTML staje się elementem HTML typu inline.

Główną rolą typu inline jest umożliwienie elementowi HTML występowanie na poziomie tekstu. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, inline-table, inline-flex, inline-grid, ruby, ruby-base, ruby-text lub ruby-text-container.

Cechy elementu HTML typu inline

  • sąsiadujące w kodzie HTML elementy HTML typu inline po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu inline układa się tak samo jak tekst elementu HTML
  • element HTML typu inline posiada tylko jeden wiersz na treść, lecz gdy jest to konieczne wspomniany wiersz może zostać przełamany do następnego wiersza elementu rodzica
Informacje dodatkowe

gdy element HTML posiadający właściwość display wraz z wartością inline posiada właściwość writing-mode wraz z wartością różną od wartości właściwości writing-mode najbliższego elementu przodka tworzącego blok treści, wtedy wartość inline właściwości display elementu HTML zachowuje cechy podobne do cech wartości inline-block

niezależnie od wyżej wymienionej reguły, gdy element HTML posiadający właściwość display wraz z wartością inline posiada pozycję absolute lub fixed, wtedy wartość inline właściwości display elementu HTML zachowuje cechy podobne do cech wartości block

Przykład

  display:inline;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

block

Wyjaśnienie

Za pomocą wartości block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu block.

Główną rolą typu block jest umożliwienie elementowi HTML tworzenie bloku treści. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, list-item, table, inline-table, table-caption, table-header-group, table-row-group, table-footer-group, table-row, table-cell, flex, inline-flex, grid, inline-grid, jak również elementy dzieci elementu HTML typu flex, elementy dzieci elementu HTML typu inline-flex, elementy dzieci elementu HTML typu grid oraz elementy dzieci elementu HTML typu inline-grid.

Cechy elementu HTML typu block

  • kolejno występujące w kodzie HTML elementy HTML typu block po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu block tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:block;
przykładowy tekst przed elementem "span" przykładowy tekst w elemencie "span" przykładowy tekst pomiędzy elementami "span" ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych przykładowy tekst po elemencie "span"

Przykładowe elementy "span" stały się elementami HTML typu "block", ponieważ do wspomnianych elementów "span" została dodana właściwość "display" wraz z wartością "block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      span {
        display:block;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "span"
    <span>przykładowy tekst w elemencie "span"</span>
    przykładowy tekst pomiędzy elementami "span"
    <span>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych</span>
    przykładowy tekst po elemencie "span"

  </body>
</html>

none

Wyjaśnienie

Za pomocą wartości none właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu none. Element HTML typu none istnieje w kodzie HTML, lecz element HTML typu none nie jest wyświetlany w oknie przeglądarki internetowej.

Przykład

  display:none;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "none", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:none;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-block

Wyjaśnienie

Za pomocą wartości inline-block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-block.

Cechy elementu HTML typu inline-block

  • sąsiadujące w kodzie HTML elementy HTML typu inline-block po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-block tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:inline-block;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-block", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-block;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

list-item

Wyjaśnienie

Za pomocą wartości list-item właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu list-item.

Cechy elementu HTML typu list-item

  • kolejno występujące w kodzie HTML elementy HTML typu list-item po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu list-item tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • unikatowymi właściwościami CSS dla elementu HTML typu list-item są następujące właściwości CSS: list-style-type, list-style-position, list-style-image, list-style

Pierwotnym elementem HTML typu list-item jest element li. 

<ol>
  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    pierwszy przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    drugi przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    trzeci przedmiot listy HTML
  </li>
</ol>

Przykład

  display:list-item;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "list-item", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "list-item".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:list-item;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table

Wyjaśnienie

Za pomocą wartości table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table.

Cechy elementu HTML typu table

  • kolejno występujące w kodzie HTML elementy HTML typu table po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • unikatowymi właściwościami CSS dla elementu HTML typu table są następujące właściwości CSS: border-collapse, border-spacing, table-layout

Pierwotnym elementem HTML typu table jest element table. 

<table><!-- pierwotny element HTML typu TABLE -->
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-table

Wyjaśnienie

Za pomocą wartości inline-table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-table.

Cechy elementu HTML typu inline-table

  • sąsiadujące w kodzie HTML elementy HTML typu inline-table po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-table tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • unikatowymi właściwościami CSS dla elementu HTML typu inline-table są następujące właściwości CSS: border-collapse, border-spacing, table-layout

Przykład

  display:inline-table;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-table;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-caption

Wyjaśnienie

Za pomocą wartości table-caption właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-caption.

Cechy elementu HTML typu table-caption

  • kolejno występujące w kodzie HTML elementy HTML typu table-caption po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-caption tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • unikatową właściwością CSS dla elementu HTML typu table-caption jest właściwość caption-side

Pierwotnym elementem HTML typu table-caption jest element caption. 

<table>
  <caption><!-- pierwotny element HTML typu CAPTION -->
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-caption;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-caption", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-caption".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-caption;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column-group

Wyjaśnienie

Za pomocą wartości table-column-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column-group. Element HTML typu table-column-group istnieje w kodzie HTML, lecz element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu table-column-group

  • mimo że element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column-group oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column-group jest element colgroup. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup><!-- pierwotny element HTML typu TABLE-COLUMN-GROUP -->
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column

Wyjaśnienie

Za pomocą wartości table-column właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column. Element HTML typu table-column istnieje w kodzie HTML, lecz element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu table-column

  • mimo że element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column jest element col. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-header-group

Wyjaśnienie

Za pomocą wartości table-header-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-header-group.

Cechy elementu HTML typu table-header-group

  • kolejno występujące w kodzie HTML elementy HTML typu table-header-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-header-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-header-group jest element thead. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead><!-- pierwotny element HTML typu TABLE-HEADER-GROUP -->
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-header-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-header-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-header-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-header-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row-group

Wyjaśnienie

Za pomocą wartości table-row-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row-group.

Cechy elementu HTML typu table-row-group

  • kolejno występujące w kodzie HTML elementy HTML typu table-row-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-row-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row-group jest element tbody. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody><!-- pierwotny element HTML typu TABLE-ROW-GROUP -->
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row-group;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row

Wyjaśnienie

Za pomocą wartości table-row właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row.

Cechy elementu HTML typu table-row

  • kolejno występujące w kodzie HTML elementy HTML typu table-row po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-row tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row jest element tr. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-cell

Wyjaśnienie

Za pomocą wartości table-cell właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-cell.

Cechy elementu HTML typu table-cell

  • sąsiadujące w kodzie HTML elementy HTML typu table-cell po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu table-cell tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • unikatową właściwością CSS dla elementu HTML typu table-cell jest właściwość empty-cells

Pierwotnym elementem HTML typu table-cell jest element th oraz element td. 

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 2</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 3</th><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 5</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 6</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 8</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 9</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tfoot>
</table>

Przykład

  display:table-cell;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-cell", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-cell".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-cell;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

flex

Wyjaśnienie

Za pomocą wartości flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu flex.

Cechy elementu HTML typu flex

  • kolejno występujące w kodzie HTML elementy HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu flex tworzy blok treści, który domyślnie może składać się wyłącznie z jednego wiersza wypełnionego treścią, który dodatkowo nie może zostać przełamany
  • unikatowymi właściwościami CSS dla elementu HTML typu flex są następujące właściwości CSS: flex-direction, flex-wrap, flex-flow

Cechy elementów dzieci elementu HTML typu flex

  • elementy dzieci elementu HTML typu flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
  • domyślnie elementy dzieci elementu HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
  • unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu flex są następujące właściwości CSS: flex-grow, flex-shrink, flex-basis, flex

Przykład

  display:flex;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:flex;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-flex

Wyjaśnienie

Za pomocą wartości inline-flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-flex.

Cechy elementu HTML typu inline-flex

  • sąsiadujące w kodzie HTML elementy HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-flex tworzy występujący na poziomie tekstu blok treści, który domyślnie może składać się wyłącznie z jednego wiersza wypełnionego treścią, który dodatkowo nie może zostać przełamany
  • unikatowymi właściwościami CSS dla elementu HTML typu inline-flex są następujące właściwości CSS: flex-direction, flex-wrap, flex-flow

Cechy elementów dzieci elementu HTML typu inline-flex

  • elementy dzieci elementu HTML typu inline-flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
  • domyślnie elementy dzieci elementu HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
  • unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu inline-flex są następujące właściwości CSS: flex-grow, flex-shrink, flex-basis, flex

Przykład

  display:inline-flex;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-flex;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

grid

Wyjaśnienie

Za pomocą wartości grid właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu grid.

Cechy elementu HTML typu grid

Cechy elementów dzieci elementu HTML typu grid

  • elementy dzieci elementu HTML typu grid zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
  • domyślnie elementy dzieci elementu HTML typu grid po wyświetleniu w oknie przeglądarki internetowej układają się jeden po drugim w kolejnych komórkach wierszy siatki
  • unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu grid są następujące właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area

Przykład

  display:grid;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "grid", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "grid".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:grid;
        grid-template-rows:75px 75px 75px;
        grid-template-columns:75px 75px 75px;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }

      .dziecko-4 {
        background-color:pink;
      }

      .dziecko-5 {
        background-color:red;
      }

      .dziecko-6 {
        background-color:lime;
      }

      .dziecko-7 {
        background-color:fuchsia;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-grid

Wyjaśnienie

Za pomocą wartości inline-grid właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-grid.

Cechy elementu HTML typu inline-grid

Cechy elementów dzieci elementu HTML typu inline-grid

  • elementy dzieci elementu HTML typu inline-grid zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko
  • domyślnie elementy dzieci elementu HTML typu inline-grid po wyświetleniu w oknie przeglądarki internetowej układają się jeden po drugim w kolejnych komórkach wierszy siatki
  • unikatowymi właściwościami CSS dla elementów dzieci elementu HTML typu inline-grid są następujące właściwości CSS: grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-row, grid-column, grid-area

Przykład

  display:inline-grid;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3 span - 4 span - 5 span - 6 span - 7
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-grid", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-grid".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-grid;
        grid-template-rows:60px 60px 60px;
        grid-template-columns:60px 60px 60px;
        background-color:#7DCDE8;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }

      .dziecko-4 {
        background-color:pink;
      }

      .dziecko-5 {
        background-color:red;
      }

      .dziecko-6 {
        background-color:lime;
      }

      .dziecko-7 {
        background-color:fuchsia;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
      <span class="dziecko-4">span - 4</span>
      <span class="dziecko-5">span - 5</span>
      <span class="dziecko-6">span - 6</span>
      <span class="dziecko-7">span - 7</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby

Wyjaśnienie

Za pomocą wartości ruby właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby.

Cechy elementu HTML typu ruby

  • sąsiadujące w kodzie HTML elementy HTML typu ruby po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby układa się tak samo jak tekst elementu HTML
  • element HTML typu ruby posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby jest element ruby. 

<ruby><!-- pierwotny element HTML typu RUBY -->
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-base

Wyjaśnienie

Za pomocą wartości ruby-base właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-base.

Cechy elementu HTML typu ruby-base

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-base po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-base jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby-base układa się tak samo jak tekst elementu HTML
  • element HTML typu ruby-base posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-base jest element rb. 

<ruby>
  <rb>日本語</rb><!-- pierwotny element HTML typu RUBY-BASE -->
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-base;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-base", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-base".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-base;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text

Wyjaśnienie

Za pomocą wartości ruby-text właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text.

Cechy elementu HTML typu ruby-text

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-text po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-text układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text elementem HTML typu ruby-text-container
  • element HTML typu ruby-text jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
  • element HTML typu ruby-text posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text jest element rt. 

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt><!-- pierwotny element HTML typu RUBY-TEXT -->
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-text;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text-container

Wyjaśnienie

Za pomocą wartości ruby-text-container właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text-container.

Cechy elementu HTML typu ruby-text-container

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-text-container po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-text-container jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
  • element HTML typu ruby-text-container układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text-container elementem HTML typu ruby-text
  • element HTML typu ruby-text-container posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text-container jest element rtc. 

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc><!-- pierwotny element HTML typu RUBY-TEXT-CONTAINER -->
</ruby>

Przykład

  display:ruby-text-container;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text-container", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text-container".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text-container;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>