- •Синтаксис
- •Селектор класса (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'
Параметр 'border-top-width'
Данный параметр задает толщину верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
Значение |
Описание |
thin |
Определяет тонкую верхнюю сторону границы |
medium |
Определяет верхнюю сторону границы средней толщины |
thick |
Определяет толстую верхнюю сторону границы |
length |
Позволяет определить толщину верхней стороны границы |
Примеры:
p
{
border-top-width: medium
}
p
{
border-top-width: 1cm
}
Параметр 'border-width'
Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.
Наследование: нет.
Возможные значения:
Значение |
Описание |
thin |
Определяет тонкую границу |
medium |
Определяет границы средней толщины |
thick |
Определяет толстую границу |
length |
Позволяет определить толщину границ |
Примеры:
p {border-width: thick}
все четыре стороны границы будут толстыми.
p {border-width: thick thin}
верхняя и нижняя стороны границы будут толстыми,
левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin}
верхняя сторона границы будет иметь среднее значение,
левая и правая стороны границы будут толстыми,
нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium}
верхняя сторона границы будет толстой,
правая сторона границы будет тонкой,
нижняя сторона границы будет тонкой,
левая сторона границы будет иметь среднее значение.
Лекция 7. Отступы в СSS
Отступы в CSS определяют пространство вокруг элементов.
Примеры
Этот пример показывает, как задать для текста левый отступ.
<html>
<head>
<style type="text/css">
h1.lf {margin-left: 1cm}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов</h1>
<h1 class="lf">Заголовок h1 с отступами</h1>
</body>
</html>
Этот пример показывает, как задать для текста правый отступ.
<html>
<head>
<style type="text/css">
h2.rg {margin-right: 400px}
</style>
</head>
<body>
<h2> Заголовок h2 без отступов </h2>
<h2 class="rg"> Заголовок h2 с заданным правым отступом</h2>
</body>
</html>
Этот пример показывает, как задать для текста верхний отступ.
<html>
<head>
<style type="text/css">
h1.tp {margin-top: 50px}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов </h1>
<h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>
</body>
</html>
Этот пример показывает, как задать нижний отступ текста.
<html>
<head>
<style type="text/css">
h2.btm {margin-bottom: 1cm}
</style>
</head>
<body>
<h2>Заголовок h2 без отступов</h2>
<h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>
<h2>Заголовок h2 без отступов</h2>
</body>
</html>
Этот пример показывает, как задать параметры всех отступов в одном объявлении.
<html>
<head>
<style type="text/css">
h1.all {margin: 1cm 2cm 1cm 2cm}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов</h1>
<h1 class="all">Заголовок h1 с заданными отступами</h1>
<h1>Заголовок h1 без отступов</h1>
</body>
</html>