HTML und CSS für Designer

Absatzformate

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Absatzformate können in CSS eine große Anzahl von Einstellungen abbilden, die auch aus Kreativprogrammen bekannt sind.

Transkript

Nachdem unser HTML-Dokument den Zeichensatz "Exo 2" kennt, und der auch für den gesamten Anzeigebereich gilt, müssen wir die unterschiedlichen Zeichenformate aus der Vorgabe den einzelnen Bereichen in den HTML-Dokument auch zuordnen. Schauen wir uns an, was wir hier haben. Fangen wir einmal mit dem ganz normalen Fließtext an. Ich mache hier mal einen Klick rein, hier habe ich nun die Angabe, dass diese Schrift mit "Exo 2" mit 18 vorgenommen wurde. Es gibt noch eine weitere Angabe, das sieht man am allerbesten, wenn wir jetzt wirklich mal ins Absatzformat gehen. Zwar haben wir einmal die "Exo 2", die Größe 18 und den Abstand, also den Abstand zur nächsten Zeile mit 12 Pixel, und jetzt können wir in der CSS-Datei selbstverständlich Pixel verwenden. Das Problem ist aber, dass bei Pixelwerten in der Regel es sich immer um feste Werte handelt, also im Gegensatz zu Pixel als fixer Maßeinheit kann man mit einer anderen Maßeinheit besser arbeiten, und die Rede ist von "em". Es ist eine dynamische Maßeinheit, und da gibt es eine kleine Unterscheidung, d. h., es gibt "em" und es gibt "rem", und theoretisch könnten sie sogar Prozent in die Reihe einordnen. also "Prozent" gleich "em" gleich "rem" mit einem kleinen Unterschied. "em" geht immer, dafür wechseln wir mal kurz ins HTML-Dokument. "em" geht davon aus, was das Objekt der Eltern-Container für eine Zuweisung hat. Habe ich also hier für die "section", beispielsweise, eine "em"-Größe verwendet, von 1, dann orientiert sich der "article", "h2", "p" etc. an dieser 1. Wäre das hier eine 1,25, dann gilt auch dass in der Form, dass hier 1,25 für die "section" eingestellt wurde. Dann gilt für "article" wieder "em 1", aber "em 1" ist nicht mehr 100 %, sondern "em 1" ist 125 %,. das heißt, es baut also kaskadierend aufeinander auf, und verwenden sie ein "rem" -- das "r" steht für "root" -- dann orientiert sich das Ganze immer an der Angabe "html", und das wiederum ist nichts anderes wie die "root"-Größe, die im Browser definiert wurde. Das schauen wir uns auch mal ganz kurz an. Sie haben in jedem Webbrowser die Möglichkeit, Einstellungen aufzurufen. Hier haben wir -- ich bin mal bei Google+ hinein gegangen, -- die Möglichkeit über erweiterte Einstellungen, die Web-Inhalte Schrift. Die rufe ich mal auf und siehe da: wir haben Standardschriftarten: Schriftarten Serif und Schriftarten Sans Serif, und die stehen jeweils auf 16. Das bedeutet also, die Angabe "1 em" beziehungsweise "1 rem" ausgehend vom Root, ist 16 Pixel groß. Damit ist der Rest relativ leicht zu berechnen. Kommen wir dann zum Ansprechen. Schauen wir uns mal an. Wir sind also in einem Bereich "section". In dem Bereich "section" gibt es einen Unterbereich "article". Dort drin steht "h2", "p" und so weiter. Wenn ich jetzt eine Zuweisung an diesen HTML-Befehl setzen oder binden möchte, dann würde es zunächst einmal ausreichen, hier ein "p" hineinzuschreiben. Ich mache das schon mal. Wenn ich aber unterschiedliche "p"-s habe, einer kommt vielleicht im Bereich "section" vor oder im Bereich "article". Dann brauche ich wieder eine andere Formatierung in dem nächsten "article" oder z. B. hier unten im "footer", dann muss ich das spezifizieren. Für mich ist es jetzt so, ich möchte eine Formatanweisung schreiben für alle "p"-s, die sich innerhalb der "section" befinden, das bedeutet also auch hier, alle, die im "article" und so weiter drin sind. Also schreibe ich hier einfach vor: "section" und das war's. Jetzt gilt das für alle "p"-s, die im Container "section" enthalten sind. Was muss ich da nun noch eintragen? Also wechsele mal in InDesign zurück, sind hier in den Dialog, und dort habe ich ein Format "Exo 2 light", das kann ich mir schon mal merken, Größe 18 und den Abstand 12. Ich breche jetzt mal ab, gehen wir hier hin. Das erste, was ich machen möchte, ist die Größe. Entsprechend gibt es einen Befehl dafür, und der heißt "font-size". Die "font-size" ist 18 als Vorgabe, 16 ist ein "rem", Jetzt brauche ich nichts anders machen als 18 durch 16 zu teilen, und bekomme dann das Ergebnis 1,125. Da ich aber nur zwei Stellen hinter dem Komma verwenden kann, wird hier z. B. eine 1,13 rem draus. Das schauen wir uns schon mal schrittweise jetzt an. Ich rufe den Browser auf, und aktualisiere das. Man sieht, da hat sich schon was getan. Das kann man sogar schön mit dem InDesign-Dokument vergleichen. ich habe hier 125 % die schalte ich auf 100 %, und platziere das so, dass wir das erkennen können. Ich gehe zum Browser und setze den hier hin. Man sieht, die Größe ungefähr, die haut schon mal hin. Das passt. Allerdings ist das Teil noch zu dick. Das liegt daran, dass ich im InDesign ein "light" verwende. "light" ist aber die angabe 300, entsprechend gibt es ein "font-weight", die Schwere des fonts, und da muss ich nicht anderes machen wie 300 eintragen. Das speichere ich auch wieder, aktualisiere im Browser, und jetzt sieht das Ganze schon fast identisch aus. Der letzte Prozess, den ich nur noch machen muss, ist der Zeilenabstand. Der beträgt 12 Pixel. Teilen Sie die 12 durch 16, und Sie kommen auf einen Wert von 1,75. Das ist die "line-height" in CSS-Angaben. 1.75, hier brauche ich kein "rem" nehmen, es gibt keinen "root" Zeilenabstand hier, habe also die "em"-Angabe, das reicht aus. Wobei das auch kein Beinbruch wäre, selbst das könnte man eintragen, und ich aktualisiere das Ganze. und man sieht, das ist schon ziemlich gut und ziemlich genau. Und so geht das ganze Spiel nun weiter. Für die Überschrift "h2", Für Unter-Überschriften, für alle Textangaben in dem gesamten HTML-Dokument.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!