winlicli
Dec 16, 2019
view2014
view5
0
Goto Top

CSS-File Importfunktion mit CSS-Code

GermanQuestionCSSDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 526180

Url: https://administrator.de/contentid/526180

Printed on: April 24, 2024 at 01:04 o'clock

5 Comments
Latest comment
Goto Top
Member: em-pie
em-pie Dec 16, 2019 updated at 21:17:17 (UTC)
Goto Top
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 ...
@import "lowres.css" screen; 
@import 'highres.css' screen and (min-width: 600px);

Gruß
em-pie
Member: WinLiCLI
WinLiCLI Dec 16, 2019 at 21:19:41 (UTC)
Goto Top
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?
Member: WinLiCLI
WinLiCLI Dec 17, 2019 at 11:46:40 (UTC)
Goto Top
jemand anderes eine Idee?
Member: eisbein
eisbein Dec 17, 2019 at 15:03:30 (UTC)
Goto Top
Hallo;

Deine Beispiele verwirren etwas face-wink

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 face-wink

Gruß
eisbein
Mitglied: 142232
142232 Dec 17, 2019 updated at 16:18:42 (UTC)
Goto Top
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;	
}
GermanQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments