НОУ ИНТУИТ | Основы работы с CSS. Лекция 6: Границы в CSS

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 31.10.2006 | Доступ: свободный | Студентов: 12243 / 4805 | Оценка: 4.35 / 4.14 | Длительность: 08:43:00

Темы: Интернет-технологии, Программирование

Специальности: Программист, Разработчик интернет-проектов

|

Вам нравится? Нравится 78 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Рассматриваются параметры границ в CSS и способы описания рамок вокруг элементов.

Ключевые слова: css, 'inset', 'border-right-color', 'border-bottom-color', 'border-bottom-style', 'border-left', 'border-left-width', 'border-left-color', 'border-left-style', 'border-right-style', 'groove', 'outset'

Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.

Пример в котором показано, как задать стиль для четырех сторон границы.

<html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>

<body>
<pre class="inset">рамка inset </pre>

<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>

<h1 class="dotted">рамка dotted</h1>

<h2 class="dashed">рамка dashed</h2>

<h3 class="solid">рамка solid</h3>

<h4 class="double">рамка double</h4>

<h5 class="groove">рамка groove </h5>

<h6 class="ridge">рамка ridge</h6>

</body>

</html>

Пример в котором показано, как задать различные стили границы на каждой стороне элемента.

<html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>

<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>

<h2 class="styleh2"> заголовок заголовок заголовок </h2>

<h3 class="styleh3"> заголовок заголовок заголовок </h3>

<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>

</html>

Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.

<html>
<head>

<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>

</head>

<body>

<h1 class="styleh1">одноцветная рамка</h1>

<h2 class="styleh2">рамка из двух цветов</h2>

<h3 class="styleh3">рамка из трех цветов</h3>

<h4 class="styleh4">рамка из четырех цветов</h4>

<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>

</body>
</html>

Пример, в котором показано, как задать толщину нижней стороны границы.

<html>
<head>
<style type="text/css">
h1 
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>

<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает, 
  если используется в одиночку.
      Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать толщину левой стороны границы.

<html>
<head>
<style type="text/css">
h2 
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>

<body>
<h2>Внимание</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>

Дальше >>

Авторизоваться

Основы работы с CSS

Границы в CSS

Вопросы и ответы