Content свойство css – Правила и особенности использования свойства CSS content для введения контента в элемент

Leave a Comment / Css / By /

Содержание

CSS content | TuHub

Общие сведения

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

Содержимое добавляемое с помощью свойства content может быть строкой текста, символами, изображениями счётчиками (для стилизации списков) или цитатами. Также можно комбинировать несколько значений.

Обратите внимание, что свойство content должно находится среди других свойств псевдоэлементов ::before и ::after, иначе содержимое просто не будет добавлено на страницу. 

Синтаксис свойства

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

  • none — содержимое на страницу не добавляется. Псевдоэлемент не создаётся.
  • normal — вычисляется как none для псевдоэлементов ::before и ::after.
  • <string> — строка текста. Строка текста заключённая в кавычки. Смотрите тип данных <string> чтобы узнать полный список возможных значений.
  • <uri>
    — URI указывается с помощью функции url(). Он указывает на внешний ресурс, такой как изображение. Если ресурс или изображение не могут быть отображены, то браузер должен либо оставить всё так как будто оно вообще не было указано, либо показать предупреждение, что ресурс не может быть отображён.
  • <counter> — CSS счётчик. Счётчики могут быть указаны с помощью двух разных функций: counter() или counters().
  • open-quote | close-quote —  эти значения заменяются строкой указанной в свойстве quotes.
  • no-open-quote | no-close-quote — Перестаёт отображать quotes, но продолжает увеличивать (уменьшать) уровень вложенности кавычек. Смотрите quotes.
  • attr(X) — функция (аббревиатура от слова «attribute»), которая возвращает в качестве строки значение атрибута «X». Если у элемента нет атрибута «X», то вернётся пустая строка.

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

CSS Generated content for pseudo-elements

Примечание

Комбинирование значений

В свойстве content можно комбинировать разные варианты значений. В дальнейшем они объединятся в одно. Например, в приведённом ниже коде я получаю значение из кастомного data-атрибута и и добавляю после него точку с запятой.

li::before {
  content: attr(data-title) ";";
  color: red;
}

Пример

Ниже показаны различные варианты использования свойства content.

Свойство place-content | CSS справочник

CSS свойства

Определение и применение

CSS свойство place-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально) и вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси столбца и по оси строки grid-контейнера (является сокращенным свойством для свойств align-content и justify-content).

При работе с флекс элементами обратите внимание на то, что свойство place-content возможно применить только к многострочным флекс контейнерам (flex-wrap, или flex-flow со значениями wrap | wrap-reverse).

Если элемент не является флекс элементом, или элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным флекс, или grid-контейнером), то свойство place-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».

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

CSS синтаксис:

place-content: "align-content"; /* если второе значение отсутствует, то в этом случае первое значение используется для обоих */
place-content: "align-content justify-content";

align-content: "stretch | flex-start* | flex-end* | center | space-between | space-around | space-evenly | initial | inherit";
justify-content: "flex-start* | flex-end* | center | space-between | space-around | space-evenly | initial | inherit";
*- для элементов макета сетки допускается использование сокращенных значений start и end

JavaScript синтаксис:

object.style.placeContent = "center center"

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

ЗначениеОписание
align-contentОпределяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера. Возможные значения:
  • stretch — строки внутри контейнера равномерно растягиваются, заполняя свободное пространство (изменяет размер элементов сетки, или флекс элементов, чтобы элементы заполнили всю высоту контейнера). Это значение по умолчанию.
  • flex-start — строки внутри контейнера располагаются в начале поперечной оси флекс контейнера, или начального края сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start
  • flex-end — строки внутри контейнера располагаются в конце поперечной оси флекс контейнера, или по краю сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end.
  • center — строки внутри контейнера располагаются по его центру.
  • space-between — строки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
  • space-around — строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками:
  • space-evenly — размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

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

justify-content

Свойство justify-content | CSS справочник

CSS свойства

Определение и применение

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера.

Для того, чтобы определить как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера, вы можете воспользоваться свойством align-content.

Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство justify-content не окажет на такой элемент никакого эффекта.

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

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

CSS синтаксис:

/* флекс контейнер */
justify-content:"flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit";

/* grid-контейнер*/
justify-content:"start | end | center | space-between | space-around | space-evenly | initial | inherit";

JavaScript синтаксис:

object.style.justifyContent = "space-between"

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

ЗначениеОписание
flex-startЭлементы позиционируются в начале контейнера. Это значение по умолчанию.
Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start.
flex-endЭлементы позиционируются в конце контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end.
centerЭлементы позиционируются в центре контейнера.
space-betweenЭлементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера.
space-around

Элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего элемента равно половине между соседними элементами в контейнере:

space-evenly

Размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера:

initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства justify-content</title>
<style> 
.container {
    display: -webki

CSS свойство content | назначение, допустимые значения, примеры

Последнее обновление: 05.01.2011

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

Допустимые значения

  • none — контент не генерируется
  • normal — контент не генерируется
  • — текстовая строка
  • url — ссылка на вставляемый объект (например изображение)
  • — встроенный счетчик
  • attr(атрибут) — отобразит значение указанного атрибута элемента, к котрому применено свойство
  • open-quote — вставляет открывающую кавычку, тип которой устанавливается с помощью quotes
  • close-quote — вставляет закрывающую кавычку, тип которой устанавливается с помощью quotes
  • no-open-quotes — не вставляется открывающая кавычка, которая должна быть добавлена (например для тега q>)
  • no-close-quotes — не вставляется закрывающая кавычка, которая должна быть добавлена (например для тега q>)
  • inherit — наследует значение от родителя
Значение по умолчанию normal
Применимо к псевдоэлементам :before и:after
Наследование нет
Версия CSS CSS 2
Поддерживается браузерами
  • Internet Explorer 8
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

div:after {
content: "Строка после блока";
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— div { background: #3490fb; } div:after { content: «Строка после блока»; } —> </style> </head> <body> <div>блок, после которого должна быть добавлена строка</div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По теме:

Свойство align-content | CSS справочник

CSS свойства

Определение и применение

CSS свойство align-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера.

Для того, чтобы определить как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера, вы можете воспользоваться свойством justify-content.

При работе с флекс элементами обратите внимание на то, что свойство align-content возможно применить только к многострочным флекс контейнерам (flex-wrap, или flex-flow со значениями wrap | wrap-reverse).

Если элемент не является флекс элементом, или элементом сетки макета (не находится внутри родительского элемента, который является блочным, или строчным флекс, или grid-контейнером), то свойство align-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».

Схематичное отображение работы свойства align-content отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

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

CSS синтаксис:

/* flex-контейнеры */
align-content: "stretch | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit";

/* grid-контейнеры */
align-content: "stretch | start | end | center | space-between | space-around | space-evenly | initial | inherit";

JavaScript синтаксис:

object.style.alignContent = "space-between"

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

ЗначениеОписание
stretchСтроки внутри контейнера равномерно растягиваются, заполняя свободное пространство (изменяет размер элементов сетки, или флекс элементов, чтобы элементы заполнили всю высоту контейнера). Это значение по умолчанию.
flex-startСтроки внутри контейнера располагаются в начале поперечной оси флекс контейнера, или начального края сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения start, для флекс элементов необходимо использовать полное значение flex-start
flex-endСтроки внутри контейнера располагаются в конце поперечной оси флекс контейнера, или по краю сетки grid-контейнера. Для элементов сетки макета (grid-элементы) допускается использование сокращенного значения end, для флекс элементов необходимо использовать полное значение flex-end.
centerСтроки внутри контейнера располагаются по его центру.
space-betweenСтроки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
space-around

Строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками:

space-evenly

Размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера:

CSS свойство content | назначение, допустимые значения, примеры

Последнее обновление: 05.01.2011

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

Допустимые значения

  • none — контент не генерируется
  • normal — контент не генерируется
  • — текстовая строка
  • url — ссылка на вставляемый объект (например изображение)
  • — встроенный счетчик
  • attr(атрибут) — отобразит значение указанного атрибута элемента, к котрому применено свойство
  • open-quote — вставляет открывающую кавычку, тип которой устанавливается с помощью quotes
  • close-quote — вставляет закрывающую кавычку, тип которой устанавливается с помощью quotes
  • no-open-quotes — не вставляется открывающая кавычка, которая должна быть добавлена (например для тега q>)
  • no-close-quotes — не вставляется закрывающая кавычка, которая должна быть добавлена (например для тега q>)
  • inherit — наследует значение от родителя
Значение по умолчаниюnormal
Применимок псевдоэлементам :before и:after
Наследованиенет
Версия CSSCSS 2
Поддерживается браузерами
  • Internet Explorer 8
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

div:after {
content: "Строка после блока";
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— div { background: #3490fb; } div:after { content: «Строка после блока»; } —> </style> </head> <body> <div>блок, после которого должна быть добавлена строка</div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По теме:

content. Свойство для добавления символов с помощью CSS

CSS свойство content позволяет вставлять генерируемое содержание, отсутствующее первоначально в тексте, в web-страницу.

Это свойство применяется совместно с псевдоэлементами ::after и ::before, которые указывают где отображать новое содержимое — после или до элемента, к которому добавляются.

Краткая информация по CSS-свойству content

Значение по умолчаниюПустая строка
НаследуетсяНет
ПрименяетсяК псевдоэлементам
::after и ::before

Правила написания свойства content

content: <строка> | attr(<атрибут>) | open-quote
| close-quote | no-open-quote | normal | none
| no-close-quote | url | counter

<строка> — текст, который добавляется на web-страницу, при этом строка должна браться в двойные или одинарные кавычки. Для вставки спецсимволов допускается использовать юникод. Спецсимволы HTML, которые начинаются с амперсанда (например, &sect;), будут отображаться как есть, т. е. ввиде текста (&sect;, а не §).

attr(<атрибут>) — возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)} добавит после ссылки ее адрес, т. е. значение атрибута href. Если же указанного атрибута нет, то вернется пустая строка.

open-quote — вставляет открывающую кавычку, тип которой устанавливается с помощью CSS свойства quotes.

close-quote — вставляет закрывающую кавычку.

no-open-quotes — отменяет добавление открывающей кавычки.

no-close-quote — отменяет добавление закрывающей кавычки.

url — абсолютный или относительный адрес вставляемого объекта. Если же указанный файл браузер не может отобразить, то это значение игнорируется.

counter — выводит значение счетчика, заданного CSS свойством counter-reset.

none — не добавляет никакого содержимого.

normal — задается как none для ::after и ::before.

Объектная модель

Объект.style.content

Пример применения свойства content

Проиллюстрируем работу content. Давайте сделаем чтобы после ссылки были фигурные кавычки.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS свойство content</title>
   <style>
      a { color: #c75050; }
      a:after {	content:"»"; }
   </style>
<head>
<body>
<p>
   В тот же миг Алиса юркнула за ним следом, 
   не думая о том, как же она будет выбираться 
   обратно. <a href="">Читать</a>
</p>
</body>
</html>
Применение свойства content

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

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