Div mit externen Stylesheets?

Ich habe ein externes stylesheet (.css-Datei), die nicht in irgendeiner Weise verändert zu löschen. Jedoch muss ich zu diesem stylesheet anwenden, um ein einzelnes div und somit den Inhalt des div in meine bereits bestehende Webseite. Derzeit lese ich den Inhalt des stylesheet als text in ein leeres style-tag (mit .innerHTML) innerhalb der div, die ich brauche, um zu beeinflussen, aber noch wirkt sich auf die gesamte web-Seite, anstatt nur die einzelnen div. Könnte mir bitte jemand helfen mit diesem?

CSS wirkt sich auf die ganze Seite. Der einzige Weg den ich kenne um zu isolieren, so dass es wirkt sich nur auf einen bestimmten Teil der Seite ist ein IFRAME-Element.
So ein IFRAME innerhalb meiner div? Ich kann das tun, aber dann wie ich nur auf den IFRAME dann?

InformationsquelleAutor LethalPapercut | 2013-05-03

11

Den IFRAME-Lösung funktioniert wie folgt:

In Ihrem Haupt-HTML-Datei, Sie haben Ihre DIV:
```
<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
```
Stil, wie Sie es brauchen. Die divcontent.html die Datei sollte eine vollständige HTML-Datei, einschließlich der Inhalt des DIV-tag, und einen LINK mithilfe Ihrer externen stylesheet:
```
<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        
    </body>
</html>
```
- sagen, dass ich eine Reihe von externen stylesheets. wie würde ich mich über Verlinkung, Sie alle zu divcontent.html bei der Laufzeit? Ich bin damit beschäftigt, eine web-Anwendung, die ständig bekommt neue .css-Dateien
- Das hängt davon ab, Ihre Laufzeit, die Sprache, die Sie verwenden, zu entwickeln, die web-Anwendung, die Rahmen, auf denen es beruht, und die Architektur Ihrer Anwendung. Aber es gibt keine Anforderung, dass die divcontent.html Datei eigentlich HTML sein - es könnte eine beliebige Datei, die HTML-Konstrukte (z.B.: PHP, aspx, etc.). Die Antwort gibt Ihnen das Konzept - Sie haben die Anpassung an Ihre spezifischen Anforderungen.
InformationsquelleAutor Gareth Cornish
6

Wenn Sie arbeiten mit HTML5, Sie könnten versuchen, mit scoped styles. Sie könnten auch die CSS im div, dass es nur Auswirkungen auf seine Eltern:
```
<div>
    <style scoped>
        // Styles here
    </style>
</div>
```
- Scheint wie eine erstaunliche Lösung, aber es passt nicht zu meinen Bedürfnissen zu sehen, wie das scoped-Attribut wird nicht unterstützt in jedem der gängigen Browser noch nicht.
- Ich möchte um einen link zu externen CSS-Dateien und es scheint, kann nicht getan werden, innen - <style scoped> - tag, so etwas wie @import "externe.css"; nicht wissen und nicht Arbeit!
- Es scheint nicht, wie <style scoped> wird mehr unterstützt. Das folgende sehen: stackoverflow.com/a/45692033/5245952
InformationsquelleAutor Piet van Dongen
3

Dies hilft Ihnen viel:

http://css-tricks.com/saving-the-day-with-scoped-css/

Gilt nur Stil bis zu einem gewissen getrennte escope. Viel Glück!

IMHO besser als die iframe-Lösung..

Verwandte: Limit Umfang der externen css, um nur ein bestimmtes element?
- Es scheint nicht, wie <style scoped> wird mehr unterstützt. Das folgende sehen: stackoverflow.com/a/45692033/5245952
InformationsquelleAutor Javier del Saz
1

Schlage ich vor, lassen Sie die externe style-sheet, wie es ist, und erstellen Sie ein internes Stylesheet mit den Klassen, die Sie möchten aus dem externen stylesheet auf das eigene single-div und benennen Sie einfach und wenden diese umbenannt Klassen div. Die Umbenennung ist, da die Attribute dieser Klassen beeinflussen können Elemente, die bereits vorhandenen an die Seite von externen stylesheets.
```
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
```
Hoffe, das hilft.

InformationsquelleAutor Nitesh
1

Wenn Sie Zugriff auf server-side-scripting (z.B. PHP), können Sie ein Skript erstellen, das laden des externen Stylesheets und fügt ein Klasse name vor jeden Eintrag. Dann bewerben Sie diese Klasse, um Ihre DIV-tag. Also, wenn das CSS beinhaltet:
```
p { font-size: 12px; }
```
Würden Sie ändern, dass:
```
.mydiv p { font-size: 12px; }
```
Format und Ihre DIV als
```
<div class="mydiv">...</div>
```
Würden Sie dann laden Sie das Skript als ein stylesheet, anstatt das externe stylesheet direkt.
```
<link rel="stylesheet" href="path/to/internal/script.php" />
```
- Dies scheint eine sehr praktikable Lösung. Ich weiß nicht viel über PHP aber so wie könnte man anfügen, wird der name der Klasse vor jedem Eintrag?
- Schreiben Sie Ihre web-Anwendung in basic, HTML und javascript, oder verwenden Sie ein anderes system?
- grundlegende HTML-und javascript-ja
- Wie ändern Sie die CSS-Datei hängt sehr viel über das format der CSS-Datei, und die Zuverlässigkeit von diesem format. Sie können in der Lage sein, um Weg mit Hilfe von regulären Ausdrücken, oder müssen Sie möglicherweise bauen Sie sich ein CSS-parser. Oder etwas dazwischen.
- Habe meine Lösung mit dem IFRAME wie du bereits angedeutet. Ich bin noch sehr neu in web-dev, und diese Anwendung ist mein erstes Unternehmen, so ich danke Ihnen sehr herzlich für all die Hilfe.
InformationsquelleAutor Gareth Cornish
0

Ich gehe davon aus, dass die style-Vorgaben innerhalb der externen Datei nicht enthalten sind, in Klassen oder IDs, aber sind Sie auch eine Decke Anpassungen tags wie <p> (und so kann es nicht sein eingeschlossen in Ihre Seite ein Header). Ihre div in einem <style scoped> tag, und importieren Sie die .css-Datei gibt. Siehe: http://css-tricks.com/saving-the-day-with-scoped-css/
- Hoppla, geschlagen von Piet
InformationsquelleAutor NWard
0

Könnten Sie weisen eine CSS-Präfix, um das Ziel, die Abschnitt des Dokuments, die Sie wollen zu style.

InformationsquelleAutor Morpheus
0

scoped ist eine gute Idee, aber hat der browser kompatibel Problem.

Ich lösen dieses problem durch hinzufügen von Prä-Klasse vor allen Selektor in der css-Datei:

https://github.com/ericf/grunt-css-selectors

InformationsquelleAutor Fancyoung

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.