HTML / CSS LEVEL 1

Teil 2

HTML / CSS

Struktur und Aussehen

CSS

Cascading Style Sheet
Definiert Aussehen der Web-Site

CSS3 vs. CSS2

CSS3 ist ein "living standard"
- Browser support http://caniuse.com
CSS und Graceful Degradation
Vendor Prefixes

CSS Syntax

Selektor

body p {
  font-size: 20px;
}

Eigenschaft

Wert

Basic Styling

Style Attribut auf Elementen
Text-Styling: font-size, font-family, text-transform, text-decoration, color etc.
Background: background-color, background-image, background-repeat etc.
Border: border-color, border-width, border-radius etc.

Long Hand vs. Short Hand

border: 1px solid black;

border-width: 1px;
border-style: solid;
border-color: black;

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

CSS Selektoren

Eine Sprache um HTML Elemente zu selektieren
Basis-Selektoren
- Element-Selektor
- Class-Selektor
Basis-Kombinatoren
- Descendant-Kombinator
- Child-Kombinator

Element-Selektor

p {
  font-size: 20px;
}

Selektiert alle Elemente vom gegebenen Typ
Beispiel: Alle Paragraphen auf der Seite erhalten den Style `font-size: 20px`

Freistil Übungen

Element Selektoren

Class-Selektor

.large {
  font-size: 20px;
}

Beginnt immer mit einem Punkt (.)
Selektiert alle Elemente mit gegebenem Namen im HTML Attribut `class`
Beispiel: Alle Elemente der Seite mit dem Attribut `class="large"` werden selektiert

Beispiele

<h1>Selektoren</h1>
<p class="large">Hi!</p>
<p class="error">Error!</p>

h1 {
  font-size: 40px;
}

.large {
  font-size: 20px;
}

.error {
  color: red;
}

Mehrere Selektoren

<p class="large"></p>
<p class="large error"></p>

p.large {
  font-size: 20px;
}

p.error {
  color: red;
}

p.large.error {
  background-color: red;
  color: white;
}

Freistil Übungen

Element und Class Selektoren

Descendant Kombinator

div p {
  font-size: 20px;
}

Mehrere Selektor-Gruppen durch Abstand (white space) getrennt
Selektiert Elemente die sich unterhalb der nächst höheren Gruppe befinden
Beispiel: Selektiert alle <p> Elemente die sich unterhalb eines <div> Elements befinden

Child Kombinator

div > p {
  font-size: 20px;
}

Mehrere Selektor-Gruppen durch > (grösser Zeichen / Pfeil) getrennt
Selektiert Elemente die sich DIREKT unterhalb der nächst höheren Gruppe befinden
Beispiel: Selektiert alle <p> Elemente die sich DIREKT unterhalb eines <div> Elements befinden

Beispiele

<div>
  <p>Hi!</p>
  <section>
    <p>Hi!</p>
  </section>
</div>

div p {
  text-size: 20px;
}

div > p {
  color: red;
}

Mehrere Selektoren und Kombinatoren

<div>
  <p>Hi!</p>
  <section class="a">
    <p class="b">Hi!</p>
  </section>
</div>

div p.b {
  text-size: 20px;
}

.a > p.b {
  color: red;
}

div > section p {
  background-color: blue;
}

CSS Selektor Sprache

Alle <p> Elemente, mit der Klasse error

die sich direkt unter

Elementen mit den Klassen container sowie large befinden

die sich wiederum irgendwo unterhalb eines <div> Elements befinden

div .container.large > p.error

Leerzeichen

Freistil Übungen

Selektor Kombinatoren

Ressourcen

https://developer.mozilla.org/de/docs/Web/CSS

http://wiki.selfhtml.org/wiki/CSS

http://www.w3schools.com/css/
(nicht immer sehr genau aber gut als Einstieg)

http://caniuse.com/

http://flukeout.github.io/
(super Tool mit Übungen, Danke Noah!)

JSBins

http://jsbin.com/novojo /edit

http://jsbin.com/qesini/edit

http://jsbin.com/nizaxu/edit

http://jsbin.com/gaqebo/edit