Fonts in CSS

F4LL0UT · 18. Oktober 2010, 06:16

Hi, ich habe endlich mal meine Homepage in Schuss gebracht und von Grund auf nur mit Notepad in HTML und CSS zusammengeschustert. Generell funktioniert alles wunderbar, allerdings kriege ich ein Problem einfach nicht gelöst. Ich möchte Fonts in einem CSS-File definieren, doch irgendwie haut das nicht hin.

Man muss ja zunächst eine Klasse generieren, etwa wie folgt:

HTML-Quellcode

p.sans{font-family:Verdana, Geneva, sans-serif;}

Wenn ich diesen Code in den "Style"-Bereich meiner HMTL-Dateien packe, wird der Font richtig erkannt. Allerdings kriege ich es nicht hin, dass die Klasse in einem CSS-File definiert und dann in einer HTML richtig genutzt wird. Wo in die CSS-Datei muss ich den Code packen? Das ganze macht mich echt stutzig weil abgesehen vom Font bislang alles an CSS sofort hingehauen hat.

Edit: Das selbe Problem betrifft auch das Farbverhalten von Links, ist mir gerade aufgefallen.

copyboy · 18. Oktober 2010, 11:50

Wie hast du denn die CSS Datei eingebunden und funktioniert es, wenn du !important anhängst? Was passiert wenn du noch was anderes außer der Font dort definierst?

F4LL0UT · 18. Oktober 2010, 13:44

Einbindung ganz normal so:

HTML-Quellcode

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

Habe ich in jeder einzelnen HTML datei (abgesehen der index.html, die die Frames definiert) eingebunden und generell scheinen sie zu funzen. Folgende Parts der CSS funzen auf jeden Fall:

CSS-Quellcode

body
{
height:100%;
margin:0;
padding:0;
text-align:justify;
background-color:#000000;
background-image:url('gfx/bg.jpg');
background-repeat:no-repeat;
background-position:center top;
color:#FFFFFF;
}
h1
{
text-align:center;
}
h2
{
text-align:left;
}
h3
{
text-align:justify;
}

Alles anzeigen

Aber folgende Sachen funzen soweit nur wenn ich sie in den jeweiligen HTML-Dateien anwende:

HTML-Quellcode

<style>
h1.sans{font-family:Verdana, Geneva, sans-serif;}
h2.sans{font-family:Verdana, Geneva, sans-serif;}
p.sans{font-family:Verdana, Geneva, sans-serif;}
a:link {color:#bdac51;}
a:visited {color:#9d8b29;}
a:hover {color:#f3dc5b;}
a:active {color:#ffee91;}
</style>

Die Referenzen und Tuts, die ich benutze, leuchten mir einfach nicht ein wie ich das Zeug in die CSS knallen muss, damit die Klassen dann in den HTMLs funzen (und die Sachen die nicht funzen sind ja alle klassenbezogen). Und btw: Momentan muss ich auch so bei jedem einzelnen Header und Textabschnitt manuell halt ne Klasse aufrufen um den Font zu wechseln - es muss doch auch eine Möglichkeit geben den Font einmalig in der CSS zu definieren, oder?

Und btw: Hab keine keine Ahnung was dein "!important" macht und wo ich es anhängen soll.

J@kob · 18. Oktober 2010, 14:27

ich glaube ich hatte bei meiner homepage damals ein ähnliches problem.
ich habe es (glaube ich) so gelöst:

Quellcode

.sans{font-family:Verdana, Geneva, sans-serif;}

also die klassen allgemein definiert, wenn du sie dann verwendest ist es ja egal, ob die klasse nur für diesen html-tag defineirt ist oder allgemein.

tobiasre · 18. Oktober 2010, 16:18

F4LL0UT schrieb:

Und btw: Momentan muss ich auch so bei jedem einzelnen Header und Textabschnitt manuell halt ne Klasse aufrufen um den Font zu wechseln - es muss doch auch eine Möglichkeit geben den Font einmalig in der CSS zu definieren, oder?

Einfach die font-family Eigenschaft in das body Element im CSS schreiben. Dann gilt die Font für den kompletten Text auf deiner Website.

Spoiler anzeigen

F4LL0UT schrieb:

Und btw: Hab keine keine Ahnung was dein "!important" macht und wo ich es anhängen soll.

Es gibt in CSS unterschiedliche Wertigkeiten. Eine Id (#id) ist zum Beispiel höher eingestuft als eine Class (.class) . Mit dem !important wertest du die Eigenschaft hoch. Kleines Beispiel:
Du hast ein DIV mit einer Class und einer id. In der ID steht das der Background Blau sein solll und in der Class das er Grün sein soll. Jetzt ist es so das der Hintergrund des DIVs Blau sein wird. Schreibst du allerdings im CSS bei der Eigenschaft Background Grün der Class ein !important dahinter wird dieser Grün sein.

F4LL0UT · 19. Oktober 2010, 12:09

Okay, hab's nun so gemacht wie tobiasre es beschrieben hat (nämlich ohne Namen, Punkt oder sonstwas) und tatsächlich funzt das mit dem Font jetzt.
Hatte den Thread noch länger offen gelassen weil ich nocht mit den Links schwierigkeiten hatte, hab das Problem dann aber noch selbst gelöst bekommen (musste nur drauf achten, dass das Zeug nicht im body-Bereich ist).

Also danke an alle. Gelöst.