Kompx.com or Compmiscellanea.com

Оформление нумерованных списков

Windows : Internet Explorer 8.0+, Firefox 1.5+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ], Hv3.

Цифры-маркеры нумерованного списка, выделенные жирным начертанием без использования дополнительных тегов HTML:

  1. List item
  2. List item
  3. List item

HTML / XHTML. Code:

<ol>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ol>

CSS. Code:

ol {counter-reset: item;}

ol li {display: block;}

ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}

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

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


[ 1 ]

As well as Netscape 9.0+.

[ 2 ]

As well as Netscape 9.0+.


Aliosque subditos et thema

 

Вертикальное выравнивание CSS

 

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример: Вертикальное выравнивание CSS Вертикальное выравнивание CSS HTML / XHTML. Код: <div class="parent"> <div class="child"> <div class="childcontent">Вертикальное выравнивание CSS</div> <div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div> <div class="childcontent">Вертикальное выравнивание CSS</div> </div> </div> CSS. Код: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Примечание: .parent и .childcontent могут быть выровнены по левому краю ("float: left;") или не выровнены, но чтобы этот способ вертикального выравнивания CSS сработал, .child должен быть без "float: left;". [ 1 ] А так же в Netscape 6.01+, Mozilla 0.6+. [ 2 ] А так же в Netscape 6.01+, Mozilla 0.6+.

CSS только для Firefox

 

CSS только для браузера Firefox: В Firefox этот текст красного цвета HTML / XHTML. Код: <p>В Firefox этот текст красного цвета</p> CSS. Код: @-moz-document url-prefix() {p {color: #f00;}} В отличии от способа применения CSS только для Opera, по существу является хаком - поскольку правило изначально предназначалось для другой цели. Однако отсутствие поддержки в других браузерах позволяет изолировать код для использования только веб браузером Firefox. [ 1 ] Другие браузеры с движком Gecko, как SeaMonkey 1.0+ или более старый Netscape 9.0, так же поддерживают данный CSS хак. [ 2 ] Разные версии Internet Explorer, Google Chrome, Opera, Safari реагируют на хак так, как им и полагается - эти браузеры игнорируют весь код хака. [ 3 ] Есть еще один браузер, где текст становится красным - ELinks, текстовый веб браузер с некоторой поддержкой CSS.