5
CSS-File Importfunktion mit CSS-Code
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
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
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 526180
Url: https://administrator.de/contentid/526180
Ausgedruckt am: 21.11.2024 um 21:11 Uhr
5 Kommentare
Neuester Kommentar
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
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 ...
@import "lowres.css" screen;
@import 'highres.css' screen and (min-width: 600px); Gruß
em-pie
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?
jemand anderes eine Idee?
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
Deine Beispiele verwirren etwas
Im Beispiel 1:
@import url("import_screen.css");
@import url("import_780.css");
@import url("import_480.css"); 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:
@import url("import_780.css");
@import url("import_480.css");
@media screen {
body {
background-color: red;
}
}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
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
@charset "utf-8";
body {
background-color:red;
}
h1 {
font-size: 20px;
font-weight:bold;
color:white;
}test2.css
@charset "utf-8";
body {
background-color:blue !important;
}html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Test</title>
<style type="text/css">
@import url("test1.css") screen;
@import url("test2.css") screen;
@media screen {
body{
background-color:green;
}
}
</style>
</head>
<body>
<h1>Das ist eine H1 Überschrift
</h1>
</body>
</html>Aus der Kombination werden dann effektiv folgende Anweisungen die auf das Dokument wirken:
body {
background-color:blue !important;
}
h1 {
font-size: 20px;
font-weight:bold;
color:white;
}
