Index von CSS Lehrling

Auf dieser Seite:

Diese Seite ist das Inhaltsverzeichnis für den Teil CSS Lehrling. Ich verlinke hier alle Einzelseiten des Teils CSS mit deren Teaser und den dort behandelten Sprachelementen.

CSS - Updates

Ich lerne weiter, dies sind die letzten 10 überarbeiteten Dateien im Teil CSS
von www.lehrling.biefer.com:
webFarben26.10.2016
text26.10.2016
tabellen26.10.2016
syntax26.10.2016
navigationen26.10.2016
listen26.10.2016
linkstip26.10.2016
links26.10.2016
layout_biefercom26.10.2016
layout_3spaltig26.10.2016

Suche CSS

Nutzen Sie hier die Suche nach einem Sprachelement (oben rechts).

einfuehrung.php

Cascading Style Sheets (kaskadierende, abgestufte Formatvorlagen) formatieren meine Website. Der HTML Code soll nicht durchflochten werden mit den Angaben, wie Titel, Listen, Tabellen, Formulare, Zitate, etc. nun auszusehen haben, sondern diese Angaben werden separat in CSS-Anweisungen hinterlegt.

Sprachelemente in einfuehrung.php:

Trennung von Aussehen und Inhalt
Barrierefreiheit
Doctype

einfuehrung.php ansehen

syntax.php

Beim CSS beginnt alles bei der Wahl des Selektors, dem wird das Gewünschte Attribut verpasst und diesem ein Wert zugeordnet. Die drei Selektoren in CSS sind der Element-Selektor, der Klassen-Selektor und der ID_Selektor. Mächtig sind auch die Pseudoelement- und Pseudoklassen- Selektoren. Weiter wird hier gezeigt, wohin ein CSS-Style geschrieben wird, und ein Überblick über die wichtigsten CSS-Styles wird gegeben.

Sprachelemente in syntax.php:

Selektor{Attribut:Wert}
* {...}
Kind > Element Selektor
Nachbar + Element Selektor
Geschwister ~ Element Selektor
element[Attribut = "Wert"]
class="..."
:first-letter :first-line :first-child :last-child
:lang()
a:hover tr:hover
:enabled :disabled :checked
:before :after content
element:nth-child(3n)
:empty
:not :root
id="..."
<link ... />
@import url(...);
<style>...</style>
style="..."
<span> oder <div> Elemente
class oder id Selektoren
!important

syntax.php ansehen

box.php

Ob Titel, Text oder Container, man muss sich alles als eine Box vorstellen. Die Box kann eine Ausdehnung haben eine Margin (Aussenabstand), einen Rahmen und ein Padding (Innenabstand).

Sprachelemente in box.php:

width height
padding
margin
border

box.php ansehen

container.php

Container sind div-Boxen die ausserhalb des Codeflusses positioniert und sogar zum Fliegen gebracht werden. Die Grundposition erfolgt mit CSS, die dynamische Manipulation durch Javascript.

Sprachelemente in container.php:

<span></span> <div></div> <p><p/>
position: absolute, relative, fixed, static
position:fixed
z-index:
float:
overflow:auto
visibility:visible oder hidden

container.php ansehen

layout.php

Einzelne Seitenbereiche wie der Platz für das Firmenlogo, die Navigation und Inhalt, etc. werden voneinander abgetrennt und in Containern angeordnet.

Sprachelemente in layout.php:

Layout-Beispiele

layout.php ansehen

webFarben.php

Farben im Web werden durch ihre RGB Nummern oder hexadezimal Zahlenreihen angegeben.

Sprachelemente in webFarben.php:

rgb(255,255,255)
#fff

webFarben.php ansehen

text.php

Am Beispiel von Text werden hier die wichtigsten Gestaltungselemente gezeigt. Nebst der Schriftart und Schnitt lassen sich auch Hintergrund und Rahmen stylen.

Sprachelemente in text.php:

font-family: font-size: font-weight: font-style: font-variant: ...
text-align: text-indent: text-transform: text-decoration: capitalize; letter-spacing: word-spacing: line-height: ...
float: clear:
background-color:
margin:
padding:
border: border-color: border-width: border-style:
text-decoration:
<hr>

text.php ansehen

links.php

Durch die CSS Pseudoklasse ':hover' lassen sich praktisch alle Eigenschaften eines a-Tags ändern, Schriftfarbe, Schriftgrösse, Hintergrund, Rahmen, Textdekoration, Buchstabenabstände, etc. CSS lässt sogar Mouse-Over Effekte (ohne JavaScript) zu!

Sprachelemente in links.php:

a:link, a:visited, a:hover, a:active
background-image:
tr:hover

links.php ansehen

linkstip.php

Die meisten Tooltips sind Javascript. Dieses hier besteht bloss aus HTML Links und Span-Tags mit CSS. Eigentlich sind es Links Tips. Sie beruhen auf der Pseudoklasse a:hover.

Sprachelemente in linkstip.php:

a:hover

linkstip.php ansehen

bilder.php

Ein Bild an der Wand über dem Sofa ohne einen schmucken, goldenen Rahmen war früher undenkbar, auf einer Website wird ein Bild als Link per default mit einem blauen Rand dargestellt. Inzwischen kann ein Bild ein unterschiedliches Stück Rahmen auf jeder Seite haben.

Sprachelemente in bilder.php:

float: margin:
border: border-color: border-width: border-style:
vertical-align:

bilder.php ansehen

bilder_hintergrund.php

Ein Hintergrundbild kann in jedes Element gelegt werden, das eine Ausdehnung hat, nicht nur in den ganzen Body der Seite, auch in Paragrafen, in div- und span-Container, in Titel, in Tabellen und einzelne Tabellenzellen und in Bilder. Die Grösse des Elements wird nicht duch das Hintergrundbild beeinträchtigt.

Sprachelemente in bilder_hintergrund.php:

background-image:
background: und background-repeat:
background-position:
background-attachment:

bilder_hintergrund.php ansehen

bildgalerie.php

Ganz ohne JavaScript nur durch CSS werden diese Bildgalerien erzeugt. Die erste funktioniert über die Textlinks, die Zweite über die Thumbnails. Beide Navigationen können unabhängig vom grossen Bild positioniert und auch als Zeilen ausgelegt werden.

Sprachelemente in bildgalerie.php:

a:hover

bildgalerie.php ansehen

listen.php

Listen sind ein ausgezeichnetes Mittel um Stichworte aufzählend, Punkt für Punkt zu ordnen und zusammengefasst zu präsentieren. Eine Hierarchie ist dabei gewollt, entweder durch vorangestellte Zahlen oder in der Reihenfolge der Leserichtung. Dank CSS kann ich Listen endlich weniger einrücken, die Bullets davor dezenter gestalten, zu Pfeilen wandeln oder ganz weg lassen. Ich kann Listeneinträge sogar nebeneinander darstellen.

Sprachelemente in listen.php:

margin-left: padding-left:
list-style-position:
list-style-type:
list-style-image:
:nth-child(odd)
:first-child
display:block
display:inline

listen.php ansehen

tabellen.php

Viele Daten in Spalten gruppieren, das leisten Tabellen. Eine Tabelle zu strukturieren, das leisten die HTML Tabellenelemente und Attribute. Diese Struktur sichtbar und hörbar zu machen, das leistet CSS.

Sprachelemente in tabellen.php:

width: height:
table-layout:auto
table-layout:fixed
caption-side:
style='speak-header:always'
page-break-inside: avoid !important;
tr:hoover td:hoover
border-collapse: und border-spacing:
margin: und padding:
border-top: border-right: border-bottom: border-left:
empty-cells:show
:empty

tabellen.php ansehen

navigationen.php

Eine Navigation ist nichts anderes, als eine Liste von Links, wegen ihrer strukturierenden Eigenschaft und der möglichen Verschachtelung. Die Listeneinträge können traditionell senkrecht untereinander angeordnet werden, oder waagrecht nebeneinander in einer Zeile.

Sprachelemente in navigationen.php:

Navigations-Beispiele
opacity: 0.8; box-shadow:inset border-radius: text-shadow:
:first-child :last-child
a:hover:before, a[id]:before { content:"> "; }

navigationen.php ansehen

formulare.php

Sprachelemente in formulare.php:

<fieldset> <legend> <label>
scrollbar-base-color:
:enabled :disabled :checked

formulare.php ansehen

cursor.php

Der Corsor nimmt je nach Mausbewegung oder Untergrund unterschiedliche Formen an, die Auswahlmarke wird zur Hand, zum Pfeil oder zur Sanduhr; alle Formänderungen kann ich auch erzwingen.

Sprachelemente in cursor.php:

cursor:

cursor.php ansehen

IE_scroller.php

Der graue Scrollbalken, welcher erscheint, wenn die Seite grösser als das Browserfenster ist, und zwar rechts für die Höhe und unten für die Breite, kann leider nur für den InternetExplorer farblich verändert werden.

Sprachelemente in IE_scroller.php:

Golden Scrollbar

IE_scroller.php ansehen

css3.php

Mit CSS 3 können nun fancy Style-Effekte mit wenig Code erzielt werden. Die brauchbarsten sind runde Ecken, Box-Schatten und Transparenz. Farbverlauf, Text-Schatten und Rahmen-Bilder funktionieren nur im FF oder mit Prefix.

Sprachelemente in css3.php:

css3.php ansehen

css3transform.php

CSS 3 bringt Funktionalität, die es erlaubt dynamisch (aber ohne JavaScript) HTML Elemente zu verändern. Das Schlüsselwort heisst 'transform', die darauf folgenden Funktionen können Elemente skalieren, verschieben, rotieren und kippen. Und durch das Schlüsselwort 'transition' wird es möglich, Elemente sogar zu animieren, also die sonst sprunghaften Übergänge zu verzögern.

Sprachelemente in css3transform.php:

transform: scale(2, 2);
transform: translate(20px,-50px);
transform: rotate(45deg)
transform: skew(15deg, 15deg);
transition: all 3s ease-in;

css3transform.php ansehen

css3column.php

Sprachelemente in css3column.php:

column

css3column.php ansehen

Check den Code.

>> <<

Ich bin hier: > CSS Lehrling