content в CSS


Содержание

content

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

Тип свойства

Применяется: к псевдоэлементам :before и :after.

Значения

Значением свойства content могут быть ключевые слова normal , none или inherit либо один или несколько разделенных пробелом параметров определяющих добавляемое содержимое.

  • Текст — текстовая строка заключенная в двойные или одинарные кавычки. В тексте можно использовать любые символы, в том числе и спецсимволы HTML, но только уже в «готовом» виде, а не кодовом.
  • url(‘адрес’) — абсолютный или относительный адрес вставляемого объекта, например изображения.
  • counter(параметры) — это функция, которая выводит начальное (свойство counter-reset) или текущее (свойство counter-increment) значение счетчика. У функции может быть один или два (разделенных запятой) параметра: имя счетчика и способ нумерации. Способ нумерации имеет те же значения, что и свойство list-style-type, например, counter(schetchik, upper-latin). Если способ нумерации не указан, то он имеет значение decimal .
  • attr(атрибут) — это функция, возвращающая строку, которая является значением атрибута тега указанного в селекторе (перед псевдоэлементом). Если такого атрибута нет, то вернется пустая строка. Например, abbr :after content: < attr(title); >добавит после аббревиатуры текст из «всплывающей» подсказки.
  • open-quote — вставляет открывающую кавычку, тип которой указывается свойством quotes.
  • close-quote — вставляет закрывающую кавычку, тип которой указывается в quotes.
  • no-open-quote — отменяет вставку открывающей кавычки в том месте, где она должна присутствовать.
  • no-close-quote — отменяет вставку закрывающей кавычки.
  • none — псевдоэлемент не добавляет содержимое.
  • normal — вычисляется как none , но для псевдоэлементов :before и :after .
  • inherit — наследует значение content от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: normal.

Синтаксис

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

Результат. Использование свойства CSS content в браузере Opera.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше До 9.0 9.0 и выше 2.0 3.0 и выше 9.2 9.6 и выше 3.1 и выше
Поддержка: Нет Да Частично Да Частично Да Частично Да Частично

Forefox 2.0 и Opera 9.2 не понимают значение none . Safari и Chrome до 9.0 не понимают значения управляющие кавычками.

CSS свойство content

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

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


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

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

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

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

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

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

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

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

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

Илон Маск рекомендует:  Что такое код asp abandon

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

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

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

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

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

content

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

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

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

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

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


Когда применяют content:“”; в css?

Кто-то может обьяснить когда применяют content:»»; в css ?

Именно в таком виде, с пустым местом между кавычками.

4 ответа 4

Если именно «с пустым местом между кавычками», то лично я использую для создания «элемента призрака», с помощью которого центрирую объект. Устанавливаю элемент призрак с высотой 100% внутри родительского элемента, а затем используем свойство vertical-align: middle для обоих внутренних элементов (центрируемый элемент и элемент призрак):

P.S. Это конечно лишнее, если вы используете таблицы, но для дивов — полезно

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

Предполагаю, что в случае, когда нужно отменить предыдущее значение. Например, когда для списка применено: li:after , а для отдельного элемента требуется отменить это правило. Другого объяснения на ум не приходит.

На htmlbook понятно написано

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389

Применение CSS attr и content для создания подсказки

Дата публикации: 2013-07-09

От автора: оказывается, я влюблен в content и attr CSS; я недавно писал о том, как можно в общем применять эти свойство и выражение, как выполнить в CSS счетчики и воспользоваться ими для локализации. Я хотел бы поделиться с вами несколькими методами применения выражения attr и свойства content для назначения стилей всплывающим подсказкам — тултипам.

Подсказка 1: Альтернатива атрибуту title

Атрибут title применим для отображения простых текстовых всплывающих подсказок, но менять стили «виртуальных» тултипов нельзя. Вместо того можно заместить эти подсказки, воспользовавшись атрибутом data-tooltip и небольшим количеством CSS:


Я избежал использования атрибута title, потому что не хочу отобразить ни «родной», ни пользовательский тултип. У этой стратегии имеются некоторые недостатки, о которых вам нужно знать. Вам придется хардкодить расположение всплывающей подсказки для того, чтобы у элемента с тултипом около края окна просмотра контент выходил за экран. В отдельных случаях, однако, так можно слегка оживить базовый тултип.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Подсказка 2: Обзор HTML

Я стану частенько просматривать страницу и искать не просто правильный текст и функциональность, но также убеждаться, что у элементов верные атрибуты; блестящий пример тому – обеспечение правильных ссылок HREF. Бороздить для этого исходный код надоедает, а проверка элементов занимает вечность, поэтому я применяю для отображения требуемой информации content и attr:

Время от времени я отображаю содержимое, установив основную непрозрачность на 30%, иногда просто показываю нужную мне информацию при проведении мышью. Я выполнил это решение в Mozilla Developer Network в режиме редактирования, отображая сводный текст SEO с всплывающей подсказкой сверху самого текста. Простое и блестящее решение.

Не могу поверить, что так долго пренебрегал использованием attr и content. Это – отличная штука, даже когда просто помогает при разработке. Кроме того, attr и content великолепно подходят для счетчиков и локализации; а вы для чего ими пользуетесь?

Автор: David Walsh

Редакция: Команда webformyself.

PROG-TIME

Уроки HTML+CSS

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

Илон Маск рекомендует:  Что такое код htmlentities

Свойство content добавляет содержимое. Чаще всего свойство content используется вместе с псевдоэлементами after и before .

Псевдоэлемент before позволяет добавить какой то контент во внутрь элемента в самое НАЧАЛО.

Добавляем текст в НАЧАЛО строки, через свойство content!

Псевдоэлемент after позволяет добавить какой то контент во внутрь элемента в самый КОНЕЦ.

Добавляем текст в КОНЕЦ строки, через свойство content!

Данный код не переписывает текст внутри элемента. Вот как это выглядит в коде.

content

normal Значение по умолчанию.
none Не добавляет содержимое. Используется если нужно удалить ранее добавленный контент с помощью данного свойства.
counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset. Для прямого увеличения счёта необходимо использовать свойство counter-increment.
attr() Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr( href);
” “ Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote Добавляет к содержимому открывающую кавычку.
close-quote Добавляет к содержимому закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote Удаляет закрывающую кавычку.
url() Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

С помощь этого свойства вы также можете добавлять иконки и спецсимволы.


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

Добавляем кавычки для текста с помощью свойства content

Вы можете добавить кавычки с помощью метода content , для этого нужно добавить данному свойству значение open-quote для открывающейся кавычки и close-quote – для закрывающейся.

Давайте рассмотрим пример…

Этот текст в кавычках

В таблице ниже представлены все виды кавычек которые вы можете использовать.

Описание Внешний вид Номер в Юникоде HTML-код/Мнемоника
Двойная кавычка \0022 «
Апостроф \0027
Открывающая одинарная кавычка \2020
Закрывающая одинарная кавычка \2020
Закрывающая двойная кавычка \201C
Правая двойная кавычка \201D
Открывающая левая кавычка «ёлочка» « \00AB «
Закрывающая правая кавычка «ёлочка» » \00BB »
Нижняя одинарная открывающая кавычка \201A
Верхняя одинарная обратная кавычка \201B
Нижняя двойная открывающая кавычка \201E
Двойная верхняя обратная кавычка \201F
Одинарная открывающая (левая) французская угловая кавычка \2039
Одинарная закрывающая (правая) французская угловая кавычка \203A

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

CSS контент для Garry’s mod

Доброго времени суток, сегодня распишем как убрать розовые ERROR текстуры в Garry’s Mod. Garry’s Mod представляет собой своеобразную песочницу где игрок может управлять объектами, поиграться с физикой, за реализацию игрового пространства отвечает движок Source. Изначально мод разрабатывался для всесторонней демонстрации мощных в свое время возможностей движка. В ноябре 2006 Garry’s Mod перестал быть отдельной модификацией и стал полноценной игрой, которая предлагается в Стиме.
Для работы и запуска Гаррис мода (от 10й до 13й версии включительно) необходимо было установить еще игру на движке «Сорс», «Counter-Strike: Source», «Portal» или «Half-Life 2». В 13й версии Garry’s Mod изначально включает в себя Half-Life 2.
При запуске «Гарика» игроки часто видят черно розовые текстуры, как их еще называют эмо текстуры.

Как установить CSS content для gmod:

  1. Скачать CSS контент по кнопке
  2. Распаковать файлы в архиве по пути: Steam/steamapps/common/garry’s mod/garrysmod
  3. Зайти в игру и проверить
  1. Скачать CSS контент по кнопке
  2. Распаковать файлы в архиве по пути: Steam/steamapps/common/garry’s mod/garrysmod/addons/css_content
  3. Зайти в игру и проверить

Локализация html-страницы средствами CSS

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

Илон Маск рекомендует:  Что такое код getfillsettings

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

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


Идея проста. Все верстальщики, работающие с CSS знают о таком свойстве как content:;, которое применяется к псевдоэлементам :after и :before. Чаще всего с помощью «волшебного» сочетания :after и content:; реализуют clear для «плавающих» блоков. Но вообще в content:; можно писать абсолютно любой текст. Без тегов, правда, но это разумное ограничение.

Как это можно использовать? Нужно создать два CSS-файла. Допустим, «en.css» и «ru.css». Основные стили блоков (цвета и прочие красивости) пусть определяются в файле «main.css».

Дальше нужно просто подключить файлы в таком порядке: main.css, en.css, ru.css. Ну, или сначала ru.css, а en.css — потом. В зависимости от того, какой язык является основным. В принципе, ничто не мешает CSS-свойства по умолчанию запихнуть в main.css, а подключать только файл языка, выбранного пользователем. Я разбил на два файла исключительно для наглядности.

+ Данный способ поддерживается всеми современными браузерами, включая IE восьмой и девятой версии, в том числе мобильными браузерами под iPhone и Android;

+ CSS-файл кешируется браузером, а это значит, что будучи скачанным однажды, он будет храниться у пользователя локально довольно долго (фактически пока с сервера не придет заголовок, сигнализирующий о необходимости обновить кеш);

+ Не нужно перегружать страницу, чтобы применить требуюемую локаль. Достаточно просто яваскриптом изменить href у тега

  • . Или создать новый тег
  • с нужным href.

    Минусы (их, к сожалению, больше):

    – ИЕ до восьмой версии не понимает свойство content:;, как и некоторые мобильные браузеры;

    – Поисковые движки вряд ли проиндексируют тексты, записанные таким образом;

    – Есть ряд ограничений к содержимого CSS-свойства content;

    – Чтобы упорядочить названия классов для плейсхолдеров при более-менее сложном лэйауте, придется делать их довольно длинными (даже если не использовать BEM-названия);

    – Невозможность сохранять длинные тексты с форматированием и изображениями.

    CSS свойство content

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

    CSS Свойство content

    Пример

    Следующий пример вставляет адрес URL в круглых скобках после каждой ссылки:

    a:after
    <
    content: » (» attr(href) «)»;
    >

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

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

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

    Значение по умолчанию: normal
    Наследуется: нет
    Версия: CSS2
    JavaScript синтаксис: объект.style.content=»url(beep.wav)»

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

    Свойство content поддерживается всеми основными браузерами.

    Замечание: IE8 поддерживает свойство content, только если указано объявление типа документа !DOCTYPE.

  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL