Расширение существующего HTML-тега с помощью классов, пользовательского тега, другого метода?

ProgramBox

Расширение существующего HTML-тега с помощью классов, пользовательского тега, другого метода?

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Редактировать: Да, я знаю, что то, что я пытаюсь сделать, является запутанным и ненужным. Я предположил, что мне не хватает какой-то фундаментальной или базовой HTML-вещи, которая могла бы помочь мне в этом, я просто недостаточно знаю о HTML / CSS, чтобы знать, что я ищу.

Я относительно новичок в использовании HTML (я родом из количественного опыта, где я почти исключительно использовал R и Python). Я, вероятно, сказал одну или несколько бессмысленных или совершенно неправильных вещей, поэтому, пожалуйста, потерпите меня (и, пожалуйста, укажите все, что я неверно истолковал или понял совершенно неправильно, чтобы я мог лучше понять!)

Мне нравится использовать <details> тег. Я также нашел это полезным для создания небольших сносок. Однако я бы предпочел не указывать конкретные характеристики стиля каждый раз, когда я использую его для сносок, и я не хочу указывать эти характеристики по умолчанию <style> , поскольку я использую <details> и другие способы.

Итак, я подумал создать пользовательский HTML-тег, который в основном прост <details> , но с особыми характеристиками, которые я хочу специально для использования в стиле сноски. В идеале (на данный момент) я хотел бы сделать это в самом HTML-файле, а не в отдельном DOM. Я прочитал кучу ссылок на создание пользовательских тегов / элементов, но мне чего-то не хватает, чтобы закончить это. Кажется, все они говорят, что вы можете объявить новый элемент в HTML-файле следующим образом:

 <x-foo></x-foo>

Но что находится между тегами для объявления / определения x-foo?

Моя цель — объявить пользовательский <details-foot></details-foot> , соответствующий следующей таблице стилей:

 <style> 
    details {
        margin-bottom: 5px
    }

    details > summary {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 20px;
      font-size: 6pt
    }
    
    details > p {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0px;
      margin-left: 20px;
      margin-bottom: 0px;
      font-size: 6pt
    }
</style>

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

Приветствия, Мэтт

1. Нет смысла создавать новый тег для HTML. Вы можете выбирать стили по атрибутам, таким как классы или идентификаторы. Для этого существует множество или бесконечное количество режимов. Пожалуйста, уделите больше внимания изучению css и html, есть много документации. Конечно, вы можете это сделать, но если вы не улучшите его, не изобретайте заново: ваш способ сложен и является пустой тратой времени, более быстрый и простой в освоении

2. Правильно, так что я искал что-то вроде классов или идентификаторов. Я полагал, что мой метод был запутанным, но я также достаточно неопытен в HTML / CSS, чтобы знать, что было основным, чего мне не хватало.

Ответ №1:

Вы можете настроить пользовательский класс для использования для определенных типов форматирования в одном документе.

Дополнительная информация здесь

По сути, вы бы хотели, чтобы у вас было

 <details class="foobar">
<summary></summary></details>

И в ваших <style> тегах заголовка (или, в идеале, в отдельном файле css) у вас будет:

 .foobar {
[your styling here]
}

Это создало бы новый тип стиля деталей.