7. Unterrichtsblock

Inhaltsverzeichnis

Width & Height
Outline
Text & Schriftarten
Icons

Width & Height

height und width wird verwendet, um die Höhe und Breite eines Elements festzulegen.
Die CSS max-width-Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen.

Dieses Element hat eine Höhe von 100 Pixel und eine Breite von 100 %.

CSS Einstellung von Höhe und Breite

Die Höhen- und Breiteneigenschaften enthalten keine Werte zu padding, border oder margin. Es legt die Höhe/Breite des Bereichs innerhalb der padding, der border und der margin des Elements fest.

CSS-Werte für Höhe und Breite

Die Eigenschaften height und width können die folgenden Werte haben:

auto– Dies ist die Standardeinstellung. Der Browser berechnet die Höhe und Breite
length– Definiert die Höhe/Breite in px, cm, etc.
%– Definiert die Höhe/Breite in Prozent des umgebenden Blocks
initial– Setzt die Höhe/Breite auf den Standardwert
inherit– Die Höhe/Breite wird vom übergeordneten Wert geerbt

Beispiel

.header {
  height: 200px;
  width: 100%;
}

.header .texte {
  height: auto;
  max-width: 50%;
}

Outline

Outline ist eine Linie, die um Elemente AUSSERHALB der Grenzen gezogen wird, um das Element „hervorzuheben“.

CSS Outline hat die folgenden Gliederungseigenschaften:

outline-style
outline-color
outline-width
outline-offset
outline

Stile

Die outline-styleEigenschaft gibt den Stil der Gliederung an und kann einen der folgenden Werte haben:

dotted– Definiert eine gepunktete Kontur
dashed– Definiert einen gestrichelten Umriss
solid– Definiert eine solide Kontur
double– Definiert eine doppelte Kontur
groove– Definiert eine 3D-gerillte Kontur
ridge– Definiert eine geriffelte 3D-Kontur
inset– Definiert eine 3D-Inset-Kontur
outset– Definiert einen 3D-Anfangsumriss
none– Definiert keinen Umriss
hidden– Definiert eine verdeckte Kontur

/*Syntax*/

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Dieses Element hat eine rote border und eine blaue Outline mit 50px.

Hinweis: outline weicht von border ab ! Im Gegensatz zur border wird outline außerhalb der border des Elements gezeichnet und kann andere Inhalte überlappen. Außerdem ist outline NICHT Teil der Abmessungen des Elements; Die Gesamtbreite und -höhe des Elements wird durch die Breite der Kontur nicht beeinflusst.

Text & Schriftarten

Text

CSS bietet viele Möglichkeiten, Text zu formatieren. Die color-Eigenschaft wird z. B. verwendet, um die Farbe des Textes festzulegen. Die Standardtextfarbe für eine Seite wird in der Körperauswahl definiert.

Beispiel

body {
  color: blue;
}

h1 {
  color: green;
}

Textfarbe und Hintergrundfarbe

In diesem Beispiel definieren wir sowohl die background-color Eigenschaft als auch die color Eigenschaft:

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Text in weiß – hintergrund in blau

Textausrichtung und Textrichtung

Es gibt folgende Möglichkeiten Text auszurichten und die Fließrichtung zu bestimmen:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Textausrichtung

Die text-align Eigenschaft wird verwendet, um die horizontale Ausrichtung eines Textes festzulegen. Ein Text kann linksbündig, rechtsbündig, zentriert oder im Blocksatz ausgerichtet werden.

Das folgende Beispiel zeigt zentrierten sowie links- und rechtsbündig ausgerichteten Text (linke Ausrichtung ist Standard, wenn die Textrichtung von links nach rechts ist, und rechte Ausrichtung ist Standard, wenn die Textrichtung von rechts nach links ist):

Beispiel

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Wenn die text-align Eigenschaft auf „justify“ eingestellt ist, wird jede Zeile so gestreckt, dass jede Zeile die gleiche Breite hat und der linke und rechte Rand gerade sind (wie in Zeitschriften und Zeitungen):

text-align: center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

text-align: right

div {
  text-align: justify;
}

text-align: justify

text-align: left

Text zuletzt ausrichten

Die text-align-last-Eigenschaft gibt an, wie die letzte Zeile eines Textes ausgerichtet wird:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

text-align-last: right

text-align-last: center

Text decoration

Die text-decoration-lineEigenschaft wird verwendet, um dem Text eine Dekorationslinie hinzuzufügen.Man kann auch mehr als einen Wert kombinieren, z. B. Überstreichen und Unterstreichen, um Linien sowohl über als auch unter einem Text anzuzeigen.

Eigenschaft	Beschreibung
text-decoration	Legt alle Textdekorationseigenschaften in einer Deklaration fest
text-decoration-color	Gibt die Farbe der Textdekoration an
text-decoration-line	Gibt die Art der zu verwendenden Textdekoration an (unterstrichen, überstrichen usw.)
text-decoration-style	Gibt den Stil der Textdekoration an (durchgehend, gepunktet usw.)
text-decoration-thickness	Gibt die Dicke der Textdekorationslinie an

Texttransformation

Die text-transform Eigenschaft wird verwendet, um Groß- und Kleinschreibung in einem Text festzulegen. Es kann verwendet werden, um alles in Groß- oder Kleinbuchstaben umzuwandeln oder den ersten Buchstaben jedes Wortes groß zu schreiben:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Die CSS-Textabstandseigenschaften

Eigenschaft	Beschreibung
letter-spacing	Gibt den Abstand zwischen Zeichen in einem Text an
line-height	Gibt die Zeilenhöhe an
text-indent	Gibt den Einzug der ersten Zeile in einem Textblock an
white-space	Gibt an, wie mit Leerzeichen innerhalb eines Elements umgegangen wird
word-spacing	Gibt den Abstand zwischen Wörtern in einem Text an

Textschatten

Die text-shadow Eigenschaft fügt Text Schatten hinzu. In seiner einfachsten Verwendung gibt man nur den horizontalen Schatten (2px) und den vertikalen Schatten (2px) an:

Text mit Schatten

h3 {
text-shadow: 2px 2px;
}

Als nächstes fügen wir dem Schatten eine Farbe (blau) hinzu:

Text mit Schatten

h3 {
  text-shadow: 2px 2px dodgerblue;
}

Nun fügen wir dem Schatten einen Unschärfeeffekt (5 Pixel) hinzu:

Text mit Schatten

h3 {
  text-shadow: 2px 2px 5px dodgerblue;
}

Weitere Beispiele für Textschatten

Textschatten auf weißem Text:

Text mit Schatten

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Textschatten mit mehreren Farben:

Text mit Schatten

h3 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Schriftarten (Fonts)

Die Wahl der richtigen Schriftart hat einen großen Einfluss darauf, wie die Leser eine Website erleben. Die richtige Schriftart kann eine starke Identität für eine Marke schaffen. Es ist wichtig, eine gut lesbare Schriftart zu verwenden. Die Schriftart wertet den Text einer Webseite auf. Es ist ebenfalls wichtig, die richtige Farbe und Textgröße für die Schriftart zu wählen.

Mindestgröße für Fließtext: 15px;
Optimal: 18px;
Maximale Wortzahl pro Zeile: 12-15 Wörter

**Links:** Sans-serif | **Rechts:** Serif

Generische Schriftarten

In CSS gibt es fünf generische Schriftfamilien:

Serifenschriften haben einen kleinen Strich an den Rändern jedes Buchstabens. Sie schaffen ein Gefühl von Formalität und Eleganz.
Sans-Serif- Schriftarten haben klare Linien (keine kleinen Striche angebracht). Sie schaffen einen modernen und minimalistischen Look.
Monospace- Schriftarten – hier haben alle Buchstaben die gleiche feste Breite. Sie erzeugen einen mechanischen Look.
Kursive Schriftarten ahmen die menschliche Handschrift nach.
Fantasieschriften sind dekorative/verspielte Schriften.

Alle verschiedenen Schriftnamen gehören zu einer der generischen Schriftfamilien.

Unterschied zwischen Serifen- und Sans-Serif-Schriftarten

Generische Schriftfamilie	Beispiele der Darstellung
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

Hinweis: Auf Computerbildschirmen gelten Sans-Serif-Schriftarten als leichter lesbar als Serifenschriften.

CSS -websichere Schriftarten

Websichere Schriftarten sind Schriftarten, die universell auf allen Browsern und Geräten installiert sind.

Fallback-Schriftarten

Es gibt jedoch keine 100 % vollständig websicheren Schriftarten. Es besteht immer die Möglichkeit, dass eine Schriftart nicht gefunden oder nicht richtig installiert wird. Daher ist es sehr wichtig, immer Fallback-Fonts zu verwenden.

font-family Das bedeutet, dass Sie der Eigenschaft eine Liste ähnlicher „Backup-Schriftarten“ hinzufügen sollten . Wenn die erste Schriftart nicht funktioniert, versucht der Browser die nächste und die nächste und so weiter. Beenden Sie die Liste immer mit einem generischen Schriftfamiliennamen.

Beispiel

Hier gibt es drei Schriftarten: Tahoma, Verdana und Sans-Serif. Die zweite und dritte Schriftart sind Backups, falls die erste nicht gefunden wird.

p {
  font-family: Tahoma, Verdana, sans-serif;
}

Schriftstil

Die font-style Eigenschaft wird hauptsächlich verwendet, um kursiven Text anzugeben.

Diese Eigenschaft hat drei Werte:

normal – Der Text wird normal angezeigt
icalic – Der Text wird kursiv dargestellt
oblique – Der Text ist „schief“ (schräg ist kursiv sehr ähnlich, wird aber weniger unterstützt)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Schriftstärke

Die font-weight Eigenschaft gibt die Stärke einer Schriftart an:

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Schriftvariante

Die font-variantEigenschaft legt fest, ob ein Text in einer Kapitälchenschrift dargestellt werden soll oder nicht.

Bei einer Kapitälchenschrift werden alle Kleinbuchstaben in Großbuchstaben umgewandelt. Die konvertierten Großbuchstaben erscheinen jedoch in einer kleineren Schriftgröße als die ursprünglichen Großbuchstaben im Text.

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Schriftgröße

Die font-size Eigenschaft legt die Größe des Textes fest.

Die Möglichkeit, die Textgröße zu verwalten, ist im Webdesign wichtig. Man sollte jedoch keine Anpassungen der Schriftgröße verwenden, um Absätze wie Überschriften oder Überschriften wie Absätze aussehen zu lassen.

Man verwendet daher immer die richtigen HTML-Tags, wie <h1> – <h6> für Überschriften und <p> für Absätze.

Der Wert für die Schriftgröße kann eine absolute oder relative Größe sein.

Absolute Größe:

Legt den Text auf eine angegebene Größe fest
Erlaubt einem Benutzer nicht, die Textgröße in allen Browsern zu ändern (schlecht aus Gründen der Barrierefreiheit)
Die absolute Größe ist nützlich, wenn die physische Größe der Ausgabe bekannt ist

Relative Größe:

Legt die Größe relativ zu umgebenden Elementen fest
Ermöglicht einem Benutzer, die Textgröße in Browsern zu ändern

Hinweis: Wenn man keine Schriftgröße angibt, beträgt die Standardgröße für normalen Text, z. B. Absätze, 16 Pixel (16 Pixel = 1 Em).

Schriftgröße mit Pixel

Wenn man die Textgröße mit Pixeln festlegt, hat man die volle Kontrolle über die Textgröße:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Schriftgröße mit EM

Damit Benutzer die Textgröße (im Browsermenü) ändern können, verwenden viele Entwickler em anstelle von Pixeln. 1em entspricht der aktuellen Schriftgröße. Die Standardtextgröße in Browsern beträgt 16 Pixel. Die Standardgröße von 1em ist also 16px. Die Größe kann mit dieser Formel von Pixel zu em berechnet werden: Pixel /16= em

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Im obigen Beispiel ist die Textgröße in em dieselbe wie im vorherigen Beispiel in Pixel. Mit der em-Größe ist es jedoch möglich, die Textgröße in allen Browsern anzupassen.

Leider gibt es immer noch ein Problem mit älteren Versionen des Internet Explorers. Der Text wird größer, als er sollte, wenn er vergrößert wird, und kleiner, als er sollte, wenn er verkleinert wird.

Hinweis: Unterschied em & rem: em orientiert sich am Eltern-Element und rem am Root-Element (Größe für den <body>)

Kombination aus Prozent und EM

Die Lösung, die in allen Browsern funktioniert, besteht darin, eine Standardschriftgröße in Prozent für das <body>-Element festzulegen:

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Google-Schriftarten

Wenn man keine der Standardschriften in HTML verwenden möchte, kann man Google Fonts verwenden. Google Fonts können kostenlos verwendet werden und es stehen mehr als 1000 Schriftarten zur Auswahl.

So verwendet man Google-Schriftarten

Man fügt einfach einen speziellen Stylesheet-Link im Abschnitt <head> hinzu und verweist dann auf die Schriftart im CSS. Hier wollen wir eine Schriftart namens „Sofia“ von Google Fonts verwenden:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <style>
    body {
      font-family: "Sofia", sans-serif;
    }
  </style>
</head>

Symbole (Icons)

So fügt man Symbole hinzu

Der einfachste Weg, ein Symbol zu einer HTML-Seite hinzuzufügen, ist mit einer Symbolbibliothek wie Font Awesome.

Man fügt den Namen der angegebenen Symbolklasse zu einem beliebigen Inline-HTML-Element (wie <i> oder <span>) hinzu. Alle Symbole in den folgenden Symbolbibliotheken sind skalierbare Vektoren, die mit CSS angepasst werden können (Größe, Farbe, Schatten usw.).

fontawesome Symbole

Um die Font Awesome-Symbole zu verwenden, geht man zu fontawesome.com , meldet Sie sich an und erhält einen Code, den man in den <head>Abschnitt der HTML-Seite einfügen kann:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Hinweis: Es ist kein Download oder Installation erforderlich!

<!DOCTYPE html>
<html>
  <head>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <i class="fas fa-cloud"></i>
    <i class="fas fa-heart"></i>
    <i class="fas fa-car"></i>
    <i class="fas fa-file"></i>
    <i class="fas fa-bars"></i>

  </body>
</html>

Bootstrap-Symbole

Um die Bootstrap-Glyphensymbole zu verwenden, fügen Sie die folgende Zeile in den <head>Abschnitt Ihrer HTML-Seite ein:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Hinweis: Es ist kein Download oder Installation erforderlich!

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>

    <i class="glyphicon glyphicon-cloud"></i>
    <i class="glyphicon glyphicon-remove"></i>
    <i class="glyphicon glyphicon-user"></i>
    <i class="glyphicon glyphicon-envelope"></i>
    <i class="glyphicon glyphicon-thumbs-up"></i>
  </body>
</html>

Google-Icons

Um die Google-Symbole zu verwenden, fügt man die folgende Zeile in den <head> Abschnitt der HTML-Seite ein:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Hinweis: Es ist kein Download oder Installation erforderlich!

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>

    <i class="material-icons">cloud</i>
    <i class="material-icons">favorite</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons">computer</i>
    <i class="material-icons">traffic</i>

</body>
</html>

Aufgabe

Probiere o.g. Codes aus.