Установка атрибутов HTML-тегов из CSS

Question

Возможно, я что-то упустил, но обнаружил, что не могу установить определенные атрибуты тегов html из кода CSS.

Пример:

div { draggable: true; }
img { target: "_blank"; }

Я все еще могу:

[draggable=true] { bla: bla; }

Так что это было не просто забыто.

Может быть, это работает в некоторых браузерах, я не знаю об этом, но я не нашел ничего об этом в документации, поэтому я предположил бы - если это будет работать - что это не безопасно делать.

Я не понимаю, почему?

Вы можете установить фон, что угодно, почему некоторые атрибуты не устанавливаются из css? Это какой-то особый класс атрибутов, или кто-то просто посчитал их недостойными cssyffication?

Есть какое-то правило, которое управляет им, или это так, с ним справляются, или я как-то пропустил тривиальный ответ в Google-Run?

Answer 1

HTML обозначает язык разметки гипертекста. HTML используется для создания структуры или веб-сайта, как структура здания. Затем CSS (Cascading Style Sheet) используется для дизайна и «рисования» сайта.

HTML - это язык на основе тегов, в котором есть теги от h1 до h6, p, form, a, pre, img, ul, hr, br. Эти теги имеют атрибуты: form имеет input, a имеет href, img имеет src и т. Д. CSS использует элементы HTML для стилизации сайта.

Answer 2

Чтобы определить, пишете ли вы действующие правила CSS с учетом атрибутов, вы можете найти список атрибутов HTML здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Технически, вы никогда не устанавливаете атрибут HTML с помощью CSS. Атрибуты HTML используются для настройки аспектов функциональности элемента, а не стиля (хотя некоторые стилистические пересечения обсуждаются позже). Атрибуты устанавливаются внутри или через JavaScript и могут использоваться как селекторы в CSS для стилей элементов, но их значения никогда не изменяются и не затрагиваются CSS.

Разница в том, что в CSS вы объявляете значение свойства стиля , а не функциональность элемента . Фактически, style глобальный атрибут HTML-элементов, который принимает значение встроенных правил и функций CSS, применяя эти стили. Даже с псевдоклассами, такими как input:checked { color: red; }, CSS не вызывает проверку элемента ввода. Скорее, он добавляет красное значение свойства color к любому входному элементу, который проверяется (например, явно с атрибутом в html: <input checked />.

Аналогично, в вашем примере [draggable=true]{ property: value; } вы не изменяете функциональность любого элемента на draggable. Вместо этого вы выбираете любой элемент с определенным атрибутом draggable и добавляете в него свойства стиля через объявление CSS.

В то время как в вашем примере div { draggable: true; } вы пытаетесь установить для div s истинный стиль перетаскивания, который не работает, поскольку draggable не является свойством стиля.

Существуют некоторые устаревшие атрибуты, чьи функциональные возможности влияют на стиль и выглядят так же, как свойства CSS (т.е. width, height, color). Это те, которые могут вызвать путаницу между свойствами стиля и атрибутами элемента, поскольку они размывают линию.

Answer 3

CSS обозначает каскадные таблицы стилей и используется для стилизации элементов HTML. Элементы HTML могут иметь ряд различных атрибутов, таких как «id», «class», «name», «target», «src» и «style», и это лишь некоторые из них. Стиль является атрибутом элемента html, а некоторые атрибуты, такие как «цель», служат для другой цели. Вы не устанавливаете их с помощью css, потому что они не являются стилями или не имеют свойств стиля. Вы можете установить другие атрибуты с помощью JavaScript.