Mitschrift 23.04.2014
TAG 12Umstellung von Live-Meeting auf Lync
Regelliste zur Wertigkeit von Selektoren:
- Globalselektor
- unterste Ebene für Schriften und sonstige allgemeingültige Angaben!
- * {font-family:...;}
- Element-Selektoren
- formatieren alle Elemente eines Dokuments (grundsätzlich!)
- Bsp: alle <h1> sollen standardmäßig in roter Schrift erscheinen
- Lösung: h1{color: red;}
- Klassen-Selektoren
- formatieren nur Elemente die eine Attribuierung über class="" mit der dazugehörigen KLasse erhalten haben.
- Bsp: einige <h1> Elemente sollen nicht rot, sondern grün formatiert werden.
- Lösung:
- CSS-Angaben im Head: .gruen {color: green;}
- HTML-Angaben im Body: <h1 class="gruen">...</h1>
- Unterscheidung:
- elementunabhängige Klassenselektoren
- .gruen {color: green;}
- dieser Klassenselektor ist für jedes beliebige Element einsetzbar: h1, p,...
- elementabhängige Klassenselektoren
(noch wertiger als unabhängige!!!) - h1.gruen {color: green;}
- dieser Klassenselektor greift nur beim Element h1!
- Frage: Warum gibt es elementabhängige Klassenselektoren?
- Antwort:
angenommen ich erstelle zwei Button (einen über das <button>-Tag,
den anderen über das <input>-Tag) Beide bekommen eine Klasse, die
von 2 verschiedenen Elementarten benutzt wird.
Jetzt kann ich definieren, dass die input-Ausgabe anders formatiert werden soll, als die button-Ausgabe: - input.interaction {color: red;}
- button.interaction {color: blue;}
- -> so haben beide Button eine andere Schrift
- !!! Vorteil: wir können auch elementunabhängig ein default geben, quasi übergeordnete Formatierung der Klassenselektoren:
- .interaction {font-size: 2em;}
- Voraussetzung dafür: die Elemente müssen über verschiedene Tags gesteuert werden!
- ID-Selektoren
- #idselektor: hat die Eigenschaft immer mit einer führenden # anstelle eines Punktes gekennzeichnet zu sein
- Bsp.: #main {color: yellow;}
- body: : Attribuierung pnnerhalb eines Elements geschieht über eine ID
- CSS-Angaben im Head: #main {color: yellow;}
- HTML-Angaben im Body: <h1 id="main">...</h1>
- und CSS-Angaben im HTML-Text
- direkte Eingabe im HTML-Text über das style-Attribut hat die höchste Priorität
 |
| Hierarchiestufen in der Ausgabe visualisiert im firebug (durchgeschstichene Definitionen in den Selektoren auf der rechten Seite der CSS-Angaben) |
Webfonts / Google Schriftarten
Aufgabe: nach webfont googlen
erster Treffer: Google Fonts
Das sind 632 Schriftfamilien, die wir nutzen können
eine Schrift auswählen durch Button "Add to Collection": Patrick Hand SC
1) Choose the style:
Tachometer zeigt an, inwiefern die Schrift unser Lageverhalten verändern kann
3) add this code - Standard!
Inhalt der Reiterkarte kopieren und im Head meines Dokumentes angeben/einfügen.
Ein Link-tag!
wir referenzieren auf die google Fonts Seite:
<link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>
ERGO: Wir importieren stylesheet aus einer anderen Quelle.
4) Integrate the fonts into your CSS
Dann muss ich es in mein CSS-im Headbereich einfügen - mit Hilfe von Selektoren
 |
| Den Code kopieren & im Headbereich eintragen, dann im Style-Tag einen Globalselektor setzen |
<!doctype html>
<html>
<head>
<title>Web Fonts</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<style type="text/css">
/*anstatt alle Elemente aufzuzählen p, h1, h3, a, cite besser einen Globalselektor einfügen*/
*{
font-family: 'Patrick Hand SC', 'cursive';
font-weight: 900;
}
</style>
</head>
Tipp: Damit ich nicht alle Elemente definieren muss, für die die Schrift gilt, stelle ich die Schrift in einen Globalselektor!
Globalselektor: * {font-family angeben!!!}
anderes Beispiel - andere Schrift mit mehreren Styles (Strichstärken)
 |
| Schrift Dosis hat 7 Styles (mit verschiedenen Strichstärken) |
Hinweis: ich kann für alle Schriften die Strichstärke verändern:
- mit font-weight: 800; kann ich die Strichstärke verändern - also den Text fetter und dünner schreiben lassen.
- CSS4YOU > Schrift > font-weight
Der Browser interpoliert (frischt auf), wenn wir die Schriftbilder und Strichstärken verändern.
ABER: Immer wenn der Browser interpolieren muss, also die Schriften nicht physikalisch vorliegen, kann es Probleme geben, bspw. wenn man in pdf konvertiert etc.
ERGO: es macht Sinn, sich eine Schrift zu besorgen, die alle möglichen Schriftstärken abbilden kann, damit es später keine Probleme gibt.
mehrere Schriften einbetten:
 |
| mehrere Schriften einbetten |
Schriften sind Vektorgrafiken !!!
Hinweis: Joomla - Css vom Dozenten
Keine Kommentare:
Kommentar veröffentlichen