2015-10-16
408
Элемент разметки span определяет обобщенный строковый элемент, применение которого не приводит к образованию блока текста. Элементы разметки span фактически являются аналогами соответствующих HTML-элементов. Приведем некоторые примеры таких соответствий, которые также демонстрируют синтаксис применения элемента span:
· HTML-элемент: <font color=red>…</font>
o CSS-аналог: <span style="color:red; ">…</span>
· HTML-элемент: <i>…</i>
o CSS-аналог: <span style="font-style:italic; ">…</span>
· HTML-элемент: <b>…</b>
o CSS-аналог: <span style="font-weight:bold; ">…</span>
· HTML-элемент: <u>…</u>
o CSS-аналог: <span style="text-decoration:underline; ">…</span>
и т.д.
Возможно пересечение элементов span.
Пример 2.6. Строковые элементы в CSS.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Экскурс в историю Всемирной Паутины</title>
<style type="text/css">
<!--
body {
color: #000; background-color: #fff;
|
|
|
}
h1 {font: bold small-caps 150% Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #369;
}
p {font-family: Georgia, "Times New Roman", Times, serif;
text-align: justify; text-indent: 1.5em; margin-top: 0pt; margin-bottom: 0pt;
}
-->
</style>
</head>
<body>
<h1>Экскурс в историю Всемирной Паутины</h1>
<p>Как известно, знание прошлого избавляет нас от старых ошибок в будущем. А поэтому представляется необходимым рассказать о том, по какому пути происходило развитие веб-технологий клиентской стороны. Путь этот, надо заметить, был весьма запутан и тернист.</p>
<p>Язык HTML, созданный, как мы уже упоминали, Тимом
<span style="white-space: nowrap">Бернерсом-Ли</span> в начале
<span style="white-space: nowrap">1990-х гг.,</span>
нельзя назвать чем-то революционным.</p>
<p>Напротив, он был основан на базе уже существовавшего тогда языка, а точнее, <span style="font-style: italic">метаязыка</span> SGML (
<span style="text-transform: capitalize">standard generalized markup language </span>
— стандартный обобщенный язык разметки), который является стандартом ISO с 1986 г. Строго говоря, язык HTML есть подмножество метаязыка SGML.</p>
</body>
</html>
Рисунок 2.7. Применение элемента span
Списки
При отображении списков CSS позволяет управлять формой пулек (bullets) списка через атрибут list-style-type:
<ul style="list-style-type:square;"> – пулька-квадрат;
<ul style="list-style-type:disk;"> – пулька-диск;
<ul style="list-style-type:circle;"> – пулька-окружность;
<ol style="list-style-type:lower-roman;"> – пулька-строчные римские;
<ol style="list-style-type:upper-alpha;"> – пулька-заглавные буквы;
<ol style="list-style-type:lower-alpha;"> – пулька-строчные буквы
<ol style="list-style-type:decimal;"> – пулька-цифра.
|
|
|
В качестве пулек можно использовать также картинки. Тогда правила CSS имеют следующий формат:
<ul style="list-style-image:url(URL-файла_картинки);"> – пулька-картинка из указанного графического файла.
Свойство list-style-position указывает, где должны находиться пульки: inside – внутри содержимого элементов; outside – за пределами (по умолчанию). Свойство list-style может имеет объединенный формат. Следующий пример демонстрирует CSS-списки.
Пример 2.7. Использование правил CSS-списков.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Управление внешним видом элементов списков</title>
<style type="text/css">
<!--
body {
color: #000; background-color: #fff;
}
ul {
list-style: url(bullet.png) square inside;
}
ol {
list-style-type: lower-roman;
}
-->
</style>
</head>
<body>
<p>Хороший сайт отличают как минимум следующие черты:</p>
<ul>
<li>высокое качество информационного наполнения и грамотность его подачи;</li>
<li>оригинальность и эстетическая привлекательность внешнего облика страниц;</li>
<li>доступность содержания сайта для максимально широкого круга пользователей вне зависимости от применяемых ими типов устройств и версий браузеров, а также от ограничений по состоянию здоровья;</li>
<li>эргономичность элементов пользовательского интерфейса сайта, обеспечивающая высокую эффективность, но в то же время легкость и непринужденность взаимодействия посетителя с веб-ресурсом;</li>
<li>надежность и безопасность используемых технологических решений, четкая согласованность работы всех компонентов;</li>
<li>безупречная проработка всех деталей и нюансов.</li>
</ul>
<p>Технологическая цепочка создания сайта состоит из следующих шагов:</p>
<ol>
<li>постановка задачи, включающая в себя:
<ul>
<li>анализ существующих конкурирующих и/или родственных проектов;</li>
<li>выработку концепции;</li>
</ul>
</li>
<li>подготовка первоначального информационного наполнения;</li>
<li>разработка макетов страниц;</li>
<li>подготовка шаблонов страниц;</li>
<li>проектирование и реализация сервисов;</li>
<li>сборка всех компонентов воедино;</li>
<li>тестирование;</li>
<li>ввод в эксплуатацию;</li>
<li>пожизненное сопровождение — информационное наполнение и техническая поддержка.</li>
</ol>
</body>
</html>
Рисунок 2.8. Пример CSS-списков
