Какой тут синтаксис (html и css)?

Question

Например, я пишу это в css файле:

body {background-image: url(image.jpg);}

Здесь я прописываю свойство для тега body, чтобы заполнить фон изображением. Но если я хочу эту же функцию без css файла, то в html файле я должен прописать следующее:

<body style = "background-image: url(image.jpg);">

Далее в учебнике стали рассказывать про селекторы псевдоэлементов, как, например:

p:first-letter {font-style: italic; color: #999}

Тут указывают для тега p свойства для первой буквы.

Вопрос заключается в следующем: какой синтаксис, если я хочу прописать это не в отдельном css файле, а так же, как здесь со свойством background-image – , то есть в html документе.

Answer 1

<style>p:first-letter {font-style: italic; color: #f00;}</style>
<p>Test</p>

Но лучше так не делать.

Answer 2

пожалуй только один псевдо-элемент можно прибить инлайном к какому либо тегу и это ::marker

впрочем, поизвращаться никто не запрещает...)))

<p style='
  /* я маркер */
  display: list-item;
  list-style: "* " inside;
  
  
  /* а я типа :first-line */
  background: linear-gradient(to bottom, red 0em, red 1em, black 1em, black);
  color: transparent;
  background-clip: text;
  '>
это текст с настоящим<br>
псевдо-элементом<br>
"::marker"<br>
заданным инлайном - в атрибуте "style"<br>
а вот ":first-line" тут все таки фальшивый<br>
и кроме цвета текста ничего не даёт...
</p>

<p style='
  background: linear-gradient(to right, red 0em, red 0.6em, black 0.6em, black); /*!!!!*/
  color: transparent;
  background-clip: text;
  font-size: 30px;
  /* "все буквы разные" говорили они... */
  font-family: monospace;
'>
а если повернуть градиент <i>to right</i><br>
то уже получим буквицу(::first-letter)<br>
правда она будет во всех строках тега...<br>
</p>

Answer 3

Согласно спецификации внутри атрибута style можно указывать только список из свойств со значениями, и at-rule.

Селекторы для псевдоэлементов не являются ни тем ни другим - поэтому и использовать их внутри inline стилей нельзя.

БЛОГ НА HUSL

Какой тут синтаксис (html и css)?

Ответы (3 шт):