Основы работы с XHTML и CSS
         

Элемент списка


<ul> <li> Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>

· Элемент списка 1 · Элемент списка 2 · Элемент списка 3
Листинг 6.1. Неупорядоченный список
Закрыть окно


<style type="text/css"> ul {list-style-type:circle} </style>

<ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>
Листинг 6.2. Код для задания типа маркера
Закрыть окно


° Элемент списка 1 ° Элемент списка 2 ° Элемент списка 3
Листинг 6.3. Неупорядоченный список с маркером-окружностью
Закрыть окно


<style type="text/css"> ul#List1 {list-style-type:disc} ul#List2 {list-style-type:circle} ul#List3 {list-style-type:square} </style>
Листинг 6.4. Встроенная таблица стилей для типов маркеров list-style
Закрыть окно




<style type="text/css"> ul {list-style-type:circle; margin-left:20px} </style>
Листинг 6.5. Выравнивание неупорядоченного списка по полю страницы
Закрыть окно


<style type="text/css?> ul {list-style-type:none; margin-left:20px} </style>

<ul> <li><span style="font-family:webdings">4</span> Элемент списка 1</li> <li><span style="font-family:webdings">4</span> Элемент списка 2</li> <li><span style="font-family:webdings">4</span> Элемент списка 3</li> </ul>
Листинг 6.6. Код для вывода специального символа маркера
Закрыть окно


<style type="text/css"> ul {margin-left:20px} </style>

<ul> <li><span style="font-family:webdings">4</span> Элемент списка 1</li> <li><span style="font-family:webdings">4</span> Элемент списка 2</li> <li><span style="font-family:webdings">4</span> Элемент списка 3</li> </ul>
Листинг 6.7. Код неупорядоченного списка без подавления символов маркеров
Закрыть окно


<style type="text/css"> ul {list-style-image:url(Bullet.gif); vertical-align:middle} </style>

<ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul>
Листинг 6.8. Код неупорядоченного списка с графическими изображениями маркерами
Закрыть окно


<ol> <li> Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ol>
Листинг 6.9. Код упорядоченного списка
Закрыть окно


1. Элемент списка 1 2. Элемент списка 2 3. Элемент списка 3
Листинг 6.10. Упорядоченный список
Закрыть окно


<style type="text/css"> ol {list-style-type:upper-roman} </style>

<ol> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ol>
Листинг 6.11. Код упорядоченного списка с большими римскими цифрами
Закрыть окно


I. Элемент списка 1 II. Элемент списка 2 III. Элемент списка 3
Листинг 6.12. Упорядоченный список с римскими цифрами
Закрыть окно


<style type="text/css"> ol#List1 {list-style-type:upper-roman} ol#List2 {list-style-type:lower-roman} </style>

<ol id="List1"> <li>Элемент списка 1</li> <li>Элемент списка 2 <ol id="List2"> <li>Элемент списка 2a</li> <li>Элемент списка 2b</li> </ol> </li> <li>Элемент списка 3</li> </ol>
Листинг 6.13. Код вложенных упорядоченных списков
Закрыть окно


I. Элемент списка 1 II. Элемент списка 2 i. Элемент списка 2a ii. Элемент списка 2b III. Элемент списка 3
Листинг 6.14. Вложенные упорядоченные списки с нумерацией римскими цифрами
Закрыть окно


<dl> <dt>Term 1</dt> <dd> Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. </dd> <dt>Term 2</dt> <dd>Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. </dd> </dl>
Листинг 6.15. Код списка определений
Закрыть окно


Term 1 Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. Term 2 Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.
Листинг 6.16. Список определений
Закрыть окно


<style type="text/css"> dd {margin-top:10px; margin-bottom:10px} </style>

<dl> <dt>Term 1</dt> <dd> Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.</dd> <dt>Term 2</dt> <dd>Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.</dd> </dl>
Листинг 6.17. Код списка определений с настройками margin
Закрыть окно


Term 1

Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Term 2

Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.
Листинг 6.18. Список определений с верхним и нижним полями, окружающими элементы списка
Закрыть окно


<style type="text/css"> ul {color:red} ol {color:blue} </style>

<ul> <li>Красный 1</li> <li>Красный 2</li> <li>Красный 3</li> </ul>

<ol> <li>Синий 1</li> <li>Синий 2</li> <li>Синий 3</li> </ol>
Листинг 6.19. Код для вывода неупорядоченного и упорядоченного списков различным цветом
Закрыть окно


<style type="text/css"> ul li {color:red} ol li {color:blue} </style>
Листинг 6.20. Использование контекстных селекторов
Закрыть окно


<style type="text/css"> ul#ListA {list-style-type:disc} ul#ListB {list-style-type:circle} ul#ListA li {color:red} ul#ListB li {color:blue} </style>

<ul id="ListA"> <li>Позиция 1</li> <li>Позиция 2</li> <li>Позиция 3</li> </ul>

<ul id="ListB"> <li>Позиция 1</li> <li>Позиция 2</li> <li>Позиция 3</li> </ul>
Листинг 6.21. Использование контекстных селекторов для различения неупорядоченных списков
Закрыть окно


<style type="text/css"> div#A {border-width:7px; border-color:red; border-top-style:solid; border-right-style:dashed; border-bottom-style:ridge; border-left-style:double}

p#B {border:dashed 3px blue}

span#C {border:solid 4px green} </style>

<div id="A"> <p id="B">This is a <span id="C">text string with borders</span> inside a paragraph with borders inside a division with four different borders.</p> </div>
Листинг 6.22. Код для различных стилей границы
Закрыть окно


<style type="text/css"> div#A {padding:7px; border-width:7px; border-color:red; border-top-style:solid; border-right-style:dashed; border-bottom-style:ridge; border-left-style:double}

p#B {padding:7px; border:dashed 3px blue}

span#C {padding:2px; border:solid 4px green} </style>

<div id="A"> <p id="B">This is a <span id="C">text string with borders</span> inside a paragraph with borders inside a division with four different borders.</p> </div>
Листинг 6.23. Код для отступов и различных стилей границы
Закрыть окно


<span style="border:ridge 7; padding:10px"><img src="Stonehenge.jpg"/></span>
Листинг 6.24. Код для окружающих изображение отступов
Закрыть окно


<style type="text/css"> p#Sized {width:50%; border:solid 1px; padding:10px} </style>

<p id="Sized">Это параграф с шириной, равной 50% ширины окна браузера. Кроме того, текст переносится по словам в этих границах. Так как ширина задана в процентах, то параграф изменяет размер, чтобы оставаться в пределах 50% ширины страницы при изменении размера окна браузера.</p>
Листинг 6.25. Код для задания размеров и отступов параграфа
Закрыть окно


<style type="text/css"> p#OFLOW {overflow:auto; width:125px; height:100px; padding:5px; border:solid 1px} </style>

<p id="OFLOW"> Page content can appear within elements as well as flow throughout the main document. With tags such as <div>, <p>, and <span> to contain content, these elements can, if so chosen, be sized to various heights and widths.</p>
Листинг 6.26. Код для управления переполнением текста в параграфе
Закрыть окно


<style type="text/css"> .FLOAT {float:right; width:250px; height:200px; overflow:auto; color:white; background-color:gray; margin-left:20px; padding:10px; border: ridge 5} h3 {text-align:center} </style>

<div class="FLOAT">

<h3>Плавающие контейнеры</h3>

<p>Это раздел с шириной, заданной равной 250 пикселей, и высотой, равной 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отступ в 10 пикселей и фоновый цвет gray. Раздел смещается на странице вправо. Его левое поле задано равным 20 пикселей для отделения от текста страницы.</p>

<p>Так как весь текст не помещается в контейнере указанной ширины и высоты, то разделу задается стиль overflow:auto для создания вертикальной полосы прокрутки.</p>

</div>

... обтекающий текст...
Листинг 6.27. Код плавающего раздела
Закрыть окно


<p>Предыдущий параграф ...</p>

<h1>Заголовок </h1>

<p>Следующий параграф ...</p>
Листинг 6.28. Код размещения заголовка относительно окружающего содержимого
Закрыть окно


<style type="text/css"> h1 {position:relative; left:50px; top:-10px} </style>

<p>Предыдущий параграф ...</p>

<h1>Заголовок </h1>

<p>Следующий параграф ...</p>
Листинг 6.29. Код для изменения положения заголовка относительно окружающего контента
Закрыть окно


<div style="font-size:24pt"> <span style="position:relative; top:-15px">Words</span> <span style="position:relative; top:+10px">in</span> <span style="position:relative; top:-5px">a</span> <span style="position:relative; top:+5px">sentence.</span> </div>
Листинг 6.30. Код для изменения положения слов относительно своего исходного положения
Закрыть окно


<style type="text/css"> .RED {position:relative; width:100px; height:100px; left:0px; top:0px; background-color:red; border:solid 1px white; color:white; text-align:right} .GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px; background-color:green; border:solid 1px white; color:white; text-align:right} .BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px; background-color:blue; border:solid 1px white; color:white; text-align:right} </style>

<div> <span class="RED">Red</span> <span class="GREEN">Green</span> <span class="BLUE">Blue</span> </div>
Листинг 6.31. Код для перекрытия элементов страницы
Закрыть окно


<style type="text/css"> .RED {position:relative; width:100px; height:100px; left:0px; top:0px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:3} .GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px; background-color:green; border:solid 1px white; color:white; text-align:right; z-index:2} .BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px; background-color:blue; border:solid 1px white; color:white; text-align:right; z-index:1} </style>
Листинг 6.32. Код для изменения последовательности слоев элементов страницы
Закрыть окно


<p>Предыдущий параграф....</p>

<p style="position:relative; top:25px; font-size:24pt"> Перемещенный параграф. </p>

<p>Следующий параграф ....</p>
Листинг 6.33. Код изменения положения параграфа
Закрыть окно


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Позиционирование</title> </head> <body>

<div style="position:absolute; top:50px; left:280px; z-index:-1; font-family:impact; font-size:68pt; color:#D6D6D6">DRAFT</div>

<p> Размещенное под этим параграфом слово "DRAFT" определено показанным выше тегом <div>. Этот тег появляется в коде XHTML сразу перед этим параграфом. Он позиционирован абсолютно; поэтому он исключен из нормального потока элементов страницы. В связи с этим исключением тега из потока элементов страницы параграф смещается вверх, чтобы занять освободившееся пространство страницы, поэтому накладывается на слово. Таким образом, слово "DRAFT" занимает на странице абсолютное положение, независимо от того, что еще его окружает. Для него задано также значение z-index, равное -1, помещающее его на странице под слоем текста, чтобы слово не перекрывало текст. </p>

</body> </html>
Листинг 6.34. Код абсолютного позиционирования содержимого на странице под слоем текста
Закрыть окно


<style type="text/css"> .DIV {position:relative; width:300px; height:160px; border:dotted 1}

.RED {position:absolute; width:100px; height:100px; left:0px; top:0px; background-color:red; border:solid 1px white; color:white; z-index:1; text-align:right} .GREEN {position:absolute; width:100px; height:100px; left:50px; top:25px; background-color:green; border:solid 1px white; color:white; z-index:2; text-align:right} .BLUE {position:absolute; width:100px; height:100px; left:100px; top:50px; background-color:blue; border:solid 1px white; color:white; z-index:3; text-align:right} </style>

<div class="DIV">

<span class="RED">Red </span> <span class="GREEN">Green </span> <span class="BLUE">Blue </span>

</div>
Листинг 6.35. Код абсолютного позиционирования элементов внутри относительно позиционированного контейнера
Закрыть окно


<style type="text/css"> div#CONTAIN {position:relative; height:45px; width:180px; border:dotted 1px}

div#BLACK {position:absolute; left:0px; top:0px; z-index:2; font-family: impact; font-size:24pt; color:black} div#SILVER {position:absolute; left:+5px; top:+5px; z-index:1; font-family: impact; font-size:24pt; color:silver} </style>

<div id="CONTAIN"> <div id="SILVER">Drop Shadow</div> <div id="BLACK">Drop Shadow</div> </div>
Листинг 6.36. Код для создания эффекта падающей тени
Закрыть окно


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Newsletter</title>

<style type="text/css"> div#OUTER {position:relative; width:500px; height:420px; border:dotted 1} div#HEAD {position:absolute; left:0px; top:0px; width:500px; height:40px; border:dotted 1; text-align:center; font-size:24pt} div#COL1 {position:absolute; left:0px; top:50px; width:240px; height:260px; border:dotted 1} div#COL2 {position:absolute; left:260px; top:50px; width:240px; height:260px; border:dotted 1} div#FOOT {position:absolute; left:0px; top:320px; width:500px; height:100px; border:dotted 1} </style>

</head> <body>

<div id="OUTER">

<div id="HEAD"> Newsletter Layout </div>

<div id="COL1"> First Column </div>

<div id="COL2"> Second Column </div>

<div id="FOOT"> Footer </div>

</div>

</body> </html>
Листинг 6.37. Код компоновки информационного бюллетеня, использующий позиционированные элементы
Закрыть окно

Содержание раздела