CSS урок 10. Отступ и граница элемента CSS

Цель урока: Знакомство со свойствами, задающими отступы и границы элемента CSS; свойства margin, padding, border и outline

Отступы в CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:
пример отступа элемента

Внешние отступы

Внешние отступы в CSS задаются при помощи свойства margin, которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.
css margin-left
Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

  • auto
  • величина: px или em
  • %

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left;
margin:10px 20px 20px 30px;

Пример:

...
<style type="text/css">
p{
	border:5px solid red; /* красная рамка */
	margin:20px;
}
div{
	border:5px solid green; /* зеленая рамка */
}
</style></head> 
<body> 
<div>
Агния Барто - стихи
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
...

Результат:

Агния Барто — стихи

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

Внутренние отступы в css создаются при помощи свойства padding, которое устанавливает значение полей от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

  • auto
  • величина: px или em
  • %

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left;
padding:10px 20px 20px 30px;

Пример:

...
<style type="text/css">
p{
	border:5px solid red; /* красная рамка */
	padding:20px; /* внутренний отступ */
}
</style></head> 
<body> 
<p>
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
...

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border.

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

none

dotted

dashed

solid

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

<style type="text/css">
p.one{
	border-style:solid;
	border-width:5px; 
}
p.two{
	border-style:solid;
	border-width:medium; 
}
</style></head> 
<body> 
<p class="one">
Я на уроке в первый раз.<br/>
Теперь я ученица.<br/>
Вошла учительница в класс,-<br/>
Вставать или садиться?<br/>
</p>
<p class="two">
Как надо парту открывать,<br/>
Не знала я сначала,<br/>
И я не знала, как вставать,<br/>
Чтоб парта не стучала.<br/>
</p>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Для каждой стороны границы можно задать свой стиль:

p{
	border-top-style:solid;
	border-right-style:dotted;
	border-bottom-style:dashed; 
	border-left-style:none; 
	border-top-color:#0f0;
	border-right-color:#f00;
}

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color;
border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width;
outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

img{
	padding:20px; /* Поля вокруг изображения */
	margin-right:10px; /* отступ справа */
	margin-bottom:10px; /* отступ снизу */
	outline:1px solid #666; /* параметры границы */
	background:#f0f0f0; /* цвет фона */
}

Результат:

пример внутренних отступов css

Двойная рамка с использованием CSS

Пример:

p{
	border:5px solid red;
	outline:6px solid orange;
}

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Пример:

...
.photo {
	width	: 150px;
	padding	: 10px 10px 20px 10px;
	border	: 1px solid #BFBFBF;
	background-color	: white;
	-webkit-box-shadow	: 2px 2px 3px rgba(135, 139, 144, 0.4);
	-moz-box-shadow	: 2px 2px 3px rgba(135, 139, 144, 0.4);
	box-shadow		: 2px 2px 3px rgba(135, 139, 144, 0.4);
}
</style></head> 
<body> 
<div class="photo">
	<img  src="2.JPG" width="150" alt="">
	<p>Не ешь меня!!!</p>
</div>
...

Результат:

Эффектные рамки для изображений в css
Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*


Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить