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

body p {
  font-size: 20px;
}

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