<< Пред. стр.

стр. 28
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>



Blah blah headline
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
p
blah Blah blah blah blah blah.

Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
blah Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah Blah blah Uah
blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah
blah blah blah Blah blah blah blah blah




Рис. 51.3. Отступы Лучше создавать с помощью средств каскадных таблиц стилей.
Такой метод позволяет задавать точное значение отступа

Каскадные таблицы стилей справляются лучше с еще одной задачей. Они позволяют
задавать дополнительный отступ для первой строки любого текстового элемента, будь
то абзац, заголовок или что-либо еще. Для этого применяется атрибут t e x t - i n d e n t ,
действие которого показано на рисунке 51.4.
Листинг 51.2. Исходный код страницы, вид которой в браузере
показан на рисунке 51.4
<head>
<style type="text/css">



text-indent: ЗОрх;



. </style>
</head>
Строим Web-сайты
266

<body>
<hl>Blah blah headline</hl>


<p>Blah blah blah....</p>
</body>



?ite ?* View Favorites look



Blah blah headline
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah b i n Blah blah blah blah blah Blah
blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah. Blob blah blah blah blah Blah blah
blah blah blah Blah blah blah blah blah Blah blab blah blah blah Blah blsdi blah blah blah Blah blah blah
blah blah Blab blah blah blah blah Blab blab blah blah blah Blah blah blah blah blah Blah blah blah blah
blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah.
Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blai. Blah blab blah blah blah. Blah
blah blah blah blah Blah blah blah blah blab Blah blah blah blah Hah Blah blah blah blah blah Blah blah
blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah blah blah




Рис. 51.4. Используйте атрибут text:-indent для сдвига
первой строки любого текстового элемента

Обратите внимание, что вторая и последующие строки текста выровнены по левому
краю элемента. Атрибут t e x t - i n d e n t воздействует только на первую строку текста.
В исходном коде для Web-страницы, показанной на рисунке 51.4, 30 пикселов предс-
тавляют 30 пикселов дополнительного отступа. Таким образом, если для абзаца б) i. ю
установлено следующее правило стиля:
Р{
margin-left: 50рх;
text-indent: ЗОрх;


общий отступ в первой строке текста будет равен 80 пикселам, или 50 + 30. Для второй
и последующих строк текста отступ уменьшается и составляет 50 пикселов.
Атрибут находит подходящее применение в интересном трюке, использующем кас-
кадные таблицы стилей: создании обратного отступа. Обратный отступ похож на аб-
зацный отступ, только наоборот: первая строка текста выступает влево относительно
блока текста, а не вправо. Первая строка выглядит нависающей над левой границей
текстового блока, отсюда еще одно название — висячая (hanging) строка.
267
ГЛАВА 5 1 . Управление отступами



Blah blah blah blah blah. Blah blah blah blah blah Blah blah blah blah blah Hah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah
blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah
blah blah. Blah blah blah blah blah. Blah blah blah blah blah.

Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah
Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blab
blah Blah blah blah blah blah Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah
blah blah Blah blah blah blah blah Blah blah blah blah blah.




Рис. 51.5. Для создания обратного отступа установите стандартное
левое поле для блока текста, а затем задайте для атрибута
text-indent отрицательное значение



Определение
Обратный отступ (hanging indent) представляет собой абзацный
отступ наоборот. Первая строка текста сдвинута влево, а не вправо.


Чтобы создать обратный отступ, сначала задайте для левого поля текстового элемен-
та какое-нибудь значение, скажем, 50 пикселов. Затем задайте для атрибута t e x t -
indent отрицательное значение, например, -30 пикселов. Получившийся результат
можно увидеть на рисунке 51.5. Первая строка текста выступает влево на 30 пикселов
относительно стандартного левого края, смещенного вправо на 50 пикселов.
Листинг 51.3. Исходный код страницы, вид которой в браузере
показан на рисунке 51.5
<head>
<style type="text/css">



margin-left: 50рх;
text-indent: -ЗОрх;



</style>
</head>
268 Строим Web-сайты

<body>
<p>Blah blah blah....</p>


<p>Blah blah blah....</p>
</body>



Совет
Если величина левого поля равна «х», убедитесь, что для обратного
отступа значение атрибута text-indent не больше, чем «-х». Дру-
гими словами, если левое поле равно 50 пикселам, не задавайте -80
пикселов в качестве значения отступа первой строки, иначе она вый-
дет за левую границу страницы.
ГЛАВА 52.
Создание списков
В HTML существует два типа списков: нумерованные (упорядоченные) списки и не-
нумерованные (маркированные) списки. Разметка списка начинается с тега <ol>
или <ul> для нумерованного и ненумерованного списка, соответственно. Далее сле-
дуют теги <li> для каждого элемента списка. Примеров обоих типов списков см. на
рисунке 52.1.


i
File Edit Yiew Favorites loote delp


1. First item • First item
2. Second item • Second item
3 Third item • Third item
4 Fourth item • Fourth item
5 Fifth item • Fifth item




Puc. 52.1. В HTML имеются нумерованные (упорядоченные) и ненумерованные
(маркированные) списки. Разметка списков одинакова за исключением тега списка

Листинг 52.1. Исходный код страницы, вид которой в браузере
показан на рисунке 52.1
<table>
<tr>
<td>


<!—Здесь начинается нумерованный список —>



<li>First
<li>Second
<li>Third
<li>Fourth
<li>Fifth
2 7 0 С т р о и м Web-сайты




<!—Здесь оканчивается нумерованный список —>


</td>
<td>


<!-Здесь начинается ненумерованный список ->



<li>First i
<li>Second i
<li>Third i
<li>Fourth i
<li>Fifth i



<!—Здесь оканчивается ненумерованный список —>


</td>
</tr>
</table>

Как можно заметить, HTML-код для списков полностью одинаков, за исключением те-
га списка. Следовательно, чтобы изменить нумерованный на ненумерованный спи-
сок, достаточно поменять тег <ul> на тег <ol>.
Обратите также внимание, что в нумерованном списке не надо набирать номера
элементов. Браузер самостоятельно отслеживает нумерацию и отображает номера
элементов списка автоматически.
В отличие от элементов HTML, описанных в других главах данного раздела, для спис-
ков имеется ряд полезных атрибутов, управляющих внешним видом списков. Эти ат-
рибуты обобщены в таблице 52.1.
В нумерованных списках, отличных от стандартных десятичных нумерованных спис-
ков, атрибут s t a r t указывает n-е значение в последовательности. Таким образом, ал-
фавитный список со значением 4 для атрибута s t a r t начинается с буквы «D», пос-
кольку «D» — четвертая буква алфавита. Подобным образом, список с римскими номе-
рами начинается с «X», если значение атрибута s t a r t равно 10.
271
ГЛАВА 52. Создание списков

Табл. 52.1. Атрибуты списков в HTML
Управляемый Примеры
Атри- Тег, к кото- Возможные значения
бут рому при- элемент
меняется
ol
type А (заглавный буквенный), <ol type="A">
Начальный
символ а (строчной буквенный),
<ol type="i">
I (заглавный римский
числовой),
i (строчный римский
числовой),
1 (десятичный)
ul
type <ul type=
Форма c i r c l e (пустой кружок),
"circle">
d i s c (сплошной кру-
буллита
<ul type=
жок), square (квадрат)
(маркера)
"square">
<ol
start o l Начальное Любое числовое
start="4">
число или значение
первая буква
в списке


ВлоЖенные списки 6 HTML
Вложенные СПИСКИ — это СПИСКИ, которые находятся внутри других списков.
В HTML-разметке вложенный список занимает место элемента списка, как в следую-
щем примере:

<li>First item of the main list</li>
<li>Second item of the main list</li>
<li>Third item of the main list</li>

Здесь начинается вложенный список —>
<!


<li>First item of the nested list</li>
<li>Second item of the nested list</li>
<li>Third item of the nested list</li>



<!— Здесь окончился вложенный список —>

<li>Fourth item of the main list</li>
272 Строим Web-сайты

<li>Fifth item of the main list</li>


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


<li>First item of the main list</li>
<li>Second item of the main list</li>
<li>Third item of the main list</li>


<!— Здесь начинается вложенный список —>




<li>First item of the nested list</li>
<li>Second item of the nested list</li>


<!— Здесь начинается вложенный список, расположенный внутри друго-
го вложенного списка —>




<li>First item of the very nested list</li>
<li>Second item of the very nested list</li>




<!— Здесь окончился вложенный список, расположенный внутри другого
вложенного списка —>


<li>Third item of the nested list</li>


<!— Здесь окончился вложенный список —>
<li>Fourth item of the main list</li>
<li>Fifth item of the main list</li>




Определение
Вложенные СПИСКИ (nested lists) — это СПИСКИ, которые находятся
внутри других списков.
ГЛАВА 52. Создание списков 273

При вложении ненумерованных списков браузер обычно изменяет циклически тин
маркера для каждого последующего вложенного списка. Таким образом, если список
начинается с маркера в виде сплошного кружка (disc), во вложенном списке исполь-
зуется маркер в виде пустого кружка (circle), во вложенном списке второго уровня
используется маркер в виде квадрата (square), а во вложенном списке третьего уров-
ня используется опять маркер в виде сплошного кружка (disc) и так далее. Пример
вложенных списков см. на рисунке 52.2.


First item of the mam list
Second item of the main list
Third item of the main list
о First item of the nested list
о Second item of the nested list
• First item of the very nested list
• Second item of the very nested list
о Third item of the nestedlist
Fourth item of the main list
Fifth item of the main list




Рис. 52.2 В ненумерованных списках браузер обычно циклически
изменяет шип маркера для каждого последующего вложенного списка


Совет
Нумерованные СПИСКИ не подвергаются подобной обработке. Чтобы
создать эффект структуры с нумерованными списками, необходимо
в явном виде задать атрибуты шрифта для каждого вложенного
списка — или задействовать таблицу стилей. Подробности см. в
разделе «Инструментарий» в конце данной главы.




Настройка свойств списка с помощью
каскадных таблиц стилей
Каскадные таблицы стилей вводят несколько дополнительных возможностей форма-
тирования списков, которые приводятся в таблице 52.?.


Замена маркеров изображением
Возможно, наиболее интересным из этих атрибутов является атрибут l i s t - s t y l e -
image, который позволяет задавать файл изображения вместо стандартного маркера
в виде сплошного кружка, пустого кружка или квадрата. Пример списка, где маркер за-
менен изображением, см. на рисунке 52.3.
Строим Web-сайты
274


изменение положения начального символа
Атрибутом l i s t - s t y l e - p o s i t i o n определяется, где будут отображаться маркеры
или начальные символы относительно элементов списка. При задании для этого атри-
бута значения o u t s i d e начальные символы отображаются вне основного блока
элементов списка, а при установке для атрибута l i s t - s t y l e - p o s i t i o n значения
i n s i d e начальные символы находятся внутри основного блока элементов списка
Примеры расположения начальных символов списка показаны на рисунке 52.4.
Табл. 52.2. Атрибуты списка в каскадных таблицах стилей
Атрибут Пример

<< Пред. стр.

стр. 28
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>