logo_s

САМОУЧКА

Сайт для тех, кто хочет научиться

 

 

 

 

 

 

Главная

О Нас

Публикации

Связь

 

 

 

 

 

 

 

Наши публикации

 

HTML для новичков

 

XHTML

 

CSS для новичков

 

CSS 3

 

JavaScript

 

< Предыдущая  Следующая >

С помощью CSS Вы сможете оформлять границы HTML элементов.

Стиль границ

CSS свойство border-style позволяет установить стиль для границ HTML элемента.

Значения для установки стилей границ:

  • solid границы будут нарисованы сплошной линией;
  • dashed границы будут нарисованы пунктирной линией;
  • dotted границы будут нарисованы точками;
  • double границы будут нарисованы двойной сплошной линией.

Пример

.bor1
{
border-style:solid;
}
.bor2
{
border-style:dashed;
}
.bor3
{
border-style:dotted;
}

Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).

Цвет границы

С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.

Цвет может быть задан следующими способами:

  1. С помощью имени (например 'red' задаст красный цвет);
  2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
  3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пример

.bor1
{
border-style:solid;
border-color:red;
}
.bor2
{
border-style:solid;
border-color:green;
}
.bor3
{
border-style:solid;
border-color:blue;
}

Толщина границы

С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.

Толщина может быть указана либо в пикселях, либо с помощью предопределенных значений: thin, medium, thick (тонкая, средняя, толстая).

Пример

.bor1
{
border-style:solid;
border-width:4px;
}
.bor2
{
border-style:solid;
border-width:2px;
}
.bor3
{
border-style:solid;
border-width:thin;
}

Задание стилей для отдельных сторон

Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:

CSS блоковая модель

Пример

.bor1
{
border-top-style:solid;
border-width:2px;
}
.bor2
{
border-bottom-style:solid;
border-width:2px;
}
.bor3
{
border-left-style:solid;
border-right-style:solid;
border-width:2px;
}

Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.

Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.

Стенографическое задание свойств

Для того чтобы сократить длину кода, в CSS предусмотрен стенографический способ записи.

Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета,
толщиной 2 пикселя */
.bor1
{
border:2px solid green;
}

Порядок следования свойств в стенографической форме записи:

  1. border-width
  2. border-style
  3. border-color

Обратите внимание: Вы можете пропускать неиспользуемые свойства.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной
1 пиксель */
.bor1
{
border:1px solid;
}

Внешняя граница

Помимо обычной границы элементы могут иметь еще и внешнюю границу, которая задается с помощью CSS свойства outline.

Пример

.out1
{
outline-style:dashed; /* определяет стиль внешней границы */
outline-color:green; /* определяет цвет внешней границы */
outline-width:4px; /* определяет ширину внешней границы */
border-style:solid;
}

Сделайте сами

Задание 1 исправьте ошибки оформления (после исправления всех ошибок элементы должны стать оформленными согласно их описанию).

Пример

<p id='par1'>Моя граница нарисована пунктирной линией. </p>
<p id='par2'>Моя граница нарисована сплошной линией красного цвета.</p>
<p id='par3'>Моя граница сверху и снизу нарисована сплошной линией, а слева и справа
пунктирной. Границы со всех сторон нарисованы голубым цветом.</p>
<p id='par4'>Моя граница нарисована сплошной линией, толщиной 1 пиксель.</p>
<p id='par5'>Моя граница слева и справа нарисована сплошной линией розового цвета.</p>

Задание 2 оформите элементы согласно их описанию.

Пример

1. Я имею сплошную границу коричневого цвета.
2. Я имею сплошную границу красного цвета слева и справа.
3. Я имею сплошную границу розового цвета сверху, и пунктирную границу голубого цвета
слева, справа и снизу.
4. Я имею границу оранжевого цвета толщиной 1 пиксель.
5. Я имею границу красного цвета толщиной 2 пикселя сверху и снизу и пунктирную границу
серого цвета слева и справа.
6. Я имею сплошную границу #1435AD цвета и толщиной 1 пиксель.
7. Я имею пунктирную границу #FF8100 цвета и толщиной 1 пиксель сверху и сплошную

границу цвета #0B6124 и толщиной 2 пикселя снизу.

< Предыдущая  Следующая >

 

 

 

 

 

 

Последние добавления

 

HotLog