List-style-image: url(graphics/marker.gif)

- Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif

Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Нестандартный маркер-рисунок< /title>
< /head>
< body>
< ul style=" list-style-image: url(graphics/marker.gif) " >
< li> Первый любимый пункт.
< li> Второй любимый пункт.
< li> И не менее любимый третий пункт.
< /ul>
< /body>
< /html>

Стиль обтекания маркера списком.

Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.

Возможных значений свойства list-style-position всего два:

· outside - Маркер находится в стороне от списка.(по умолчанию)

· inside - Маркер обтекается текстом.

Пример для наглядности:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Обтекание маркера текстом< /title>
< style type=" text/css" >
body {
margin: 0px;
background: #e8e8e8
}
div {
width: 300px;
height: 200px;
float: left;
margin: 10px;
padding: 10px;
border: RGB(25, 125, 25) 2px ridge;
background: #fff
}
h3 {
text-align: center
}
< /style>
< /head>
< body>
< div>
< h3> Здесь маркер обтекается текстом: < /h3>
< ul style=" list-style-position: inside " >
< li> Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
< li> Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
< /ul>
< /div>
< div>
< h3> А здесь нет: < /h3>
< ul style=" list-style-position: outside " >
< li> Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
< li> Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
< /ul>
< /div>
< /body>
< /html>

List-style

Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.

Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто перечислю их:

· list-style-type - Вид маркера в списке

· list-style-image - Нестандартный маркер рисунок

· list-style-position - Стиль обтекания маркера списком

Если в голове остались какие то пробелы можете вернуться и перечитать.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Стиль списка< /title>
< /head>
< body>
< div style=" width: 250px; " >
< ul style=" list-style: url(graphics/marker.gif) inside " >
< li> - Этот список использует в качестве маркера рисунок.
< li> - Текст этого списка обтекает маркер.
< /ul>
< /div>
< /body>
< /html>

Полезные советы:

· Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.

· Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве " меню" - навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.

Глава 14

Полоса прокрутки.

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

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

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки < div>, < textarea>, < iframe> и т.д.. в том числе и сама страница - тег < body>.

В таблице ниже перечислены все свойства CSS из семейства scrollbar, а также показан результат применения этих свойств.

Свойство полосы прокрутки:

scrollbar-3dlight-color: #ff0000; - Цвет верхней и левой тени ползунка и кнопок.

scrollbar-arrow-color: #ff0000; - Цвет стрелок на кнопках полосы прокрутки.

scrollbar-base-color: #ff0000; - Базовый цвет полосы прокрутки.

scrollbar-darkshadow-color: #ff0000; - Цвет нижней и правой тени.(dark shadow - темная тень)

scrollbar-face-color: #ff0000; - Цвет лицевой части полосы прокрутки.

scrollbar-highlight-color: #ff0000; - Цвет подсветки полосы прокрутки.

scrollbar-shadow-color: #ff0000; - Цвет тени полосы прокрутки (shadow-тень).

scrollbar-track-color: #ff0000; - Цвет дорожки для полосы прокрутки.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

· #ff0000 - Шестнадцатеричное значение цвета RGB.

· red - Именное значение цвета.

· RGB(255, 0, 0) - Значение цвета RGB.

· inherit - применяется значение родительского элемента.(по умолчанию)

Пример:

Файл primer3.css
body{
background-color: #fff8dc;
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffebcd;
scrollbar-darkshadow-color: #f5f5dc;
scrollbar-face-color: #b8860b;
scrollbar-highlight-color: #f5f5dc;
scrollbar-shadow-color: #f5f5dc;
scrollbar-track-color: #f5f5dc;
}
div{
padding: 20px;
overflow: auto;
width: 200px;
height: 100px;
border: solid 2px #deb887;
background-color: #ffffff;
}

Файл index.html
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" >
< html>
< head>
< title> Полоса прокрутки< /title>
< link rel=" stylesheet" href=" primer3.css" type=" text/css" >
< /head>
< body>
< div>
< h3 align=" center" > Диктант< /h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввична, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
< /div>
< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br>
< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br>
< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br>
< br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br>
< /body>
< /html>

⇐ Предыдущая123456789Следующая ⇒

Поделиться:

Популярное:

1. Кроссбраузерность свойства scrollbar.