Display list item

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline. Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

visibility: visible|hidden|collapse

Атрибут может принимать три значения:

  • visible — элемент отображается на web-странице (значение по умолчанию);
  • hidden — элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
  • collapse — применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.

Ниже можно посмотреть как работает это свойство:

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

<style>
.el1 { visibility: hidden; }
.el2:hover + .el1 { visibility: visible; }
</style>

А html код так:

<p class=»el2″>Наведи на меня курсором мыши!</p>
<p class=»el1″>Я невидимый абзац. Я появляюсь, когда вы наводите на соседний со мной сверху абзац!</p>


Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.

Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

А вот атрибут display намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.

Доступных значений у этого стиля довольно много:

display:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-caption|table-column|table-column-group|table-header-group|table-row-group|table-footer-group|table-row|table-cell

Если кратко, то каждое значение оказывает на html элементы следующее действие:


  • block — элемент отображается как блочный;
  • inline — элемент выводится как строчный;
  • inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега <img>);
  • inline-table — делает из элемента таблицу, как при использовании тега <table>, но при этом таблица является встроенным элементом и она обтекается другими элементами;
  • list-item — элемент становится блочным и к нему добавляется маркер списка;
    none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;
  • run-in — элемент становится блочным или строчным в зависимости от контекста;
  • table — задает, что элемент является таблицей как при использовании тега <table>;
  • table-caption — формирует из элемента заголовок таблицы, как при применении тега <caption>;
  • table-cell — элемент представляет из себя ячейку таблицы, подобно тегу <td> или <th>;
  • table-column — элемент является колонкой таблицы, как при теге <col>;
  • table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега <colgroup>;
  • table-footer-group — действует подобно тегу <tfoot>.
  • table-header-group — по своему действию значение похоже на тег <thead>.
  • table-row — делает из элемента строку таблицы как тег <tr>;
  • table-row-group — действует как тег <tbody>.

Далее рассмотрим наиболее важные значения свойства display подробнее.

Делаем блочный элемент строчным — значения block и inline

Из статьей по языку HTML вам должно быть известно, что элементы на веб страницах формируются на основе тегов. То, как эти элементы, будут отображаться в браузере зависит от правил стилевой разметки CSS заданных вами, либо принятых по умолчанию.

При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице:  будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:


display:block

Для остальных элементов, если не указано иного, применяется правило display:inline.

При необходимости, с помощью правила display, всегда можно сделать блочный элемент строчным и наоборот, просто указав нужное значение в стилях CSS.

Давайте рассмотрим такой пример:

<h1 style=»background: green»>Заголовок h1</h1>
<span style=»background:blue»>Элемент span — строчный элемент</span>

В примере два элемента: один блочный (h1)  и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:

display

На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.


В следующем примере сделаем из блочного элемента h1 строчный. Для этого в стилях добавим для него правило display:inline:

<h1 style=»background: green; display:inline;»>Заголовок h1</h1>
<span style=»background:blue»>Элемент span — строчный элемент</span>

display-inline

В результате видим, что элемент h1 перестал занимать все доступное ему по ширине пространство и исчез разрыв строки после него, в следствии чего к нему прижался следующий за ним строчный элемент span.

Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным:

<h1 style=»background: green; display:inline;»>Заголовок h1</h1>
<span style=»background:blue; display:block;»>Элемент span — строчный элемент</span>

display-block


В итоге получится, что элемент span перенесется на следующую строку и будет занимать всю доступную ему по ширине область страницы, в не зависимости от количества заключенного в него контента.

Таким образом, можно манипулировать любыми элементами хтмл страниц: например, превращать заголовки и абзацы в строчные элементы, а строчные элементы оформления текста в блочные.

webcodius.ru

Тип свойства

Назначение: форматирование.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS display является одно из ключевых слов, задающих тип элемента. К сожалению, полностью поддерживаются всеми браузерами только значения, которые появились еще в CSS 1.

Значения свойства display их описание и поддержка браузерами
Значение Описание Поддержка
inline Элемент ведет себя, как встроенный, то есть не создает до и после себя перевод строк в начало. Всеми браузерами
block Применение данного значения преобразует элемент в блочный, то есть он создает до и после себя перевод строк в начало.

  • При добавлении значения block к тегам <LI>, Internet Explorer 6.0 и 7.0 не убирают у них маркеры, то есть действуют так, как будто это значение list-item.

IE 6.0 и 7.0
Остальные браузеры
inline-block Элемент становится блочным, например, у него можно изменять ширину и высоту. Но окружающие элементы воспринимают его как встроенный, то есть он не создает до и после себя переноса строк.

  • Internet Explorer 6.0 и 7.0 выравнивают низ элемента по базовой линии строки, на которой он находится, а все остальные браузеры базовую линию последней строки элемента. Кроме этого, IE 6.0 и 7.0 не поддерживает это значение для блочных элементов и тех, которые ведут себя, как блоки (например, элементы списков).
IE 6.0 и 7.0
Firefox 2.0
Остальные браузеры
list-item Элемент преобразуется в блочный, но со свойствами элемента списка (тег <LI>) к которому можно применить, например, list-style-type. И если их на странице присутствует несколько, то они являются элементами одного списка. Всеми браузерами
none Элемент не отображается на странице и никаким образом не влияет на ее форматирование  — другие элементы ведут себя так, будто его нет совсем. Это же свойство наследуется всеми потомками элемента, причем его нельзя изменить применив к ним display. Всеми браузерами
run-in Элемент становится блочным или встроенным в зависимости от его местонахождения в HTML-коде по следующим правилам:


  1. Если элемент run-in содержит блочный элемент, то он тоже становится блочным.
  2. Если элемент run-in указан перед блочным элементом, который не является абсолютно позиционированным или всплывающим. То элемент run-in становится первым встроенным элементом данного блочного элемента.
  3. В противном случае элемент run-in становится блочным.
IE 6.0 и 7.0
Firefox 2.0 и выше
Остальные браузеры
table Создание блочного элемента определяющего таблицу, подобно тегу <TABLE>. IE 6.0 и 7.0
Остальные браузеры
inline-table Создание встроенного элемента определяющего таблицу, которая не создает переносы строк, а располагается на одной строке с другими инлайн-элементами.

  • Браузеры, которые поддерживают inline-table совершенно по-разному выравнивают встроенную таблицу относительно строки, на которой она находится: одни совмещают базовую линию строки и низ таблицы, другие — верх, третьи — базовую линию первой строки таблицы.

IE 6.0 и 7.0
Firefox 2.0
Остальные браузеры
table-caption Элемент используется для создания заголовка HTML-таблицы, аналог тега <CAPTION>. IE 6.0 и 7.0
Остальные браузеры
table-column-group Элемент для группирования одного или нескольких столбцов таблицы, как тег <COLGROUP>. IE 6.0 и 7.0
Остальные браузеры
table-column Элемент, определяющий столбец таблицы, как тег <COL>. IE 6.0 и 7.0
Остальные браузеры
table-header-group Элемент, предназначен для создания «шапки» таблицы, аналог тега <THEAD>. Причем на него распространяются те же правила: должен указываться перед элементами определяющими тело и футер таблицы, но после заголовка и элементов группирования столбцов. Если в таблице присутствует несколько элементов с display: table-header-group, то только первый станет шапкой, остальные будут отнесены к телу таблицы. IE 6.0 и 7.0
Остальные браузеры
table-footer-group Элемент, предназначен для создания футера таблицы, аналог тега <TFOOT>. Должен указываться перед ее телом, но после «шапки». Если в таблице присутствует несколько элементов с display: table-footer-group, то только первый станет футером, остальные будут отнесены к телу таблицы. IE 6.0 и 7.0
Остальные браузеры
table-row-group Создание элемента предназначенного для создания тела таблицы, аналог тега <TBODY>. IE 6.0 и 7.0
Остальные браузеры
table-row Элемент для создания ряда (строки) таблицы, аналог тега <TR>. IE 6.0 и 7.0
Остальные браузеры
table-cell Элемент используется для создания ячейки таблицы, аналог тега <TD>. IE 6.0 и 7.0
Остальные браузеры
inherit Наследует значение свойства CSS display от родительского элемента. IE 6.0 и 7.0
Остальные браузеры

Процентная запись: не существует.

Значение по умолчанию: inline.

Синтаксис

Пример CSS: использование display

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>seodon.ru - CSS свойство display</title>  <style type="text/css">  .table { display: table; width:100%; border-spacing: 5px; border: 5px #03c solid; }  .caption { display: table-caption; }  .colgroup { display: table-column-group; }  .col { display: table-column;}  .thead { display: table-header-group; background:#ccc; }  .tfoot { display: table-footer-group; background:#ccc; }  .tbody { display: table-row-group; }  .tr { display: table-row; }  .td { display: table-cell; border: 2px #c03 dashed; }  </style>  </head>  <body>  <div class="table">  <div class="caption">Создание таблицы в CSS</div>  <div class="colgroup">  <div class="col"></div><div class="col" style="background:#3c0"></div>  </div>  <div class="thead">  <div class="tr"><div class="td">Шапка 1.1</div><div class="td">Шапка 1.2</div></div>  </div>  <div class="tfoot">  <div class="tr"><div class="td">Футер 1.1</div><div class="td">Футер 1.2</div></div>  </div>  <div class="tbody">  <div class="tr"><div class="td">Ячейка 1.1</div><div class="td">Ячейка 1.2</div></div>  <div class="tr"><div class="td">Ячейка 2.1</div><div class="td">Ячейка 2.2</div></div>  </div>  </div>  </body> </html>

Результат примера

Результат. Использование свойства CSS display.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

spravka.seodon.ru

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

  1. на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; } </style>  <div class="temnyi">  <div class="svetlyi">А</div> </div>
  2. если не задано значение width, элемент растягивается на весь родительский контейнер.
  3. если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
  4. если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
  5. при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
  6. не действуют такие свойства, как vertical-align.
  7. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

      Пример использования

display: inline;

По умолчанию присвоен a, span, b, em и т.д.

  1. элементы следуют друг за другом.
    <div class="temnyi">  <span class="svetlyi">А</span> </div>
  2. width и height игнорируются. Его ширина — это ширина содержимого плюс margin, border и padding.
  3. margin-top и margin-bottom игнорируются.
  4. совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут «наезжать» друг на друга.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { padding: 10px; background-color: rgba( 255, 255, 255, 0.7); } </style>
  5. не может иметь text-align. Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.

      Пример использования

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

  1. элементы следуют друг за другом.
  2. имеет width и height, margin-top и margin-bottom.
  3. если не задано значение width (max-width), растягивается по ширине самого длинного элемента внутри. Удобно при использовании модального окна, где нужно уйти от фиксированных размеров, поскольку картинки могут быть совершенно разными.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; text-align: center; font-size: 150%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; display: inline-block; padding: 10px; } </style>  <div class="temnyi">  <div class="svetlyi">  <img src="URL-изо"/>  название изо  </div> </div>
  4. на него можно воздействовать посредством text-align и vertical-align.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; } .temnyi div { background-color: #fff; width: 20%; margin: 5px; display: inline-block; vertical-align: top; } .temnyi div:nth-child(2) { width: 10%; } .temnyi div:nth-child(3) { width: 30%; } .temnyi div:nth-child(4) { width: 20%; } .temnyi div:nth-child(5) { width: 30%; } .temnyi div:nth-child(6) { width: 40%; } </style>  <div class="temnyi">  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  <div> 55 </div>  <div> 6 </div> </div>

    Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.

      Пример использования

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; display: run-in; } </style>   <div class="svetlyi">А</div>  <div class="temnyi">какой-то текст</div>

display: table;

По умолчанию присвоен table.

  1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
  3. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
  4. не действуют такие свойства, как vertical-align.
  5. применимы свойства border-collapse и border-spacing.

display: inline-table;

Аналогичен display: inline-block.

  1. применимы свойства border-collapse и border-spacing.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

  1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
  2. элемент растягивается по длине содержимого.
  3. width, border, padding, margin, vertical-align игнорируются.
  4. можно изменить значение height.
  5. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

display: table-cell;

По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

  1. элементы следуют друг за другом.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
  3. высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
  4. margin игнорируется. Это свойство заменяется border-spacing у родителя.
  5. на его содержимое можно воздействовать посредством text-align и vertical-align.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; display: table; border-collapse: separate; border-spacing: 10px 7px; } .temnyi > div { display: table-row; } .temnyi > div > div { background-color: #fff; width: 20%; vertical-align: middle; display: table-cell; text-align: center; } .temnyi > div > div:nth-child(2) { width: 10%; } .temnyi > div > div:nth-child(3) { width: 30%; } .temnyi > div > div:nth-child(4) { width: 20%; } </style>  <div class="temnyi">  <div>  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  </div>  <div>  <div> 55 </div>  <div> 6 </div>  </div> </div>

      Пример использования

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

      Пример использования

shpargalkablog.ru

Синтаксис

Свойство display задается с использованием значений ключевых слов. Значения ключевых слов сгруппированы по шести категориям:

В настоящее время лучше всего display с использованием одного ключевого слова; хотя последние спецификации позволяют сочетать некоторые ключевые слова, это пока еще не поддерживается браузерами.

Значения

<display-outside>
Эти ключевые слова определяют внешний тип отображения элемента, который по существу является его ролью в макете потока. Они определяются следующим образом:
<display-inside>
Эти ключевые слова определяют внутренний тип отображения элемента, который определяет тип контекста форматирования, который излагает его содержимое (при условии, что он является незаменимым элементом). Они определяются следующим образом:
<display-listitem>

Элемент генерирует блок-блок для содержимого и отдельный встроенный блок списка-элемента.

Если значение <display-inside> не указано, внутренний тип отображения основного окна по умолчанию имеет значение flow . Если значение <display-outside> не указано, внешний тип внешнего окна основного блока block .

<display-internal>

Некоторые модели макета, такие как таблица и рубин, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут заполнять их дети и потомки. В этом разделе определяются эти «внутренние» значения отображения, которые имеют смысл только в этом режиме макета.

Если не указано иное, как внутренний тип отображения, так и внешний тип элементов отображения с использованием этих отображаемых значений устанавливаются в заданное ключевое слово.

<display-box>
Эти значения определяют, генерирует ли элемент все поля отображения.
<display-legacy>
В CSS 2 использовался синтаксис с одним ключевым словом для свойства display , требующий отдельных ключевых слов для вариантов уровня блока и встроенного уровня одного и того же режима макета. Они определяются следующим образом:

Формальный синтаксис

[ <display-outside> || <display-inside> [ | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root [?
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Примеры

Скрыть элемент

HTML

<p>Visible text</p> <p class="secret">Invisible text</p>

CSS

p.secret {  display: none; }

результат

Просмотр живых примеров

Доступность

display: none;

Использование display значения none для элемента приведет к удалению его из дерева доступности . Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявлены технологией чтения экрана.

Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование комбинации свойств для визуального удаления с экрана, но сохраните ее в синтаксисе с помощью вспомогательных технологий, таких как устройства чтения с экрана.

таблицы

Изменение display значения элемента <table> для block , grid или flex изменит его представление в дереве доступности . Это приведет к тому, что таблица больше не будет объявлена ​​должным образом с помощью технологии чтения экрана.

  • Краткая заметка о свойствах отображения CSS для семантики таблицы — группа Paciello
  • Скрытый контент для улучшения a11y | Go Make Things
  • MDN Понимание WCAG, пояснения 1.3 Руководства
  • Понимание критерия успеха 1.3.1 | W3C Общие сведения о WCAG 2.0

code-examples.net

Display block и inline — как блочный сделать строчным

Как мы с вами уже узнали из курса по языку Html, на веб страницах формируются элементы с помощью тегов, которые в свою очередь обрабатывает парсер Html используемого вами браузера и отображает их на экране вашего компьютера. То, как будут выглядеть эти элементы (созданные на основе Html тегов), определяется в современной верстке языком стилевой разметки CSS.

Даже если вы никаких специальных стилей не задавали для каких-либо тегов, то они все равно будут отображаться браузером с учетом тех правил, которые были приняты для них по умолчанию. Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов? Ну, все в том же валидаторе W3C на этой странице. Если прокрутить ее оглавление до конца, то там вы увидите ссылку «Default style sheet for HTML 4», где и будет приведена нужная нам информация.

К чему все это? Я уже неоднократно при описании тех или иных Html тегов акцентировал ваше внимание на том, к какому именно типу относится этот тег — строчный или же блочный. В зависимости от этого мы предполагали наличие определенного поведения у данных элементов — либо они будут стремиться занять все доступное им место по ширине (блочные), либо не будут (строчные).

Но я так и не объяснил откуда берется такое разделение и где можно узнать к какому именно типу относится конкретный тег. Так вот, узнать это как раз можно на упомянутой нами странице спецификации CSS под названием «Default style sheet for HTML 4» и отвечает за все это безобразие специальное правило Display.

Например, там в самом начале перечислены все элементы, которые относятся к блочным и происходит это из-за того, что на них действует правило display:block:

Display list item

Здесь вы можете увидеть все те же теги абзацев P, заголовков H1-H6, контейнеров Div и других блочных элементов. Если посмотреть на список CSS свойств и допустимых для них значений в валидаторе W3C, то для display мы увидим следующее:

Display list item

Если не указано другого, то по умолчанию будет использоваться вариант «display:inline» (т.к. именно это значение прописано в столбце «Initial value»), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице спецификации «Default style sheet for HTML 4» те теги, которые должны отображаться как строчные (например, span), вообще не описаны или для них не указано значение Дисплей, ибо по умолчанию они и так будут строчными.

Правило Дисплей отвечает за то, как данный элемент надо строить и отображать браузеру. Оно говорит обозревателю, что из себя представляет тег и как его надо показывать. Имеется возможность показывать как элемент строки (display: inline) или как блок (block), показывать как таблицу (table) или как часть таблицы (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это правило очень важное.

Но то, что задано по умолчанию для тегов, вовсе не является величиной постоянной. При желании или возникшей необходимости вы всегда сможете сделать блочный элемент (для которого по умолчанию браузер использовал display: block) строчным и, соответственно, наоборот.

Давайте рассмотрим простой пример с тремя тэгами, один из которых по умолчанию будет строчным (span), а два других — блочными (H3 и P). Для большей наглядности я залил область отведенную для этих элементов фоном с помощью Background:

<h3 style="background:#FFC0C0"> H3 по умолчанию будет отображать браузером как блочный</h3> <span style="background:#C0FFFF"> Span - типичный пример строчного тега </span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный <p> 

В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display:

Display list item

Как видите, первый блок H3 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента.

Ну, а теперь давайте из изначально блочного тега H3 сделаем строчный с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности):

<h3 style="background:#FFC0C0;display: inline;"> H3</h3> <span style="background:#C0FFFF;"> Span</span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный тэг <p>> 

Display list item

Как вы можете видеть, браузер учел display:inline и теперь элемент заголовка H3 (изначально блочный) уже не занимает все доступное ему по ширине пространство, вследствие чего к нему вплотную оказался прижат следующий за ним строчный тэг Span.

Но прижался он к предыдущему не вплотную, а разделенный пробелом. При бытности заголовка H3 блоком этот пробел не учитывался, но после его перерождения в тег строчный, все стоящие в коде пробельные символы (пробелы, табуляции и переносы строк) были преобразованы в единственный пробел по всем правилам языка гипертекстовой разметки, о которых вы можете почитать по приведенной ссылке.

Точно так же можно из строчного тега Span сделать блочный с помощью добавления display:block:

<h3 style="background:#FFC0C0;display: inline;"> H3</h3> <span style="background:#C0FFFF;display: block;"> Span</span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный Html элемент <p> 

И в результате наше наглядное пособие отобразит произошедшую метаморфозу (что это?):

Display list item

Span стал занимать всю область,доступную ему по ширине в не зависимости от количества контента заключенного в этот тэг.

Display list-item — создание списков на основе блочных тегов

А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item. Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:

<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0"> Первый абзац (тег P) <p> <p style="background:#C0FFC0"> Второй абзац <p> <p style="background:#C0FFC0"> Третий <p> 

Которые будут выглядеть примерно так:

Display list item

Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:

<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0;display:list-item;"> Первый абзац (тег P) </p> <p style="background:#C0FFC0;display:list-item;"> Второй абзац </p> <p style="background:#C0FFC0;display:list-item;"> Третий </p> 

Но в таком виде вы никаких изменений не заметите. Область маркера добавляется перед областью блочного тега и чтобы ее увидеть, нужно каким-либо образом отодвинуть этот блок слева от края контейнера, в котором он живет. Сделать это можно с помощью все того же Margin, а именно прописав для нужных абзацев margin-left:20px (или заключив абзацы, например, в тег цитаты blockquote) и тогда получим следующую картину:

Display list item

Т.о. мы создали элементы маркированного Html списка без использования тегов LI (получился аналог UL). При желании, для настройки вида используемого маркера вы сможете использовать уже рассмотренное нами ранее CSS правило list style. Можно сделать и обратное, т.е. прописать для тэгов LI свойство display:block и сделать из списка обычные абзацы.

Еще среди возможных значений Display вы можете видеть огромное количество вариантов для задания внешнего вида таблицам и ее составным частям. У каждого элемента таблицы в Html коде проставлено свое значение Дисплей:

Display list item

Касаться того, что именно они делают, я не буду, ибо вряд ли вам когда-нибудь это понадобится, а тема эта весьма сложна. Кроме того, даже IE 7 не поддерживает все эти значения Дисплей для таблиц, не говоря уже и о более старых версиях этого чудо-браузера.

ktonanovenkogo.ru

display: block

Поддерживается всеми браузерами (какие нас интересуют).

Обозначает, что элемент будет отображаться, как элемент блокового уровня. То есть можно написать стиль на элемент <EM>

EM {display: block}

и в теле документа он будет блокового уровня. Блоковый элемент имеет отступы до и после себя. Кроме этого в одной строке вместе с этим элементом не могут находится другие элементы (если только дополнительно для них не применять свойство float, ну, об этом позже).

Вот живой пример:

А вот код:

<DIV style="display: block; border: 1px solid black">
display: block
</DIV>

display: list-item

Не поддерживается MSIE 5.

Обозначает, что элемент будет отображаться, как элемент списка. То есть слева возле элемента будет находиться точка, что соответствует UL.

Вот живой пример:

А вот код:

<DIV style="display: block; border: 1px solid black; margin: 5px; padding: 15px">
display: block;
<DIV style="display: list-item; border: 1px solid black;">
display: list-item;
</DIV>
</DIV>

Однако, не все так просто. Разные браузеры эти точечки по разному ставят. Вот скриншоты:

list-item в Explorer 6.0 Explorer 6.0
list-item в Opera 5.02 Opera 5.02
list-item в Mozilla 0.9.1/Netscape 6 Mozilla 0.9.1/Netscape 6

Как видим, все браузеры отображают элемент по разному. Opera 5 ставит точечку внутри блока, тогда как остальные браузеры ее ставят снаружи блока (на скриншотах точка выходит даже за границы родительского блока, однако это не всегда так, если установить отступы (padding) побольше, то точечка будет внутри родительского элемента). Кроме того в Explorer 6 эта точечка меньше. Все эти несоответствия накладывают явно ограничение на использование свойства display: list-item.

display: table

В стандарте CSS2 реализовано визуальное представление таблиц с помощью стилей. Надо заметить сразу, что принципиальных отличий от таблиц в HTML 4.0 нет. То есть каждому тэгу соответ- ствует какой-нибудь атрибут свойства display. Вот этот список:

table (в HTML: TABLE)
Определяет элемент как таблицу блокового уровня со всеми вытекающими последствиями

inline-table (в HTML: TABLE)
Определяет элемент как таблицу строкового уровня со всеми вытекающими последствиями

table-row (в HTML: TR)
Определяет элемент, как строку таблицы

table-row-group (в HTML: TBODY)
Определяет элемент, как группу нескольких строк (надо сказать, абсолютно не нужен)

table-column (в HTML: COL)
Определяет элемент, как столбец таблицы

table-cell (в HTML: TD, TH)
Определяет элемент, как ячейку таблицы

Я тут пропустил всякие малополезные элементы, типа table-footer-group (в HTML: TFOOT) и т.п. Но это большого значения не имеет, потому как в MSIE все равно таблицы хрен поддерживаются, а потому заострять на них внимания нет особого смысла. Вот живой пример такого куска кода:

<DIV STYLE="display: table; border: 1px solid black; margin: 5px; padding: 15px">display: table

<DIV STYLE="display: table-row; border: 1px solid black">

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV></DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>

<DIV STYLE="display: table-cell; border: 1px solid black">
display: table-cell
</DIV>
</DIV>

А вот скриншоты:

display: table в Explorer 6.0 Explorer 6.0
display: table в Opera 5.02 Opera 5.02
display: table в Mozilla 0.9.1 Mozilla 0.9.1
display: table в Netscape 6 Netscape 6

Ясно, что об использовании свойства display: table лучше забыть до той поры, пока его не внедрит Microsoft. Впрочем, ничего особо полезного в этом свойстве и нет, потому что все это можно реализовать средствами HTML, к тому же и проще.

display: run-in

Вот и подобрались в загадочному свойству display: run-in. Сразу отмечу, что поддерживает это свойство только Opera 5. Почему же оно находится и в разделе элементов блокового уровня, и в разделе элементов строкового уровня? А потому что метод отображения этого свойства может быть как блоковым, так и строковым, в зависимости от некоторых условий. В спецификации W3С написано следующее:

  • Если блоковый элемент (который не является плавающим и не является абсолютно позиционированным) следует за run-in блоком, то run-in блок становится первым строковым блоком этого блокового элемента
  • В противном случае, run-in блок становится элементом блокового уровня.

Чисто ради спортивного интереса, вот скриншот из Opera 5.

display: compact вообще пока никем не поддерживается (Opera 5 с багом небольшим, правда, поддерживает, но это сути не меняет). Так что на этом свойстве и вовсе останавливаться не будем

Display list item

Итак, подведем промежуточный итог. Переходить на таблицы, описываемые свойством CSS display: table и т.д. на данный момент не представляется возможным. Впрочем, этого нам и не надо, поскольку реализовать таблицу гораздо проще с помощью HTML. Вообще говоря, таблицы в CSS делались исключительно под XML, потому что там не заранее определенных тегов, то есть форматирование полностью возлагается на язык стилей.

Наша цель уйти от табличной верстки, как таковой. C блоками мы разобрались, а потому в следующей части можно будет непосредственно перейти к визуальной модели форматирования. Продолжение следует…

www.i2r.ru

Как превратить блочный тег в строчный и наоборот с помощью display inline и block

Для придания гибкости при верстке как раз с помощью свойства display, которое имеет достаточно много значений (кроме указанных в начале) можно менять характеристики тех или иных вебэлементов.

Для каждого тега, соответствующего конкретному элементу, даны начальные значения по умолчанию. Подробная информация по этому вопросу предоставлена на специальной странице валидатора W3C (Default style sheet for HTML 4). Скажем, здесь целый список HTML тегов, которым соответствует значение block:

«>

Кстати, если display вообще не указан, то для конкретного тега будет применено именно дефолтное значение. В этом случае при необходимости изменить вид HTML вебэлемента следует просто прописать ему нужный параметр display. Это еще раз подтверждает тесную связь между языком гипертекстовой разметки и каскадными таблицами стилей.

Если мы посмотрим на перечень всех значений для свойства дисплей в таблице валидатора W3C, то обнаружим следующее:

«>

Здесь перечислены все возможные параметры для дисплей. В том случае, если не указано конкретное значение, по умолчанию будет действовать display inline, что соответствует тегу строки. Потому на странице спецификации «Defolt style sheet for HTML 4» теги, которые по умолчанию являются строчными, вообще отсутствуют в списке.

Как вы помните, в общем случае CSS правила дают команду браузеру, как отображать тот или иной вебэлемент. Скажем, для блочных и строчных это выглядит так: display:block и display:inline соответственно.

Однако, присвоенные (в том числе дефолтные) значения свойства дисплей не являются непререкаемой догмой и могут быть изменены. Сейчас и посмотрим, каким образом можно преобразовать блочные в строчные элементы, и наоборот.

Возьмем для примера часто встречающиеся при создании вебсайтов теги, для удобства придав каждому цветовой оттенок фона с помощью CSS свойства background:

<H2 style="background:#E8987A;">Заголовок</H2>  <p style="background:#AD814F;">Текст</p>  <span style="background:#60D4AE;">Тег span</span>

В итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами CSS правила дисплей. Вся эта композиция на вебстранице будет иметь такой вид (здесь можете посмотреть в живую):

«>

Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN — строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:

<p style="display:inline;background:#AD814F;">Текст</p>

Теперь в нашем примере произойдут вот такие превращения:

«>

Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет.

Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:

<span style="display:block;background:#60D4AE;">Тег span</span>

После такого редактирования картина будет таковой:

«>

Теперь элемент SPAN стал блочным. Это доказывает и его вид, поскольку он стал занимать все возможное пространство по ширине. И снова можете убедиться в корректности всех этих изысканий.

Display list-item — делаем списки из блочных элементов

Дальше поэкспериментируем немного в области создания HTML списков, которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item.

Для этого возьмем заголовок из предыдущего примера, а также несколько простых абзацев. Но так все-таки не остается видимой области для маркеров. Чтобы решить задачу в полном объеме, требуется задать отступы слева для всех пунктов списка с помощью свойства margin-left, указав ему конкретное значение (например, 25 пикселов):

<h2 style="background:#E8987A;">Заголовок</h2>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 1<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 2<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 3<p>

Результирующий вид окажется таким:

«>

Таким образом маркированный список готов. При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI.

Как я отметил выше, у свойства CSS дисплей существует еще немало параметров, посредством которых можно, например, оформлять таблицы. Каждому вебэлементу HTML таблицы соответствует определенный параметр display:

«>

Но подробно расписывать данный аспект я не намерен, поскольку эта тема требует отдельной публикации, да и применяются данные значения весьма редко, не говоря уже о том, что даже популярные браузеры воспринимают табличные CSS правила по-разному, особенно это касается старых версий Интернет Эксплорера. Так что ограничусь пока общей информацией.

goldbusinessnet.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector