- •Синтаксис
- •Селектор класса (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'
Несколько таблиц стилей
В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.
Например, внешняя таблица стилей имеет следующие свойства для селектора p:
p
{
font-family: "sans serif";
margin-left: 10pt;
font-style: italic;
font-weight: bold
}
А внутренняя таблица стилей имеет для селектора p следующие свойства:
p
{
margin-left: 20pt;
font-style: normal;
font-weight: bolder
}
Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:
font-family: "sans serif";
margin-left: 20pt;
font-style: normal;
font-weight: bolder
Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.
Лекция 3. Параметры CSS для фона
Параметры CSS для фона определяют фоновые эффекты элемента.
Примеры
Данный пример показывает, как задать фоновый цвет элемента.
<html>
<head>
<style type="text/css">
ul {background-color: rgb(200,10,200)}
ol {background-color: #00FFFF}
li {background-color: transparent}
p {background-color: blue}
</style>
</head>
<body>
<ul>
<li>this is ul</li>
</ul>
<ol>
<li>this is ol</li>
</ol>
<p>This is a paragraph</p>
</body>
</html>
Данный пример показывает, как задать в качестве фона изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg)
}
</style>
</head>
<body>
В документе в качестве фона использовано изображение
</body>
</html>
Данный пример показывает, как использовать повторяющееся фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение
</body>
</html>
Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-y
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только вертикально
</body>
</html>
Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat: repeat-x
}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение,
которое размножается только горизонтально.
</body>
</html>
Данный пример показывает, как разместить на странице фоновое изображение.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
repeat;
background-position:
bottom;
}
</style>
</head>
<body>
</body>
</html>
Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
Определено фиксированное фоновое изображение<br>
</body>
</html>
Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.
<html>
<head>
<style type="text/css">
body
{
background-image:
url(http://www.intuit.ru/departament/picture.jpg);
background-repeat:
no-repeat;
background-attachment:
scroll
}
</style>
</head>
<body>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
Определено прокручивающееся фоновое изображение<br>
</body>
</html>
Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
<html>
<head>
<style type="text/css">
body
{
background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center;
}
</style>
</head>
<body>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
Это документ, для которого свойства фона заданы в одном объявлении<br>
</body>
</html>
Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.