Тема 7. Управление списком, таблицей и интерфейсом
Списки
Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
LIST-STYLE-TYPE. Задание типа маркера.
|
Таблица 7.1. Маркеры параметра list-style |
|
|
Название |
Внешний вид |
|
disc |
• |
|
circle |
О |
|
square |
■ |
|
decimal |
1, 2, 3 |
|
decimal-leading-zero |
01, 02, 03 |
|
upper-roman |
I, II, III |
|
lower-roman |
i, ii, iii |
|
upper-alpha |
А, В, С |
|
lower-alpha |
a, b, с |
|
lower-greek |
α, β, θ |
list-style-type: square;
|
! |
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin, inheirt. Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (UL { float: left; }).
Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).
LIST-STYLE-IMAGE. Создание собственных маркеров
В качестве маркеров также применяют графические изображения в формате GIF, JPEG и PNG, если браузер поддерживает такую возможность.
list-style-image: url('images/book.gif');
|
! |
В разных браузерах расстояние между изображением и текстом может различаться.
В Internet Explorer до версии 7.0 включительно не отображаются маркеры, если для списка добавлено свойство float.
LIST-STYLE-POSITION. Создание висячих отступов
Часто текст в элементе маркированного списка занимает несколько строк. С помощью свойства list-style-position можно определить положение текста по отношению к маркеру. Если текст выравнивается по первой букве первой строки, такой отступ называется висячим.
-
inside
Строки выравниваются по маркеру
outside
Строки выравниваются по первой букве в первой строке текста.
|
! |
list-style-position: outside;
LIST-STYLE. Укороченная запись управления списком.
list-style: list-style-type || list-style-position || list-style-image
COUNTER-RESET. Счетчик элемента.
Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента. Счетчик выводиться с помощью свойства content и псевдоэлементов :after и :before.
-
none
Запрещает инициацию счетчика для текущего селектора.
идентификатор
Задает одну или несколько переменных, в которых будет храниться значение счетчика. Значения разделяются между собой пробелом.
целое число
Начальное значение каждого идентификатора. По умолчанию равно 0.
OL
{
counter-reset: punkt1;
}
OL LI:before
{
counter-increment: punkt1;
content: counter(punkt1) ". ";
}
! Не поддерживается IE6 и IE7.
COUNTER-INCREMENT. Увеличения значения счетчика.
Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задается свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before.
-
none
Запрещает увеличение счетчика для текущего селектора
идентификатор
Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения
BODY
{
counter-reset: glava;
}
H2:before {
counter-increment: glava;
content: "Глава " counter(glava) ". ";
}
! Не поддерживается IE6 и IE7.
Таблицы
BORDER-COLLAPSE. Свертывание границ между ячейками таблицы
Каждая ячейка таблицы, которая определяется тегом <td>, имеет четыре границы: верхнюю, левую, нижнюю и правую. Параметр border-collapse позволяет вам настраивать таблицу таким образом, чтобы каждая ячейка делила границы с соседней ячейкой, а не создавала свои.
-
collapse
Позволяет соседним ячейкам в таблице использовать одну и ту же границу.
separate
При этом каждая ячейка данных будет использовать свои собственные границы.
border-collapse: collapse;
BORDER-SPACING. Расстояние между границами ячеек.
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
border-spacing:10px 7px;
! Не поддерживается IE6 и IE7.
EMPTY-CELLS. Отображение пустых ячеек.
Задает отображение границ и фона в ячейке, если она пустая.
-
show
Отображает границу вокруг ячейки и фон в ней.
hide
Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
! Не поддерживается IE6 и IE7.
TABLE-LAYOUT. Отображение ячеек.
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.
-
auto
Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
CAPTION-SIDE. Положение заголовка таблицы.
Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.
-
top
располагает заголовок по верхнему краю таблицы.
bottom
заголовок располагается под таблицей.
right
заголовок размещается справа от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
left
заголовок размещается слева от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
caption-side:bootom;
! Не поддерживается IE6 и IE7.
CURSOR. Изменение внешнего вида курсора мыши
|
Таблица 7.2. Типы курсоров |
|
|
Имя |
Внешний вид |
|
crosshair |
|
|
e-resize |
|
|
help |
|
|
move |
|
|
ne-resize |
|
|
n-resize |
|
|
nw-resize |
|
|
pointer |
|
|
se-resize |
|
|
s-resize |
|
|
sw-resize |
|
|
text |
|
|
wait |
|
|
w-resize |
|
|
progress |
|
|
all-scroll |
|
|
col-resize |
|
|
no-drop |
|
|
not-allowed |
|
|
row-resize |
|
cursor: crosshair;
Задание 7.1 Определение вида маркера
Создайте html файл добавьте в него список с помощью тэгов <ol> и <li>.
<style type="text/css">
li.disc
{
list-style-type: disc;
}
li.circle
{
list-style-type: circle;
}
li.square
{
list-style-type: square;
}
li.decimal
{
list-style-type: decimal;
}
li.decimal-leading-zero
{
list-style-type: decimal-leading-zero;
}
</style>
Премините созданные классы к пунктам списка.
Задание 7.2 Определение собственного маркера
-------------------------------------------------------------------------------------------------------------------------------------
Создайте html файл добавьте в него список с помощью тэгов <ol> и <li>. Создайте графический маркер.
Определите вид маркера с помощью свойства list-style-image и значения url.
Определите вид маркера с помощью стилей:
<style type="text/css">
li
{
list-style-image:url(arr.gif);
}
</style>
Задание 7.3 Определение собственного маркера
Создайте html файл добавьте в него список с помощью тэгов <ul> и <li>. Задайте тип отступа с помощью значения list-style-position и величин:
Задайте тип отступов с помощью стилей:
<style type="text/css">
li
{
list-style-position: outside;
}
.inside
{
list-style-position: inside;
}
</style>
Задание 7.4 Сворачивание границ в таблице
Создайте html файл добавьте в него таблицу из трех столбцов и трех рядов. Примените к таблице класс collapse. Задайте сворачивание границ с помощью значения border-collapse и величин:
Задайте следующие стили:
<style type="text/css">
.collapse
{
border-collapse: collapse
}
</style>
Задание 7.5 Настройка положения таблицы
В существующем html файле к таблице добавьте заголовок с помощью тега caption. Примените к заголовку класс caption. Задайте положение таблицы с помощью значения caption-side и ключевых слов top, left, bottom или right:
Задайте следующие стили:
<style type="text/css">
.сaption
{
caption-side: bottom;
}
</style>
Задание 7.6 Настройка вида курсора мыши
В существующем html файл добавьте ссылку. Примените к ссылке класс help.
Задайте следующие стили:
<style type="text/css">
.help
{
cursor:help;
}
</style>
Задание 7.7 Настройка таблиц
<body>
<div class="forums">
<table cellspacing="0">
<caption>Фильм форум</caption>
<tr>
<th class="name">Название форума</th>
<th>Топик/Сообщение</th>
<th>Последний пост</th>
</tr>
<tr class="alt">
<td class="name">
<a href="/forums/">Название форума</a>
Описание форума. Описание форума.
</td>
<td>9313/163733</td>
<td>Фев 28, 2005 04:21 PM</td>
</tr>
<tr>
<td class="name">
<a href="/forums/">Название форума</a>
Описание форума. Описание форума.</td>
<td>9313/163733</td>
<td>Фев 28, 2005 04:21 PM</td>
</tr>
<tr class="alt">
<td class="name">
<a href="/forums/">Название форума</a>
Описание форума. Описание форума.
</td>
<td>9313/163733</td>
<td>Фев 28, 2005 04:21 PM</td>
</tr>
</table>
</div>
</body>
<style>
body
{
margin: 0;
padding: 30px;
font-family:"Lucida Console";
font-size: small;
background: #B5B5B5;
}
a
{
color: #77985C;
}
table
{
border-collapse:collapse;
width: 100%;
border: 1px solid #000;
background: #fff;
position:relative;
top: -4px;
left: -4px;
}
table th, table td
{
margin: 0;
padding: 8px 20px;
text-align:center;
border-bottom: 1px solid #B5B5B5;
}
table .name
{
text-align:left;
}
table tr
{
background: #E6E6E6;
}
table tr.alt
{
background: #f1f1f1;
}
table td a
{
display:block;
font-weight:bold;
}
table th
{
color: #666;
}
table caption
{
margin: 0px;
padding: 8px 20px;
text-align:left;
border: 1px solid #000;
border-bottom: none;
background: #fff;
font-size: 130%;
font-weight:bold;
}
.forums
{
background: #919191;
}
</style>
Нерушимые блоки
<body>
<div class="box">
<h3>Специальное возможности</h3>
<ul>
<li>
<a href="/purchase/">Подписка на рассылку новостей</a>
</li>
<li>
<a href="/redeem/">Возвращение купленных товаров</a>
</li>
<li>
<a href="/purchase/">История покупок</a>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="container">
<p class="desc">Новая версия</p>
<p class="link">
<em>
<a href="/browsers/firefox/">Mazilla Firefox</a>
</em>
</p>
</div>
</body>
<style>
body
{
font-size:small;
font-family:Arial, Helvetica, sans-serif;
}
.box
{
width: 273px;
background-image:url(../images/div_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
.box h3
{
background-image:url(../images/h3_bg.jpg);
background-repeat:no-repeat;
background-position:top left;
margin:0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #333;
border-bottom: 1px solid #E0CFAB;
}
.box ul
{
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}
.box ul li
{
margin: 0 0 6px;
padding: 0;
}
.container
{
float:left;
color: #666;
background-image:url(../images/_right.gif);
background-repeat:no-repeat;
background-position:top right;
}
.desc
{
margin: 0;
padding: 9px 9px 0 9px;
background-image:url(../images/_left.gif);
background-repeat:no-repeat;
background-position: top left;
}
.link
{
margin: 0;
padding: 0 0 0 9px;
background-image:url(../images/_left.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
.link em
{
display:block;
padding: 0 9px 9px 0;
font-style:normal;
background-image:url(../images/_right.gif);
background-repeat:no-repeat;
background-position:bottom right;
}
.container a
{
font-size: 130%;
color:#e70;
}
</style>
Задание 8.7 Макет страницы
<body>
<div id='wrap'>
<div id="header">
<h1>Апельсиновая компания</h1>
</div>
<p id="message">
<strong>Спецпредложение:</strong> апельсины на 30% слаще - цена та же! Попробуйте!</p>
<div id="content">
<div class="gutter">
<h2>История апельсиновой компании</h2>
<dl class="feature">
<dt><img src="../images/bl.jpg" width="150" height="133" alt="здание компании">
Здание апельсиновой компании
</dt>
<dd>Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ </dd>
</dl>
<dl class="feature">
<dt><img src="../images/bl.jpg" width="150" height="133" alt="здание компании">
Здание апельсиновой компании
</dt>
<dd>Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ Здание апельсиновой компании построенно лучшими архитекторами планеты использующими апельсиновую диету. Вестибюль здания построен в форме апельсина ........ </dd>
</dl>
</div>
</div>
<div id="sldebar">
<div class="gutter">
<div class="box">
<h3>Что мы предлогаем?</h3>
<p>Мы предлагаем лучшие апельсины на планете. Самые оранжевые и вкусные,
всех сортов.</p>
</div>
<div class="box">
<h3>Сорта Апельсина</h3>
<ul>
<li><a href="#">Африканские</a></li>
<li><a href="#">Южно-Американские</a></li>
<li><a href="#">Сибирские</a></li>
<li><a href="#">Японские</a></li>
<li><a href="#">Гренландские</a></li>
</ul>
</div>
<div class="box">
<h3>О нас</h3>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Клиенты</a></li>
<li><a href="#">География</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p> Copyright © 2007 Апельсиновая Компания. Все права защещины.</p>
</div>
</div>
</body>
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
background: #fff;
}
/*структура разметки*/
#wrap
{
background: url(../images/wrap-bg.gif) repeat-y 70% 0;
}
#content
{
float: left;
width:70%;
font-size:95%;
line-height: 1.5em;
color: #333;
}
#sldebar
{
float:right;
width:30%;
}
#footer
{
clear:both;
background: #828377;
}
#footer p
{
margin:0;
padding:15px;
font-size:85%;
color:#FFFFFF;
}
/*заголовок*/
#header
{
border-bottom: 3px solid #87B825;
background: #77b76f url(../image/header_bg.gif) repeat-x top left;
}
#header h1
{
margin: 0;
padding: 30px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 150%;
color: #374C0E;
background: url(../images/bulls_eye.gif) no-repeat top left;
}
#message
{
margin: 0;
padding: 10px;
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530;
}
#message strong
{
padding:0 0 0 28px;
background-image:url(../images/orang.gif);
background-repeat:no-repeat;
background-position:0 50%;
}
#content .gutter
{
padding: 25px;
background: url(../images/content_bg.jpg) repeat-x top left;
}
#sidebar .gutter
{
padding: 15px;
}
#content h2
{
margin: 0 0 1em 0;
padding: 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 150%;
font-weight:normal;
color: #663;
}
dl.feature
{
margin: 15px 0;
padding: 15px;
border-top:1px dotted #ccc;
border-bottom:1px dotted #cccccc;
}
dl.feature:after
{
content: ".";
display:block;
height: 0;
clear:both;
visibility:hidden;
}
dl.feature dt
{
margin: 0 0 .5em 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 140%;
color: #693;
}
dl.feature dt img
{
float:left;
margin: 0 15px 0 0;
padding: 0 4px 4px 0;
background:url(../images/phto_frame.jpg) no-repeat bottom right;
}
dl.feature dd
{
margin-left: 169px;
font-size: 90%;
line-height: 1.5em;
color: #666;
}
.box
{
margin:20px;
padding:0 0 12px 0;
font-size:85%;
line-height: 1.5em;
color: #666;
background: #fff url(../images/box_b.jpg) no-repeat bottom right;
}
.box h3
{
margin: 0;
padding: 12px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 140%;
font-weight: bold;
color: #693;
background: url(../images/box_t.jpg) no-repeat top left;
}
.box p, .box ul
{
margin:0;
padding:0 12px;
}
.box ul li
{
margin: 0 0 0 12px;
padding: 0 0 0 18px;
list-style: none;
background-image:url(../images/footer_dot.jpg);
background-repeat:no-repeat;
background-position: 0 3px;
}
</style>