Для экспериментов взял приведенный выше макетик. Тестировал в Safari для Windows так как этот браузер понимает multiple background и border-radius.

HTML разметка.

<div class="block">
текст
</div>

Эта разметка используеться для обоих примеров.

Multiple backgrounds для скругления углов.

Изображения, которые используем

градиентный фон блока

верхний правый угол

нижний левый угол

Непосредственно css

.block{
background-color:#4ea5ff;
background-image: url(bg-b-l.gif), url(bg-t-r.gif), url(bg-gr.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: bottom left, right top, bottom left;
padding:20px;
margin:20px;
color:#ffffff;
}

Нужно заметить, что в background-image изображение, которое прописано первым, будет в самом верхнем “слое”, остальные будут ложиться под него, в том порядке, в котором прописаны. Градиентный фон, мы прописали самым последним, т.к. он должен быть в самом нижнем “слое”.

Порядок значений в background-repeat и background-position соответствует порядку в background-image, т.е. для изображения url(bg-gr.gif) соответствует repeat-x и bottom left. Значения разделяются запятыми.

Пример.

Border-radius для скругления углов.

Изображения, которые используем

Из изображений нам потребуется только градиентный фон из предыдущего примера.

Непосредственно css

.block{
background:#4ea5ff url(bg-gr.gif) repeat-x bottom left;
padding:20px;
margin:20px;
color:#ffffff;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
}

Так как border-radius в том виде, в котором он написан выше, пока не поддерживаться, в реальном примере я заменил это свойство на -webkit-border-radius.

Пример.

В последнее время видел в сети несколько вариантов вёрстки подобных макетов и решил представить свой вариант.

Html разметка

Для html разметки используем definition lists:

<dl class="table-of-content">
<dt><span>Закладка фундамента</span></dt>
<dd>21</dd>
<dt><span>Модель визуального форматирования</span></dt>
<dd>42</dd>
<dt><span>Фоновые изображения и замена изображений</span></dt>
<dd>65</dd>
<dt><span>Стилизация гипер ссылок</span></dt>
<dd>91</dd>
<dt><span>Стилизация списков и создание панелей навигации</span></dt>
<dd>107</dd>
<dt><span>Стилизация форм и табличных данных</span></dt>
<dd>131</dd>
<dt><span>Верстка страницы</span></dt>
<dd>151</dd>
<dt><span>Трюки и фильтры</span></dt>
<dd>173</dd>
<dt><span>Поиск и устранение ошибок</span></dt>
<dd>187</dd>
</dl>

Оглавление взято из “Мастерская CSS. Профессиональное применение Web-стандартов“, первой книги, которая попалась под руку. :)

Для чего нужен этот <span> внутри <dt>? Далее это станет ясно.

CSS

Теперь начнём писать стили:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
}
.table-of-content dd{
float:right;
position:relative;
top:-1.286em;
margin-bottom:-1em;
}


<dd> мы сдвигаем вправо и поднимаем на высоту одной строки вверх. результат.

Следующим шагом мы создаем вертикальные линии используя background-image + изображение . Чтобы перекрыть эти линии используем background-color для <span> (только для этого мы его и ввели) и <dd>. В результате таблица стилей выглядит так:

* {
margin:0;
padding:0;
line-height:1em;
}
.table-of-content{
border:1px solid #9b9b9b;
padding:1em;
margin:1em;
}
.table-of-content dt{
font-weight:bold;
clear:both;
padding-right:8em;
background: url(dotted.gif) repeat-x left bottom;
margin-bottom:.4em;
}
.table-of-content dt span{
background-color:#ffffff;
padding-right:.4em;
position:relative;
top:.1em;
}
.table-of-content dd{
position:relative;
top:-1.286em;
margin-bottom:-1em;
float:right;
background-color:#ffffff;
padding-left:.4em;
}

Конечный результат.

Большинство людей знают, что CSS делает HTML страницы более симпатичными на экране. Однако, CSS позволяет определять отображение (воспроизведение) страницы и в менее традиционной обстановке. Например, вы можете использовать CSS для того, чтобы рассказать screenreader’у о том, как читать страницу, или вы можете использовать CSS, чтобы телефон не загружал фоновое изображение 1000×1000px фотографического качества.

Короче говоря, используя CSS media types можно задать разные CSS таблицы для различных устройств.

Какие CSS media types существуют?

CSS2 в настоящее время определяет 10 медиа типов:

All

стили будут применятся для всех устройств

Aural

синтезаторы речи

Braille

тактильные дисплеи Брайля

Embossed

для принтеров, использующих рельефную азбуку Брайля

Handheld

ниши телефоны и другие карманные девайсы

Print

для всеми любимых принтеров

Projection

презентации, демонстрируемые с помощью проекторов

Screen

для цветных дисплеев высокого разрешения, таких как экраны наших
настольных ПК и ноутов.

Tty

устройства с выводом символов фиксированных размеров (старые  LCD
мониторы, терминалы, старые карманные устройства).

tv

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

Я думаю из всей этой экзотики можно запомнить только All,Handheld,Print и Screen.

Как их использовать

Есть два способа указать тип носителя: в  HTML и в CSS.

В HTML

Чтобы определить медиа тип в HTML, вы можете использовать media=”" атрибут в ссылке на ваш CSS файл:

<link rel="stylesheet" media="screen, print" href="stylesheet.css" />

Как видите, можно определить несколько медиа типов, разделяя их запятой.

Если вы хотите определить различные CSS для различных типов носителей, вам придется разделить их в разные файлы CSS.

В CSS

Обертывая (части) ваш CSS в @media {} конструкцию, вы можете определить мадиа тип для этой части вашего CSS:

@media screen {
body {color:#f00;}
}
@media print {
body {color:#000;}
}

Кроме того, можно указывать тип носителя при импорте стилей, но это не работает в Internet Explorer:

@import url("print.css") print;

Media types в будущем: CSS3

CSS3 добавляет некоторые интересные вещи по media types, которые переименованы в media querie. А media querie состоит из типа и функциональности носителя, таких, как ширина, высота, соотношение или цвет. Например, вы можете задать не только “экран с высоким разрешение”, но и “экран с высоким разрешением и не менее 800px в ширину”. Это дает гораздо более широкий спектр вариантов.

Вольный перевод оригинала.

Итак, задача сделать разметку в 3 колонки, при этом, чтобы колонки были равной высоты, вне зависимости от объема контента в каждой из них.

Основа трёх колонок

Исходный HTML:

<div class="equal">
<div id="row" class="row">
<div class="one">
<h2>Контейнер</h2>
<p>...обычный параграф...</p>
</div>
<div class="two">
<h2>Другой контейнер</h2>
<p>...обычный параграф...</p>
<p>...другой обычный параграф...</p>
</div>
<div class="three">
<p>...отцентрированный по вертикали параграф...</p>
</div>
</div>
</div>

С помощью CSS сделаем так, чтобы этот набор блоков отображался как таблица:

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}

посмотреть.

Естественно это не работает в Internet Explorer.

Необходимо также заметить, что даже браузеры, поддерживающие CSS table, имеют
некоторые различия и ошибки в обработке CSS table.

Немного украсим нашу таблицу:

.equal {
margin:0 auto;
border-spacing:10px;
width:600px;
text-align: left;
}
.row div {
background-color:#f7f8f9;
border: solid 1px #bbb ;
padding-bottom: 30px ;
width:185px;
}
.row div h2 {
margin:0 0 0.5em 0;
padding:0.5em 10px;
font-size:120%;
color:#333;
}
.row div p {
font-size: 100%;
margin:0.5em 0;
padding: 0 10px;
}

посмотреть.

Основа 3 колонок для IE

Создадим отдельные стили для IE, так как эти браузеры не умею работать с табличной моделью CSS:

.equal {
padding: 10px;
width: 580px;
}
.row {
margin-top: 10px;
height: 1%;
}
.row div {
float:left;
position: relative;
overflow-x:hidden;
}
.row .two {
margin-left:10px;
}
.row .three {
margin-left: 10px;
margin-right: -9px;
}

посмотреть.

Для добавления этих стилей используем условные комментарии.

Костыли для одинаковой высоты в IE6

Для того, чтобы сделать все блоки одинаковой высоты используем expression.

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

* html .row div {height: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? parseFloat(this.parentNode.offsetHeight)-33) :(parseFloat(this.parentNode.offsetHeight)-1));}

посмотреть.

Если посмотреть внимательно, то можно заметить, что высота не совсем одинаковая. Разница составляет 1px. Это сделано для того, чтобы при изменении размера шрифта в меньшую сторону, высота пересчитывалась относительно самой высокой колонки.

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

В приведенном выше выражении “-1” это тот пиксел, который нам позволит оставить одну самую высокую колонку, а “-33” рассчитывается по формуле: padding-bottom: 30px + border-top-width: 1px + border-bottom-width: 1px + 1px “разница для самой высокой” = -33

При неправильной формуле есть шанс “повесить” наш любимый браузер.

Костыли для одинаковой высоты в IE7

К сожалению IE7 также не поддерживает CSS в той мере, в которой нам необходимо, но при этом исправлено много багов, которые были в IE6. Для IE7 используем min-height и тотже 1px для соблюдения условия “самая высокая колонка”.

html>body .row div {min-height: expression( parseFloat(this.parentNode.offsetHeight)-33);}

посмотреть.

Здесь можно было и не использовать хак, так как более старые версии браузера не поддерживают свойство min-height.

Симуляция таблицы

С помощью данной таблицы стилей можно без проблем отображать блоки, как при “табличной верстке”.

посмотреть.

Почему используем CSS таблицы

Может возникнуть вопрос : “Если мы можем использовать CSS table, почему мы не можем использовать HTML table вместо этого? HTML table работают во всех браузерах.“

Да, они работаю.

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

Вольный перевод оригинала.

Цель Quirks Mode состоит в том, чтобы старые страницы показывать в современных браузерах так, как это и планировал автор (с учетом особенностей работы старых браузеров). Дополнительную информацию о Quirks Mode можно найти на сайте QuirksMode.org.

Нет никакой авторитетной спецификации того, что происходит при Quirks Mode.Этот режим, по сути, намеренное нарушение спецификаций HTML и CSS.

Если у Вас есть страница, которая, как Вам кажется, работает хорошо, но при этом отсутствует doctype-декларация (требуемая спецификациями HTML), Вы не можете просто вставить doctype. Причина в том, что декларация заставляет браузер работать в Standards Mode, что противоположно Quirks Mode. Это может означать что угодно. Я видел, когда добавляли doctype-декларацию, и все содержимое страницы исчезало. Чаще всего, расположение меняется довольно неожиданно. Но для Вас это может быть не так, если Вы знаете о том, что может случиться при Quirks Mode. Перед добавлением doctype-декларации, Вы должны проверить и HTML и CSS код на соответствие синтаксису, используя валидаторы. Во многих случаях этого может быть не достаточно, так как страница, возможно создавалась, полагаясь на вещи, которые будут “работать” только при Quirks Mode. Таким образом, после добавления doctype-декларации, Вы должны проверить страницу, по крайней мере, на IE 7 и Firefox 2 при Standards Mode. Если страница отображается некорректно, то для определения проблемы может быть полезен следующий список.

Создавая новую страницу, Вы не обязаны знать о Quirks Mode и не должны всегда думать об этом. Просто пишите согласно спецификациям HTML и CSS; это включает использование doctype-декларации, которая переводит современные браузеры в Standards Mode. Но если Вы решите использовать некоторые особенности, которые работают только при Quirks Mode, типа height=”100%” для элемента, Вы должны проверить список для других возможных значений.

Хотя и не все браузеры показывают эти особенности, в Quirks Mode браузеры ведут себя следующим образом :

• Неправильный расчет блочной модели (отличается от CSS спецификации, хотя интуитивно более понятен). Это означает, что размеры блока (ширина и высота) определяет не только содержимое элементов, но также и отступы и границы.
• Размеры inline элементов реагируют на свойства ширины и высоты (хотя по CSS спецификации они должны игнорироваться)
• Процентное задание высоты элемента (к примеру , <table height=”100%”> в HTML или table { height: 100% }в CSS) применяется, используя имеющуюся высоту, даже если родительский элемент имеет высоту auto (по умолчанию).
  
  При Standards Mode, высота расчитывается от количества контента. Процентное задание высоты работает только при условии, если задана высота родительского элемента.
• Переполнение блока контентом вызывает изменение его размеров. Если обьем контента не вписывается в размеры блока (заданные явно либо неявно), то свойство overflow:hidden означает, что контент будет доступен, и при этом размеры блока не будут изменяться. В случае Quirks Mode контент будет изменять размеры блока. Это можно увидеть, если блоку заданы бекграунд либо границы.
• Padding для изображений игнорируется, когда он задан через CSS для элемента imgили для элемента input type=”image” .
• Горизонтальный отступ для обтекаемого изображения 3 px вместо 0. Таким образом, если у img установленны атрибуты align=”left” или align=”right”, или CSS свойства float: left или float: right, то браузер ведет себя, как будто у img установлен атрибут hspace = “3″ (или margin-left и margin-right имеют значение 3px).Это применимо к IE, в остальных браузерах Quirks Mode может вызывать отступ только с одной стороны изображения, и его величина может быть 2 px вместо 3.
• Вертикальное выравнивание изображения определяется относительно основания блока, а не относительно основания текста. Это происходит, когда изображение-это единственное содержимое блока. Это означает, что, например, при QuirksMode изображение в ячейке таблицы - по умолчанию у основания ячейки (что часто является предполагаемым поведением), в то время как при Standards Mode, будет промежуток в несколько пикселей (если не определить для изображения vertical-align: bottom).
• Выравнивание блока по горизонтали с помощью CSS ( margin: 0 auto ) не работает.
• Свойства шрифта не наследуются от body или других элементов в table. Это происходит, в частности, с font-size, но может происходить с font-family, color, и line-height.. Например, если Вы устанавливаете body { font-family: Arial }, возможно, что шрифт в ячейках таблицы останется установленным в браузере по умолчанию.
• Размер шрифта для ячейки таблицы, заданный в относительных величинах, рассчитывается относительно размера шрифта, установленного в браузере, а не относительно родительского элемента для table.
• Ключевые слова для установки размера шрифта рассчитываются неправильно, получается, что medium больше, чем базовый размер шрифта браузера, а small соответствует базовому размеру. Точно также все ключевые слова, xx-small, x-small, small, large, x-large, xx-large рассчитываются неправильно: каждый шаг, больше, чем должен быть.
• Неправильные объявления свойств часто интерпретируются на основе догадок, так например margin: 10 интерпретируется как margin: 10px и color: ffffff как color: #ffffff. Это нарушает обязательные правила обработки ошибок в CSS: правила с синтаксически неправильными значениями должны игнорироваться.
• Селекторы в CSS не зависят от регистра. Например, .foo соответствует элементу с классом class=”Foo” или class=”FOO”. Но в спецификации определена зависимость селекторов от регистра.
• Допускается неправильное написание селекторов, например таких как .123a или #42.
• Свойство position: fixed соответствует position: static в IE 7.
• Значение свойства white-space: pre игнорируется.
• Большинство CSS свойств, которые не поддерживались в IE 6, в IE 7 поддерживаются только при Standards Mode.
• Парсинг Tag soup. Например, имея такой код <p>text<table>…</table>,в Firefox, при Quirks Mode, элемент p будет содержать элемент table. При Standards Mode открывающий тег table неявно закроет элемент p. IE всегда разбирает такой код неправильно.
• Переносы строк могут учитываться. Например, Вы имеете список ссылок. Обычно мы пишем с переносами строк (между <li> и </li>), для более удобного чтения кода:

  <ul>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  ...
  </ul>

  Однако, если Вы устанавливаете display: block и границы для элемента a, Вы можете столкнуться с вертикальными промежутками (пустыми линиями) между блоками. В IE7 это происходит при Quirks Mode, в более ранних версиях IE это происходит вне зависимости от режима работы.

• Элемент form имеет по умолчанию bottom-margin равный 1em. В браузере IE такой отступ присутствует вне зависимости от режима работы.

Вольный перевод оригинала.

Различные таблици стилей, для различных версий IE:

только IE 7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE-7-SPECIFIC.css" />
<![endif]-->

только IE 6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

только IE 5

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

только IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

IE 6 и ниже

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

ниже IE 6

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-LOWER-SPECIFIC.css" />
<![endif]-->

Почему следует использовать условные коментарии?

• При использовании хаков не вариант, что выйдет новая версия, которая будет понимать этот хак и в ней не будет исправлена ошибка, которая решалась с помощью хака. Вы наверно сталкивались с тем, что решали проблему для ИЕ6 и при этом скрывали эти стили от ИЕ7, а теперь представте что вы решаете проблему только для ИЕ7, выходит новая версия, она понимает этот хак, но эта ошибка в новой версии уже исправлена, в такой ситуации велика вероятность что в верстке чтото “поплывет” или “полезет”.)
• Ваша таблица стилей чиста и валидна, никаких zoom:1, filter, expression.
• Расширяемость. Выходит новая версия, и мы просто создаем для нее свой файл стилей, в котором определяем обходимые правила, вместо того чтобы лопатить все полотно стилей.

Вольный перевод оригинала.

Также есть статьи:

• Подключение таблиц стилей для браузеров IE, Opera, Safari

CSS:table[summary]:after {
content: "Таблица " counter(table) ": " attr(summary);
counter-increment: table;
display: table-caption;
caption-side: bottom;
font-size: 10px;
font-style: italic;
white-space: nowrap;
margin-top: 5px;
margin-bottom: 20px;
}
table[title]:before {
display: table-caption;
caption-side: top;
content: attr(title);
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}

Правило content: “Таблица ” counter(table) “: ” attr(summary); выводит номер таблицы и содержание атрибута summary. Правило counter-increment: table; инициализирует счётчик, который и будет считать номер таблицы на странице. Следующим шагом задаем display: table-caption; для нашего сгенерированного контента, чтобы он отображался как заголовок.

caption-side: top; определяет положение заголовка относительно таблицы.

Думаю что использовать это повсеместно не имеет смысла,так как это поддерживаться не всеми браузерами, но как какая то “фитча”, для пользователей например opera, это использовать можно).

пример
источник

Этот способ работает только в адекватных браузерах, которые понимают как минимум :before и поддерживают генерацию контента средствами CSS

Итак, имеем следующий HTML:<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h2>Заголовок</h2>


Начнем работать над стилями. Первое,что сделаем, объявим счётчики для заголовков:h1 {
counter-increment: h1;
}
h2{
counter-increment: h2
}

Счётчики объявлены, теперь их надо как то выводить на страницу:h1:before {
content: counter(h1) ". "
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
Для заголовка первого уровня выводим счётчик, который для него объявили, а для заголовка второго уровня выводим так сказать родной счётчик и счётчик заголовков первого уровня. пример

Последнее что нам осталось сделать - обнулят счётчик второго уровня:h1 {
counter-reset: h2 0;
}

Окончательный вид таблици стилей:h1 {
counter-increment: h1;
counter-reset: h2 0;
}
h1:before {
content: counter(h1) ". "
}
h2{
counter-increment: h2
}
h2:before {
content: counter(h1) "." counter(h2) " ";
}
пример

исходный HTML:<ul class="menu">
<li><a class="home" href="#"></a></li>
<li><a class="blog" href="#"></a></li>
<li><a class="autor" href="#"></a></li>
</ul>

Изображения кнопок в двух состояних:

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

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

(more…)

еще много шпаргалок