Alle HTML-Elemente kann man sich als Boxen vorstellen.
Einige Boxen zwingen den Browser, das folgende Element auf einer neuen Zeile anzuzeigen (Block-Elemente).
Andere HTML-Elemente verändernden den Textfluss nicht (Inline-Elemente).
Weiter ist es möglich, eine Mischform aus Block- und Inline-Elementen zu erstellen, in dem man den Elementen als CSS-Eigenschaft display den Wert inline-block übergibt. Das kann nötig sein, um in einem Layout mehrere Block-Elemente nebeneinander darzustellen.
G6: Ich kann erklären, wie HTML-Elemente gestylt werden und wie das Styling in eine Webseite integriert wird.
F6: Ich kann HTML-Elemente mit CSS stylen und wende dazu verschiedene Selektoren und Eigenschaften an.
E6: Ich wende in meiner Webseite fortgeschrittene Techniken für das Styling an. (z.B. CSS-Variablen, SASS, Frameworks)
Blockelemente erzwingen einen Zeilenumbruch, das nachfolgende Element wird auf einer neuen Zeile angezeigt.
Das am meisten genutzte Block-Element ist das <div>-Element. <div> steht für Division und bezeichnet einen Abschnitt einer Webseite.
Die folgenden Elemente sind Block-Elemente, die fett geschriebenen kennen Sie bereits:
<address> / <article> / <aside> / <blockquote> / <canvas> / <dd> / <div> / <dl> / <dt> / <fieldset> / <figcaption> / <figure> / <footer> / <form>/ <h1>-<h6> / <header> / <hr> / <li> / <main> / <nav> / <noscript> / <ol> / <output> / <p> / <pre> / <section> / <table> / <tfoot> / <ul> / <video>
Inline-Elemente erzwingen keinen Zeilenumbruch, das nachfolgende Element wird auf der gleichen Zeile angezeigt.
Die folgenden Elemente sind Inline-Elemente, die fett geschriebenen kennen Sie bereits:
<a> / <abbr> / <bdo> / <br> / <button> / <cite> / <code> / <dfn> / <em> / <img> / <input> / <kbd> / <label> / <map> / <object> / <q> / <samp> / <script> / <select> / <small> / <span> / <strong> / <sub> / <sup> / <textarea> / <time> / <var>
Im Boxmodell wird jedes Block- und Inline-Block-Element von einer Box umgeben.
Für alle Breitenangaben sind sowohl fixe (px) als auch variable (em / % / vw / vh / vmin / vmax ) Einheiten möglich.
Prozentwerte (%) sind immer relativ zu ihren Elternelementen.
Geben Sie einem Element die CSS-Deklaration width: 50%, so ist es immer halb so breit wie der umliegende Container, egal, ob dies nun das Browserfenster oder ein definierter Elterncontainer ist.
Die Einheiten vw (für»viewportwidth«) und vh (für»viewportheight«) sind immer relativ zum Browserfenster.
50vw entsprechen der Hälfte des Browserfensters. Weitere Viewport-Einheiten sind vmin (1vmin = 1/100 der kürzesten Seite) und vmax (1vmax = 1/100 der längsten Seite).
em und rem sind typografische Einheiten
em verhält sich relativ zur Schriftgrösse des Elternelements
2em sind demnach doppelt so gross wie die Schrifftgröss im Elternelement
rem verhält sich relativ zur Basisschriftgrösse - die Basisschriftgrösse entspricht 16 px – sofern der Nutzer nichts in seinen Browser-Einstellungen geändert hat, gilt also: 1rem = 16px.
2rem entsprechen demnach 32px.
CSS unterstützt absolute Masseinheiten wie cm, mm oder pt. Für die Arbeit am Bildschirm sind sie nicht geeignet und sollten daher nicht verwendet werden.
Jede Box hat eine Breit width und eine Höhe height.
p {
width: 50%;
height: 30px;
}
Mit padding kann der Abstand des Inhaltes zum Rahmen (border) definiert werden.
Dabei kann jede Seite einzeln definiert werden:
padding-top / padding-right / padding-bottom / padding-left
Kurzschreibweise:
Es ist auch möglich, die Innenabstände über die Anweisung padding: zu definieren.
Die Reihenfolge der Werte gelten dabei im Uhrzeigersinn für top, right, bottom, left
p {
padding: 1px 2px 3px 4px; //top, reight, bottom, left
}
Der Rahmen border selbst kann ebenfalls definiert werden.
Dabei kann die Breite width, die Farbe color und das Strichmuster style angegeben werden:
Auch hier können die einzelnen Seiten und Bereiche separat definiert werden:
border-top-width / border-top-style / border-top-color
border-right-width / border-right-style / border-right-color
border-bottom-width / border-bottom-style / border-bottom-color
border-left-width / border-left-style / border-left-color
In der Regel verwenden wir aber auch hier die Kurzschreibweise:
p {
border: 1px solid black; //width, style, color
}
Der Aussenabstand vom Rahmen zur nächsten Box wird mit margin definiert.
Und auch hier können die einzelnen Seiten einzeln definiert werden:
margin-top / margin-right / margin-bottom / margin-left
Kurzschreibweise:
p {
margin: 1px 2px 3px 4px;
}
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
background-color: lightblue;
}
Die CSS-Eigenschaft box-sizing kümmert sich um die Berechnung der Grösse einer Box. Die folgenden Werte sind möglich:
content-box: (default)
Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte width und height berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin noch padding.
border-box: (empfohlen)
Die Werte width und height enthalten padding und border, aber nicht aber margin. Diese Einstellung kann im CSS einfach mit dem *-Selektoren auf alle Elemente angewendet werden und vereinfacht die Anwendung des Box-Modelles.
Mit der Anweisung float:left; oder float:right; können Element aus dem normalen Textfluss herausgenommen werden. Sie "schwimmen" dann nach rechts oder links innerhalb der umschliessenden Box. Diese Anweisung eignet sich besonders für Bilder, um sie von Text umfliessen zu lassen.
img{
float: left;
}
img{
float:right;
}
Bei der Positionierung von Elementen mit position:
muss zuerst festgelegt werden, wonach sich das Element bei seiner Ausrichtung richten soll:
position: static ist der Normalzustand. Das Element befindet sich im normalen Dokumentfluss.
position: relative ordnet Elemente relativ zu ihrer normalen Position an. Ein Browser berechnet also zunächst die Normalposition und verschiebt das Element anschliessend entsprechend den Angaben top, left, bottom oder right.
Absolute Positionierung (position: absolute) ist etwas komplizierter. Elemente mit dieser Positionierungsart ordnen sich relativ zum nächsten Elternelement an, das NICHT die normale Positionierung static hat. Gibt es kein Elternelement, auf das dies zutrifft, richtet sich der Browser nach html selbst. Häufiger ist jedoch der Fall, dass ein Element mit position: relative als Bezugspunkt definiert wird (ohne es über top, left, bottom oder right auch wirklich zu verschieben), sodass sich seine Kindelemente mit position: absolute immer daran ausrichten. Auf diese Weise ist es beispielsweise möglich, einen Button immer in der Ecke oben rechts anzuordnen.
Elemente mit Angabe von position: fixed orientieren sich immer am Viewport und bleiben auch beim Scrollen an der angegebenen Position.
position: sticky ist eine Mischform. Ein Element mit dieser Angabe wird so lange im normalen Dokumentfluss positioniert, bis eine definierte Position erreicht ist – von diesem Punkt an ist es fixiert.
zudem muss über die Eigenschaften top, left, bottom oder right festgelegt werden, in welche Richtung ein Element verschoben werden soll. Dabei sind alle numerischen Angaben erlaubt, auch negative. Die CSS-Eigenschaft position erlaubt dabei sehr freie Anordnungen von Elementen im Viewport.
Kapitel 13: Boxen, Seite 300
Boxmodell:
Block- und Inline-Elemente:
Test your Skills: