CSS Grundlagen Bildformate / 2021-10-14 / Matthias Edler-Golla, CC BY-SA 4.0

Themen

  1. Besprechung der 1. Übung
  2. CSS-Grundlagen
  3. CSS in Brackets schreiben
  4. Grafikformate fürs Web
  5. pixelbasierte Grafikformate
  6. vektorbasierte Grafikformate
  7. Hausaufgaben

Cyberduck

Hat das Hochladen via Cyberduck bei Euch geklappt?

Übung 1: Tim Berners-Lee

Bild von Paul Clarke - Eigenes Werk, CC-BY-SA 4.0

Ausnahmsweise schauen wir uns bei dieser Übung gemeinsam eine mögliche Lösung an…

Öffnet die Lösungsdatei – und schaut Euch den Source-Code an!

CSS

Håkon Wium Lie von Franco Folini

If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it.

Getting started with CSS

Der Erfinder:

Am 10. Oktober 1994 stellte Håkon Wium Lie in dem Artikel Cascading HTML style sheets – a proposal das Konzept der CSS vor. Seit 1995 arbeitet Lie im Rahmen des World Wide Web Consortium (W3C) an der Fortschreibung der W3C-Empfehlungen zu CSS
→ Wikipedia

CSS

  • Cascading Style Sheets
  • definiert die Darstellung von HTML (visuell oder später vielleicht auch mal akustisch)

HTML ist und bleibt das Fundament: es definiert Struktur und Inhalt!

Online Resourcen

Getting started with CSS

Warum CSS verwenden?

Orchid Beauty Theme von Kevin Addison

A demonstration of what can be accomplished through CSS-based design.

http://www.csszengarden.com/

  • Flexibilität bei Änderungen
  • Arbeitsteilung zwischen Programmierung, Redaktion, Design
  • Viel mehr Gestaltungsmöglichkeiten als HTML
  • Nur dadurch ist eine Trennung zwischen Inhalt und Aussehen möglich!

Grundlegende Syntax von CSS

CSS

/* konkrete Beispiele */
p {color:red;}
strong {color:blue;text-decoration:underline;background-color:grey;}
h1 {
   font-family:Arial;
   font-size:1.3em;
}

CSS ist es egal, ob Ihr alles in einer Zeile schreibt oder jedes Eigenschaft/Wert-Paar auf einer eigenen Zeile – macht es so, dass es für Euch übersichtlicher ist!

allgemeines CSS-Code-Prinzip

Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

CSS

/* einzeilig */
Selektor {Eigenschaft: Wert;}
Selektor {Eigenschaft_1: Wert; Eigenschaft_2: Wert; Eigenschaft_3: Wert;}

/* mehrzeilig */
Selektor {
   /* hinter jedem Eigenschaft-Wert-Paar muss ein Strichpunkt stehen! */
   Eigenschaft_1: Wert; 
   Eigenschaft_2: Wert;
   …
   Eigenschaft_x: Wert;
}

Geschweifte Klammern auf dem Mac

Um am Mac die geschweiften Klammern zu schreiben, müsst Ihr auf die alt-Taste und 8 bzw. 9 drücken…

Zusammenhang CSS/HTML

In CSS werden die HTML-Tags ohne Klammern referenziert!

HTML

<h2>Überschrift</h2>
<p>ein Satz mit <strong>sehr wichtigem</strong> Inhalt</p>

das dazugehörige CSS schaut dann so aus:

CSS

h2 {color:red;}
p {text-transform:uppercase;}
strong {text-decoration:underline;}

Wo schreibt man CSS-Angaben hin?

CSS-Angaben als externe Datei

Dies ist immer dann die beste Lösung, wenn eine Website aus mehr als einer HTML-Seite besteht!

  • sehr praktisch, weil man das Aussehen von beliebig vielen HTML-Seiten in einem Dokument festlegen und verändern kann
  • wird im Head-Teil des HTML-Dokuments verlinkt:

HTML

<html>
<head>
    <!-- relative Pfadangaben beachten! -->
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
[…]
</body>
</html>

CSS

body {
    background-color: white;
}

→ Hier kann eine CSS-Skelett-Datei heruntergeladen werden

CSS-Angaben innerhalb eines HTML-Dokumentes

Bitte verwendet dies nur, wenn Eure Website nur aus einer HTML-Datei besteht!

HTML

<html>
<head>
<style>
    body {
        background-color: orange;
        color: white;
    }
</style>
</head>
<body>
[…]
</body>
</html>

CSS/HTML Tag-Soup

… und dann geht auch noch folgendes – hätte ich Euch am liebsten gar nicht gezeigt! ;-)

Style-Informationen innerhalb eines HTML-Tags

  • nur sehr sparsam verwenden!
  • hebt die Trennung zwischen Inhalt (HTML) und Aussehen (CSS) auf und macht somit Websites nur schwer veränderbar!

HTML

<h3 style="background:#ccc;">Achtung!</h3>
<p>Dies nennt man eine <strong style="background:red;">Tag-Soup</strong>...</p>

Achtung!

Dies nennt man eine Tag-Soup...

CSS-Kommentare

Achtung, CSS-Kommentare haben eine andere Syntax als HTML-Kommentare!

CSS

/* dies ist ein einzeiliger CSS-Kommentar */

/*
dieser CSS-Kommentar geht
über mehrere zeilen
*/

HTML

<!--  dies ist ein einzeiliger HTML-Kommentar -->

HTML und CSS in Brackets

Genauso wie Ihr HTML in Brackets bearbeiten könnt, könnt Ihr dies mit CSS-Dateien machen!

Auch hierbei werden die Änderungen unmittelbar sichtbar, wenn Ihr einen aktive Live Preview in Google Chrome offen habt.

… Ihr könnt es gleich ausprobieren!

Was kann man stylen?

  • jeden HTML-Tag: html, body, h2, p, a, img, hr, ul, ol, li …
  • Sonderzeichen * – dies bedeutet jeder HTML-Tag ist betroffen

CSS

body {background-color:white; color:black;}
h3 {font-size:120%}
p {color:green;}
img {background-color:#ddd;}
* {color:red} /* das bedeutet, das alles rot wird… */

Demnächst lernt Ihr, wie man diese Auswahl noch verfeinern kann …

Schriftformatierung

  • nur typische Systemfonts sind einsetzbar (Webfonts lernt Ihr später kennen!)
  • Die Fonts müssen auf dem Computer des Users installiert sein
  • unbedingt mehrere Fonts angeben – den favorisierten Font an erster Stelle

Serifenlose Systemschriften

ABCDEFG abcdefg 1234

CSS

body {
   font-family: "Lucida Grande", "Trebuchet MS", Lucida, Verdana, Arial, Sans-Serif;
}

Systemschriften mit Serifen

ABCDEFG abcdefg 1234

CSS

body {
   font-family: Georgia, Times, Serif;
}

Schreibweise beachten:

  • Fontnamen, die ein Leerzeichen enthalten, in Anführungsstrichen angeben ("Trebuchet MS")
  • zwischen jedem Fontnamen ein Komma
  • Sans-Serif/Serif gibt den „kleinsten gemeinsamen Nenner“ an, wenn alle anderen Fonts nicht installiert sind – z.b. auf UNIX-Systemen!

Viele der Systemschriften sind gut lesbar, weil sie speziell für den Bildschirm optimiert wurden! Besonders beliebt bei Web-Designern sind die Schriften „Verdana“ und „Georgia“ – beide von Matthew Carter.

Schriftformatierung – Zusammenfassung

hier eine – nicht komplette – Übersicht, was man bei Schrift alles einstellen kann

CSS

body {
   font-family:"Lucida Grande","Trebuchet MS",Verdana,Arial,Sans-Serif;
   font-size:16px;              /* bitte nicht noch kleiner */
   line-height:1.5;             /* Zeilenabstand OHNE Masseinheit! */
   font-weight:bold;            /* fett */
   font-style:italic;           /* kursiv */
   text-decoration:underline;   /* unterstrichen */
   text-align:right;            /* rechtbündiger Text */
   text-transform:uppercase;    /* alles in GROSSBUCHSTABEN */
}

Farb-Angaben

CSS

p {
   /* Reservierte Namen für Farben */
   color: acqua;
}

h1 {
   /* Hexadezimal-Angabe */
   background-color: #FF6600;       
}

h2 {
   /* rot, grün, blau (jeweils in Prozent) */
   color: rgb(95%, 34%, 22%);
}

body{
   /* rot, grün, blau (jeweils von 0 bis 255) */
   background-color: rgb(255, 0, 0);
}

/* erzeugt halbtransparenten HG */
p {
   /* rot, grün, blau und Alpha-Wert (0 bis 1) */
   background-color: rgba(50, 30, 60, 0.4);
}

Tools:

Schaut mal nach: In Programmen wie z.B. „Photoshop“ werden in den Farbpaletten auch verschiedene Möglichkeiten angeboten, Farben zu definieren …

Vererbung

Vintage-Picture-Three-Girls von Beverly & Pack

Kinder erben Eigenschaften ihrer Eltern; HTML-Tags die Eigenschaften des übergeordneten Tags – z.B. des <body>

Für Elemente, die sich innerhalb des <body> befinden, muss man keine eigenen Schrift-Definitionen machen, wenn der gleiche Font usw. genutzt werden soll; dies gilt für folgende Eigenschaften:

  • font-family
  • font-size [Schriftgröße]
  • line-height [Zeilen-Abstand]
  • font-weight [fett oder nicht]
  • font-style [kursiv oder normal]
  • text-decoration [Verzierung des Textes]
  • color [Schriftfarbe]

CSS

body {
   font-family:"Lucida Grande","Trebuchet MS",Verdana,Arial,Sans-Serif;
   font-size:16px;
   line-height:1.5;
   font-weight:bold;
   font-style:italic;
   color:#444;
}

/* Elemente, die anders aussehen sollen, explizit ansprechen! */
h2 {
   font-family: Georgia, Serif;
}

CSS für Bilder

Photo by HaraldMM

CSS

img {
    /* damit wird das Bild immer so breit dargestellt,
    wie der „Container“, der das Bild enthält */
    width: 100%;

    /* fehlt diese Angaben, werden Bilder u.U. verzerrt dargestellt! */
    height: auto;
}

Achtung: Wenn Bilder eine geringer Pixel-Breite haben, als der Container, werden sie verpixelt dargestellt!

CSS

img {
    /* damit wird das Bild „mitwachsend“ dargestellt,
    bis es seine echte Pixelgröße erreicht hat;
    danach wächst es nicht mehr */
    max-width: 100%;
    height: auto;
}

max-width verhindert somit, dass Bilder verpixelt dargestellt werden.

Demo zu CSS Bildgrößen

Themenrelevanter Artikel online

Bitte schaut Euch diese Artikel an!

Grafikformate fürs Web

Pixel contra Vektor

Faustregel: Alles, was sich aus einfachen Linien und Flächen zusammensetzen läßt, kann als Vektorgrafik abgespeichert werden.

Detaillierte Artikel dazu online…

Web-Dateiformate (pixelbasiert)

Die Farbinformation werden Pixel für Pixel abgespeichert und dann wie Kacheln in einem Mosaik zu einem Bild zusammengesetzt.

Cursor 3200fach vergrößert

 
 

Web-Dateiformate 1: GIF

  • verlustreiche Kompression
  • interlaced (stufenweiser Bildaufbau beim Laden)
  • max. 256 Farben
  • Transparenz (Farben können komplett transparent sein)
  • Animationen sind möglich
  • Kann von allen Browsern dargestellt werden
  • Dateiendung: demobild.gif

Typische Verwendung

  • Kleine Grafiken (z.B. Icons)
  • Bilder mit homogenen, einfarbigen Flächen

ungeeignet für

  • Fotos
  • Detailreiche Grafiken

Problem GIF Transparenz

unschöne Artefakte an den Rändern des „Logos“…

Weil bei GIF-Transparenz wirklich nur exakt ein Farbton freigestellt wird, werden die Kanten sehr unschön!

Ihr müsst in diesem Fall für das „Logo“ ein anderes Grafikformat (.png oder .svg) verwenden!

Web-Dateiformate 2: JPG

JPG ist wahrscheinlich das Bilddatei-Format, das Ihr am häufigsten auf einer Website verwenden werdet.

  • verlustreiche Kompression
  • interlaced (stufenweiser Bildaufbau beim Laden)
  • Millionen von Farben
  • keine Transparenz!
  • keine Animationen
  • kann von allen Browsern dargestellt werden

typische Anwendungen

  • Fotos
  • Bilder mit Mustern

Achtung: Artefakte bei zu starker Kompression (rechts)

Fragipani von Swaminathan

Vergleich GIF/JPG

Falscher Einsatz von GIF

*Dateigröße: 113 KB*

Richtiger Einsatz von JPG

*Dateigröße: 70 KB*

Fotos nicht als GIFs sichern – schaut Euch bei diesem Beispiel den Himmel an!

… außerdem ist die GIF-Datei fast doppelt so groß wie die JPG-Datei – und lädt dementsprechend doppelt so lang …

Web-Dateiformate 3: PNG

hier ist das „Logo“ als .png statt .gif eingesetzt – keine Artefakte an den Rändern und sogar leichte Transparenz möglich

  • Das modernste Bildformat
  • Kompression muss nicht verlustreich sein
  • Im Bild enthaltene, halbtransparente Schatten passen sich automatisch dem jeweiligen Hintergrund an – siehe unten!
  • interlaced (stufenweiser Bildaufbau beim Laden)
  • 256 bis Millionen von Farben
  • Transparenz stufenlos einstellbar von 0% bis 100%
  • keine Animationen

Webexport (z.B. Photoshop)

Im Photoshop unter „Datei > Für Web und Geräte speichern…“

Schaut Euch die unterschiedlichen Dateigrößen an!

Webexport 2

Sonst sehen die Besucher Eurer Website erst das Bild, wenn dies komplett geladen ist!

Viele User denken dann, dass die Website nicht richtig lädt und „surfen“ weiter…

Pixelbasiert Bilder nicht vergrößert darstellen

Das Bild ist original nur 50px breit, wird hier aber vergrößert dargestellt

… sonst werden die Pixel unangenehm sichtbar und das Bild wirkt unschaft!

Das Original-Bild

Pixelbasierte Bilder nicht zu groß abspeichern!

Photoshop-Dialog zum Einstellen der Bildgröße

Verkleinert Eure Bilder so, dass sie nur so groß sind, wie Ihr sie auf der Website tatsächlich braucht! Sonst braucht Eure Website sehr lange, bis sie geladen wird!

Für das Web reicht es meistens, wenn Ihr die Bilder nicht breiter als 1200px abspeichert.

Dateigrößen

das oben gezeigte Bild, abgespeichert in verschiedenen Größen:

Größe               Dateigröße
-------------------------------
3840px  * 2160px    1500kB
1900px  * 1070px    356kB
1200px  * 675px     151kB
960px   * 540px     100kB
640px   * 360px     47kB
400px   * 225px     21kB

Das Bild mit der Größe von 3800px * 2160px braucht bei einer schnellen DSL-Verbindung immerhin 21 Sekunden zum Laden – das ist viel zu lange! In einem Mobilfunk-Netz ist die Wartezeit dafür auf jeden Fall noch sehr viel länger…

Die Bilder, die ich in meinen Skripten verwende, sind maximal 960px breit

Web-Dateiformate (vektorbasiert): SVG

Scalable Vector Graphics

Eines der wesentlichen Merkmale und Vorteile gegenüber der Rastergrafik ist die stufenlose und verlustfreie Skalierbarkeit.

Wikipedia

Vektorgrafiken basieren anders als Rastergrafiken nicht auf einem Pixelraster, in dem jedem Bildpunkt ein Farbwert zugeordnet ist, sondern auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert.

So kann beispielsweise ein Kreis in einer Vektorgrafik über Lage des Mittelpunktes, Radius, Linienstärke und Farbe vollständig beschrieben werden; nur diese Parameter werden gespeichert.

Im Vergleich zu Rastergrafiken lassen sich Vektorgrafiken daher oft mit deutlich geringerem Platzbedarf speichern.

Moderne Browser können Vektorgrafiken sehr gut darstellen, wenn man diese als SVG-Dateien abspeichert! Dies kann z.B. der Illustrator …

HTML

<img src="pix/demo-bild.svg" alt="demo bild">

<!-- wenn Ihr die Größe des Bildes anpassen möchtet -->
<img src="pix/demo-bild.svg" alt="demo bild" width="400" height="300">

Verwendung von SVGs

Atomkraft Nein Danke.svg von Anne Lund
  • Logos- und Schriftzüge
  • nicht zu komplexe Grafiken und Illustrationen
  • Linienzeichnungen

SVG-Source-Code

Der Source-Code einer SVG ist ähnlich wie HTML – man kann ihn sogar direkt ins HTML reinschreiben…

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="red" stroke-width="5" fill="blue"></circle>
</svg>

Weiterführendes

Chris Coyier hat einen guten Artikel geschrieben, was aktuell mit SVGs möglich ist …

Buchempfehlung zu SVG

https://abookapart.com/products/practical-svg

Harness the power and possibilities of crisp, performance-efficient SVG with Chris Coyier. From software basics to build tools to optimization, you’ll learn techniques for a solid workflow. Go deeper: create icon systems, explore sizing and animation, and understand when and how to implement fallbacks. Get your images up to speed and look sharp!

https://abookapart.com/products/practical-svg

Das Buch kostet als eBook $ 11.-

Übungen

jetzt gleich im Anschluss machen…

Tim Berners Lee CSS

Bild von Paul Clarke - Eigenes Werk, CC-BY-SA 4.0

Achtung: Das HTML für Tim Berners Lee muss zuerst fertig sein – dann erst macht es Sinn, das CSS dafür zu schreiben!

  1. Zieht den gesamten Ordner „01_tim-berners-lee" auf Bracket
  2. Startet „Live Preview“
  3. Öffnet die Datei „c/style.css“
  4. Schreibt das CSS so, dass die Tim-Berners-Lee-Website so wie die Vorlage aussieht
  5. Achtet auf die richtige Hintergrundfarbe sowie die unterschiedlichen Schriften für Überschriften und Fließtext (Überschriften: Verdana, Fließtext: Georgia)
  6. Schreibt die entsprechende CSS-Angabe, dass das Bild automatisch mitwächst, wenn man die Breite des Browserfensters verändert

Tip

Die exakte Hintergrundfarbe bekommt hier heraus, wenn Ihr die Vorlage z.B. in Photoshop öffnet und dort mit der Pipette den Farbwert aufnehmt…

ContinentenSpiel vervollständigen

  1. das ContinentenSpiel laden und entzippen
  2. entsprechend des Textes von einer HTML-Datei zur anderen verknüpfen
  3. die Datei- und Ordnerstruktur darf nicht verändert werden!
  4. am Ende muss man wieder auf der Startseite (index.html) landen…
  5. das Bild „white_florette.svg“ soll auf jeder Seite verlinkt werden, darf aber nur einmal im Ordner „pix“ vorhanden sein!
  6. das Stylesheet „style.css“ darf ebenfalls nur einmal verwendet werden und muss sich im Ordner „css“ befinden, dies sorgt u.a. dafür, dass der Hintergrund grau und die Schrift weiss ist…

Tip

Schaut Euch für diese Übungen noch mal das Kapitel über absolute und relative Links im Script von letzter Woche an!

Continentenspiel

Das „Spiel“ wird – wenn die Dateien richtig verlinkt sind – eine endlose Schleife …

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ContinentenSpiel</title>
    <!-- 
    ein Stylesheet für alle HTML-Dateien!
    relative Pfade jeweils anpassen
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Startseite</h1>

    <!-- 
    in die Ordner "europa/austria" eintauchen und dort die Datei "salzburg.html" ansteuern 
    -->
    <p>Nächstes Ziel: <a href="europa/austria/salzburg.html">Salzburg</a>, Austria</p>

    <!--
    das Bild befindet sich im Ordner "pix",
    der sich im gleichen Ordner wie "index.html" befindet
    -->
    <img src="pix/white_florette.svg" alt="Blumensymbol">
</body>
</html>

Demo

so sieht die 1. Verlinkung aus … Schaut in den Source-Code!

Hochladen nicht vergessen!

Bitte ladet immer, wenn Ihre eine Übungen fertig habt, diese auf den fk12-Web-Server hoch und kontrolliert, ob auch dort alles funktioniert!

…dann gibt es am Ende keine unangenehmen Überraschungen!

Danke!

Alle Scripte durchsuchen

Weitere Vorträge: