Stylen & Formen mit CSS - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Stylen & Formen mit CSS

Tutorials

CSS - Einfaches Stylen und Formen

Jeder hat schon einmal mit Microsoft Word oder Excel gearbeitet. Jeder hat auch schon damit Briefe und Tabellen farblich gestaltet und formatiert. In der Webgestaltung wird dazu Cascading Style Sheets oder CSS genutzt. Das sind Formatvorlagen für Webseiten.
Der Umgang damit ist garnicht so schwer. An Hand einiger Beispiele wird hier deren Formatierung erklärt und gezeigt.

Eine sehr umfangreiche Hilfe bietet dazu die Webseite "#content {CSS:4you;}":
Diese Seite ist ein MUSS für alle Programmierer, da hier nicht alle Möglichkeiten ge-
nannt und genutzt werden können. Scheut euch nicht diese Formatierung einzusetzen.

Logo CSS4you

Es gibt 3 Möglichkeiten CSS-Anweisungen in die Homepage einzubinden:

1. Link im HEAD-Bereich:
Eine Textdatei anlegen und umbenennen (z.B. style.css) und in ein Verzeichnis auf den Server kopieren.
Dieses macht nur Sinn, wenn schon einige Dateien für das Objekt ausgelagert werden müssen oder die CSS-Datei sehr umfangreich ist. Dazu einfach in den HEAD-Bereich einfügen:

2. CSS-Verweise im HEAD-Bereich:
Hier werden alle Formatierungen direkt in den HEAD-Bereich eingefügt. Es wird keine separate Datei benötigt, da alle Informa- tionen dort hinterlegt sind. Die Formatie- rung muss, wie auch bei einer separaten  CSS-Datei, beginnen mit <style> und wird mit </style> beendet:

1. CSS-Feld im HTML/Widget Objekt:
Hier verhält es sich ähnlich wie unter Punkt 2, nur das hierbei kein Tags benutzt werden dürfen (<style>), da hier die für die Seite zuständige CSS-Datei mit eigenen Style- Informationennur ergänz wird. Es muss nur darauf geachtet werden, dass Verweise nicht ungewollt schon in Verwendung sind:

<link rel="stylesheet" type="text/css" href="ordner/meine-style.css" />

Die Datei-Namenvergabe ist frei wählbar.
Verweis mit und ohne "http://www." möglich.
Sinnvolle Ordnerstruktur und passenden Dateinamen verwenden!

<style type="text/css">
CCS-Anweisungen beginnen mit:
#EigeneForm (bei id-Verweis)
.EigeneForm (bei class-Verweis)
<style>

Die Namenvergabe ist frei wählbar.

Da hier die eigenen CSS-Anweisungen nur in der für die Seite bereits zuständigen Datei eingefügt/ergänzt werden, dürfen keine Tags verwendet werden.
Es wird direkt mit dem CSS-Verweis begonnnen.

Wann verwende ich beim Objekt den Verweis "id" und wann verwende ich den Verweis "class"?
Ganz einfach: Nutzt man in einem Objekt mehrere verschiedene Bereichs-Formatierungen, findet "class" Anwendung, komme ich mit einer Bereichs-Formatierung aus, findet "id" Anwendung. Es ist jedem selbst zu überlassen, welcher Verweis die beste und idealste Lösung ist. Dies ergibt sich meist in der Bearbeitung und kann notfalls problemlos abgeändert werden.
Zu erwähnen wäre noch die CSS-Formatierung im Objekt, die wegen der Übersichtlichkeit und der komplizierteren Änderung selten genutzt werden sollte. Trotzdem lässt es sich manchmal nicht vermeiden auch diese Formatierung einzusetzen.

Beispiel-Formatierung mit "id":

Beispiel-Formatierung mit "class":

Beispiel mit direkter CSS-Anweisung:

CSS-Anweisung:
#button
{
color:
#FF0000;
font-size: 12px;
font-weight: bold;
font-family: tahoma;
background-color:
yellow;
border: 2px solid
#000;
padding: 3px;
border-radius: 3px;
}



HTML-Code:
<div id="button">
Text-Beispiel nur mit gleichen Anweisungen möglich. Keine Trennung von Text und Button.
<br>
<button onClick="location='#'; return false;">
Beispiel mit Button
</button>
</div>

CSS-Anweisung:
.button
{
color:
#FF0000;
font-size: 12px;
background-color:
yellow;
border: 2px solid
#000;
padding: 3px;
border-radius: 3px;
}
.text {
color: #FF0000;
font-weight: bold;
font-size: 12px;
}

HTML-Code:
<font class="text">
Text-Beispiel mit getrennten Anweisungen. Trennung von Text und Button.
</font> <br>
<button class="button" onClick="location='#'; return false;">
Beispiel mit Button
</button>

HTML-Code:
<font style="
color: #FF0000;
font-weight: bold;
font-size: 12px;"
>
Text-Beispiel mit getrennten Anweisungen. Trennung von Text
und Button.
</font> <br>
<button style="color: #FF0000; font-size: 12px;
background-color: yellow;
border: 2px solid #000;
padding: 3px;
border-radius: 3px;"
onClick="location='#';
return false;"
>
Beispiel mit Button
</button>

Es wird hier keine separate CSS-Anweisung benötigt, da alle Style-Informationen enhalten sind.

Text-Beispiel nur mit gleichen Anweisungen möglich. Keine Trennung von Text und Button.
Text-Beispiel mit getrennten CSS-Anweisungen. Trennung von Text und Button.
Text-Beispiel mit getrennten CSS-Anweisungen. Trennung von Text und Button.

Abschließend noch einige Beispiel-Objekte im Vergleich mit verschiedenen CSS-Anweisungen.

Text-Formatierungen:

<button onClick="location='#'; return false;">
Beispiel-Button ohne Style-Informationen
</button>

<button id="button1" onClick="location='#'; return false;">
Beispiel-Button mit ID-Style-Informationen
</button>

CSS dazu:
#button1 { color: black; font-size: 12px; font-weight: bold; background-color: #D3D3D3; border: 2px solid #000; padding: 3px;
border-radius: 3px;"
}

<button class="button2" onClick="location='#'; return false;">
Beispiel-Button mit CLASS-Style-Informationen
</button>

CSS dazu:
.button2 { color: black; font-size: 12px; font-weight: bold; background-color: #D3D3D3; border: 2px solid #000; padding: 3px;
border-radius: 3px;"
}

<button style="color: black; font-size: 12px; font-weight: bold; background-color: #D3D3D3; border: 2px solid #000; padding: 3px; border-radius: 3px;" onClick="location='#'; return false;">
Beispiel-Button mit INT.-Style-Informationen
</button>

Text-Formatierungen:

© 2009 - 2018

Das ist ein Beispiel-Text ohne Style-Informationen

<p>&copy; 2009 - <?php echo date("Y"); ?></p>
<p>Das ist ein Beispiel-Text ohne Style-Informationen</p>

© 2009 - 2018

Das ist ein Beispiel-Text mit ID-Style-Informationen

<p id="text1">&copy; 2009 - <?php echo date("Y"); ?></p>
<p id="text2">Das ist ein Beispiel-Text mit ID-Style-Informationen</p>

CSS dazu:
#text1 { color: red; font-size: 14px; font-weight: bold;
font-style: normal;
}
#text2
{ color: #FF7929; font-size: 12px; font-weight: bold;
font-style: italic;
}

© 2009 - 2018

Das ist ein Beispiel-Text mit CLASS-Style-Informationen

<p class="text3">&copy; 2009 - <?php echo date("Y"); ?></p>
<p class="text4">Das ist ein <font class="text5">Beispiel-Text</font> mit CLASS-Style-Informationen</p>

CSS dazu:
.text3 { color: red; font-size: 14px; font-weight: bold;
font-style: normal;
}
.text4
{ color: #3E78FD; font-size: 12px; font-weight: bold;
font-style: italic;
}
.text5
{ color: yellow; font-size: 14px; font-weight: bold;
font-style: normal; text-decoration: underline;
}

© 2009 - 2018

Das ist ein Beispiel-Text mit INT.-Style-Informationen

<p style="color: red; font-size: 14px; font-weight: bold; font-style: normal;">&copy; 2009 - <?php echo date("Y"); ?></p>
<p style="color: #3E78FD; font-size: 12px; font-weight: bold; font-style: italic;">Das ist ein <font style="color: yellow; font-size: 14px; font-weight: bold; font-style: normal; text-decoration: underline;">Beispiel-Text</font> mit INT.-Style-Informationen</p>

Ergänzende Informationen zur Formatierung:
Style-Informationen zur Farbangabe können als X11 Farbname (red, yellow, black usw.) oder als HEX-Code (#FF0000) eingegeben werden. Dabei spielt die Groß- und Kleinschreibung keine Rolle. Wichtig ist beim HEX-Code das vorangehende Lattenkreuz #. HEX-Code die Paarweise die gleiche Zahl besitzen, können verkürzt dargestellt werden (z. B. #FF0000 = #F00; #CCFFCC = #CFC; #FFFFFF = #FFF).
Höherrangige Style-Informationen für die gleiche Objektformatierung werden vererbt. So kann (kein muss) auf eine wiederholende Eingabe abgesehen werden. Es findet z. B. in der Formatierung von Button und/oder Links Anwendung bei der Verwendung von Pseudo-Klassen:

.demoBtn1 { color: #7C6031; font-size: 12px; font-weight: bold; font-family: tahoma; background-color: #EEF6E8; border: 2px solid #7C6031; padding: 7px; border-radius: 5px; }
.demoBtn1:hover
{ color: #7C6031; font-size: 12px; font-weight: bold; font-family: tahoma; background-color: #B4DA9F; border: 2px solid #7C6031; padding-left: 15px; border-radius: 5px; }

.demoBtn2 { color: #7C6031; font-size: 12px; font-weight: bold; font-family: tahoma; background-color: #EEF6E8; border: 2px solid #7C6031; padding: 7px; border-radius: 5px; }
.demoBtn2:hover { background-color: #B4DA9F; border: 2px solid #7C6031; padding-left: 15px; }

Weitergehende Informationen über die Referenzen von Pseudo-Klassen gibt es hier.


Weitergehende Informationen über alle CSS-Referenzen hier:

Logo CSS4you
Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 3 Online
 » 6 Heute
 » 639 Woche
 » 3419 Monat
 » 41109 Jahr
 » 287687 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü