Gegen Bilderklau - Das Original | Druckvorschau: Css

Geschrieben von Lauri am 06.04.2007 um 08:55:

Css

CSS-Tutorial
Jetzt schreibe ich mal schnell ein kleines Tutorial über CSS im Allgemeinen.
Alle CSS-Befehle werden entweder durch eine externe Datei oder im head-Bereich des HTML-Dokuments eingebunden.
Mit der externen Datei funktioniert das ganze so:
Ihr erstellt im Windows-Editor eine Datei, die ihr unter irgendeinem Namen mit der Endung .css abspeichert. Das ganze kann man sich wie einen include vorstellen. Die Datei verlinkt ihr dann im head-Bereich (zwischen <head> und </head>)wie folgt:
<link rel=“stylesheet“ typ= "text/css" href=”name.css”>
In diese Datei kommen dann die CSS-Befehle, die ich euch nachher erläutern werde.
Nun noch mal zu der zweiten Möglichkeit, den gesamten Stylesheet im Dokument zu definieren: Diese Möglichkeit hat einige Nachteile, da man dann überall den gesamten Stylesheet einfügen muss und bei Änderungen jede Seite ändern muss. Ich erläutere es jedoch trotzdem einmal, der Vollständigkeit halber:
Ihr Rahmt den gesamten CSS-Befehl in zwei Tags (<style typ=“text/css“> und </style>). Das ganze sieht dann wie folgt aus:
<style typ=“text/css“>
{
Befehl: Definition;
}
</style>
Das ist dann auch schon gleich das Rundgerüst was wir brauchen:
Befehl: Definition;
Genau so läuft das im gesamten Stylesheet ab. Ich liste euch hier mal die Befehle auf, die am meisten gebraucht werden. Man kann mit Stylesheets alles mögliche definieren:
body – definiert alles außerhalb einer Tabelle
a:link – definiert einfache Links
a:active – definiert Links, die grade besucht werden
a:visited – definiert Links, die schon besucht wurden
a:hover – definiert Links, die mit dem Mauszeiger berührt werden
table – definiert die Tabelle
td/tr – definiert die Zellen der Tabelle
textarea – definiert Textfelder in einem Formular
select – definiert das einfache Textfeld (?)

Zu diesen Befehlen kann man theoretisch jede beliebige Definition nutzen, ob es etwas nutzt ist eine andere Sache ;D
Jetzt nehmen wir die Definitionen, wie ich sie oben genannt habe, mal genauer unter die Lupe. Wenn man etwas Englisch beherrscht, dann kann man sich auch die Bedeutungen der Definitionen übersetzen ;D

font-family: Verdana;
font-size: 10pt;
color: #0DA5FF;
font-weight: bold;
font-style: italic;
text-algin: center;

Das sind jetzt erstmal die wichtigsten Befehle. Damit definiert man Schriftart, Schriftgröße, Schriftfarbe, das Gewicht der Schrift (bold=fett, wenn es normal sein soll einfach weglassen oder durch none; ersetzen), den Schriftstyle (italic=kursiv, hier gilt das gleiche wie bei font-weight) und die Ausrichtung (hier gibt es left, right, center, justify. Justify ist ein Blocksatz).
Hier noch ein paar andere Möglichkeiten (in Klammern einige Definitionsmöglichkeiten):

text-decoration: (none; overline; line-trough; underline;)
letter-spacing: (0.5em; -0.25em;…)
word-spacing: (0.5em; 2px; -1px;…)
border: (1px solid #000000;)
background-color: (#ffffff)
background-image: ( url(image.gif); )
scrollbar-3dlight-color: (#ffffff)
scrollbar-arrow-color: (#000000)
scrollbar-darkshadow-color: (#000000)
scrollbar-face-color: (#ffffff)
scrollbar-highlight-color: (#ffffff)
scrollbar-shadow-color: (#000000)
scrollbar-track-color: (#ffffff)
collapse: (collapse; separate;)

Hier mal ein kleines Beispiel:

{
body:
font-family: Verdana;
font-size: 10pt;
color: #000000;
text-algin: right;
letter-spacing: 0.3em;
}

Fehler bitte melden! Fragen könnt ihr hier auch stellen, ich garantiere aber für nichts ;D

Geschrieben von Greti am 06.04.2007 um 09:04:

RE: CSS-Tutorial

Schön

Endlich mal ein CSS-Tutorial.
Hatte das vor 10min erst gesucht und hab nichts gefunden xD

Geschrieben von Lauri am 08.04.2007 um 20:12:

Probiers mal mit aglin: center; (right; left Augenzwinkern

vllt. geht das. Hab mal gegoogelt, kam aber auch nix passendes außer das o.O

Geschrieben von Melli am 09.04.2007 um 12:37:

RE: CSS-Tutorial

Zitat:

Original von Greti

Schön

Endlich mal ein CSS-Tutorial.
Hatte das vor 10min erst gesucht und hab nichts gefunden xD

Es gibt noch ein Tut, von -Katja- glaub:
Tutorial: CSS

Aber das hier is echt gut (;

Nur, für was issen "word-spacing: (0.5em; 2px; -1px;…)" bzw "letter-spacing: (0.5em; 2px; -1px;…)" ?
Ansonsten kenn ich zwar schon viele Definitionen, aber manche hatte ich noch net gekannt (:

*Kekslaster.ablad*

Cantara, ich glaube, mit CSS geht das nich, aber mit HTML: setz einfach ein <center> vor das <table ...>-Teil xD

lG <3

Geschrieben von Lauri am 09.04.2007 um 12:39:

Das ist der Abstand zwischen Wörtern und Buchstaben ;D