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"
  • 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;

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

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

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

JSBins

HTML / CSS I - Teil 2

By Gion Kunz

HTML / CSS I - Teil 2

  • 2,515