CSS 2015
Inhaltsverzeichnis
Cascading Style Sheets(css)
CSS stellt eine Erweiterung zu HTML dar, die dem Autoren einer Webseite zahlreiche Möglichkeiten der Formatierung zur Verfügung stellt. Im Grunde genommen sind Cascading Stylesheets jedeglich eine Ansammlung von Formatierungsregeln, mit deren Gebrauch das Aussehen der Inhalte einer Webseite bestimmt werden. Als HTML entwickelt wurde, war das Internet fast ausschließlich textbasiert. Formatierungsmöglcihkieten waren so gut wie keine vorhanden. Die erste Version von CSS gibt es bereits seit 1996. Eine grundlegende Neuerung war dabei die Möglichkeit das grafische Layout von Struktur und Text zu trennen. Dies hilft einem Webdesigner nicht nur den Überblick zu behalten, sondern verschnellert auch das Laden der Seite im Browser.
Verwendung von CSS
Es gibt drei Möglichkeiten CSS zu verwenden:
1. Man kann die Elemente in HTML wie folgt mit Style-Anweisungen ergänzen: STYLE={...;...;...};
Beispiel:
<tag style=font-family:arial Dies ist ein Text.</tag>
2. Man kann im head des HTML-Files Formate für Elementtypen, Typenklassen oder auch allgemeine Klassen angeben.
Beispiel:
<STYLE TYPE="text/css"> ... ... </STYLE>
3. Man kann die Anweisung in einer zusätzlichen Datei ablegen, welche dann im gewünschten File eingebunden werden kann.
Folgendes muss dazu um head des HTML-Files hinzugefügt werden:
<LINK REL=StyleSheet HREF=<Pfad zum CSS-File> TYPE=text/css>
Zuweisung von Eigenschaften
Die allgemeine Syntax sieht wie folgt aus:
<HTML-Element> {<Eigenschaft>:<Wert>;...}
Schriftformatierungen
Mit folgenden CSS-Eigenschaften können die Schriften formatiert werden:
| CSS-Eigenschaft | Beschreibung |
|---|---|
| font-family | Mit dieser Eigenschaft kann die Schriftart definiert werden. |
| font-style | Mit dieser Eigenschaft kann die Neigung der Schrift definiert werden. |
| font-variant | Mit dieser Eigneschaft kann die Schriftvariante definiert werden. |
| font-size | Mit dieser Eigneschaft kann die Schriftgrösse definiert werden. |
| line-height | Mit dieser Eigneschaft kann die die Höhe der Textzeile definiert werden. |
| font-weight | Mit dieser Eigneschaft kann die Strichstärke der Schrift definiert werden. |
| font-size-adjust | Mit dieser Eigenschaft kann die Höhe derKleinbuchstaben im Verhältnis zur ursprünglichen Schriftgröße definiert werden. |
| font-stretch | Mit dieser Eigenschaft kann die Breite der einzelnen Zeichen defniniert werden. |
Ausrichtung
Für die Ausrichtung gibt es text-align und vertical-align. Mit text-align wird die horizontale Ausrichtung festgelegt (linksbündig, rechtsbündig oder zentriert). z.B.
h1 {
text-align: left;
}
In diesem Beispiel wird die Überschrift h1 links ausgerichtet.
Mit vertical-align wird die vertikale Ausrichtung festgelegt (oben oder unten bündig). z.B.
h1 {
vertical-align: top;
}
In diesem Beispiel wird die Überschrift h1 ganz oben ausgerichtet.
Abstände
Es gibt 2 Arten von Abständen den äußeren Abstand und den inneren Abstand.
Mit dem äusseren Abstand wird festegelegt, welcher Abstand das Elementzu den andere Elementen haben soll. Dazu wird die Anweiung "margin" verwendet.
Mit dem inneren Abstand wird festgelegt, wechlen Abstand die inneren Elemente zum Rand des Elements haben soll. Dzu wird die Anweiung "padding" verwendet.
Pseudoformate
| Formatierung | Beschreibung |
|---|---|
| :link | für Verweise zu noch nicht besuchten Seiten |
| :visited | für Verweise zu bereits besuchten Seiten |
| :hover | für Verweise, während der Anwender mit der Maus darüber fährt |
| :active | für gerade angeklickte Verweise |
| :focus | für Verweise, die den Fokus erhalten |
Dies sind jedeglich nur ein paar Pseudoformate. Weitere Pseudoformate hier klicken
