• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Für jede Seite eine .css Datei?

T

Tukwar

Neues Mitglied
Hi Community.
Ich bin neu und ich hoffe ich finde hier alles was ich für ein Wissen benötige um eine Website zu erstellen! :)

Nun habe ich entweder nicht richtig gesucht oder ich weiss nicht wie ich die Frage formulieren soll.


Ich habe mit HTML angefangen und jetzt bin ich auch schon bei CSS angelangt.
Jetzt habe ich gemerkt, dass ich für jede andere Seite z.B. Bilder, dann eine neue .css Datei anlegen muss. Für index.html = style-css. Für bilder.html = bilder-style.css. Ich will nichts ausser den Inhalt ändern.(Das wäre kein Problem wen ich einen weissen Hintergrund hätte, aber das habe ich nicht :razz:). Meine Frage wäre: Gibt es eine Möglichkeit, alles in bzw. über style.css zu steuern? Ohne das ich tausende von .css Datein brauche?

Falls Jemand auf diese Frage antworten kann, könnte er/sie auch gleich auf diese Frage antworten? :)

2. Wen ich jetzt eine Gruppe mit <div> & class definiere, und spezielle Absätze in css verändere, nimmt es die Optionen von #inhalt an.

Hier ein Beispiel:

HTML
Code: 
<div id="inhalt">
<p> Normaler Absatzt </p>
<p class="test">Dieser Absatz soll unverändert bleiben </p>
</div>
CSS
Code: 
#inhalt p {
     color: blue;
     font-size: 35px;
}

.test {
   color: red;
   font-size: 10;
}
Jetzt wollte ich fragen, wiso nimmt der Absatzt <p> der mit class definiert wurde, die Optionen von #inhalt an und nicht die, die ich im gegeben habe?
Gibt es hier villeicht auch eine Möglichkeit, jedes einzelne <p> beliebig zu ändern, ohne dieses "class" ?.


Ich danke euch vielmals für eine Antwort! :)

Gruss,
Tukwar
 
IDs haben vor Klassen Vorrang, wenn die Klassen nicht innerhalb der IDs definiert sind. Ändere

Code: 
.test {

in

Code: 
#inhalt .test {

Und natürlich kannst Du auch jedes <p>-Tag beeinflussen. Schreib einfach

Code: 
p { .. }

Aber Vorsicht: das würde natürlich wieder von Klassen und IDs überschrieben werden, wenn diese das p überschreiben.
 
threadi schrieb:
IDs haben vor Klassen Vorrang, wenn die Klassen nicht innerhalb der IDs definiert sind. Ändere

Code: 
.test {
in

Code: 
#inhalt .test {
Und natürlich kannst Du auch jedes <p>-Tag beeinflussen. Schreib einfach

Code: 
p { .. }
Aber Vorsicht: das würde natürlich wieder von Klassen und IDs überschrieben werden, wenn diese das p überschreiben.
Zum Vergrößern anklicken....

Hi.

Danke dir. Geht wunderbar :). Kannst du auch meine 1. Frage beantworten?:)

Vielen Dank!
 
Die hatte ich glatt überlesen in dem "großen" Absatz. Natürlich kannst und solltest Du alle CSS-Eigenschaften in einer Datei speichern. Sonst macht das ja wenig Sinn.

Kleiner Tipp: definiere immer zuerst für alle Text- und Bildauszeichnungs-Elemente einheitliche Eigenschaften. Also für img, p, a etc. Danach erst solltest Du über Klassen einzelne Unterschiede definieren.
 
Zu deiner anderen Frage:
CSS hat eigentlich den Zweck, dass man in nur einer Datei die Formatierungen für die gesamte Website einstellen und festlegen kann. Ich verstehe dein Problem nicht richtig, aber kannst du die speziellen Formatierungen, die nur auf einer Seite gebraucht werden, nicht einfach mit in diese CSS-Datei schreiben? Wenn sie nicht gebraucht werden, werden die Formatierungen schließlich ignoriert.

Falls das nicht das Problem ist, kannst du über eine serverseitige Programmiersprache (bspw. PHP) dynamisch CSS-Dateien generieren und so an spezielle Seiten anpassen.

EDIT: Hat threadi doch was dazu geschrieben :)
 
kruschimappel schrieb:
Zu deiner anderen Frage:
CSS hat eigentlich den Zweck, dass man in nur einer Datei die Formatierungen für die gesamte Website einstellen und festlegen kann. Ich verstehe dein Problem nicht richtig, aber kannst du die speziellen Formatierungen, die nur auf einer Seite gebraucht werden, nicht einfach mit in diese CSS-Datei schreiben? Wenn sie nicht gebraucht werden, werden die Formatierungen schließlich ignoriert.

Falls das nicht das Problem ist, kannst du über eine serverseitige Programmiersprache (bspw. PHP) dynamisch CSS-Dateien generieren und so an spezielle Seiten anpassen.

EDIT: Hat threadi doch was dazu geschrieben :)
Zum Vergrößern anklicken....

Hallo.
Danke für deine Antwort!

Sorry für meine ungenaue Beschreibung.
Ich meine, wie kann ich alles in einer .css Datei speichern?
Muss ich jedem einzeln HTML-Tag einen Namen geben und dann in der CSS Datei angeben?
Weil z.B. meine 2 Seite auch fast alles gleich haben muss. Z.B. ich will für jede andere Seite einen anderen header, wie mache ich das?

Danke & Gruss,
Tukwar
 
Am besten gibst du deinen Seiten im Body bereits ein id. Zum Beispiel <body id="about">. Dann kannst du in der CSS-Datei stets so darauf zugreifen:
Code: 
#start #header {
 background:url(../img/einbild.jpg) no-repeat;
}

#about #header {
 background:url(../img/einanderesbild.jpg) no-repeat;
}
 
Körnerbrötchen schrieb:
Am besten gibst du deinen Seiten im Body bereits ein id. Zum Beispiel <body id="about">
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-221469-8'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
document.documentElement.firstChild.appendChild(ga);
})();
//-->
</script>
. Dann kannst du in der CSS-Datei stets so darauf zugreifen:
Code: 
#start #header {
 background:url(../img/einbild.jpg) no-repeat;
}

#about #header {
 background:url(../img/einanderesbild.jpg) no-repeat;
}
Zum Vergrößern anklicken....

Hi.

Danke dir, werds so versuchen :-).

Ich hätte nurnoch 1 Frage, und zwar:

Wen ich jetzt diesen Body ein id gebe, z.B. Home. Und in einer anderen Datei z.B. About, und dann in beiden eine gleiche Gruppen id besteht, z.B. #inhalt, wird dann CSS die erste auswählen?

Hier ein Beispiel:

HTML

Code: 
[B]Das wäre mal index.html[/B]

<html>
<head>
<title>Hallo</title>

<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body id="startseite">
<div id="inhalt">

<p> Test Test Test Test Test Test </p>
<p class="test"> Test 2 </p>
</body>
</html>
Code: 
[B]Das wäre z.B. Bilder.html[/B]

<html>
<head>
<title>Bilder</title>

<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body id="bilder">

<div id="inhalt">

<p> Test Test Test Test Test Test </p>
<p>Bilder Bilder Bilder Bilder </p>

</body>
</html>


CSS

Code: 
#body startseite{

#inhalt p {
     font-size: 22px;
}
}

#body bilder {
#inhalt p {
     font-size:10px;
} 
}

Muss ich das so angeben das ich beide #inhalt verändern kann oder muss ich den Namen wechseln`?

Vielen Dank für diese schnelle Antworten! :)
 
Du kannst so keine CSS-Befehle verschachteln. So wäre es richtig:
Code: 
#startseite #inhalt p {
     font-size: 22px;
}

#bilder #inhalt p {
     font-size:10px;
}
Die ID ist das was in dem Anführungszeichen hinter dem id= steht. In dem CSS spricht man das dann mit #id an. Der Name des Elements hat keine Bedeutung. Wenn du das Element (aus Gründen der Seperation) erwähnen musst, so geht das so body#id (das id natürlich jeweils durch den ID-Namen ändern).
Bei CSS wird immer von vorne nach hinten gecheckt. Steht ein #home am Anfang, dann ist die Voraussetzung für alles, was danach kommt. Hat kein Element die ID home, so wird der Rest danach gar nicht erst untersucht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben