Definition list display table-like

dl
 {
 display: block;
 }

dt
 {
 clear:   left;
 display:  block;
 font-weight: bold;
 float:   left;
 width:   125px;
 }

dd
 {
 clear:   right;
 display:  block;
 white-space: nowrap;
 }

Селекторы атрибутов в CSS

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

Замечание

Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

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

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }

Пробел между именем селектора и квадратными скобками не допускается.

Соседние селекторы в CSS

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <
<tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

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

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Замечание

Для поддержки соседних селекторов в Internet Explorer необходимо добавить:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Контекстные селекторы в CSS

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>
<Тег2> ...

Как мне для каждого абзаца добавить отступ первой строки?

Когда требуется установить абзацный отступ, лучше всего использовать стилевой атрибут text-indent. Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Исходная ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах.

Пример

p {
text-indent: 20px; /* Отступ первой строки в пикселах */
}

Оформление текста с помощью HTML

Делаем цитаты (комментарии)

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

1. <div style="border-left:3px #668 solid;padding:3px;
2. padding-left: 10px; background: #F0F0F0;">
3. текст текст текст
</div>

Врезка

Очень часто на сайтах используют еще один приём - врезка. Это примерно тоже, что и комментарии, только блок врезки как-бы "висит" с одного края.

Делается врезка по тому же принципу, что и комментарии, только нужно обязательно указывать ширину блока и дополнительный параметр /-float-/.

Параметр /-float-/ позволяет установить обтекание блока слева или справа.

/-Float-/ может принимать значения:

**/-float: none;-/ - блок не обтекается (это значение используется по-умолчанию).

**/-float: left;-/ - блок распологается слева, а остальные элементы обтекают его справа.

**/-float: right;-/ - блок распологается справа, а остальные элементы обтекают его слева.

**/-float: inherid;-/ - наследуется значение родительского элемента.

Рассмотрим пример:

1. <div style="float:right; width:200px; padding:5px;
2. margin: 10px; border-left: 4px double navy; background: #99CCFF;">
3. Это пример врезки.
4. Это пример врезки.
5. <div>

Это пример врезки.

Это пример врезки.

Думаю, что этот пример не очень сложный и вы сможете его модифицировать по своему усмотрению.

Есть только один нюанс, о котором вы должны знать, когда будете размещать не только врезку, но и любой другой HTML-элемент с парметром /-float-/. Поскольку браузер для такого элемента создает отдельный поток вывода, то лучше размешать такой элемент /-перед-/ нужным вам абзацем. В этом случае этот абзац и врезка окажутся выровненными по одной высоте (правда с учетом отступов).