Css красная строка: text-indent | htmlbook.ru

Leave a Comment / Css / By /

text-indent — CSS | MDN

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

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

/* значение <length> */
text-indent: 3mm;
text-indent: 40px;
/* значение <percentage> зависит от ширины блока*/
text-indent: 15%;
/* значения ключевых слов */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;
/* международные значения */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Значения

<length>

Отступ определяется как абсолютная длина (<length>). Возможны также отрицательные значения.

Статья про значение длины (<length>) расскажет больше про возможные единицы измерения.

<percentage>

В процентном (<percentage>) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.

each-line Экспериментальная возможность (экспериментальное значение)

Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.

hanging Экспериментальная возможность (экспериментальное значение)

Отступ добавляется ко всем строкам, кроме первой.

Формальный синтаксис

text-indent = 
[ (en-US) <length-percentage> ] (en-US)  && (en-US)
hanging? (en-US)                 && (en-US)
each-line? (en-US)               
"><length-percentage> = 
<length>      | (en-US)
<percentage>

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p {
  text-indent: 5em;
  background: powderblue;
}

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

CSS

p {
  text-indent: 30%;
  background: plum;
}
Specification
CSS Text Module Level 3
# text-indent-property

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

Как сделать в HTML красную строку?

Категория: Сайтостроение, Опубликовано: 2018-06-11
Автор:

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

Навигация по статье:

  • Стилевое свойство в HTML для красной строки
  • Как задать красную строку для всего сайта?

Давайте рассмотрим с вами, как делается в HTML красная строка.

Стилевое свойство в HTML для красной строки

Итак, для расстановки красной строки при верстке станицы в HTML предусмотрено специальное свойство text-indent, которое задается внутри тега с указанием величины отступа с начала строки.

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

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

<p > Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел «&nbsp;» </p>

<p >

Использование этого CSS свойства для задания в HTML красной строки является наиболее правильным и удобным в использовании. Но кроме этого свойства, в зависимости от ситуации вы можете использовать для задания отступа первой строки неразрывный пробел «&nbsp;»

</p>

Вот как это выглядит:

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

Как задать красную строку для всего сайта?

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

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

Для задания красной строки в CSS мы можем воспользоваться таким же свойством text-indent, задав его для всего сайта в целом или для какого то определенного блока.

Например:

#content p{ text-indent: 20px; }

#content  p{

text-indent: 20px;

}

В данном случае все абзацы

находящиеся в блоке с идентификатором #content будут начинаться с красной строки.

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

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

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

До встречи в следующих статьях!

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

Свойство CSS text-decoration-color

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите красный цвет оформления текста:

p {
оформление текста: подчеркивание;
цвет оформления текста: красный;
}

Попробуйте сами »

Определение и использование

Свойство text-decoration-color определяет цвет оформления текста (подчеркивание, надчеркивание, зачеркивание).

Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.

Показать демо ❯

Значение по умолчанию: текущий цвет
Унаследовано: нет
Анимация: да. Читать о анимированном Попытайся
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationColor=»красный» Попытайся

Поддержка браузера

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Недвижимость
цвет текста-декорации 57,0 79,0 36,0
6,0 -мунц-		 12. 1
7.1 -вебкит-		 44,0

Синтаксис CSS

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

Значения свойств

Значение Описание Играй
цвет Задает цвет оформления текста Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебное пособие по CSS: Оформление текста CSS

Ссылка на HTML DOM: свойство textDecorationColor

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


Лучшие примеры0172 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Что означает красный перечеркнутый элемент в сетке свойств CSS?

Средства веб-разработки Microsoft

31 мая 2007 г. 0 0

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

 

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

 

1. Свойство переопределяется встроенным стилем

 

Вы увидите эту всплывающую подсказку, когда свойство CSS переопределяется встроенным стилем тега HTML. Рассмотрим пример:

 

 

<тип стиля = ”text/css”>

.MyStyle {цвет: #808000;}

…

 

 

 

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

Поскольку свойство цвета, установленное во встроенном стиле, имеет приоритет над классом, цвет в MyStyle будет перечеркнут красным. Вы увидите всплывающую подсказку:

 

 

2. Свойство переопределено правилом CSS

 

Вы увидите такую ​​всплывающую подсказку, когда свойство CSS переопределяется другим правилом CSS.

 

В следующем примере свойство «цвет» применяется к DIV, а также устанавливается для элемента управления HTML-кнопки в DIV через MyStyle.

 

 

<тип стиля = ”text/css”>

.MyStyle {цвет: #808000;}

…

 

 

 

Выберите свойство «цвет», перечеркнутое красным, в режиме сводки. Подсказка инструмента будет следующей:

 

 

3. Свойство переопределяется правилом, где оно отмечено !important

 

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

 

Скажем, у нас есть

 

<тип стиля = ”text/css”>

P{ цвет:Зеленый!важно }

…

 

Привет, мир!!

 

 

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

.

 

 

4. Имущество не передается по наследству

 

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

 

В приведенном ниже примере у нас есть кнопка внутри DIV. Обратите внимание, что свойство высоты здесь установлено в DIV.

 

 

 

 

 

 

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

.

 

 

5. Свойство не наследуется, но может отображаться в дочерних элементах, которые не устанавливают это свойство

 

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

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

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