Выравнивание текста

Благодаря свойству CSS text-align, вы можете разместить заголовки вашего документа по центру, расположить текстовое содержимое относительно левого, либо правого края, или, может, вы готовите страницы к печати и необходимо выровнять их по ширине, подобно тому, как текст размещается в печатных изданиях.

Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:

Значение	Описание
left	Выравнивает текст влево. Это значение по умолчанию (если направление текста слева направо).
right	Выравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево).
center	Выравнивает текст по центру.
justify	Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине).

Давайте рассмотрим пример работы с выравниванием текста:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-align</title>
<style> 
div {
background-color : rgba(0, 255, 0, .1); /* задаём цвет заднего фона для всех элементов <div> */
}
.test {
text-align : left; /* задаём выравнивание текста влево */
}
.test2 {
text-align : center; /* задаём выравнивание текста по центру */
}
.test3 {
text-align : right; /* задаём выравнивание текста вправо */
}
.test4 {
text-align : justify; /* задаём выравнивание текста по ширине */
}
</style>
</head>
<body>
	<div class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test4">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов <div> мы установили цвет заднего фона rgba(0, 255, 0, .1).

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Капитель в CSS

Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы.
Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

cелектор {
font-variant: small-caps; /* задаем капитель шрифта */
}

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства font-variant</title>
<style> 
.test {
font-variant : small-caps; /* задаем капитель шрифта */
}
</style>
</head>
	<body>
		<p>Параграф отображается обычным шрифтом.</p>
		<p class = "test">Строчные буквы устанавливаются как прописные уменьшенного размера.</p>
	</body>
</html>

В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps, благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).

Рис. 67 Пример использования свойства font-variant (капитель шрифта).

Изменение визуального порядка следования адаптивных блоков

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.

Изменить визуальный порядок следования адаптивного блока в Bootstrap 4 выполняется посредством класса . Этот класс предназначен для контрольной точки . Если порядок элемента нужно определить не для контрольной точки , а для , , или , то используется следующий вариант данного класса:

order-{breakpoint}-{visual_number}

Вместо необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс , то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

<div class="row">
  <div class="col">
    Первый (не упорядоченный, без класса order-)
    <!-- По умолчанию order, равно 0, поэтому он и первый-->
  </div>
  <div class="col order-12">
    Второй, но будет отображаться последним
  </div>
  <div class="col order-1">
    Третий, но будет отображаться вторым
  </div>
</div>

Ещё один пример (с использованием адаптивных классов ):

<div class="row">
  <div class="col-md-8 order-2 order-md-1">
    Первый (на xs, sm будет отображаться вторым)
  </div>
  <div class="col-md-4 order-1 order-md-2">
    Второй (на xs, sm будет отображаться первым)
  </div>
</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова и . Эти классы (, , , ) позволяют соответственно визуально сместить элемент в начало или конец.

Классы и оказывают своё действие посредством установки элементу CSS свойства со значением -1 (), а классы и — CSS свойства со значением 13 ().

Перепишем вышеприведённый пример с использованием классов , в которых используются ключевые слова и :

<div class="row">
  <div class="col-md-8 order-last order-md-first">
    Первый (на xs, sm будет отображаться последним)
  </div>
  <div class="col-md-4 order-first order-md-last">
    Последний (на xs, sm будет отображаться первым)
  </div>
</div>

Пример с использованием классов как с числом, так и со словами и :

<div class="row">
  <div class="col-3 order-sm-last order-md-1">#1 (XS), #LAST (SM), #1 (MD, LG и XL)</div>
  <div class="col-3 order-md-7">#2 (XS), #7 (MD, LG и XL)</div>
  <div class="col-3 order-md-6">#3 (XS), #6 (MD, LG и XL)</div>
  <div class="col-3 order-md-5">#4 (XS), #5 (MD, LG и XL)</div>
  <div class="col-3 order-md-4">#5 (XS), #4 (MD, LG и XL)</div>
  <div class="col-3 order-md-3">#6 (XS), #3 (MD, LG и XL)</div>
  <div class="col-3 order-md-2">#7 (XS), #2 (MD, LG и XL)</div>
  <div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>
</div>

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым. Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

Возможность позиционировать подчеркивание ниже базовой линии.
Возможность изменять цвет и толщину линии.
Можно использовать вместе с многострочным текстом.

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания. Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки. Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline; Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться. Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами ):

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Изменения, которые нужно учесть

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

заменить на
заменить на

Но, похоже, пока не стоит этого ждать, по крайней мере в отношении . Это свойство обновили буквально только что и в его названии по-прежнему присутствует . Пример: .

Но кто знает, может этот пост попадётся на глаза правильным людям из W3C

Резюмируя

Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом

Пробельные символы и css-cвойство white-space

Как мы уже упоминали в процессе изучения HTML, браузеры по умолчанию игнорируют большинство пробельных символов
в html-коде, заменяя символы табуляции, подряд идущие пробелы и автоматические переносы строк одним пробелом.
Однако такое положение не всегда устраивает пользователей, а применение элемента «pre», в котором сохраняются
все пробелы и переносы строк, также не всегда удовлетворяет их потребностям. Поэтому в CSS для определения
способа обработки пробельных символов предусмотрено специальное наследуемое свойство
white-space (см. пример №5). Перечислим значения свойства:

normal – все пробельные символы и переносы строк в коде HTML
преобразуются в один пробел, а разрывы строк добавляются браузером автоматически; значение используется браузером по умолчанию;
pre – текст форматируется аналогично содержимому тега
<pre>, т.е. отображается так, как вводит его пользователь: сохраняются все подряд
идущие пробельные символы и переносы строк, автоматические переносы не добавляются;
nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом,
переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только
принудительные разрывы строк, сделанные при помощи тегов <br>;
pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются
браузером автоматически;
pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде
HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство white-space</title>

	<style>
		
		p{
		width: 450px;
		margin: 3em;
		}
		
		.p_1{
		white-space: normal;
		background-color: red
		}
		
		.p_2{
		white-space: pre;
		background-color: blue
		}
		
		.p_3{
		white-space: nowrap;
		background-color: green
		}
		
		.p_4{
		white-space: pre-wrap;
		background-color: yellow
		}
		
		.p_5{
		white-space: pre-line;
		background-color: violet
		}
		
	</style>
</head>
<body>

	<p class="p_1">
normal:	используется    значение браузера по умолчанию, т.е. все пробельные 
		символы и переносы строк    в коде HTML преобразуются в один пробел, 
		        а разрывы строк добавляются браузером автоматически.
	</p>
	
	<p class="p_2">
pre: текст форматируется аналогично содержимому элемента «pre», т.е.  
	отображается так, как вводит его пользователь: сохраняются все подряд идущие 
пробельные символы и переносы строк, автоматические переносы не добавляются.
	</p>
	
	<p class="p_3">
nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
	автоматические переносы строк не добавляются, действительны только 	<br>
	принудителььные разрывы строк, сделанные <br>
		при помощи элементов «br».
	</p>
	
	<p class="p_4">
pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , 
	но разрывы    строк добавляются 	браузером автоматически.
	</p>
	
	<p class="p_5">
pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но 
	переносы строк в коде HTML сохраняются     , а также по необходимости 
	браузером добавляются 
			автоматические переносы.
	</p>
	
</body>
</html>

Пример №5. Пример использования свойства white-space

Как задать межстрочный интервал html?

Какого-то специального тега, который бы изменял межстрочный интервал в HTML нет. Поэтому для его изменения можно воспользоваться следующими способами:

1.Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
Например:

XHTML

<div style=” line-height:1.5;”>
Пример изменения межстрочного
интервала текста в HTML и СSS.
</div></li>

1
2
3
4

<div style=”line-height1.5;”>

Пример изменения межстрочного
интервала текста в HTML и СSS.

</div></li>

2.Использовать тег </style> и в нём уже для элемента с нужным классом задавать межстрочный интервал.
Например:

XHTML

1
2
3
4
5
6
7
8
9
10

<style>

.block {

line-height120%;

}
</style>

Пример изменения межстрочного
интервала текста в HTML и СSS.
</div>

В идеале тег style должен располагаться в теге , но работать он будет в любом месте страницы.

Как изменить расстояние между словами CSS?

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

word-spacing может принимать такой же набор значений:

Числовое значение – размер интервала может быть задан в пикселях, дюймах, пунктах и относительных единицах
normal – значение по умолчанию
inherit – наследование родительских параметров

Для тех же трех блоков задам расстояние между словами в css-файле:

CSS

.row15 .first p, .row15 .second p, .row15 .third p{
letter-spacing:0.2em;
word-spacing:1em;
}

1
2
3
4

.row15 .first p, .row15 .second p, .row15 .third p{

letter-spacing0.2em;

word-spacing1em;

}

Вот что у меня получилось:

Используя данные свойства можно придать тексту дополнительный объем, но главное, конечно же, не перестараться. Так как слишком большие расстояние между словами или символами обязательно скажется на внешнем виде и читаемости текста. В любом случае нужно подбирать интервалы в зависимости от ситуации и используемого шрифта.

Удачи вам в оформлении страниц сайта! До встречи в следующих статьях!

С уважением Юлия Гусарь

Базовый поток документа

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

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде.

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>

Во-вторых, в коде элементы вложены друг в друга, и чтобы это учитывать при выводе используют так называемые воображаемые слои для отображения элементов. При этом слой элемента тем выше (ближе к нам), чем данный элемент является более вложенным в коде, т.е. глубже расположен в нём.

<body>
  Этот элемент находится позади других элементов.
  <div>
    Этот вложенный элемент принадлежит воображаемому слою, который находится поверх слоя родителя.
    <span>Этот элемент ещё ближе к нам, его слой располагается над слоем уже его родителя.</span>
  </div>
</body>

В-третьих, положение элемента в потоке зависит от значения свойства .

<body>
  <div class="block-1"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span><span class="inline-4">inline 4</span></div>
  <div class="block-2"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span></div>
  <div class="block-3"><span class="inline-1">inline 1</span><span class="inline-2">inline 2</span><span class="inline-3">inline 3</span></div>    
</body>

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

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

Элементы со строчным отображением () выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.

Кроме , есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся и .

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Пример использования:

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

Подчёркивание текста

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

Вначале разберёмся, почему к подчёркиванию создалось такое отношение,
чтобы не повторять чужих ошибок.

Подчёркнутый текст читается хуже, чем обычный. С учётом того, что чтение с экрана по сравнению с чтением с листа бумаги менее комфортно, данный фактор становится важным для повышения удобства восприятия информации.
На веб-страницах подчёркивание ссылок стало определённым стандартом. Когда мы видим на сайте подчёркнутый текст, то воспринимаем его в силу привычки как ссылку. Если это не так, возникает раздражение: почему этот текст выглядит как ссылка, но при этом ссылкой не является?

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

Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.

Пример 1. Свойство text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
.dot {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class=»dot»>Часть 4, в которой Пол и
Пропилен наносят ответный удар</h1>
</body>
</html>

Результат данного примера показан на рис. 2. Цвет и толщина такой линии устанавливаются браузером самостоятельно в зависимости от размера и цвета текста и не могут быть изменены через стили. Кстати, это же свойство со значением none применяется для того, чтобы убрать подчёркивание у текста, например, у ссылок.

Рис. 2. Вид линии, полученной с помощью text-decoration

Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom. Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).

Пример 2. Пунктирное подчёркивание

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пунктирное подчёркивание</title>
<style>
a.dot {
text-decoration: none; /* Убираем подчёркивание */
border-bottom: 1px dashed #000080; /* Добавляем свою линию */
}
</style>
</head>
<body>
<p><a href=»link1.html»>Обычная ссылка</a> на другую страницу.</p>
<p><a href=»link2.html» class=»dot»>Ссылка с пунктирным подчёркиванием</a>.</p>
</body>
</html>

Результат примера показан на рис. 3.

Рис. 3. Вид обычной ссылки и ссылки с пунктирным подчёркиванием

Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom

Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания

При добавлении такой линии к блочным элементам, вроде

, линия будет не под текстом, а занимать всю ширину элемента.

Сокращенное свойство border

Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border:

border-width;
border-style (обязательно);
border-color.

Пример

p {
    border: 5px solid red;
}

Посмотреть результат

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

Посмотреть результат

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

Посмотреть результат

Закругленные границы

Свойство HTML border radius позволяет оформить элемент границами с закругленными углами.

Пример

p {
    border: 2px solid red;
    border-radius: 5px;
}

Посмотреть результат

Примечание: свойство border-radius не поддерживается в IE8 и более ранних версиях этого браузера.

Свойства text-stroke и text-fill-color — контур и заливка символов текста

На данный момент свойство text-stroke является экспериментальным. В соответствии с названием оно позволяет задать контур для текста, который часто используют дизайнеры в таких программах, как Adobe Illustrator, Figma, Sketch или других приложениях для создания векторных изображений. В настоящее время свойство не включено ни в одну спецификацию W3C или WHATWG. При поиске этого свойства на MDN можно увидеть информацию только о свойстве , а также о составляющих его свойствах (ширина, или толщина контура) и (цвет контура), причем браузеры Mozilla Firefox, Opera и Microsoft Edge также поддерживают это свойство именно с префиксом , но не поддерживают пока без него.

Поддержка свойства современными браузерами очень хороша — 97% (проверьте сами на caniuse.com), но при наведении на любой из них вы увидите, что префикс должен быть именно :Синтаксис:

Синтаксис text-stroke

CSS

Пример:
-webkit-text-stroke: 4px pink;
text-stroke: 4px pink;

1
2
3
4
5
6

-webkit-text-stroke-webkit-text-stroke-width|-webkit-text-stroke-color|initial|inherit;

text-stroketext-stroke-width|text-stroke-color|initial|inherit;

Пример

-webkit-text-stroke4pxpink;

text-stroke4pxpink;

Составляющие свойства:

() — толщина контура (в любых единицах CSS).
() — цвет контура (любым доступным способом для ).

Пример использования :

See the Pen -webkit-text-stroke property by Elen (@ambassador)
on CodePen.0

В примере для указания размера шрифта и контура использованы css-единицы vmin, зависящие от минимальной ширины или высоты вьюпорта браузера, поэтому и шрифт, и контур будет изменяться вместе с размерами браузера.

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

Значения задаются в виде всех доступных :

Значения text-fill-color

CSS

text-fill-color: color | initial | inherit;

1	text-fill-colorcolor\|initial\|inherit;

Если свойство не указано, используется значение свойства . По сути своей работы свойства и одинаковы, но имеет приоритет над , если они имеют разные значения. Это видно в примере выше, в которм свойство color имеет черный цвет (), а text-fill-color — темно-серый (). Мы видим, что символы текста залиты именно темно-серым цветом.

Оба свойства: и , и можно анимировать. Это сделано в примере при наведении на ссылки с помощью свойства .

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

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

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin. Такой отступ находится вне элемента.

Для наглядности картинка:

Например, рассмотрим ячейку html таблицы заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.

Установка теней для текста и css-cвойство text-shadow

Иногда для декоративного оформления текста бывает полезным использование теней. Для этих целей CSS
предлагает наследуемое css-свойство text-shadow,
которое создает одну или несколько теней для текста (см. пример №10). Формат записи свойства имеет вид
{box-shadow: смещение_x смещение_y размытие цвет inset}, где:

смещение x – обязательный параметр, который в случае положительных значений смещает тень
относительно текста по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение
отсутствует.
смещение y – обязательный параметр, который в случае положительных значений смещает тень
относительно текста вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше
радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит
радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то
желательно всегда задавать этот необязательный параметр.
none – тень добавляться не будет (используется по умолчанию).

Для указания числовых значений параметров свойства text-shadow разрешается
использовать все доступные в CSS единицы измерения
(смотреть), а для указания
цвета – любое допустимое в CSS его значение.

Если необходимо добавить сразу несколько теней, то они перечисляются через запятую. При этом первая тень в списке будет расположена на самом верху,
а последняя — в самом низу.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка теней для текста</title>

	<style>
	
		p{
		width: 300px;
		height: 100px;
		margin: 3em;
		padding: 1em;
		border: solid 1px black;
		}
		
		.p_1{
		text-shadow: 2px 2px 3px blue;
        }
		
		.p_2{
		text-shadow: 2px 2px 5px blue,
					5px 5px 8px green,
					10px 10px 15px red;
		}
		
	</style>
	
</head>
<body>

	<p  class="p_1">
		Одна тень.
	</p> 
	
	<p  class="p_2">
		Несколько теней.
	</p>
	
</body>
</html>

Пример №10. Установка теней для текста

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

border-width — толщина рамки;
border-color — цвет рамки;
border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

Следующий параметр border-color с помощью которого можно управлять цветом рамки:

border-color: {1,4} | inherit

Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

p {border-width: 2px; border-color: red}

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

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

И последний параметр border-style задает тип рамки:

border-style: {1,4} | inherit

Тип рамки можно указывать сразу для всех сторон элемента или только для указанных. В качестве значений можно использовать несколько ключевых слов. Вид будет зависеть от используемого браузера и толщины рамки. Значение none используется по умолчанию и не отображает рамку и ее толщина задается нулевой. Значение hidden имеет тот же эффект. Получаемая рамка для остальных значений в зависимости от толщины приведена в таблице ниже:

1 пиксел	3 пиксела	5 пикселов
dotted	dotted	dotted
dashed	dashed	dashed
solid	solid	solid
double	double	double
groove	groove	groove
ridge	ridge	ridge
inset	inset	inset
outset	outset	outset

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border. Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

для задания внутренних отступов пользуемся свойством padding;
для настройки внешних отступов существует правило margin;
параметры рамок задаются с помощью атрибута border.

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

На этом все, до новых встреч!

Высота строки и css-cвойство line-height

Читабельность текста можно также улучшить за счет увеличения межстрочного интервала (расстояния между строками). Для этих целей используется
наследуемое свойство line-height, которое может принимать следующие значения:

normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от
браузера составляет около 120-125% от текущего размера шрифта; значение
используется браузером по умолчанию;
множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения
межстрочного интервала (см. пример №1);
размер – задает расстояние между строк в любых единицах измерения, использующихся в
CSS;
проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта;
inherit – указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

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