Warum kostenlos registrieren?

Nur als registriertes Mitglied hast Du vollen Zugriff auf alle Funktionen unserer Website. So kannst Du eigene Fragen stellen und hast die volle Übersicht über neue interessante Themen im Forum.
Jetzt kostenlos registrieren.

Login


CSS-Style-Sheets

Vorschläge für Artikel hier posten.

CSS-Style-Sheets

Beitragvon jdominik am 04.12.2004, 17:23

Hi!

Jetzt hab ich mich mit CSS (Cascading Style-Sheets) beschäftigt.
Und jetzt will ich wenigstens das bisschen loswerden,
das ich für Wichtig halte.
Mehr wird noch kommen.

So sieht ein CSS aus:
Code: Alles auswählen
.namedescss
{
font-family: tahoma;
font-size: 50px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: maroon;
background: yellow;
}


font-family: Schriftart
font-size: größe der Schrift
font-weight: Bold fettet Schrift (so ungefähr: Text
font-style: Italic macht den Text schief (so ungefähr: Text
text-decoration: underline unterstreicht den Text (so ungefähr: Text
color: Legt die Farbe der Schrift fest
background: Schaut aus wie markierter Text oder mit Textmarker markiert.

Ein CSS muss immer so aussehen:
Code: Alles auswählen
.namedescss
{
Formatvorlage
}


Um ein CSS in eine HTML-Datei zu integrieren, muss der folgende Code zwischen die
Code: Alles auswählen
<Head>
-Tags geschrieben werden:

Code: Alles auswählen
<style type="text/css">
<!--
-->
</style>


Zwischen
Code: Alles auswählen
<!--
und
Code: Alles auswählen
-->
kommen dann die Formatvorlagen:

Code: Alles auswählen
<style type="text/css">
<!--
.titeldescss
{
Formatvorlage
}
-->
</style>


Zwischen jeder Vorlage muss eine freie Zeile stehen:

Code: Alles auswählen
<style type="text/css">
<!--
.titeldescss
{
Formatvorlage
}

.titelderzweitenvorlage
{
Formatvorlage
}
-->
</style>


Um eine CSS-Datei zu verlinken, muss zwischen
Code: Alles auswählen
<HEAD>
&
Code: Alles auswählen
</HTML>
folgenden Code schreiben:

Code: Alles auswählen
<link href="CSS/style.css" rel="stylesheet" type="text/css">


Dabei muss die Datei style.css im Ordner CSS existieren.
Der Ordner CSS muss sich im selben verzeichnis befinden,
wo auch die HTML-Datei ist:
C:\Website\index.htm
C:\Website\CSS\style.css

Um dem Browser zu sagen, wann welche Vorlage beginnt, muss folgender Code geschreiben werden:

Code: Alles auswählen
<p class="titeldercss">Text</p>


oder

Code: Alles auswählen
<span class="titeldercss">Text</span>


p: Ganze Absätze
span: einzelne Wörter

CSS-Dateien können ganz leicht mit dem Editor erstellt werden.
Wichtig ist nur, dem Browser mitzuteieln, wo die Vorlage anfängt und aufhört.

Wie ja gesagt, mehr folgt schon bald (vielleicht sogar schon heute).

Gruß Dominik![/list]
jdominik
 
Beiträge: 370
Registriert: 05.11.2004, 20:19
Wohnort: Zu Hause


Beitragvon jdominik am 04.12.2004, 18:06

Hi!

Hät nicht gedacht, dass ich so schnell fertig werde.
Aber hier der Rest:

Schriftart:
Code: Alles auswählen
font-family: tahoma;


Schriftstil
Code: Alles auswählen
font-style:italic;


italic oder oblique oder normal

Schriftvariante
Code: Alles auswählen
font-variant:small-caps; 


small-caps sind Kapitälchen.


Schriftgröße
Code: Alles auswählen
font-size:Wert; 


Etwa 12px, 14px, usw.

Schriftgewicht

Code: Alles auswählen
font-weight:bold; 


Fettet die Schrift

Wortabstand

Code: Alles auswählen
word-spacing:2px; 


1mm, 2px, usw. Kein %

Zeichenabstand

Code: Alles auswählen
letter-spacing:1mm;


1mm, 2px, usw. Kein %

Textdekoration

Code: Alles auswählen
text-decoration:underline;


underline: unterstrichen.
overline: überstrichen.
line-through: durchgestrichen.
blink: blinkend.

Texttransformation

Code: Alles auswählen
text-transform:none;


capitalize: Wortanfänge als Großbuchstaben.
uppercase: Nur Großbuchstaben.
lowercase: Nur Kleinbuchstaben.

Textfarbe

Code: Alles auswählen
color: #0000FF; 


#0000FF, blue oder rgb-werte

Achtung: Ich weiß nicht, ob noch mehr folgt. Gibt ja unendlich Attribute. Okay, nicht gerade unendlich, aber viele.

Hab noch ein paar Farben für die Schriften und den Marker-Effekt:

Code: Alles auswählen
black #000000
white #FFFFFF
grey #808080
red #FF0000
green #008000
yellow #FFFF00


Das waren dann die wichtigsten.
Hier noch mehr:

Code: Alles auswählen
maroon #800000
teal #008080
aqua #00FFFF
navy #000080
purple #800080
olive #808000
fuchsia #FF00FF
lime #00FF00


Also das war´s fürs erste.

Gruß Dominik!
jdominik
 
Beiträge: 370
Registriert: 05.11.2004, 20:19
Wohnort: Zu Hause



Ähnliche Themen


Zurück zu Artikeleingang

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste