Stylen & Formen mit CSS - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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 Sheet oder kurz CSS genannt genutzt. Das sind Formatvorlagen für Webseiten.
Der Umgang damit ist garnicht so schwer. An Hand einiger Beispiele wird hier deren Formatierung gezeigt und erklärt. Probiere es dann aus!
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 CSS4 you
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:
Code für den <HEAD> Bereich
<link
rel="stylesheet"
href="ordner/meine-style.css"
/>

Die Datei-Namenvergabe ist frei wählbar.
Verweis auch mit  "http://www." möglich.
Sinnvolle Ordnerstruktur und passenden Dateinamen verwenden!
Code für den <HEAD> Bereich
<style>
#EigeneForm /*id-Verweis*/
.EigeneForm /*class-Verweis*/
</style>

Die Namenvergabe ist frei wählbar.
Code für den <BODY> Bereich
<!--
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 bei einem 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:
Code für den <HEAD> Bereich
#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;
}
Code für den <HEAD> Bereich
.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;
}
Code für den <HEAD> Bereich
/* bleibt leer */
Code für den <BODY> Bereich
<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>
Code für den <BODY> Bereich
<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>
Code für den <BODY> Bereich
<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>
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.
Code für den <BODY> Bereich
<button onClick="location='#'; return false;">
Beispiel-Button ohne Style-Informationen
</button>
Code für den <HEAD> Bereich
#button1 { color:black; font-size:12px; font-weight:bold;
background-color:#D3D3D3; border:2px solid #000;
padding:3px; border-radius:3px;" }
Code für den <BODY> Bereich
<button id="button1" onClick="location='#'; return false;">
Beispiel-Button mit ID-Style-Informationen
</button>
Code für den <HEAD> Bereich
.button2 { color:black; font-size:12px; font-weight:bold;
background-color:#D3D3D3; border:2px solid #000;
padding:3px; border-radius:3px;" }
Code für den <BODY> Bereich
<button class="button2" onClick="location='#'; return false;">
Beispiel-Button mit CLASS-Style-Informationen
</button>
Code für den <BODY> Bereich
<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 HTML-Style-Informationen
</button>

© 2009 - 2024

Das ist ein Beispiel-Text ohne Style-Informationen

Code für den <BODY> Bereich
<p>
&copy; 2009 - <?php echo date("Y"); ?>
</p>
<p>
Das ist ein Beispiel-Text ohne Style-Informationen
</p>

© 2009 - 2024

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

Code für den <HEAD> Bereich
#text1 { color: red; font-size: 14px; font-weight: bold;
font-style: normal; }
#text2 { color: #FF7929; font-size: 12px; font-weight: bold;
font-style: italic; }
Code für den <BODY> Bereich
<p id="text1">
&copy; 2009 - <?php echo date("Y"); ?>
</p>
<p id="text2">
Das ist ein Beispiel-Text mit ID-Style-Informationen
</p>

© 2009 - 2024

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

Code für den <HEAD> Bereich
.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; }
Code für den <BODY> Bereich
<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>

© 2009 - 2024

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

Code für den <BODY> Bereich
<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 HTML-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:
Code für den <HEAD> Bereich
<style>
.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;
}
</style>
Code für den <HEAD> Bereich
<style>
.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;
}
</style>

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


» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt