CSS очистка стиля
Салют. Не захотел постить в HTML, там совсем глухо.
Есть такая проблема:
Встраиваю модуль в чужой контент.
У сайта жуткие стили на 36кб, которые переписывают и заставляют наследовать стили элементы, которые я подгружаю в чужой контент.
При этом к встраиваемым элементам прописаны явно свои стили (которые указаны выше в коде).
Оно ВООБЩЕ всё перерисовывает.
Грёбаные верстальщики Джумлы...
Вопрос: существует ли способ заставить элементы не наследовать чужие стили или сбросить их на стили по умолчанию, каким нибудь style="none" или еще что...
Важно: я не говорю о сбросе дефолтовых настроек браузера, а именно чтобы отменить наследование стилей или сбросить применение предыдущего стиля...
даже если я укажу в стиле к ссылке:
[HTML]<style> joomla style sometag a:link { color:#000000; }</style>
<body>
bla-bla-bla
<style type="text/css">
.my_link a:link {color:#FFFFFF;}
</style>
<a href="www" class="my_link">LINK</a>[/HTML]
То на выходе ссылка будет черная, а не белая!!
И так происходит не только со ссылками, а и с таблицами, которым, например вообще не прописан стиль, установлен border='0' или прописан свой стиль жёстко в style="param:val;"
Есть такая проблема:
Встраиваю модуль в чужой контент.
У сайта жуткие стили на 36кб, которые переписывают и заставляют наследовать стили элементы, которые я подгружаю в чужой контент.
При этом к встраиваемым элементам прописаны явно свои стили (которые указаны выше в коде).
Оно ВООБЩЕ всё перерисовывает.
Грёбаные верстальщики Джумлы...
Вопрос: существует ли способ заставить элементы не наследовать чужие стили или сбросить их на стили по умолчанию, каким нибудь style="none" или еще что...
Важно: я не говорю о сбросе дефолтовых настроек браузера, а именно чтобы отменить наследование стилей или сбросить применение предыдущего стиля...
даже если я укажу в стиле к ссылке:
[HTML]<style> joomla style sometag a:link { color:#000000; }</style>
<body>
bla-bla-bla
<style type="text/css">
.my_link a:link {color:#FFFFFF;}
</style>
<a href="www" class="my_link">LINK</a>[/HTML]
То на выходе ссылка будет черная, а не белая!!
И так происходит не только со ссылками, а и с таблицами, которым, например вообще не прописан стиль, установлен border='0' или прописан свой стиль жёстко в style="param:val;"
Писать надо правильно и все будет работать
Код:
a.my_link:link {color:#FFFFFF;}
амсь.. а в то что ты в качестве примера зпостил, от балды написано?
ибо там ошипка.
а вобще почитай про приоритеты селекотров. и составляй правила так, чтобы они переопределяли.
А сбросить вряд ли получится.
ибо там ошипка.
Код:
a.my_link:link {}
а вобще почитай про приоритеты селекотров. и составляй правила так, чтобы они переопределяли.
А сбросить вряд ли получится.
Цитата: Lone Wolf
амсь.. а в то что ты в качестве примера зпостил, от балды написано?
ибо там ошипка.
а вобще почитай про приоритеты селекотров. и составляй правила так, чтобы они переопределяли.
ибо там ошипка.
а вобще почитай про приоритеты селекотров. и составляй правила так, чтобы они переопределяли.
Да... от балды... Но суть примерно такая же...
Спасибо про ключевой запрос "приоритеты селекторов"... если это не связано с !important (что кстати, помогает избавиться от проблемы к данному конкретному элементу, хотя названия стилей не совпадают) пошел гуглить...
То есть вы заведомо создаете вопрос с ошибкой и мы тут такие телепаты должны догадаться, что на самом деле у вас ошибки нет в коде, а просто проблема в чем-то другом? Так что ли?
Цитата: RussianSpy
То есть вы заведомо создаете вопрос с ошибкой и мы тут такие телепаты должны догадаться, что на самом деле у вас ошибки нет в коде, а просто проблема в чем-то другом? Так что ли?
Тебя я вообще не просил как-либо комментировать и высказывать твоё никому ненужное мнение в топике, который тебя чем-то не устраивает.
2All в первом посте всё указано схематично, а не "в оригинале"...
Суть вопроса топика: "Можно ли сбросить параметры стиля для конкретного элемента?"
Пример:
[HTML]<head>
...
<style type="text/css">
table {
...block1...
}
</style>
...
</head>
<body>
...
<style type="text/css">
.tbl_class {
...block2...
}
</style>
<table border="0" class="tbl_class">
</table>[/HTML]
В стиле клиента для всех элементов задан стиль с параметрами block1.
При подгрузке данных выводится своя таблица и к ней применяется стиль с парамерами block2, объявленный в блоке стиля выше тэга, но после основной таблицы стиля. При этом часть параметров block2 перезаписывается параметрами block1...
отсюда и вопрос, можно ли, не трогая стили клиента, заставить корректно применяться стили свои...
Или же такое переопределение само по себе ошибка, и нужно крутить и одни и другие стили?...
Отвечать и комментировать я буду там, где считаю нужным. Единственным, кто может мне запретить это делать, является администратор форума, которым вы не являетесь. Поэтому доставить вам такое удовольствие от моего самоустранения я не могу. Я и дальше буду мешать вам говнокодить и выдавать свои ламерские суждения начинающего специалиста за экспертное мнение, если посчитаю это нужным
что-то я не вкуриваю сути проблемы.
есть на странице div. для него у клиента определне селектор
вы вставляете свой код
И вас смущает float:left ?
Вы от него избавится хотите?
есть на странице div. для него у клиента определне селектор
Код:
div { float:left}
вы вставляете свой код
Код:
<style>
.blck { width:100px;}
</style>
<div class="blck></div>
.blck { width:100px;}
</style>
<div class="blck></div>
И вас смущает float:left ?
Вы от него избавится хотите?
С дивами, как раз, проблем нету...
У клиента просто CSS описаны не просто стили .somestyle, а теги целиком table, td, th, h1,h2 и т.д. по списку... В некоторых стилях какого-то чёрта к параметрам добавлено !important ... и всё это, включая !important, хаотично разбросано по css-файлу размером 35к символов, включая переопределение и т.д... И искать и тестировать, какой же стиль ломает мне таблицу при выводе, как минимум не всегда удобно... вот и возник вопрос о возможности внутри какого-то элемента (например, своего отдельного дива), сбрасывать все внешние стили и отменять наследование...
Я и сам догадываюсь о невозможности быстрой и простой реализации этого... так что прошу скорее не помощи а сочувствия )))
У клиента просто CSS описаны не просто стили .somestyle, а теги целиком table, td, th, h1,h2 и т.д. по списку... В некоторых стилях какого-то чёрта к параметрам добавлено !important ... и всё это, включая !important, хаотично разбросано по css-файлу размером 35к символов, включая переопределение и т.д... И искать и тестировать, какой же стиль ломает мне таблицу при выводе, как минимум не всегда удобно... вот и возник вопрос о возможности внутри какого-то элемента (например, своего отдельного дива), сбрасывать все внешние стили и отменять наследование...
Я и сам догадываюсь о невозможности быстрой и простой реализации этого... так что прошу скорее не помощи а сочувствия )))
[quote=Kesano]
И искать и тестировать, какой же стиль ломает мне таблицу при выводе, как минимум не всегда удобно...
[/quote]
В firebug'е очень удобно.
[quote=Kesano]
вот и возник вопрос о возможности внутри какого-то элемента (например, своего отдельного дива), сбрасывать все внешние стили и отменять наследование...
[/quote]
[quote=https://developer.mozilla.org/en/Common_CSS_Questions]
Restoring the default property value
Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property.
Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored.
Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.
[/quote]
Единстенный вариант, что мне приходит - оборачиваешь все свои элементы в div , для дочерних элементов которого прописываешь дефолтный css(типа такого) с !important.
И искать и тестировать, какой же стиль ломает мне таблицу при выводе, как минимум не всегда удобно...
[/quote]
В firebug'е очень удобно.
[quote=Kesano]
вот и возник вопрос о возможности внутри какого-то элемента (например, своего отдельного дива), сбрасывать все внешние стили и отменять наследование...
[/quote]
[quote=https://developer.mozilla.org/en/Common_CSS_Questions]
Restoring the default property value
Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property.
Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored.
Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.
[/quote]
Единстенный вариант, что мне приходит - оборачиваешь все свои элементы в div , для дочерних элементов которого прописываешь дефолтный css(типа такого) с !important.
Цитата: arrjj
В firebug'е очень удобно.
Единстенный вариант, что мне приходит - оборачиваешь все свои элементы в div , для дочерних элементов которого прописываешь дефолтный css(типа такого) с !important.
Единстенный вариант, что мне приходит - оборачиваешь все свои элементы в div , для дочерних элементов которого прописываешь дефолтный css(типа такого) с !important.
Ну, справа в файрбаге я вижу, какие стили наследует элемент... Но пока не умею его правильно "читать", чтобы понимать, из какого из 15 наследуемых стилей наследуется свойство, что означают зачеркнутые и вообще порядок чтения...
Есть какой-то РТФМ как пользоваться файрбагом при верстке?
Цитата: Kesano
Ну, справа в файрбаге я вижу, какие стили наследует элемент... Но пока не умею его правильно "читать", чтобы понимать, из какого из 15 наследуемых стилей наследуется свойство, что означают зачеркнутые и вообще порядок чтения...
Есть какой-то РТФМ как пользоваться файрбагом при верстке?
Есть какой-то РТФМ как пользоваться файрбагом при верстке?
зачеркнутое - это переопределенное свйоство.
смотриш то которое активно, смотриш какое правило его устанавливает.
и составляешь свое таким образом, чтобы оно имело больший приоритет.
Код:
<body>
bla-bla-bla
<style type="text/css">
bla-bla-bla
<style type="text/css">
Цитата: int
Код:
<body>
bla-bla-bla
<style type="text/css">
bla-bla-bla
<style type="text/css">
Засунь в валидатор http://artlebedev.ru ))
Не уверен что ещё актуально, но всё же напишу точный ответ: Наследование стилей CSS отменить нельзя. Никак. Их можно только (!) перекрыть.
Так что делайте патипатак:
Так что делайте патипатак:
Код:
.....
<style>
.defaultFireFoxCSS{animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-play-state:running;animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);backface-visibility:visible;background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto auto;border-bottom-color:rgb(0,0,0);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-image-outset:0 0 0 0;border-image-repeat:stretch stretch;border-image-slice:100% 100% 100% 100%;border-image-source:none;border-image-width:1 1 1 1;border-left-color:rgb(0,0,0);border-left-style:none;border-left-width:0px;border-right-color:rgb(0,0,0);border-right-style:none;border-right-width:0px;border-spacing:0px 0px;border-top-color:rgb(0,0,0);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;caption-side:top;clear:none;clip:auto;clip-path:none;clip-rule:nonzero;color:rgb(0,0,0);color-interpolation:srgb;color-interpolation-filters:linearrgb;content:none;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:block;dominant-baseline:auto;empty-cells:show;fill:rgb(0,0,0);fill-opacity:1;fill-rule:nonzero;filter:none;float:none;flood-color:rgb(0,0,0);flood-opacity:1;font-family:serif;font-size:16px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;image-rendering:auto;ime-mode:auto;left:auto;letter-spacing:normal;lighting-color:rgb(255,255,255);line-height:20px;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;marker-end:none;marker-mid:none;marker-offset:auto;marker-start:none;mask:none;max-height:none;max-width:none;min-height:0px;min-width:0px;opacity:1;outline-color:rgb(0,0,0);outline-offset:0px;outline-style:none;outline-width:0px;overflow:visible;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;page-break-after:auto;page-break-before:auto;perspective:none;perspective-origin:562.5px 50px;pointer-events:auto;position:static;quotes:"“" "”" "‘" "’";resize:none;right:auto;shape-rendering:auto;stop-color:rgb(0,0,0);stop-opacity:1;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-width:1px;table-layout:auto;text-align:start;text-anchor:start;text-decoration:none;text-indent:0px;text-overflow:clip;text-rendering:auto;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:562.5px 50px;transform-style:flat;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);unicode-bidi:-moz-isolate;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;word-wrap:normal;z-index:auto;-moz-appearance:none;-moz-background-inline-policy:continuous;-moz-binding:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;-moz-box-align:stretch;-moz-box-direction:normal;-moz-box-flex:0;-moz-box-ordinal-group:1;-moz-box-orient:horizontal;-moz-box-pack:start;-moz-box-sizing:content-box;-moz-column-count:auto;-moz-column-gap:16px;-moz-column-rule-color:rgb(0,0,0);-moz-column-rule-style:none;-moz-column-rule-width:0px;-moz-column-width:auto;-moz-float-edge:content-box;-moz-font-feature-settings:normal;-moz-font-language-override:normal;-moz-force-broken-image-icon:0;-moz-hyphens:manual;-moz-image-region:auto;-moz-orient:horizontal;-moz-outline-radius-bottomleft:0px;-moz-outline-radius-bottomright:0px;-moz-outline-radius-topleft:0px;-moz-outline-radius-topright:0px;-moz-stack-sizing:stretch-to-fit;-moz-tab-size:8;-moz-text-align-last:auto;-moz-text-blink:none;-moz-text-decoration-color:rgb(0,0,0);-moz-text-decoration-line:none;-moz-text-decoration-style:solid;-moz-text-size-adjust:auto;-moz-user-focus:none;-moz-user-input:auto;-moz-user-modify:read-only;-moz-user-select:auto;-moz-window-shadow:default}
</style>
.....
<a href="//ya.ru" class="defaultFireFoxCSS my_link">LINK</a>
<style>
.defaultFireFoxCSS{animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-play-state:running;animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);backface-visibility:visible;background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto auto;border-bottom-color:rgb(0,0,0);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-image-outset:0 0 0 0;border-image-repeat:stretch stretch;border-image-slice:100% 100% 100% 100%;border-image-source:none;border-image-width:1 1 1 1;border-left-color:rgb(0,0,0);border-left-style:none;border-left-width:0px;border-right-color:rgb(0,0,0);border-right-style:none;border-right-width:0px;border-spacing:0px 0px;border-top-color:rgb(0,0,0);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;caption-side:top;clear:none;clip:auto;clip-path:none;clip-rule:nonzero;color:rgb(0,0,0);color-interpolation:srgb;color-interpolation-filters:linearrgb;content:none;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:block;dominant-baseline:auto;empty-cells:show;fill:rgb(0,0,0);fill-opacity:1;fill-rule:nonzero;filter:none;float:none;flood-color:rgb(0,0,0);flood-opacity:1;font-family:serif;font-size:16px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;image-rendering:auto;ime-mode:auto;left:auto;letter-spacing:normal;lighting-color:rgb(255,255,255);line-height:20px;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;marker-end:none;marker-mid:none;marker-offset:auto;marker-start:none;mask:none;max-height:none;max-width:none;min-height:0px;min-width:0px;opacity:1;outline-color:rgb(0,0,0);outline-offset:0px;outline-style:none;outline-width:0px;overflow:visible;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;page-break-after:auto;page-break-before:auto;perspective:none;perspective-origin:562.5px 50px;pointer-events:auto;position:static;quotes:"“" "”" "‘" "’";resize:none;right:auto;shape-rendering:auto;stop-color:rgb(0,0,0);stop-opacity:1;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-width:1px;table-layout:auto;text-align:start;text-anchor:start;text-decoration:none;text-indent:0px;text-overflow:clip;text-rendering:auto;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:562.5px 50px;transform-style:flat;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);unicode-bidi:-moz-isolate;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;word-wrap:normal;z-index:auto;-moz-appearance:none;-moz-background-inline-policy:continuous;-moz-binding:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;-moz-box-align:stretch;-moz-box-direction:normal;-moz-box-flex:0;-moz-box-ordinal-group:1;-moz-box-orient:horizontal;-moz-box-pack:start;-moz-box-sizing:content-box;-moz-column-count:auto;-moz-column-gap:16px;-moz-column-rule-color:rgb(0,0,0);-moz-column-rule-style:none;-moz-column-rule-width:0px;-moz-column-width:auto;-moz-float-edge:content-box;-moz-font-feature-settings:normal;-moz-font-language-override:normal;-moz-force-broken-image-icon:0;-moz-hyphens:manual;-moz-image-region:auto;-moz-orient:horizontal;-moz-outline-radius-bottomleft:0px;-moz-outline-radius-bottomright:0px;-moz-outline-radius-topleft:0px;-moz-outline-radius-topright:0px;-moz-stack-sizing:stretch-to-fit;-moz-tab-size:8;-moz-text-align-last:auto;-moz-text-blink:none;-moz-text-decoration-color:rgb(0,0,0);-moz-text-decoration-line:none;-moz-text-decoration-style:solid;-moz-text-size-adjust:auto;-moz-user-focus:none;-moz-user-input:auto;-moz-user-modify:read-only;-moz-user-select:auto;-moz-window-shadow:default}
</style>
.....
<a href="//ya.ru" class="defaultFireFoxCSS my_link">LINK</a>
Так то файлы в браузер по разным потокам ходят, а браузер их отрабатывает по мере загрузки. Поэтому даже если свой !important сделать - не факт что он приедет и отработает последним, чтобы сделать то чего хочется.
