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

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

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

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

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

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

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

|

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

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

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

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

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

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

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

</html>

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

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

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

</html>

Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
```
<html>
<head>
<style type="text/css">
h1 
{
border-bottom: thick double blue
}
</style>
</head>

<body>
<h1> Заголовок h1.</h1>
</body>

</html>
```

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

<html>
<head>
<style type="text/css">
pre 
{
border-left: thin ridge #f0ffff
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>

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

<html>
<head>
<style type="text/css">
h4 
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>

<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4 
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>

</html>

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

<html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>

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

<html>
<head>
<style type="text/css">
h1.styleh1 
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2 
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3 
{
border-style: outset;
border-width: 7px 
}
h4.styleh4 
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>

<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку. 
Сначала задайте границы с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
```
<html>
<head>
<style type="text/css">
h1 
{
border: thin dotted #ff00ff
}
</style>
</head>

<body>
<h1>Заголовок h1</h1>
</body>

</html>
```

Дальше >>

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

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

Границы в CSS

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