Content в css: content ⚡️ HTML и CSS с примерами кода

content — Справочник CSS

#10094; Назад CSS Справочник Далее #10095;

Пример

Значение атрибута href вставить в скобки после каждого элемента <a>:

a::after {
  content: » (» attr(href) «)»;
}

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

---

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

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

Значение по умолчанию:	normal
Унаследованный:	нет
Анимируемый:	нет. Прочитать о animatable
Версия:	CSS2
JavaScript синтаксис:	Вы не можете дать элементу псевдо-класс с помощью JavaScript, но есть и другие способы получить тот же результат: Попробовать

---

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

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

Свойство
content	1.0	8.0	1.0	1.0	4.0

---

---

CSS Синтаксис

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

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

Значение	Описание	Пример
normal	Значение по умолчанию. Устанавливает содержимое, если оно указано, в нормальное состояние, которое по умолчанию равно «none» (то есть ничего)	Попробовать »
none	Устанавливает содержимое, если не указано, ничего	Попробовать »
counter	Устанавливает содержимое в качестве счетчика	Попробовать »
attr(attribute)	Устанавливает содержимое в качестве одного из атрибутов селектора	Попробовать »
string	Устанавливает содержание текст, который вы укажите	Попробовать »
open-quote	Устанавливает содержимое для открывающей кавычки	Попробовать »
close-quote	Устанавливает содержимое в качестве заключительной цитаты	Попробовать »
no-open-quote	Удаляет начальную цитату из содержимого, если она указана	Попробовать »
no-close-quote	Удаляет заключительную цитату из содержимого, если она указана	Попробовать »
url(url)	Устанавливает содержимое должны быть каким-то носителем информации (изображение, звук, видео и т. д.)	Попробовать »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитать о initial
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit	Попробовать »

---

Примеры

Пример

Как добавить цвета пули для <ul> или <ol>, удалив их пули по умолчанию и добавив HTML-объект, который выглядит как пули (&bull;):

ul {
  list-style: none; /* Удаление HTML-пуль */
  padding: 0;
  margin: 0;
}

li {
  padding-left: 16px;
}

li::before {
  content: «•»; /* Вставка содержимого, которое выглядит как пули */
  padding-right: 8px;
  color: blue; /* Или цвет, который вы предпочитаете */
}

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

---

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

CSS Справочник: Псевдо элемент ::before

CSS Справочник: Псевдо элемент ::after

#10094; Назад CSS Справочник Далее #10095;

css властивість content

• Головна
• css
• властивості
• content

---

Властивість content дозволяє внести зміни в згенерований текст веб-сторінки, після її завантаження.

Застосовується спільно з псевдоелементами

:"after і ::before, вони відповідно додають новий вміст спереду або вкінці вмісту елемента.

Властивість content може бути корисною для того, щоб наприклад, створювати нумеровані заголовки, замінювати елементи зображеннями чи мультимедійним вмістом або вставляти перед розділом відповідного елемента слова «Глава», «Приклад», «Рисунок» тощо. Замість того, щоб додати цей вміст до самого HTML-документа, ви можете використовувати CSS для автоматичного його створення.

Ви можете використовувати попередньо визначений вміст (наприклад, відкриваючі лапки), рядок, зовнішній ресурс (такий як зображення), лічильник або значення атрибута.

Нотатка:

IE8 підтримує властивість тільки якщо вказаний !DOCTYPE.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

 content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Властивість content може отримувати 12 значень:

normal

Значення без задання. Задається як none для псевдоелементів :before і :after

none

Не додає ніякого вмісту

counter

Виводить значення лічильника, заданого властивістю counter-reset

attr (атрибут)

Повертає рядок, який є значенням атрибута тега зазначеного в дужках. Наприклад, a:after {content: attr (href)} додасть в кінці назви посилання її адресу, тобто, значення атрибута href. Якщо зазначеного атрибута немає, то повернеться порожній рядок.

string

Текст, який додається на веб-сторінку, рядок при цьому повинен братися в подвійні або одинарні лапки. Допускається використовувати юнікод для вставки спецсимволов. Спецсимволи HTML які починаються з амперсанда (§ наприклад), будуть відображатися як є, тобто, простим текстом (§, а не §)

open-quote

Вставляє відкриваючі лапки, тип яких встановлюється за допомогою CSS властивості quotes

close-quote

Вставляє закриваючі лапки, тип яких встановлюється за допомогою CSS властивості quotes

no-open-quote

Скасовує додавання відкриваючих лапок

no-close-quote

Скасовує додавання закриваючих лапок

url

Абсолютний або відносна адреса файлу (зображення, звук, відео тощо).

Якщо вказаний файл браузер не може відобразити, значення ігнорується.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:	normal
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	За допомогою Javascript не можна задати псевдоклас конкретному елементу, але існують інші способи домогтися потрібного результату.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Переглядач
content	1. 0	8.0	1.0	1.0	4.0	12.0

Переглядач
content	1.0	1.0	1.0

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

Різні значення у дії

Приклад використання
 Вставляє URL в дужках після кожного посилання
a:after { 


  content: " (" attr(href) ")"; 


}
Додавання кольору маркерів для
 чи
 шляхом видалення їх маркерів без задання і додавання HTML-об’єкта, який виглядає як маркер (&bull)

ul { 


  list-style: none; /* Remove list bullets */ 


  padding: 0; 


  margin: 0; 


} 





li { 


  padding-left: 16px; 


} 





li:before { 


  content: "•"; /* Insert content that looks like bullets */ 


  padding-right: 8px; 


  color: blue; /* Or a color you prefer */ 


}
  
Додаткові посилання
box-sizing
cursor
outline-color
resize
outline
nav-down
nav-index
nav-left
nav-right
nav-up
outline-offset
outline-style
text-overflow
outline-width
 Свойство содержимого CSS 
 ❮ Пред. Следующий ❯
 Свойство content используется с псевдоэлементами ::before и ::after для создания содержимого внутри элемента, иначе содержимое не будет сгенерировано и вставлено. Контент всегда должен быть добавлен. Свойство имеет следующие значения:
 нормальный
 нет
 счетчик
 аттр
 строка
 открытая цитата
 закрытая цитата
 без открытой кавычки
 без кавычек
 адрес
 Объекты, которые вставляются с помощью свойства content, являются анонимными заменяемыми элементами.
 содержимое: нормальное | нет | счетчик | атрибут | строка | открытая цитата | закрыть цитату | закрытая цитата | закрытая цитата | URL-адрес | начальная | наследовать; 
 
 Пример свойства содержимого: 
 

  <голова>
    
    <стиль>
      р :: до {
        содержание: "Имя -";
      }
      . страна::до {
        содержание: обычное;
      }
    
  
  <тело>
     
Пример свойства содержания
 
    
Меня зовут Джон
    
Я живу в Канаде
  
 
 Попробуй сам »
 Результат 
 Пример свойства содержимого со строковым значением: 
 

  <голова>
    
    <стиль>
      ли: до {
        content: "Элемент списка";
      }
      р: после {
        content: "со строковым значением.";
      }
    
  
  <тело>
     
Пример свойства содержания
 
    <ул>
      
1
      
2
      
3
    
    
Вот какой-то абзац
  
 
 Попробуй сам »
 В следующем примере вы можете видеть, что «open-quote» не может появиться без «close-quote».
 Пример свойства содержимого со значением «open-quote»: 
 

  <голова>
    
    <стиль>
      р :: до {
        содержание: открытая цитата;
      }
      р :: после {
        содержание: закрытая цитата;
      }
    
  
  <тело>
     
Пример свойства содержания
 
    
Здравствуйте, меня зовут Джон
    
Я из Канады
  
 
 Попробуй сам »
 Пример свойства содержимого со значениями «open-quote» и «no-close-quote»: 
 

  <голова>
    
    <стиль>
      р :: до {
        содержание: открытая цитата;
      }
      р :: после {
        содержание: без кавычек;
      }
    
  
  <тело>
    
Пример со свойством содержания
  
 
 Попробуй сам »
 
 Компонент CSS с возможностью прокрутки для областей содержимого приложения Ionic 
 shadow
 Компонент содержимого предоставляет простую в использовании область содержимого с некоторыми полезными методами
для управления прокручиваемой областью. Должен быть только один контент в одном
Посмотреть.
 Контент, наряду со многими другими компонентами Ionic, можно настроить, чтобы изменить его отступы, поля и многое другое, используя глобальные стили, предоставленные в утилитах CSS, или путем индивидуального стиля с помощью CSS и доступных пользовательских свойств CSS.
 Содержимое может быть единственным компонентом верхнего уровня на странице или может использоваться вместе с верхним, нижним колонтитулом или и тем, и другим. При использовании с верхним или нижним колонтитулом он изменит свой размер, чтобы заполнить оставшуюся высоту.
 Полноэкранное содержимое 
 По умолчанию содержимое заполняет пространство между верхним и нижним колонтитулами, но не выходит за них. В некоторых случаях может потребоваться, чтобы содержимое прокручивалось за верхним и нижним колонтитулами, например, когда для одного из них установлено свойство  полупрозрачный  или  непрозрачность  устанавливается на панели инструментов. Этого можно добиться, установив для свойства  fullscreen  содержимого значение  true  .
 Фиксированное содержимое​ 
 Чтобы разместить элементы за пределами прокручиваемой области, назначьте их фиксированному слоту  . Это абсолютно поместит элемент в левый верхний угол содержимого. Чтобы изменить положение элемента, его можно стилизовать, используя свойства CSS сверху, справа, снизу и слева.
 Content предоставляет методы, которые можно вызывать для прокрутки содержимого вниз, вверх или в определенную точку. Их можно пройти  продолжительность  для плавного перехода вместо мгновенного изменения положения.
 События прокрутки по умолчанию отключены для контента из-за производительности. Однако их можно включить, установив для  scrollEvents  значение  true . Это необходимо перед прослушиванием любого из событий прокрутки.
 Цвета 
 Теневые части CSS 
 Пользовательские свойства CSS 
 ScrollBaseDetail 
 interface ScrollBaseDetail { 
 isScrolling: boolean; 
 } 
 
 ScrollDetail​ 
 interface ScrollDetail extends GestureDetail, ScrollBaseDetail { 
 scrollTop: число; 
 scrollLeft: число; 
 } 
 
 ScrollBaseCustomEvent​ 
 Хотя этот интерфейс не является обязательным, его можно использовать вместо интерфейса  CustomEvent  для более строгой типизации событий  ionScrollStart  и  ionScrollEnd .
 интерфейс ScrollBaseCustomEvent extends CustomEvent { 
 деталь: ScrollBaseDetail; 
 цель: HTMLIonContentElement; 
 } 
 
 ScrollCustomEvent​ 
 Хотя этот интерфейс не является обязательным, его можно использовать вместо интерфейса  CustomEvent  для более надежного ввода в событии  ionScroll .
 интерфейс ScrollCustomEvent extends ScrollBaseCustomEvent { 
 Detail: ScrollDetail; 
 } 
 
 цвет​ 
  Описание 
 Цвет из цветовой палитры вашего приложения. Варианты по умолчанию:  "Первичный" ,  "вторичный" ,  "Третичный" ,  "Успех" ,  "ПРЕДУПРЕЖДЕНИЕ" ,  "Опасность" ,  "Свет , " ,  ", "  и . "темный"  . Дополнительные сведения о цветах см. в теме.
  Атрибут 
  Color 
  Тип 
  "DANGE «третичный» ｜ «предупреждение» ｜ строка и запись <никогда, никогда> ｜ не определено 
  Default 
  undefined 
 forceOverscroll​ 
  Description 
 If  true  and the content does not cause an overflow scroll, the scroll interaction will cause a подпрыгивать. Если содержимое превышает границы ionContent, ничего не изменится. Обратите внимание, что не отключает отказ системы на iOS. Это настройка уровня ОС.
  Attribute 
  force-overscroll 
  Type 
  boolean ｜ undefined 
  Default 
  undefined 
 fullscreen​ 
  Описание 
 Если  true  , содержимое будет прокручиваться за верхние и нижние колонтитулы. Этот эффект легко увидеть, сделав панель инструментов прозрачной.
  Attribute 
  fullscreen 
  Type 
  boolean 
  Default 
  false 
 scrollEvents​ 
  Description 
 Из соображений производительности события ionScroll отключены по умолчанию, чтобы включить их и начать прослушивание с (ionScroll), установите для этого свойства значение  правда  .
  Attribute 
  scroll-events 
  Type 
  boolean 
  Default 
  false 
 scrollX​ 
  Описание 
 Если вы хотите включить прокрутку содержимого по оси X, установите для этого свойства значение  true  .
  Attribute 
  scroll-x 
  Type 
  boolean 
  Default 
  false 
 scrollY​ 
  Description 
 Если вы хотите отключить прокрутку содержимого по оси Y, установите для этого свойства значение  false  .
  Атрибут 
  scroll-y 
  Type 
  boolean 
  Default 
  true 
 Name
 Description
  ionScroll 
 Выдается при прокрутке. Это событие отключено по умолчанию. Установите  scrollEvents  на  true , чтобы включить.
  ionScrollEnd 
 Выдается, когда прокрутка закончилась. Это событие отключено по умолчанию. Установите  scrollEvents  на  true , чтобы включить.
  ionScrollStart 
 Выдается при запуске прокрутки. Это событие отключено по умолчанию. Установите  scrollEvents  на  true , чтобы включить.
 getScrollElement​ 
  Описание 
 Получить элемент, в котором происходит реальная прокрутка. Этот элемент можно использовать для подписки на события  scroll  или вручную изменить  scrollTop  . Однако рекомендуется использовать API, предоставляемый  ion-content  :
, т. е. использовать  ionScroll ,  ionScrollStart ,  ionScrollEnd  для прокрутки событий и  scrollToPoint()  для прокрутки содержимого до определенной точки.
  Подпись 
  getScrollElement() => Promise 
 scrollByPoint 
 90.55/Y
  Прокрутить указанный компонент X на расстояние
  Signature 
  ScrollBypoint (x: номер, y: число, продолжительность: число) => Обещание  
291515157915159151591515915151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515157333333333333333333333333333333333333D0155 Описание 
 Прокрутите до конца компонента.  Signature   scrollToBottom(duration?: number) => Promise 
 scrollToPoint​ 
  Description 
 Scroll to a specified X/Y location in компонент.
  Подпись 
  scrollToPoint(x: число ｜ undefined ｜ null, y: число ｜ undefined ｜ null, duration?: число) => Promise 
 scrollToTop​ 
  Описание 
 Прокрутите до верхней части компонента.
  Signature 
  scrollToTop(duration?: number) => Promise 
 Name
 Description
  background 
 The background of содержание.
  scroll 
 Прокручиваемый контейнер содержимого.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт