belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

3.2. Установка границ элементов

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

Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример 3.3). Все они могут принимать ряд значений, которые определяют внешний вид границы:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s{
		border-color: red;
		border-width: 5px;
		}
	</style>
</head>
<body>
	<span style="border-style: dotted" class="b_s">dotted</span>&nbsp;
	<span style="border-style: dashed" class="b_s">dashed</span>&nbsp;
	<span style="border-style: solid" class="b_s">solid;</span>&nbsp;
	<span style="border-style: double" class="b_s">double</span>&nbsp;
	<br><br>
	<span style="border-style: groove" class="b_s">groove</span>&nbsp;
	<span style="border-style: ridge" class="b_s">ridge</span>&nbsp;
	<span style="border-style: inset" class="b_s">inset</span>&nbsp;
	<span style="border-style: outset" class="b_s">outset</span>&nbsp;
</body>
</html>

Пример 3.3. Определение внешнего вида границ элементов (пример №1)

Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример 3.4):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s{
		border-color: blue;
		border-width: 5px;
		}
	</style>
</head>
<body>
	<span style="border-style: dotted outset" class="b_s">
		dotted outset
	</span> &nbsp;
	
	<span style="border-style: dashed solid double" class="b_s">
		dashed solid double
	</span> &nbsp;
	
	<span style="border-style: dashed solid dotted double" class="b_s">
		dashed solid dotted double
	</span><br><br>
		
	<span style="border-bottom-style: double" class="b_s">
		double
	</span>
</body>
</html>

Пример 3.4. Определение внешнего вида границ элементов (пример №2)

Если нет необходимости задавать сразу все четыре границы элемента или нужно установить (изменить) стиль границы одной отдельной стороны, следует воспользоваться одним из свойств border-top-style, border-bottom-style, border-left-style или border-right-style (см. пример 3.4).

Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример 3.5). Все они могут принимать ряд значений, которые определяют ширину границы:

Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения, которые задают ширину границ по описанному выше алгоритму (смотреть).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		width: 300px;
		border-style: solid;
		border-color: #0000ff;
		border-bottom-width: 8px;
		}
		.b_s_2{
		width: 300px;
		border-style: solid;
		border-right-color: violet;
		border-left-width: 8px;
		}
	</style>
</head>
<body>
	<p  class="b_s_1">
		Ширина нижней границы равна 8px, а ширина остальных<br>
		устанавливается браузером по умолчанию.
	</p> 
	<p class="b_s_2">
		Граница правой стороны имеет фиолетовый цвет, остальные<br>
		имеют цвет, устанавливаемый браузером по умолчанию.
	</p> 
	<p style="border-bottom: double red 2px; width: 300px;">
		Заданы характеристики нижней границы.
	</p>
</body>
</html>

Пример 3.5. Определение внешнего вида границ элементов (пример №3)

Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример 3.5). Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму (смотреть).

Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример 3.5). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.

Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рис. 3.6 и пример 3.7). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

Рис. 3.6. Схема скругления углов рамки элемента

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		width: 250px;
		border-style: solid;
		border-color: #ff0000;
		border-radius: 10em 0.5em/1em;
		}
		.b_s_2{
		width: 250px;
		border-style: solid;
		border-color: violet;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 30%;
		}
	</style>
</head>
<body>
	<p  class="b_s_1">
		<br>&nbsp; border-radius: 10em 0.5em/1em<br><br>
	</p> 
	<p class="b_s_2">
		<br>&nbsp; border-bottom-right-radius: 30%<br>
		&nbsp; border-bottom-left-radius: 8px<br><br>
	</p> 
</body>
</html>

Пример 3.7. Определение внешнего вида границ элементов (пример №4)

Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения:

Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример 3.8). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color, принимающего вместо специального значения transparent значение invert, которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка границ элементов</title>
	<style>
		.b_s_1{
		border: solid 5px red;
		outline: dashed 5px green;
		outline-offset: 8px;
		}
		.b_s_2{
		border: solid 5px violet;
		outline: groove 8px orange;
		outline-offset: 3px;
		}
	</style>
</head>
<body>
	<br>&nbsp; &nbsp; 
	<span  class="b_s_1">
		Расстояние между границами равно 8px.
	</span> 
	<br><br><br><br>&nbsp; &nbsp; 
	<span  class="b_s_2">
		Расстояние между границами равно 3px.
	</span> 
</body>
</html>

Пример 3.8. Определение внешнего вида границ элементов (пример №5)

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

/* Обнуляем отступы */
*{
margin: 0;		/* Обнуляем внешние отступы */
padding: 0;		/* Обнуляем внутренние отступы */
outline: 0;		/* Обнуляем толщину внешней границы */
line-height: 1;	/* Задаем высоту строки */
}

/* Остальные стили */

Пример 3.8.1. Обнуление внешних отступов элементов

На практике, в процессе верстки страниц желательно использовать распространенный прием обнуления всех отступов, показанный в примере 3.8.1. Дело в том, что разные браузеры могут по-разному задавать внутренние и внешние отступы элементов, что может приводить к нежелательным эффектам для веб-мастера. Поэтому лучше обнулить все отступы и задавать их самостоятельно в зависимости от конкретной ситуации.

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие растяжение цвет inset} (см. пример 3.9), где:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка теней элементов</title>
	<style>
		.size_1{
		width: 300px;
		height: 100px;
        }
		.p_1{
		border: solid 5px red;
		background-color: yellow;
		box-shadow: 10px 10px 50px 15px blue;
        }
		.p_2{
		border: solid 5px orange;
		background-color: violet;
		box-shadow: 5px 5px 8px 10px blue inset,
					10px 10px 8px 10px green,
					15px 15px 8px 10px red,
		}
	</style>
</head>
<body>
	<p  class="p_1 size_1">
		Одна тень.
	</p> <br><br><br>
	
	<p  class="p_2 size_1">
		Несколько теней.
	</p> 
</body>
</html>

Пример 3.9. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.

Контрольные вопросы и задания

  1. Перечислите возможные значения группы свойств, отвечающих за определение стиля границ элемента?
  2. Какие свойства предназначены для определения ширины и цвета границ элементов?
  3. Каким образом задаются параметры границ, устанавливаемые при помощи универсальных свойств (например, border-width)?
  4. Опишите свойства, которые отвечают за установку скругления углов границ элементов.
  5. Разрешается ли использовать для установки внешних границ элемента отрицательные значения? Если да, то как будут отображены границы в этом случае?

Словарь новых английских слов

width [wɪtθ] – ширина.
hidden [ˈhɪdn] – скрытый, спрятанный.
dotted [ˈdɒtɪd] – линия в виде точек.
dashed [daʃt] – штриховая линия.
solid [ˈsɒlɪd] – цельный, сплошной.
double [ˈdʌb(ə)l] – парный, двойной.
groove [ɡruːv] – желобок, канавка, паз.
ridge [rɪdʒ] – ребро, край, гребень.
inset [ˈɪnsɛt] – вставлять, вкладка.
shadow ['∫ædəʊ] – тень.
outset [ˈaʊtsɛt] – начало, отправление.
thin [θɪn] – тонкий, худой.
thick [θɪk] – толстый, густой.
outline [ˈaʊtlʌɪn] – контур, обвод, очертание.
transparent [tranˈspar(ə)nt] – прозрачный.
margin [ˈmɑːdʒɪn] – поле (страницы).
display [dɪˈspleɪ] – показ, отображение.
padding [ˈpadɪŋ] – внутренние поля (элемент).
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх