Каскадный порядок css

ProgramBox

Каскадный порядок css

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

#html #css

#HTML #css

Вопрос:

 <!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

Привет, у меня вопрос о том, почему <style> переопределение <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> . для порядка, является ли встроенный элемент более высоким порядком, чем уровень документа??

Ответ №1:

Смотрите спецификацию CSS2:

Пользователь может выбрать учет атрибутов представления в исходном документе HTML. Если это так, эти атрибуты преобразуются в соответствующие правила CSS со спецификацией, равной 0, и обрабатываются так, как если бы они были вставлены в начале таблицы стилей автора. Поэтому они могут быть переопределены последующими правилами таблицы стилей. На переходном этапе эта политика упростит сосуществование стилистических атрибутов с таблицами стилей.

1. извините, все еще не совсем понимаю, не могли бы вы немного объяснить?

2. Это в основном означает (я думаю), что все остальные правила CSS перезаписывают эти атрибуты представления

3. Обратите внимание, что, как отмечено в довольно навязчивом баннере на этой странице, большая часть спецификации CSS2 заменена отдельными модулями; в этом случае соответствующий раздел теперь находится в спецификации каскадирования и наследования CSS .

Ответ №2:

Атрибуты HTML width и height предшествующий CSS намного менее гибкие, поэтому создателям CSS нужно было решить, что произойдет, если документ будет включать как эти старые атрибуты, так и новые правила CSS, влияющие на одни и те же элементы.

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

Для более формального ответа мы можем посмотреть текущую спецификацию, определяющую каскадирование и приоритет правил CSS: каскадирование CSS и уровень наследования 3, который включает раздел 6.4: Приоритет презентационных подсказок, отличных от CSS:

Пользователь может выбрать, чтобы учитывать презентационные подсказки в разметке исходного документа, например bgcolor , атрибут или s элемент в [HTML]. Все стили на основе языка документа должны быть переведены в соответствующие правила CSS и либо входить в каскад как правила происхождения UA, либо обрабатываться как правила происхождения автора с нулевой спецификацией, помещенной в начало таблицы стилей автора.

Термины «Правила происхождения UA» и «правила происхождения автора» определены в другом месте документа; правилами в вашем <style> теге будут «правила происхождения автора», тогда как «Правила происхождения UA» встроены в браузер («Пользовательский агент» на жаргоне спецификаций)и всегда имеют более низкий приоритет.

Термин «специфичность» фактически определен в отдельной спецификации, но в двух словах правило like img.some-class {} имеет более высокую специфичность, чем правило like img {} .

Итак, соберите все это вместе, и ваши width height атрибуты and будут определены как либо:

Эквивалентно «правилам UA-origin», которые всегда имеют более низкий приоритет, чем правила, определенные в <style> теге.
Эквивалентно правилам «автор-источник», подобным правилам в вашем <style> теге, но с минимально возможной специфичностью. Это означает, что они будут переопределены любым другим правилом сопоставления, кроме других правил минимальной специфичности, таких как * { width: 100%; }

Ответ №3:

Ширина и высота строки не связаны со стилем, это больше похоже на атрибут. Чтобы не запутаться в отладке и конфликтах, было принято решение в пользу более централизованной и лучше управляемой системы — CSS. Почему? Поскольку он больше связан с концепцией разработчиков Model-View-Controller, и хотя связь не является прямой, он в основном побуждает вас управлять стилем вашего сайта с помощью CSS как лучше управляемого и более централизованного, чем встроенные атрибуты.