Übersicht über CSS Syntax Einstellungen

[Worgan]

Hallo zusammen,

ich bin es schon wieder!

Gibt es irgendwo eine Übersicht über die CSS Syntax.
Soll heißen eine Liste der möglichen "Befehle". Zum Beispiel was ich so alles mit Tabellen anstellen kann usw.
Ich habe schon einige Links gefunden aber das ist irgendwie nicht das was ich suche (z.B http://www.edition-w3c.de/TR/1998/REC-CSS2...l#heading-4.1.2  und viele wunderbare Beispielseiten).

Worgan
- der ewig suchende -

[Andreas]

Naja, die Standardantwort halt: SelfHTML ...

Andreas

[Worgan]

Hallo filmfacts,

irgendwie drehe ich mich dort immer im Kreis, oder es geht irgendwie nicht weit genug. Aber höchstwahrscheinlich liegt das mal wieder an meiner Art etwas zu lernen.
Eine Übersicht für "Dummies" wäre was schönes - ich lerne halt immer durch ausprobieren. Vermutlich wäre ich, wenn ich es richtig lesen würde, 30 mal schneller.

Trotzdem danke

[Andreas]

Noch einfacher und noch ausführlicher und noch mehr für Dummies und Fortgeschrittene als bei SelfHTML?

Schreib' Dir selbst 'ne Anleitung! ;-p

Natürlich mußt Du vernünftig lesen, was da steht. Das nimmt Dir wohl keiner nirgends ab. Das Leben ist kein Teller Mittag!

Wie einfach und tiefgehend hättest Du es denn gerne? Ist doch alles da: http://selfhtml.teamone.de/css/eigenschaften/index.htm

Ansonsten ist auch http://jendryschik.de/wsdev/einfuehrung/css/ ganz lesenswert.

Viele Grüße

Andreas (leicht verwundert)

[Ede]

Hi Worgan,

hast du die SelfHTML mal auf den Rechner geladen und in den Phase 5 eingebunden?
Dort findest du doch wirklich alles zu CSS, nach Themen geordnet und mit allem nötigen Hintergrundwissen. Ich habe damit alles rund um Webprogrammierung gelernt. Hab mir jetzt (zur Unterstützung der Arbeit von Stefan Münz) auch das Buch dazu gekauft.
Das liegt immer auf meinem Frühstückstisch. Ich lese gerne neben dem Frühstück her

Die HTML-Dateien eignen sich aber vorzüglich zum schnelles Suchen nach Problemlösungen und das Buch um sich das nötige Hintergrundwissen zu verschaffen.

[SteffenG]

Hallo,

@filmfacts, du läßt's ganz schön raushängen. Irgendwie... :?

@Worgan,

Es gibt da z.B. noch Tutorials auf zvon.org. Und auf gungfu.de/css habe ich noch einige mehr Links zusammengetragen. Da ist bestimmt was dabei, was deiner Art zu Lernen entspricht - hoffe ich


schöne Grüße
Steffen

[Conny]

Hallo Steffen,

...filmfacts, du läßt's ganz schön raushängen. Irgendwie...

Aber warum denn?
Wo er recht hat hat er doch recht!
Selfhtml ist und bleibt (auch für mich) die erste (und beste) Anlaufstelle in Sachen HTML und Peripherie.

Conny

[Worgan]

OK - ich denke Ihr habt mich überzeugt 8O !
Ich habe selfhtml auf dem PC - werde mich wohl dann doch mal daran machen das Teil richtig zu lesen :wink:

Aber wiederum danke für Euer Wohlwollen.

Martin

[Worgan]

@SteffenG

dein Links werde ich mir natürlich auch anschauen - vielleicht entspricht es ja wirklich mehr meiner Lernvariante :wink:

Schönen Tag noch.

Martin

[Gast_Tom._*]

Hallo Worgan,

CSS ist am Anfang etwas mühsam... auch wenn es eigentlich sehr einfach ist, aber die Erkenntnis kommt später.

Mir hat folgendes sehr geholfen:

http://www.systemhaus-brandenburg.de/downl...d/download.html

1.76 MB TopStyle Lite 3.10 - WIN - Lite Version kostenlos

Lad` dir das mal runter und installiere es. Wenn du dann css.Dateien öffnest oder erstellst, richtest du das vorher als Standardanwendung ein.

Diese kleine Programm zeigt dir einen fehlerhaften css.Syntax in rot an und es gibt auch Auswahlmöglichkeiten. Ich denke um einfach mal einen Einstieg mit Lernerfolgen zu erzielen ist das genau richtig.

In der Hoffnung weitergeholfen zu haben...

[Andreas]

@filmfacts, du läßt's ganz schön raushängen. Irgendwie...  :?

Verstehe ich jetzt nicht? Ich war weder unhöflich noch unpassend. Ich habe doch nur ganz normal einen Link genannt und den später noch verfeinert und noch eine zusätzliche Quelle erwähnt.

Dass ich darauf eingehe, wenn jemand sagt, er habe bisher nicht gelesen was ihm empfohlen wurde und findet es *deshalb* nicht hilfreich, ist doch wohl in Ordnung, oder? Und Smilies kannst Du deuten, ja?

"Top Style Lite" ist natürlich der CSS Editor schlechthin, der Tip war auch goldwert :-) Und sogar 'ne neue Version ... ich arbeite noch mit der 2.5er *g*

Grüße

Andreas

[Ed_Home]

ja, das kenne ich auch, selfhtm gibt mir manchmal mehr infos, als ich brauche.
meine Favoriten, neben self:
http://www.css4you.de/trickkiste/index.php und
http://www.drweb.de/verwaltung/index.shtml etc.

greetz 8)

[Worgan]

Wenn das so weiter geht werde ich wohl die nächsten Wochen nur noch Eure Links abarbeiten und Software downloaden und lesen und lesen und lesen ...............

Super, danke

[Netizen]

Wenn das so weiter geht werde ich wohl die nächsten Wochen nur noch Eure Links abarbeiten und Software downloaden und lesen und lesen und lesen ....

Hehe, oder ausdrucken und überall in Deiner Wohnung aufhängen ...

Aber zumindest bei Dr. Web sollte man vorsichtig sein, die schreiben auch 'ne Menge Stuß.

Gruß
n!

[Gast_Tom._*]

8O
guckstdu der programm, dann wird aus dir ruckzuck -der wenig suchende- 8)

[Gast_Tom._*]

hi worgan,

also eigentlich hab ich keine lust mehr, es ist spät und ich hab schon 2 gläser wein, aber ich will`s trotzdem nochmal versuchen dir zu erklären, weil ich die situation kenne. soll aber nicht heissen, dass es nicht das beste ist sich selber durchzubeissen - aber ab und zu tut unterstütung not.

so also ein praktisches beispiel zu anwendung:

deine beispielhafte ordnerstruktur:

dein ordner homepage
da sind drin:
[list]ordner stylesheets
ordner images
ordner includes
.html`s[/b][list]
--------------------------------

im ordner stylessheets gespeichert:

meinstyle.css

body [list]{
font-family: arial, sans-serif;
color: #000000;
font-size: x-small;
background-color: #FFFFFF;
}[list]
--------------------------------

jetzt wird das stylesheet im head-bereich
mit der .html-datei verlinkt:

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

--------------------------------

erläuterung:

du hast im ordner stylesheet eine datei "meinstyle.css" gespeichert und mit der html-datei verlinkt; d.h. in dem obigen fall:

- das im bereich body die

[list]{
schrift = arial
schriftfarbe = schwarz
schriftgrösse = xs
hintergrundfarbe = weiss
} [/b][list] ist

...und fertig ist das hexenwerk! (!!! vorsicht: doppelpunkt und strichpunkt beachten! keine html-attribut-schreibweise)

und so kannst du nach und nach alles designmässig einbinden und extern steuern. weiter will ich aber hier nicht gehen, sonst wirst wieder der ewig suchende...

feierabend für heute! :wink:

[Worgan]

@ Robin

Danke für den Tip mit Top Style lite. Das Teil ist ja wohl wirklich nur super. :idea:

Schönen Tag noch, muß jetzt was arbeiten - meine Baustellen rufen!

Martin[/quote]

[Ede]

Wenn ich mal eine Anmerkung einbringen darf:

Wer NN4-Kompatibilität noch einbauen will sollte:

- externes Stylesheet ins root-Verzeichnis. Weil NN4 Background-Image nur aus dem root-Verzeichnis lesen kann.

- für DIV-Container mit IDs arbeiten, CLASSES werden sonst fehlerhaft interpretiert.
Dabei wäre allerdings wieder zu beachten: Soll DHTML nach dem DOM-Prinzip zum Einsatz kommen, muss eine ID einmalig sein, wenn man mit getElementById arbeitet.

[SteffenG]

Hallo Ede,

Wer NN4-Kompatibilität noch einbauen will sollte (...)

Wer will oder sollte das wollen? :twisted:

Ansonsten: Danke für die Infos!


schöne Grüße
Steffen

[Netizen]

Wer NN4-Kompatibilität noch einbauen will sollte:

- externes Stylesheet ins root-Verzeichnis. Weil NN4 Background-Image nur aus dem root-Verzeichnis lesen kann.

Nicht ganz, NN4 kann aus jedem Verzeichnis lesen. Das einzige Problem ist, daß er relative Pfade im CSS als relativ zum HTML-Dokument interpretiert, nicht relativ zum CSS-file. In der Regel macht es aber ohnehin Sinn, dem NN4 ein eigenes Stylesheet zu verpassen, da spielt dann obiges keine wirkliche Rolle mehr.

Ich hab meine Stylesheets alle in einem Unterordner css, Ordnung muß sein.

- für DIV-Container mit IDs arbeiten, CLASSES werden sonst fehlerhaft interpretiert.

Inwiefen fehlerhaft?

Dabei wäre allerdings wieder zu beachten: Soll DHTML nach dem DOM-Prinzip zum Einsatz kommen, muss eine ID einmalig sein, wenn man mit getElementById arbeitet.

Eine ID muß ohnehin eindeutig sein, egal ob DOM verwendet wird oder nicht.

Gruß
n!

[Gast_Tom._*]

flasch:
<link rel="stylesheet" href="css/meinstyle.css" type="text/css">

ups, gerade gemerkt - der pfad muss natürlich in diesem falle heissen:

richtig:
<link rel="stylesheet" href="stylesheets/meinstyle.css" type="text/css">

bei mir heisst der ordner halt -css- daher war der pfad eben so, aber im obigen beispiel heisst er ja -stylesheets-, aber das musst du ja eh alles bei dir anpassen.

klappt es denn schon?!

[Worgan]

@ Robin
Die ersten Gehversuche waren noch etwas wackelig!
Langsam aber - glaube ich zumindest - verstehe ich was ich tue. :letsdance:

Grüße

Martin

[Ede]

Hi,

Warum NN4-Kompatibilität wurde an anderer Stelle schon besprochen.
Wer es sich leisten kann User auszuschließen, bitte.

Das mit der Interpretation von Links relativ zum Dokument empfinde ich als fehlerhaft, weil es eben andere Browser korrekt interpretieren.

DIV Container interpretier der NN4 wie Layer. Solange die Positionierung absolut ist (bei relativer Positionierung kann er gar abschmieren) ist alles in Butter. Bei Formatierung über style oder class hat er mir zum Teil ne leere Seite angezeigt oder sonstigen Müll produziert.
Die Problematik ist auch bei SelfHTML angesprochen.

Ich hab mich jetzt bei einem Projekt seit 2 Monaten mit dem Ganzen beschäftigt und bin zu dem Ergebnis gekommen, das über die ID die Formatierung am einfachsten ist.

Ich kann (wenn ich nicht absolut Positioniere) das ID für mehrere Bereiche verwenden, wenn ich nicht zwecks Positionierung darauf zugreifen will. Will ich mit getElementById drauf zugreifen hab ich Probleme und muß das über andere Objekte machen.

[Andreas]

Warum NN4-Kompatibilität wurde an anderer Stelle schon besprochen. Wer es sich leisten kann User auszuschließen, bitte.

Wobei dieses Argument meist von den Leuten kommt, die eine Seite gebastelt haben, die mit aufwändigen Javascriptbrowserweichen und lustig-verspielter Javascript-only-navigation die min. 10% User außen vor lassen, die Javascript deaktiviert haben.

Z.B. sehr viele öffentliche Einrichtungen, Banken, Sparkassen etc. ...

Muß halt jeder wissen, was er will. Ich für meinen Teil verzichte auf Browserweichen und arbeitsintensive Anpassung an verschiedene Browser und arbeite schlicht nach den Standards. Oh - dann wird ja auch im NN4 die Seite benutzbar angezeigt, ohne dass ich mich verrenken muß. Denke ich zu schlicht?

Andreas

[Worgan]

Nicht daß ich es verstehen würde - versuchen schadet ja nichts.

Was zum Geier ist NN4

Martin

[Worgan]

Ist es eigentlich wichtig welche Reihenfolge die zu formatierenden Bereiche in der CSS Datei einnehmen? :gruebel:
Z.B. Body, eigene Definitionen, Links usw.

Martin

[Gast_Tom._*]

Ist es eigentlich wichtig welche Reihenfolge die zu formatierenden Bereiche in der CSS Datei einnehmen?  Links

a:link
a:visited
a:hover
a:active

[Worgan]

Ich meinte eher eine allgemeine Reihenfolge für die Definitionen.
Das mit den Links hatte ich auch schon so kopiert :wink:
Oder ist es komplett egal ob ich erst auf eigene Styles verweise und dann z.B. eine Überschrift definiere, dann die Links - oder auch umgekehrt.
Also eigentlich im Chaos.
Im Top Style lite bekomme ich keine Fehler angezeigt, es funktionieren allerdings noch nicht alle Einstellungen. Möglicherweise verarsche ich mich hier aber auch gerade selbst indem ich Einstellungen durch andere gerade wieder aufhebe.

Martin

[Auge]

Ich meinte eher eine allgemeine Reihenfolge für die Definitionen.

Die Reihenfolge sollte schon logisch sein, damit du dich in den Definitionen
zurechtfindest. Aber ob du zuerst die Schriften formatierst und dann die Farben
des Hintergrunds, ist egal.
Bei bestimmten Angaben wird die Reihenfolge jedoch wichtig. Z.B., wie oben gezeigt, bei den
verschiedenen Zuständen von Links (link,visited,hover,active,focus).
Sinnvoll, wenn auch nicht zwingend erforderlich:
Erst die allgemeine Formatierung, dann die für den speziellen Einzelfall.

Beispiel:

QUELLTEXT

p {

margin:10px;

}



p.achtung {

width:400px;

padding:10px;

color:#400;

background-color:#F88;

border:3px double #F00;

}

Oben wird allgemein ein Außenabstand von 10 Pixeln festgelegt.
Für ein <p> der Klasse achtung wird diese Formatierung
übernommen und weitere für Schrift- und Hintergrundfarbe, sowie
für die Breite, den Innenabstand und einen Rand hinzugefügt.

der HTML Code sähe in Etwa so aus:

QUELLTEXT

<p>Laber schwafel s&uuml;z. Viel viel Text ...</p>

<p class="achtung">Achtung, hier fehlt etwas!</p>

Man könnte es in der css Angabe auch so schreiben:

QUELLTEXT

.achtung {

width:400px;

padding:10px;

color:#400;

background-color:#F88;

border:3px double #F00;

}

Dann würde diese Klasse für verschiedene Tags zur Verfügung stehen.

QUELLTEXT

<p>Laber schwafel s&uuml;z. Viel viel Text ...</p>

<h2 class="achtung">Achtung</h2>

<p class="achtung">Hier fehlt etwas!</p>

Soweit für heute,

Tschö, Auge

[Worgan]

@ Auge

Jetzt wird mir auch das mit den selbstdefinierten Klassen klar.
Ich wußte zwar das es geht, habe auch schon damit experimentiert, aber so richtig klar war es mir noch nicht.

Danke

Martin

[Gast_Tom._*]

... aber so richtig klar war es mir noch nicht.

Ich hab` den "Klack" gehört...

[Google Bot]