Может ли вторая из двух последовательно вызванных таблиц стилей переопределить все стили, определенные в первой?

Question

Если у меня есть HTML-страница, которая ссылается на две таблицы стилей, которые вызываются следующим образом:

<link rel="stylesheet" href="original.css" media="screen, projection" />
<link rel="stylesheet" href="override.css" media="screen, projection" />

Если эти два файла определяют одинаковые имена стилей, верно ли, что original.css не будет иметь никакого отношения к исходу стилизованной страницы и что все стили будут исходить из стилей, определенных в override.css?

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

Answer 1

Да, конечно. Это немного каскадных таблиц стилей.

Я должен спросить, почему вы не можете просто удалить original.css, или не выводить его, или .... что-то? Это похоже на очень большой подход Big Hammer, чтобы полностью переопределить все в оригинале :-) Если вы действительно выводите original.css и override.css, браузер должен будет выполнить гораздо больше работы, чем если бы вы просто выводили override.css.

Answer 2

Да, это будет работать. Вы правы, что это не очень желательно, хотя. Вместо того чтобы «не трогать» исходные строки кода, не могли бы вы вставить вокруг него теги комментариев?

Answer 3

Прекрасным примером этой потребности является Sharepoint. Редактирование любой темы предоставит вам целый ряд изменений, которые необходимо переопределить в классе core.css.

Answer 4

Он будет перезаписывать все, что перезаписано, но будет дополнять все, не то же самое, а различную прикладную информацию для класса, идентификатора или псевдоселекторов или чего-либо еще. Я имею в виду, IE:

original.css -

p { margin: 4px 6px 10px 12px; }
h1 { font-size: 2.2em }

override.css -

p { padding: 6px; color: #666666; }
h1 { font-size: 1.5em }

То, что я сказал, это то, что P дополняется в override.css, потому что стили не противоречат друг другу. С другой стороны, пример H1 действительно перезаписан, и два правила в каждой таблице стилей противоречивы, поэтому побеждает последнее объявление.

Это не так плохо, как можно подумать ... Я только что закончил пару месяцев назад сайт в Moodle, который представляет собой сумасшедший домик стилей и данных, и тому подобное. Шаблон использовал данные таблицы стилей из шаблона DEFAULT, затем из шаблона PAGE, а затем из COURSE. Когда я попытался понять, какой стиль сделал то, на что я был так расстроен из-за того, что не нашел нужную часть кода, которую можно изменить для своего собственного ... Я наконец решил присоединить свою собственную таблицу стилей с новыми перезаписанными стилями и новыми дополненными. это заставило меня сэкономить около двух недель, копаясь в конструкторе, о котором никогда не мечтали.

Надеюсь, это поможет вам получить более ясную идею.

Bye.