|
  |
 Css |
Lauri
herzchenaugen()
Dabei seit: 21.05.2005
Beiträge: 5.603
Herkunft: Essen
Name: Laura
 |
|
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
__________________
Holzhacken ist deshalb so beliebt, weil man bei dieser Tätigkeit den Erfolg sofort sieht.
Albert Einstein.
|
|
06.04.2007 08:55 |
|
|
Melli
i will rest in pieces !!
Dabei seit: 28.01.2006
Beiträge: 4.692
Herkunft: DE
|
|
| 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 Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Melli: 09.04.2007 12:38.
|
|
|
09.04.2007 12:37 |
|
|
|
|
|
|
Impressum
|
vllt. geht das. Hab mal gegoogelt, kam aber auch nix passendes außer das o.O