- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Параметр 'padding-right'
Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
Length |
Определяет фиксированное правое поле |
% |
Определяет правое поле в % от высоты ближайшего элемента |
Пример:
li
{
padding-right: 2px
}
Параметр 'padding-top'
Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
Length |
Определяет фиксированное верхнее поле |
% |
Определяет верхнее поле в % от высоты ближайшего элемента |
Пример:
li
{
padding-top: 2px
}
Лекция 9. Списки в CSS
Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Примеры:
Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul.crl {list-style-type: circle}
</style>
</head>
<body>
<ol class="no">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="ds">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ol class="sqr">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="crl">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
Этот пример показывает, как задать различные маркеры элементов списка.
<html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="lwalph">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="upalph">
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>
<ol class="lwrm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul class="uprm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ul class="dec">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
Этот пример показывает, как задать изображение в качестве маркера элемента списка.
<html>
<head>
<style type="text/css">
ol
{
list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>
</html>
Этот пример показывает, как можно задать расположение маркера элемента списка.
<html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}
ul.out
{
list-style-position: outside
}
</style>
</head>
<body>
<ol class="in">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
</ol>
<ul class="out">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
</body>
</html>
Пример показывает, как задать все параметры списка в одном объявлении.
<html>
<head>
<style type="text/css">
ol
{
list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>
</html>