3 способа выравнивания блоков по ширине

Содержание:

Выравнивание рисунка относительно текста
Горизонтальное выравнивание
- Выравнивание посредством «text-align: center»
- Выравнивание блоков при помощи margin
Свойство для вертикального выравнивания vertical-align
Выравнивание текста по вертикали HTML & CSS
Примеры работы с атрибутами
Применение CSS — выравнивание по центру HTML
Декорирование текста
Центрируем DIV внутри DIV-элемента с помощью inline-block
Отступ первой строки
Выравнивание по вертикали
Параметры тени у текста — свойство text-shadow
Как выровнять текст правильно
Работа с текстом в ворде.
§ 8. Создание списков в HTML
§ 6. Заголовки

Выравнивание рисунка относительно текста

Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align. По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).

Рис. 2. Базовая линия

Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).

Рис. 3. Картинка, выровненная по базовой линии текста

В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle.

Пример 2. Выравнивание картинки относительно текста

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
p img {
vertical-align: middle;
}
</style>
</head>
<body>
<p>Вид самой кривой изменяется с помощью
инструмента карандаш <img src=»image/pen.png» alt=»»>.
Для создания прямых отрезков устанавливайте точки удерживая
клавишу Shift.
</p>
</body>
</html>

Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.

Рис. 4. Картинка, выровненная по середине текста

изображения

Горизонтальное выравнивание

Выравнивание посредством «text-align: center»

Css vertical-align property

Для выравнивания текста в блоке есть специальное свойство «text-align». При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

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

.example-text{
text-align: center;
padding: 10px;
background: #FF90B8;
}

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3{
text-align: center;
background: #FF90B8;
}

.inline-text{
display: inline-block;
width: 40%;
padding: 10px;
text-align: left;
background: #FFE5E5;
}

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper{
height: 200px;
background: #F1BF88;
}

.lama1{
height: 200px;
width: 200px;
background: url(lama.jpg);
margin: 0 auto;
}

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

Свойство для вертикального выравнивания vertical-align

Как поставить тег пробела в html? раскрываю три способа, о которых вы не знали

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

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

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

CSS

.text-vertical-al{
display:table;
}
.text-vertical-al p{
display:table-cell!important;
vertical-align:middle;
}

1
2
3
4
5
6
7
8

.text-vertical-al{

displaytable;

}

.text-vertical-al p{

displaytable-cell!important;

vertical-alignmiddle;

}

В результате у нас все заработало:

Выравнивание текста по вертикали CSS

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

Допустим вам нужно выровнять текст по вертикали для всей таблицы. В этом случае в файле CSS для класса table нужно написать следующее:

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

1
2
3
4
5
6

table.table-va td{

border1pxsolid#1e1e1e;

background-colorrgba(0,146,243,0.13);

height40px;

vertical-alignmiddle;/* выравнивание текста по вертикали css*/

}

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

CSS выравнивание по вертикали в таблице
По верху	По центу	По низу

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

1
2
3
4
5
6
7
8
9
10

<caption>CSS выравнивание по вертикали в таблице</caption>

<tbody>

<tr>

<td style=»vertical-align:top;»>По верху</td>

<td style=»vertical-align:middle;»>По центу</td>

</tr>

</tbody>

</table>

Вот что получится:

CSS выравнивание по вертикали в таблице
По верху	По центу	По низу

Выравнивание текста по вертикали HTML & CSS

Блок-схемы алгоритмов. назначение блоков данных

Куда большую проблему, особенно для начинающих, доставляет необходимость вертикального выравнивания тексте. Необходимость выровнять текст по вертикали, в верстке встречается при:

создании различных дизайнов кнопок;
выравнивании разной величины блоков находящихся на одной линии;
вертикальное выравнивание текстов, с разным количеством строчке;
и еще в 100500 случаях.

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

Вертикальное центрирование текста с помощью тега «line-height»

Приведу пример создания кнопки стилями CSS.

Код HTML:

<div id="wrapper">
<div class="button">
Скачать
</div>
</div>

Код CSS:

#wrapper {
}
.button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 4px;
  color: #555555;
  width:120px;
  margin: 20px auto;
  font-size: 14px;
  text-align:center;
  height: 40px;
  line-height: 40px;
}
.button:hover, a.button:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0 none;
}

Результат: https://jsfiddle.net/k6g1phmf/14/.

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

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;  
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: #00f;
  color: white;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/15/.

Вертикальное выравнивание по типу таблицы

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  display: table;
}
.content {
  background: #f09d06;
  color: white;
  width: 300px;
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}

Результат: https://jsfiddle.net/k6g1phmf/18/.

Вертикальное выравнивание блока тегом «transform»

В том случае если не известен размер родительского блока, можно сделать такой трюк:

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}

Результат: https://jsfiddle.net/k6g1phmf/16/.

Выравнивание по вертикали с использованием «display:flex»

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

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/17/.

Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.

Интересненько!Нужно срочно изучить!

Примеры работы с атрибутами

Рассмотрим работу с атрибутами на примерах. Самый простой пример — возьмем тег абзаца

С атрибутом «align». Напишем:

Атрибут «align» сообщает браузеру, что данный абзац нужно выровнять по левому краю экрана.

Для тега абзаца также могут быть применены атрибуты:

align=»center» – выравнивание по центру экрана;
align=»right» – выравнивание по правому краю;
align=»justify» — выравнивание текста по ширине экрана.

Теперь усложним задачу — создадим HTML страницу с использованием нескольких разных атрибутов. Пример такой страницы будет иметь следующий код:

Атрибут цвета «bgcolor» позволяет нам задать цвет фона страницы. Атрибуты «center» и «justify» выравнивают текст внутри себя, соответственно, по центру и по ширине.

Применение CSS — выравнивание по центру HTML

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

CSS можно использовать, чтобы:

Центрировать текст;
Центрировать блочный элемент (например, div);
Центрировать изображение;
Вертикально центрировать блок или изображение.

Много лет назад веб-дизайнеры могли использовать <center> для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.

Декорирование текста

CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:

подчеркивание
перечеркивание
линия над текстом

Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none:

a { /* селектором типа выбираем все гиперссылки  */
text-decoration : none; /* убираем декорирование текста */
}

В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок.
Полный перечень ключевых слов свойства text-decoration указан в данной таблице:

Значение	Описание
none	Определяет нормальный текст (без декорирования). Это значение по умолчанию
underline	Определяет линию под текстом.
overline	Определяет линию над текстом.
line-through	Определяет линию, проходящую через текст (перечеркивание).

Обращаю Ваше внимание, что у большинства пользователей подчеркнутый текст ассоциируется с гиперссылкой, а перечеркнутый с удалённым текстом, поэтому используйте декорирование, когда это действительно необходимо. Допускается использовать несколько значений в одном объявлении:

Допускается использовать несколько значений в одном объявлении:

text-decoration : underline line-through; /* определяет линию под текстом и линию, проходящую через текст */

Давайте рассмотрим пример использования свойства text-decoration в тексте:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-decoration</title>
<style> 
.test {
text-decoration : underline; /* добавляем декорирование текста (линия снизу) */
color : red; /* устанавливаем цвет шрифта */
}
.test2 {
text-decoration : overline; /* добавляем декорирование текста (линия сверху) */
color : green; /* устанавливаем цвет шрифта */
}
.test3 {
text-decoration : line-through; /* добавляем декорирование текста (перечеркивание) */
color : blue; /* устанавливаем цвет шрифта */
}
.test4 {
text-decoration : underline overline; /* добавляем двойное декорирование текста (линия сверху и снизу) */
color : orange; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration: underline;</p>
		<p class = "test2">text-decoration: overline;</p>
		<p class = "test3">text-decoration: line-through;</p>
		<p class = "test4">text-decoration: underline overline;</p>
	</body>
</html>

В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста — линия снизу (значение underline), во втором декорирование текста — линия сверху (значение overline), в третьем декорирование текста — перечеркивание (line-through), а в четвертом двойное декорирование текста — линия сверху и снизу (значения underline overline).

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

Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).

Центрируем DIV внутри DIV-элемента с помощью inline-block

В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8.

CSS

.outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

Свойство text-align работает только в inline-элементах. Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента, а также в качестве блока (inline-block). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div.

Отступ первой строки

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

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.

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

Обращаю Ваше внимание, что в некоторых ситуациях у вас может появится необходимость использовать отрицательный отступ первой строки, свойство text-indent допускает использование отрицательных значений, в этом случае строка сдвигается в обратном направлении. Давайте рассмотрим пример использования этого свойства:

Давайте рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-indent</title>
<style> 
.test {
text-indent : 0px; /* задаём отступ для первой строки текстового блока 0px (это значение по умолчанию) */
}
.test2 {
text-indent : 40px; /* задаём отступ для первой строки текстового блока 40px */
}
.test3 {
text-indent : -20px; /* задаём отрицательный отступ для первой строки текстового блока */
}
.test4 {
text-indent : 50%; /* задаём отступ для первой строки текстового блока 50% */
}
</style>
</head>
<body>
	<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	<p class = "test4">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</body>
</html>

В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.

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

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

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

Выравнивание по вертикали

Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими:

baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
sub и super. Аналоги HTML-тегов <sub> и <sup>. Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
middle. Выравнивание по центру относительно элемента-родителя.

Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.

Параметры тени у текста — свойство text-shadow

Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:

Значение none отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.

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

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

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

Рассмотрим пример:

И вот так будет выглядеть текст абзаца p с применением данного правила стиля в Internet Explorer 11:

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

Сделать выравнивание можно не только в начале печати, но и в конце. Это даже проще: закончили работу над документом и привели его в правильный вид.

Для смещения текста в программе Word есть четыре кнопки. Находятся они в верхней панели, в разделе «Главная».

— по левому краю
— по центру
— по правому краю
— по ширине

А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их:

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

После выделения щелкните по кнопке выравнивания по центру. Напечатанные слова переместятся в середину страницы.

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

Таким же способом попробуйте выровнять слова по правому краю.

Что касается кнопки «По ширине». Она равняет с двух сторон – и слева, и справа. Если текста немного, то вы не заметите разницу между ней и кнопкой «По левому краю». А вот если текста много (несколько абзацев), то он станет ровным с двух сторон.

Пример выравнивания по левому краю:

По ширине:

Часто при таком смещении между словами увеличивается расстояние, как будто было нажато несколько пробелов. Так происходит из-за того, что текст растягивается по всей длине. Чтобы это исправить, нужно сделать расстановку переносов. Для этого перейдите на вкладку «Макет», щелкните по пункту «Расстановка переносов» и выберите «Авто».

Если вкладки «Макет» нет, перейдите на «Разметка страницы».

Совет. Если нужно сделать бланк документа, вставьте таблицу — одна строка, два столбца. Напечатайте в ней шапку, а потом скройте границы. Для этого выделите таблицу, нажав на , перейдите на вкладку «Конструктор». Затем щелкните по пункту «Границы» и выберите «Нет границы».

Работа с текстом в ворде.

Работа и редактирование текста в ворде является неотъемлемой частью любой профессии связанной с компьютером в полной или частичной мере. Грамотно отформатированный текст, залог успеха любой работы связанной с документами. И в этой публикации мы рассмотрим основные инструменты для редактирования текста в ворде.

В статье «Редактирование текста в Word» мы рассмотрели основные инструменты необходимые для работы с текстом. Теперь давайте попробуем применить теорию на практике. Самое первое правило работы с текстом это применение всех инструментов только к выделенной области текста. Что бы выделить текст Вам необходимо навести курсор мыши на начало нужного участка текста, что бы появилась вертикальная палочка. Затем нажимаем правую клавишу мыши и удерживая ее в нажатом состоянии плавно ведем по тексту. Выделенная область текста будет иметь темный фон. Теперь можно применять различные инструменты к выделенной области. Смотрим пример:

1. Выделяем текст и применяем инструменты выделения текста:

— и все три инструмента вместе

Смотрим пример:

Все три инструмента применяются для выделения или акцентирования определенных участков текста

То на что следует обратить внимание. Не следует весь текст в документе делать курсивом или жирным, как бы для красоты

Честно, смотреться гадко и не профессионально.

2. Применяем инструменты выравнивания текста.

— выравнивание по левому краю

— выравнивание по правому краю

— выравнивание по центру

— выравнивание по ширине страницы

Смотрим пример:

Один из необходимых инструментов для формата отображения текста. В основном применяют выравнивание по центру – заголовки, названия глав. Выравнивание по ширине страницы – основной текст, все края текста выравниваются по границам страницы.

3. Стиль шрифта и размер шрифта.

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

Обратите внимание на стиль и размер шрифта, он во всем документе одинаков. За исключением заголовок делают немного больше размером

Смотрим пример:

4. Применяем стилистические эффекты.

— Анимация. Применяется для придания тексту оригинального отображения. (выделено зеленым цветом)

— Цвет выделения текста. Применяется для выделения наиболее важных участков текста. Аналог ручной работы это выделитель или маркер. Для выделения текста так же применяется «Заливка». (выделено красным цветом)

— Цвет текста. Так же применяется для выделения особо важных участков текста. А так же для придания тексту красочного вида. (выделено оранжевым цветом)

— Регистр. Буквы выделенного текста делает заглавными, строчными, а так же различные варианты написания с заглавной или строчной буквы в начале предложения. (выделено розовым цветом)

Смотрим пример:

§ 8. Создание списков в HTML

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

В нумерованном списке маркеры (значения атрибута type) такие:

1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a — маленькими латинскими буквами;
I — большими римскими цифрами;
i — маленькими римскими цифрами.

Например, HTML-код

Первый элемент.Второй элемент.Третий элемент.

браузер покажет так:

Первый элемент.
Второй элемент.
Третий элемент.

В маркированном списке значения атрибута type такие:

disc — закрашенный кружок (по-умолчанию);
circle — незакрашенный кружок;
square — закрашенный квадратик.

Например, HTML-код

Первый элемент.Второй элемент.Третий элемент.

в браузере выглядит так:

Первый элемент.
Второй элемент.
Третий элемент.

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

Первый элемент. Второй элемент. Третий элемент. Четвёртый элемент. Пятый элемент.

браузер покажет так:

Первый элемент.
- Второй элемент.
- Третий элемент.
- Четвёртый элемент.
Пятый элемент.

§ 6. Заголовки

Для задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:

— заголовок первого уровня
— заголовок второго уровня
— заголовок третьего уровня
— заголовок четвёртого уровня
— заголовок пятого уровня
— заголовок шестого уровня

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

align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.

Например, код HTML:

align=»center» title=»Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.»>Заголовок 4 уровня

в браузере будет выглядеть так: