.css datei -- wie muss die aussehen?

Computer: Software & Programmierung HTML & CSS
#1

Hallo!

Ich hatte vor ein paar Wochen, als ich meine eigene Homepage gemacht habe, folgendes Problem: CSS Formatierungen die in direkt jeder HTML-Datei aufgeführt wurden (so wie’s jetzt ist) werden korrekt interpretiert vom Browser, allerdings ist es mir damals nicht gelungen, diese in eine externe .css Datei auszulagern. Die Formatierungs-Infos wurden einfach ignoriert. (Ja, ich habe den tag reingeschrieben in jede html seite =O)

Ich hab’ auch schon bei SELFHTML geschaut bin aber nicht wirklich fündig geworden: Wie genau muss denn so eine .css datei aussehen? nur die styles oder ein davor? oder ist groß/kleinschreibung wichtig? Muss nach dem LETZTEN punkt vor einer geschweiften klammer zu ein semikolon stehen?

Im Internet gibt’s nämlich auch auf verschiedenen Webseiten verschiedene versionen von .css dateien, teilweise sogar extra für netscape und ie… wie mach ich das denn am besten? und welche browser können das dann verstehen?

hier mal ein meine .css, so wie sie im Moment aussieht (genauso sah sie damals auch aus, nur das ich sie etwas sortiert habe):

BODY {
FONT-SIZE: 9pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
scrollbar-face-color: #0099FF;
scrollbar-shadow-color: #005086;
scrollbar-highlight-color: #8BD1FF;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #1161BE;
scrollbar-track-color: #1161BE;
scrollbar-arrow-color: #ffffff;
}

A {
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
COLOR: #ff6600;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none
}

A:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
COLOR: #0066ff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

A.special {
color:#7dc8ff;
text-decoration:none;
}
A.slink {
color:white
}
A.slink:hover {
text-decoration:underline;
color:#7dc8ff
}
A.special:hover {
color:white;
}
A.linkup {}

td {
FONT-SIZE: 9pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none
}

th {
FONT-SIZE: 10pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: bold
}

.black { COLOR: #000000 }
.gray { COLOR: #808080 }
.big { font-size:40pt }
.verybig { font-size:65pt; vertical-align:middle }
.lightblue { color:#7dc8ff; text-decoration:none }

.stylee {
font-family:verdana;
font-size:11px;
}
.desctut {
font-size:9px;
font-family:Verdana;
text-decoration:none;
color:white;
height:50;
width:165;
}
.tutorial {
font-size:11px;
font-family:Verdana;
text-decoration:none
}

.others {
font-size:12px;
font-weight:bold;
color:white;
}

.date {
color:#7dc8ff;
font-weight:300;
}

.indexbig {
FONT-WEIGHT: bold;
FONT-SIZE: 14pt;
COLOR: #ff6600;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none
}

.indexbig:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 14pt;
COLOR: #0066ff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

.quick {
MARGIN-TOP: 30px; FONT-WEIGHT: 400; FONT-SIZE: 20px; COLOR: #0080ff; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
.tip {
MARGIN-TOP: -12px; FONT-WEIGHT: 700; FONT-SIZE: 40px; MARGIN-LEFT: 40px; COLOR: #003f82; TEXT-ALIGN: left
}

.whitetip {
MARGIN-TOP: -12px; FONT-WEIGHT: 700; FONT-SIZE: 40px; MARGIN-LEFT: 40px; COLOR: #ffffff; TEXT-ALIGN: left
}
.whitetip:hover {
MARGIN-TOP: -12px; FONT-WEIGHT: 700; FONT-SIZE: 40px; MARGIN-LEFT: 40px; COLOR: #ffffff; TEXT-ALIGN: left; TEXT-DECORATION: underline
}

Danke schön!!! Und schönes Wochenende,

Dennis =O)

#2

hallo dennis,

deine css-datei scheint ok zu sein. nun solltest du sie nur noch korrekt einbinden, damit der entsprechende browser seine entsprechende css-datei lädt. und dazu verwende ich immer folgendes javascript, dass selbst wiederum in einer externen javascsript-datei steht (der aufruf aus der html-datei steht darunter!):

// anfang der externen javascript-datei
// css_check

// hier beginnt der browsercheck
var browser_ok = false;

// plattform-check
var browser_mac = (navigator.appVersion.indexOf(„Mac“)!=-1);

// browser-check
var browser_ns = (navigator.userAgent.indexOf(„Mozilla“) !=-1);
var browser_ie = false;
if (navigator.userAgent.indexOf(„MSIE“) !=-1)
{
browser_ie = true;
browser_ns = false;
}

// ie5 macintosh abfangen
var browser_ie5mac = false;
if ((navigator.userAgent.indexOf(‚MSIE 5.‘) != -1) && (browser_mac))
{
browser_ie = true;
browser_ie5mac = true;
};

var browser_version = parseInt(navigator.appVersion.substring(0,1));
var browser_ok = (browser_version >= 4);
var browser_netscape6 = (navigator.userAgent.indexOf(„Netscape6“)!=-1)

// ende browsercheck

// entsprechende css-datei laden
if (browser_ok)
{
if (!browser_mac)
{
if (browser_ie) document.write("");
if (browser_ns) document.write("");
}
else
{
if (browser_ie) document.write("");
if (browser_ie5mac) document.write("");
if (browser_ns) document.write("");
}
}
// ende entsprechende css-datei laden
// ende der externen javascript-datei

diese datei rufst du folgendermaßen nach dem titel-tag in der html-datei auf:

nun solltest du halt für die per javascript ermittelten browser bzw- plattformen auch die entsprechenden css-dateien anlegen.
dabei sind unterschiedliche schriftgrößen z.b. für mac und windows zu berücksichtigen, weil windows die schriften generell etwa 2 bis 3 punkt größer darstellt, als beim macintosh dies der fall ist.
in obigem beispiel werden die browser ie>4 und ns>4 sowohl mac und windows und ie5 auf mac berücksichtigt. ferner wird eine variable browser_netscape6 auf „true“ gesetzt, benutzt der user netscape 6.
die variable browser_ok wird auf „true“ gesetzt, sollte alles ok sein.
wenn nicht, kannst du das mit folgenden javascript-zeilen abfangen (am besten auf einer eigenen browser-check-seite, die zu allererstes geladen wird):

// netscape6 abfangen
if (browser_netscape6)
{
browser_ok = false;
top.location.href = „oups.html“;
}

if ((!browser_ok) && (!browser_netscape6)) top.location.href = „oups.html“;

die datei oups.html ist dann entsprechend eine seite, die den user darauf hinweist, dass er einen zu dieser seite nicht kompatiblen browser benutzt, oder die kein css verwendet, evtl. dann eine reine text-seiten.

ich hoffe, dass dir diese infos weiterhelfen.
sollten noch fragen dazu sein, schick’ ein email.

grüße aus hamburg,
ulli.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Hallo Dennis!

Vielleicht ein Tipp: Benutze statt ein anderes Wort, zB . Sonst koennte es vielleicht Missverstaendnisse mit dem „echten“ -Tag geben. Sonst muesste alles funktionieren.
Zum Aussehen einer CSS-Datei:
Du oeffnest deinen Windows-Editor und schreibst alles so, wie in deinem Bsp. Dann speicherst du die datei in deinem Homepage-Verzeichnis mit zB dem Dateinamen „Konfig.css“. Den Dateinamen musst du natuerlich auch in deinem -Bereich bei dem eingeben.

Ich hoffe, dir damit helfen zu koennen,

ARMIN

#4

Hi Ulli!

Ich danke Dir für Deine superausführliche hilfreiche Antwort! Ich hatte eigentlich nicht vor für jeden Browser unterschiedliche .css dateien zu machen :o)

Ich werd’ mal schauen ob ich das so ans laufen kriege :open_mouth:) bei der erklärung sollte das ja kein problem sein!

Danke nochmal, und ein schönes Wochenende…

Dennis =O)

#5

hallo dennis,

Ich danke Dir für Deine superausführliche hilfreiche Antwort!

gerne!

Ich hatte eigentlich nicht vor für jeden Browser
unterschiedliche .css dateien zu machen :o)

wenn du eine seite entwickelst und du nicht im vorhinein weißt, dass dort nur benutzer mit einem speziellen browser draufkommen, also z.b. bei einem firmen-intranet, wo sowieso nur alle ie5 auf win98 verwenden, dann solltest du dies aber berücksichtigen.

beispiel 1:
du entwickelst wahrscheinlich deine seiten auf windows. dann wirst du die schriftgrößen wahrscheinlich so einstellen, dass du die schrift gut lesen kannst, also etwa 9 bis 11 punkt. dann wird in den meisten fällen ein mac-user auf deinen seiten nix mehr erkennen, weil die schriften zu klein kommen.

beispiel 2:
ein mac-user entwickelt seine seiten. dann stellt er die schriftgrößen auch so ein, dass die schrift normal zu lesen ist (also nicht zu klein und nicht zu groß = also etwa 9 bis 11 punkt). jetzt ist es wahrscheinlich, dass das layout bei einem windows-user völlig gesprengt wird, weil alle schriften viel zu groß sind.

aus professionellen web-seiten sollte man heute nicht mehr auf css und die entsprechende anpassung win / mac / etc verzichten.

das nur am rande,

grüße aus hh,
ulli.

Ich werd’ mal schauen ob ich das so ans laufen kriege :open_mouth:) bei
der erklärung sollte das ja kein problem sein!

Danke nochmal, und ein schönes Wochenende…

Dennis =O)