Как вставить картинку css: Как добавить изображение на страницу — журнал «Доктайп»

Аналогично, имя класса inlinemediaobject предназначено для элемента span, содержащего встроенное изображение.

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

 .mediaobject img {
окантовка: синяя;
стиль границы: пунктир;
} 

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

Если вы примените стиль к медиаобъекту или встроенному медиаобъекту , он будет применяться ко всем изображениям с этим именем класса. Поэтому, если установлены настройки по умолчанию и ни одно из ваших изображений не имеет пользовательского имени класса, стиль mediaobject повлияет на все ваши блочные изображения и стиль 9.0011 inlinemediaobject повлияет на все ваши встроенные изображения.

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

Имена пользовательских классов для изображений — атрибут роли

Чтобы стилизовать отдельное изображение или, возможно, набор изображений, необходимо присвоить изображениям имя класса. Имя класса должно отличаться от общего медиаобъект или встроенный медиаобъект, который по умолчанию назначается всем изображениям. Когда имя класса указано, этот класс может быть отдельно в вашем CSS.

Один из способов дать изображению имя класса — использовать атрибут роли . Вы можете установить его в элементе mediaobject изображения, а затем установить его значение в качестве имени класса, который вы хотите использовать.

1. В Paligo откройте тему, содержащую изображение, которое вы хотите изменить после его публикации.

2. Выберите изображение, а затем в меню структуры элемента выберите элемент mediaobject . В меню выберите Перейти к элементу.

   Примечание

   Для встроенных изображений вместо этого используйте элемент inlinemediaobject .

3. В разделе Атрибуты элемента используйте поле Добавить атрибут, чтобы добавить атрибут роли . В качестве значения атрибута роли введите имя, которое вы хотите использовать в качестве имени класса. Используйте нижний регистр.

4. Выберите Сохранить.

5. Используйте редактор кода/текста для создания пользовательского файла таблицы стилей CSS (или отредактируйте существующий файл CSS, который вы используете для Paligo).

   Когда Paligo публикует ваш контент, роль добавляется в «контейнерный» медиаобъект

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

   .

    <дел>
       <дел>
            png">
       

   Если у вас есть встроенное изображение и вы добавляете роль с небольшой диаграммой значений, она будет отображаться в HTML следующим образом:

    <диапазон>
       
    

   Чтобы применить стиль к изображению, а не к контейнеру

   или , используйте селектор CSS для выбора изображения внутри контейнера, например:

    .mediaobject.diagram-большое изображение {
       окантовка: синяя;
       стиль границы: пунктир;
   } 

   или встроенное изображение:

    .inlinemediaobject.diagram-маленький img {
       окантовка: синяя;
       стиль границы: пунктир;
   } 

6. Загрузите файл CSS в макет HTML.

   Дополнительные сведения о загрузке CSS в HTML-макеты см. в разделе Брендирование выходных данных HTML с помощью CSS.

7. Опубликуйте свой контент, используя макет HTML, который содержит файл CSS со стилем изображения.

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

Пользовательские имена классов для изображений — тег таксономии

Чтобы стилизовать отдельное изображение или, возможно, набор изображений, вам необходимо присвоить изображениям имя класса. Имя класса должно отличаться от общего медиаобъекта или встроенного медиаобъекта, который по умолчанию назначается всем изображениям. Когда имя класса указано, этот класс может быть отдельно в вашем CSS.

Один из способов добавить имя класса для изображения — использовать теги таксономии:

1. Выберите «Макет», а затем отредактируйте макет HTML5, который вы собираетесь использовать для публикации. Кроме того, вы можете создать новый макет HTML5 и отредактировать его.

2. В настройках «Классы и атрибуты» установите для параметра «Выводные таксономии как имена классов» значение «Включить».

3. Выберите Сохранить.

4. Выберите Диспетчер таксономии в Диспетчере содержимого, чтобы открыть структуру.

5. Либо:

   • Найдите существующий тег таксономии и перетащите его на изображение в разделе «Мультимедиа» диспетчера содержимого.

   • Создайте таксономии и добавьте теги таксономии, перетащив их на изображение в разделе «Мультимедиа» диспетчера содержимого.

   Совет

   Может быть проще использовать плавающую панель содержимого при перетаскивании тегов таксономии на изображения. Чтобы отобразить плавающую панель содержимого, выберите меню параметров ( … ) для тега таксономий, а затем выберите Плавающая панель содержимого.

6. Опубликуйте свой контент, используя макет HTML, который вы редактировали на шаге 2.

7. Просмотрите опубликованные выходные данные в браузере. Используйте инструмент проверки браузера, чтобы найти изображение в HTML. Вы должны увидеть, что имя класса соответствует тегу таксономии.

8. Используйте редактор кода/текста для создания пользовательского файла таблицы стилей CSS (или отредактируйте существующий файл CSS, который вы используете для Paligo).

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

    <дел>
       <дел>
            jpg" alt="battery.jpg">