Styling text with CSS. CSS properties for styling HTML text (vertical-align, text-align, text-indent, and others) Aligning text with CSS

В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

Здравствуйте, уважаемые читатели блога сайт. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

Выравнивание текста с помощью CSS

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

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

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

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

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align . Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

• baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
• sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
• super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
• top — выравнивание фрагмента текста по верхнему краю родительского элемента;
• text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
• middle — выравнивание центра фрагмента текста по центру родительского элемента;
• bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
• text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

• top — для выравнивания содержимого по верхней границе ячейки;
• bottom — для выравнивания содержимого по нижней границе ячейки;
• middle — для выравнивания по центру ячейки (используется по умолчанию).

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

Параметры 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-shadow

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

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

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

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

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

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

Задаёт выравнивание последней строки блока текста.

Краткая информация

Обозначения

Значения

auto Совпадает с выравниванием, заданным свойством text-align , за исключением значения justify . Для него выравнивание будет как start . start Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево). end Строка выравнивается по конечному краю блока, он определяется направлением текста. left Строка выравнивается по левому краю. right Строка выравнивается по правому краю. center Строка выравнивается по центру. justify Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Влияние разных значений на положение текста показано в табл. 1.

Значение	Выравнивание	Вид текста
left	По левому краю
right	По правому краю
center	По центру
justify	По ширине

Песочница

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

div { text-align-last: start ; }

Пример

Object Model

An object.style.textAlignLast

Note

Internet Explorer and Edge do not support start and end values.

Firefox version 49 supports the -moz-text-align-last property.

Specification

Each specification goes through several stages of approval.

• Recommendation - This specification has been endorsed by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of the draft after discussion and amendments for community review.
• Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
• Draft ( Draft specification) is the first draft of the standard.

Module Css text describes the CSS functions that control the translation of source text into formatted text and line wrapping. Various CSS properties provide control over case conversion, handling of whitespace, hyphenation and wrapping rules for text and lines, alignment, spacing, and indentation.

The basic unit of text is a symbol. However, since writing systems are not always as simple as the mainstream English alphabet, what a symbol actually is depends on the context in which the term is used. For example, in the Korean writing system, each square representation of a syllable (for example, 한 = han) can be considered a symbol. However, a square symbol does indeed consist of multiple letters, each representing a phoneme (for example, ㅎ = h, ㅏ = a, ㄴ = n), and each of them can also be considered a symbol.

1. Transforming text: the text-transform property

The text-transform property will style the text. It does not affect the underlying content, and should not affect the content of a plain text copy and paste operation.

The property is inherited.

Syntax

Text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;

2. Handling spaces and line breaks: the white-space property

The white-space property handles white space and line breaks within an element.

The property is inherited.

Syntax

White-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: inherit; white-space: initial;

3. Setting tabs: the tab-size property

The tab-size property is used to change the amount of indentation obtained with the Tab key. Property values ​​are ignored when one of the three pre-line, normal, or nowrap values ​​of the white-space property is set.

Only works for elements and <pre>For the rest of the block elements, the value will always be one. Property values ​​specified in length units are supported only in Chrome 42+.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Tab-size: 0; tab-size: 10px; tab-size: inherit; tab-size: initial;</p><h3>4. Line break and word boundaries</h3> <p>When line-level content is broken into lines, it is broken into linear blocks. This splitting is called a line break.</p> <p>When a line breaks due to explicit line break controls such as newline or tag <br>, start or end of a block is a forced line break.</p> <p>If a line breaks due to content wrapping when the browser creates optional line breaks to fit the content, it is soft wrapping.</p> <h4>4.1. Letter break rules: the word-break property</h4> <p>The word-break property defines the possibilities of soft wrap between letters, i.e. when it is permissible to split lines of text. In particular, it controls whether soft hyphenation exists between adjacent typographic letter units and / or numbers. This does not affect the rules governing the soft hyphenation capabilities created by spaces.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Word-break: normal; word-break: break-all; word-break: keep-all; word-break: inherit; word-break: initial;</p><h4>4.2. Line break: line-break</h4> <p>The line-break property defines the rules for line wrapping applied within an element, in particular how the wrapping interacts with punctuation marks and symbols.</p> <p>The property is inherited.</p> <table class="t1"><tr><th colspan="2">line-break</th> </tr><tr><td>Values:</td> <td> </td> </tr><tr><td>auto</td> <td>The browser defines a set of line break constraints to use, which can vary based on line length, such as using a less stringent set of line break rules for short lines. Default value.</td> </tr><tr><td>loose</td> <td>Breaks up text using the least restrictive set of line wrapping rules. Typically used for short lines, such as in newspapers.</td> </tr><tr><td>normal</td> <td>Breaks up text using the most common set of line wrapping rules.</td> </tr><tr><td>strict</td> <td>Breaks up text using a strict set of line wrapping rules.</td> </tr><tr><td>initial</td> <td>Sets the property value to its default value.</td> </tr><tr><td>inherit</td> <td>Inherits the property value from the parent element.</td> </tr></table><p><b>Syntax</b></p><p>Line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: inherit; line-break: initial;</p><h4>4.3. Hyphenation: the hyphens property</h4> <p>The hyphens property determines whether hyphens are allowed to create soft hyphenation capabilities within a line of text.</p> <p>Hyphenation is controlled word-breaking, in which words are usually not allowed to break in order to improve the layout of paragraphs. As a rule, word splitting occurs along syllabic or morphemic boundaries and with visual indication of separation (usually by inserting a hyphen, -). In some cases, hyphenation can also change the spelling of a word. In any case, word wrap is only a rendering effect: it should not affect document content, text selection or search.</p> <p>CSS Text Level 3 does not define precise hyphenation rules, so it is recommended that you choose hyphenation points that are appropriate for your language.</p> <p>The property is inherited.</p> <table class="t1"><tr><th colspan="2">hyphens</th> </tr><tr><td>Values:</td> <td> </td> </tr><tr><td>none</td> <td>Words are not hyphenated, even if the characters within the word explicitly define hyphenation.</td> </tr><tr><td>manual</td> <td>Words are hyphenated only in those places where there are characters inside the word that clearly indicate the possibility of word hyphenation ( <a href="https://maccase.ru/en/iron/vvod-simvolov-s-klaviatury-alt-kak-nabrat-specialnye-simvoly-na.html">special character</a>-). Default value.</td> </tr><tr><td>auto</td> <td>Words can be split into hyphenation capabilities, as determined automatically by the language-appropriate hyphenation resource, in addition to those explicitly indicated by a hyphenated hyphen. You need to set the language of your content (for example, using the HTML lang attribute or the HTTP Content-Language header) in order to get proper auto-word wrapping.</td> </tr><tr><td>initial</td> <td>Sets the property value to its default value.</td> </tr><tr><td>inherit</td> <td>Inherits the property value from the parent element.</td> </tr></table><p><b>Syntax</b></p> <p>Hyphens: none; hyphens: manual; hyphens: auto; hyphens: inherit; hyphens: initial;</p><h4>4.4. Wrap-block overflow: overflow-wrap / word-wrap property</h4> <p>The overflow-wrap property (or its deprecated name word-wrap) specifies whether a non-breaking line can break at unresolved points to prevent a line box from overflowing. Works when the white-space property allows wrapping.</p> <p>The property is inherited.</p> <table class="t1"><tr><th colspan="2">overflow-wrap, word-wrap</th> </tr><tr><td>Values:</td> <td> </td> </tr><tr><td>normal</td> <td>Non-breaking lines can only break at permitted breakpoints. Default value.</td> </tr><tr><td>break-word</td> <td> </td> </tr><tr><td>anywhere</td> <td>A contiguous sequence of characters can be broken at an arbitrary point if there are no other acceptable break points in the line. Affects only <a href="https://maccase.ru/en/reviews/programma-dlya-vizualnogo-otobrazheniya-failov-i-papok-razmer-papok.html">visual display</a> without affecting the original text. No new line is added at the line break point. The soft wrap options provided anywhere are considered when calculating your own minimum content sizes.</td> </tr><tr><td>initial</td> <td>Sets the property value to its default value.</td> </tr><tr><td>inherit</td> <td>Inherits the property value from the parent element.</td> </tr></table><p><b>Syntax</b></p><p>Overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; overflow-wrap: inherit; overflow-wrap: initial;</p><h3>5. Aligning and justifying lines</h3> <p>The alignment and justification of lines controls how inline content is distributed in a line box.</p> <h4>5.1. A shorthand for aligning text: the text-align property</h4> <p>A block of text is a collection of linear blocks. The text-align property specifies the text-align-all and text-align-last properties and describes how the line-level boxes in each line box are aligned relative to the start and end sides of the line box. Values ​​other than justify-all or match-parent are assigned to text-align-all and reset in text-align-last to auto.</p> <p>The property is inherited.</p> <table class="t1"><tr><th colspan="2">text-align</th> </tr><tr><td>Values:</td> <td> </td> </tr><tr><td>start</td> <td>Line-level content is aligned with the start edge of the line box. Default value.</td> </tr><tr><td>end</td> <td>Line-level content is aligned to the trailing edge of the line box.</td> </tr><tr><td>left</td> <td>Line-level content is aligned to the left of the line box line. In vertical writing systems, this will be the physical top or bottom, depending on the orientation of the text.</td> </tr><tr><td>right</td> <td>Row-level content is right-aligned on the line box of the inline box. In vertical writing systems, this will be the physical top or bottom, depending on the orientation of the text.</td> </tr><tr><td>center</td> <td>Line-level content is centered within the line box.</td> </tr><tr><td>justify</td> <td>The text is aligned to the width of the inline box to precisely fill the line box, snuggling to the left and right edges of the parent element. Unless otherwise specified in text-align-last, the last line before a forced break or the end of a block is aligned to the beginning. Spaces between words and letters are distributed in such a way that the length of all lines is equal. Different browsers can increase both the spacing between words and the spacing between letters.</td> </tr><tr><td>justify-all</td> <td>Sets text-align-all and text-align-last to justify, also aligning the last line.</td> </tr><tr><td>match-parent</td> <td>The value behaves the same as inherit, except that the inherited start or end value is interpreted relative to the direction value (or the original containing block if there is no parent) and results in the computed value of left or right.</td> </tr><tr><td>inherit</td> <td>Inherits the property value from the parent element.</td> </tr></table><p><b>Syntax</b></p><p>Text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; text-align: inherit;</p><h4>5.2. Default text alignment: text-align-all property</h4> <p>The text-align-all property is a shorthand version of the text-align property that determines the alignment of all lines of content in a block container, except for the last lines, which are overridden by text-align-last. Accepts the values ​​start, end, left, right, center, justify, and match-parent.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Text-align-all: start; text-align-all: end; text-align-all: left; text-align-all: right; text-align-all: center; text-align-all: justify; text-align-all: match-parent; text-align-all: inherit;</p><h4>5.3. Align the last line: the text-align-last property</h4> <p>The text-align-last property describes how the last line of a block or line is aligned immediately before a forced line break.</p> <p>If set to auto, the content on the corresponding line is aligned with text-align-all, unless justify is set for text-align-all, in which case it is aligned to the start of the block. All other values ​​are interpreted as described for text-align.</p> <p>The values ​​are auto, start, end, left, right, center, justify, and match-parent.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; text-align-last: match-parent;</p><h3>6. Gaps</h3> <p>CSS allows you to control the spacing between words and typographic characters using the word-spacing and letter-spacing properties.</p> <h4>6.1. Spacing between words: the word-spacing property</h4> <p>The word-spacing property defines additional spacing between words. <br>Sets the spacing between words. Positive and negative values ​​can be used. With a negative meaning, words can overlap.</p> <p>The value of word-spacing is affected by the value of the text-align property when text is aligned to width.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Word-spacing: normal; word-spacing: 1px; word-spacing: 0.2em; word-spacing: 50%; word-spacing: inherit; word-spacing: initial;</p><h4>6.2. Tracking: the letter-spacing property</h4> <p>The letter-spacing property specifies additional spacing, or tracking, between adjacent typographic characters. Letter spacing is complementary to and word-spacing. User agents can further increase or decrease the spacing between typographic character units for text alignment, depending on current alignment rules.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Letter-spacing: normal; letter-spacing: 0.1em; letter-spacing: 2px; letter-spacing: inherit; letter-spacing: initial;</p><h3>7. First line indent: text-indent property</h3> <p>The text-indent property specifies the indentation applied to lines of inline content in a block. The padding is treated as a margin applied to the start edge of the line box. <br>If there is an image in the first line of a block element, then it will move along with the rest of the text.</p> <p>The property is inherited.</p> <p><b>Syntax</b></p><p>Text-indent: 5mm; text-indent: 20px; text-indent: 5%; text-indent: 2em each-line; text-indent: 2em hanging; text-indent: inherit; text-indent: initial;</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="edit-link"> </div> <ul class="related-posts"> <div class="clear"></div> <div class="cat-bar"><span class="side-title">Other entries</span></div> <li class="related"> <a href="https://maccase.ru/en/ios/pravda-li-chto-vk-zakryvayut-kakogo-chisla-zakryvayut-vk-vk-mogut.html" title="What date is VK closed?"> <img alt='What date is VK closed?' src='/uploads/2a787cd04b5477aa8c1cc84a173def42.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">What date is VK closed?</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/news/nuzhen-li-akkaunt-google-chto-takoe-akkaunt-v-telefone-i-kak-ego-sozdat-kak.html" title="What is a phone account and how to create one"> <img alt='What is a phone account and how to create one' src='/uploads/354f6c6917d2732f521e24bb4f6459df.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">What is a phone account and how to create one</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/news/ustanovka-vkontakte-na-smartfony-s-android-i-ios-luchshie-klienty.html" title="The best VKontakte clients for android How to install the VKontakte application on the phone"> <img alt='The best VKontakte clients for android How to install the VKontakte application on the phone' src='/uploads/1b4656232724bca1812ac842d790eb99.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">The best VKontakte clients for android How to install the VKontakte application on the phone</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/iron/otklyuchenie-uslugi-vs-vklyucheno-v-odnoklassnikah-kak.html" title="How to disable all paid services in Odnoklassniki?"> <img alt='How to disable all paid services in Odnoklassniki?' src='/uploads/0918daef5060c3987bd6a82179897bd8.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">How to disable all paid services in Odnoklassniki?</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/ios/kak-uznat-parol-stranicy-odnoklassnikah-kak-uznat-svoi.html" title="How to find out your username in classmates"> <img alt='How to find out your username in classmates' src='/uploads/48035c3f246aa52ab3dbb5c0759a80a3.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">How to find out your username in classmates</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/ios/dobavit-elektronnuyu-pochtu-na-yandekse-kak-otkryt-eshche-odnu-pochtu-udalenie.html" title="How do I open another mail?"> <img alt='How do I open another mail?' src='/uploads/cf47e32fef147ecabba8e55c97dc68c5.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">How do I open another mail?</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/reviews/skaip-ne-udalos-voiti-proverte-podklyuchenie-pochemu-skaip-ne-v-seti-a.html" title="Why is Skype not online and there is Internet?"> <img alt='Why is Skype not online and there is Internet?' src='/uploads/6844a54c182a465d349c3b2e006fcb64.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">Why is Skype not online and there is Internet?</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/ios/vlad-ogranichil-dostup-k-svoei-stranice-kak-ogranichit-dostup-k-stranice.html" title="How to restrict access to the VKontakte page?"> <img alt='How to restrict access to the VKontakte page?' src='/uploads/1fa11add950295b4e3ab76e126c4a238.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">How to restrict access to the VKontakte page?</span> </a> </li> <li class="related"> <a href="https://maccase.ru/en/iron/sohranenie-parolei-v-brauzere-kak-sohranit-login-i-parol-v.html" title="How to save a username and password in classmates How to save passwords and usernames on a computer"> <img alt='How to save a username and password in classmates How to save passwords and usernames on a computer' src='/uploads/3871c465234424419bee5d21d9a2764c.jpg' / loading=lazy loading=lazy> <span class="rel-post-title">How to save a username and password in classmates How to save passwords and usernames on a computer</span> </a> </li> </ul> <div class="clear"></div> <hr /> <script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script> <div id="vk_comments"></div> <div id="disqus_thread"> </div> </div> <div class="clear"></div> </div> <div class="sidebar"> <div class="side-blok"> <div class="cat-bar"><span class="side-title">Popular</span></div> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://maccase.ru/en/android/kak-v-kontakte-peredat-golosa-kak-otpravlyat-golosa-vkontakte-druzyam.html" title="How to send "VKontakte" votes to friends" target="_self"><img src="/uploads/cfe69675163c164295a64566ab4ca211.jpg" width="100" height="100" alt="How to send "VKontakte" votes to friends" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://maccase.ru/en/android/kak-v-kontakte-peredat-golosa-kak-otpravlyat-golosa-vkontakte-druzyam.html" title="How to send "VKontakte" votes to friends" class="wpp-post-title" target="_self">How to send "VKontakte" votes to friends</a> </li> <li> <a href="https://maccase.ru/en/news/problemy-s-aisikyu-pochemu-ne-rabotaet-aska-ne-rabotaet-aska-na.html" title="Why does not it work"аська"" target="_self"><img src="/uploads/31a491a6fd6247b1e874c071bdbe0581.jpg" width="100" height="100" alt="Why does not it work"аська"" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://maccase.ru/en/news/problemy-s-aisikyu-pochemu-ne-rabotaet-aska-ne-rabotaet-aska-na.html" title="Why does not it work"аська"" class="wpp-post-title" target="_self">Why ICQ does not work</a> </li> <li> <a href="https://maccase.ru/en/android/kod-ukrainy-v-mezhdunarodnom-formate-i-prochie-nyuansy-nabora-nomerov.html" title="Codes of mobile operators in Ukraine Ukrainian phone numbers mts" target="_self"><img src="/uploads/3bf1d2f029fe9888357b4a3e8c7d76c8.jpg" width="100" height="100" alt="Codes of mobile operators in Ukraine Ukrainian phone numbers mts" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://maccase.ru/en/android/kod-ukrainy-v-mezhdunarodnom-formate-i-prochie-nyuansy-nabora-nomerov.html" title="Codes of mobile operators in Ukraine Ukrainian phone numbers mts" class="wpp-post-title" target="_self">Codes of mobile operators in Ukraine Ukrainian phone numbers mts</a> </li> <li> <a href="https://maccase.ru/en/reviews/sprashivai-bez-registracii.html" title="Ask without registration" target="_self"><img src="/uploads/3e7cd825f22c44fcc44800d109a0a89d.jpg" width="100" height="100" alt="Ask without registration" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://maccase.ru/en/reviews/sprashivai-bez-registracii.html" title="Ask without registration" class="wpp-post-title" target="_self">Ask without registration</a> </li> <li> <a href="https://maccase.ru/en/iron/vpn-soedinenie-chto-takoe-vpn-dlya-chego-on-nuzhen.html" title="Vpn connection. What is VPN. What is it for" target="_self"><img src="/uploads/8b807968255e2f92b41c20234265f838.jpg" width="100" height="100" alt="Vpn connection. What is VPN. What is it for" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://maccase.ru/en/iron/vpn-soedinenie-chto-takoe-vpn-dlya-chego-on-nuzhen.html" title="Vpn connection. What is VPN. What is it for" class="wpp-post-title" target="_self">Vpn connection. What is VPN. What is it for</a> </li> </ul> </div> <div class="side-blok"> <div class="cat-bar"><span class="side-title">Categories</span></div> <div class="menu-1-container"><ul id="menu-1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://maccase.ru/en/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://maccase.ru/en/category/iron/">Iron</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://maccase.ru/en/category/ios/">Ios</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://maccase.ru/en/category/news/">news</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://maccase.ru/en/category/reviews/">Reviews</a></li> </ul></div></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="credits"> <div class="social-bar"> <ul> </ul> </div> <p>2021 <br />maccase.ru - Android. Brands. Iron. news</p> </div> <a id="backtop" href="#top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a> <script type="text/javascript"> function gotoal(link) { window.open(link.replace("_", "http://")); } </script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1", "visibility_show": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0421\u043a\u0440\u044b\u0442\u044c", "width": "50%" }; /* ]]> */ </script> <script type='text/javascript' src='https://maccase.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/custom.js?ver=1.0'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/theia-sticky-sidebar.js?ver=1.1.2'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/jquery.mmenu.min.js?ver=5.6.1'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/superfish.js?ver=1.4.8.'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/headhesive.min.js?ver=1.2.0'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/jquery.webticker.min.js?ver=1.3.1'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/inview.js?ver=1.0.0.'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/themes/justgoodnews/scripts/simple-likes.js?ver=0.5'></script> <script type='text/javascript' src='https://maccase.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.9.1'></script> <div id="mobilemenu" class="mobilemenu"> <ul id="menu-karta-sajta-1" class="top-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://maccase.ru/en/category/android/">Android</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://maccase.ru/en/category/iron/">Iron</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://maccase.ru/en/category/ios/">Ios</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://maccase.ru/en/category/news/">news</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://maccase.ru/en/category/reviews/">Reviews</a></li> </ul> </div> </body> </html>