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

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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 genannt
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 WEB-Server kopieren.
Dieses macht nur Sinn, wenn schon einige Dateien für das Objekt ausgelagert werden mußten 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 Formatierung muss, wie auch bei einer separaten  CSS-Datei beginnen mit <style> und wird mit </style> beendet:
3. CSS-Feld im HTML/Widget Objekt:
Hier verhält es sich ähnlich wie unter Punkt 2, nur das hierbei keine Tags benutzt werden dürfen (<style>), da hier die für die Seite zuständige CSS-Datei mit eigenen Style- Informationen nur 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">
#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;
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 enthalten 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.

<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>

© 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:

.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; }

.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; }

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

Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 525 Heute
» 469 Gestern
» 1760 Woche
» 5711 Monat
» 75532 Jahr
» 322110 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt