CSS-File Importfunktion mit CSS-Code

Mitglied: WinLiCLI

WinLiCLI (Level 2) - Jetzt verbinden

16.12.2019 um 22:02 Uhr, 636 Aufrufe, 5 Kommentare

Hallo,

ich möchte gerne eine CSS Datei erstellen worin ich mit der @import Funktion weitere CSS Datein rein laden tue.
In dieser CSS möchte ich aber auch CSS-Code schreiben. Nun habe ich das Problem, dass wenn ich eine CSS erstelle die nur die @imports beinhaltet (also ohne css code), dann funktionieren die anweisungen von den externen css dateien. wenn ich aber die @import funktionen verwende und in der selben css datei css code rein packe, dann wird nur der css code gelesen und die @import funktionen scheinen nicht mehr zu klappen.

ich habe hier mal das beispiel meiner html + css dateien rein kopiert (auch im anhang):



import.html:

<!DOCTYPE html>
<html>
<head>
<title>import test</title>
<link rel="stylesheet" href="import.css">
</head>
<body>
<h1>ich teste den import</h1>
</body>
</html>



so wird funktionieren die @import funktionen:

import.css:

@import url("import_screen.css");
@import url("import_780.css");
@import url("import_480.css");




so funktionieren die @import funktionen nicht mehr (ich habe den inhalt der datei "import_screen.css" einfach in diese css rein kopiert):

@import url("import_780.css");
@import url("import_480.css");

@media screen {
body {
background-color: red;
}
}



das ganze soll zum ändern der body farbe dienen, wenn der browser eine gewisse px breite erreicht.

weis jemand warum das ganze nicht funktioniert?

lg
Mitglied: em-pie
16.12.2019, aktualisiert um 22:17 Uhr
Moin,

statt in der Master-CSS konkrete Werte zu hinterlegen, würde ich je nach Auflösung verschiedene css. laden:

https://wiki.selfhtml.org/wiki/CSS/@-Regeln#Medienspezifisches_Einbinden ...
Gruß
em-pie
Bitte warten ..
Mitglied: WinLiCLI
16.12.2019 um 22:19 Uhr
ja das ist die variante die bei mir funktioniert. heist es nun, dass es nicht möglich ist eine css zu erstellen die @import + css code beinhaltet?
Bitte warten ..
Mitglied: WinLiCLI
17.12.2019 um 12:46 Uhr
jemand anderes eine Idee?
Bitte warten ..
Mitglied: eisbein
17.12.2019 um 16:03 Uhr
Hallo;

Deine Beispiele verwirren etwas

Im Beispiel 1:
Hier wird zuerst import_screen.css (Zeile 1) eingelesen, dann von import_780.css (Zeile 2) und danach von import_480.css (Zeile 3) überschrieben.

Im Beispiel 2:
Hier wird zuerst import_780.css (Zeile 1) eingelesen, dann von import_480.css (Zeile 2) überschreiben und zum Schluss dann mit der fixen body-background (ab Zeile 4) erschlagen.

Nachdem du keine Bedingungen (wie @em-pie gezeigt hat) setzt, wird alles geladen und ggf. überschrieben.

Schau dir den Link noch mal genau an - du hast da wohl einen kleinen Denkfehler

Gruß
eisbein
Bitte warten ..
Mitglied: 142232
17.12.2019, aktualisiert um 17:18 Uhr
Hier wird zuerst import_screen.css (Zeile 1) eingelesen, dann von import_780.css (Zeile 2) und danach von import_480.css (Zeile 3) überschrieben.
"Überschreiben" ist hier nicht so ganz richtig, alle Anweisungen werden kombiniert, sofern eine gleiche Anweisung in mehreren externen Dateien vorkommt ersetzt die zuletzt importierte Anweisung die vorherige sofern die vorherige nicht die !Important Anweisung gesetzt hat.

Beispiel:

test1.css
test2.css
html
Aus der Kombination werden dann effektiv folgende Anweisungen die auf das Dokument wirken:
Bitte warten ..
Heiß diskutierte Inhalte
Router & Routing
Wireguard VPN (oder andere alternative) - Kompletter Traffic routen
gelöst KodaCHFrageRouter & Routing15 Kommentare

Guten Morgen Ich habe bisher mit OpenVPN und mit Wireguard VPN einige Tests gemacht. OpenVPN (Kostenlose Version): Hier habe ...

Server-Hardware
Konfiguration und Stromverbrauch ML350 Gen10
kosta88FrageServer-Hardware13 Kommentare

Hallo, ich versuche mal zu berechnen was ein ML350 verbrauchen würde. Ich weiß dass es von der Konfiguration und ...

Windows Server
Hyper-V Server vs Datacenter?
holliknolliFrageWindows Server12 Kommentare

Hallo, hat jemand Erfahrung mit dem - kostenlosen - Hyper-V-Server? Ich meine, warum teure Lizenzen für Datacenter zahlen, wenn ...

Server
Kein Zugriff auf NAS bei DS Lite
martingerdesFrageServer11 Kommentare

Hallo liebe Gemeinde, dieses Thema kennen wahrscheinlich viele und ich selbst habe schon viele Forenbeiträge zu diesem Thema gelesen. ...

Grafikkarten & Monitore
Grafikkarte kaputt? Hier muss noch etwas hin, weil der andere Titel schon vergeben ist :)
Sir.classicFrageGrafikkarten & Monitore9 Kommentare

Hallo an alle, ich habe einen selbst gebauten PC und mein Problem ist, dass meine Monitore regelmäßig (alle 3h) ...

LAN, WAN, Wireless
Spanning Tree Probleme
predator66FrageLAN, WAN, Wireless9 Kommentare

Hallo, wir haben hier eigenartige Spanningtree Probleme, die wir zur Zeit nicht gelöst bekommen: New Root Port MAC ist ...

Ähnliche Inhalte
CSS
CSS Problem
gelöst michi1983FrageCSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

CSS
Hilfe bei CSS
gelöst emeriksFrageCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

Suse
SquidGuard filtert CSS
gelöst killtecFrageSuse3 Kommentare

Hallo, Squidguard scheint irgendwie die CSS zu filtern. Wenn ich squidguard raus nehme, wird die Seite korrekt dargestellt, lasse ...

CSS
Silbentrennung in CSS
gelöst honeybeeFrageCSS1 Kommentar

Hallo, der W3C CSS Validator meldet diesen Fehler: Property hyphens doesn't exist : auto auto Was bedeutet das? Verwende ...

CSS
CSS div ignoriert Höhe
gelöst tsunamiFrageCSS2 Kommentare

Hallo, ich scheitere gerade an einem Problem. Ich habe mehrere DIVs. Zwei nebeneinander jeweils mit umgebenem Div und Einen ...

CSS
Css div-Boxen nebeneinander
gelöst tsunamiFrageCSS2 Kommentare

Hallo, ich habe Thema welches auf den ersten Blick mit unzähligen ähnlichen Ansätzen funktionieren soll, tut es aber nicht. ...

Berechtigungs- und IdentitätsmanagementBerechtigungs- und IdentitätsmanagementWebdienste und -serverWebdienste und -serverDatenbankenDatenbankenMonitoring & SupportMonitoring & SupportHybrid CloudHybrid CloudSmall Business ITSmall Business IT