Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- e1:css_boxen [2017/07/03 12:58] – admin03
+++ e1:css_boxen [2017/07/14 19:56] (aktuell) – admin03
@@ Zeile 9: / Zeile 9: @@
 angegeben:
-[[http://185.75.148.125:4444/beispiele/e1/divbox.html|Ausführbares Beispiel]]
+[[http://185.75.148.125:4444/infowiki/beispiele/e1/divbox.html|Ausführbares Beispiel]]
@@ Zeile 82: / Zeile 82: @@
 	}
 </code>
+Mit dem Attribut position kann man angeben, dass
+eine CSS-Box z. B. absolut positioniert wird. Mit
+den weiteren Attributen top, left, width und height
+kann man die Position und Größe in der Einheit px
+(engl, Pixel, Bildpunkt) festlegen. Für den Feinschliff
+einer CSS-Box gilt es zwischen margin (Abstand
+zu anderen CSS-Boxen), border (Rahmen) und
+padding (Abstand Inhalt zum Rahmen) zu unterscheiden.
+Die Zuordnung zeigt das nebenstehende
+Bild.
+Class und Id-Attribute
+Mit Hilfe der Attribute class und id können praktisch alle HTML-Elemente mit CSS formatiert werden.
+  * Das id-Attribut wird für Elemente verwendet, die nur einmal in einem HTML Dokument vorkommen, etwa einer Kopfzeile oder einem Menü.
+  * Das class-Attribut kann für immer wiederkehrende Elemente benutzt werden.
+In der folgenden Tabelle wird zusammenfassend dargestellt, wie die class und id-Attribute in einem
+HTML-Dokument mit den Formatierungen in einer CSS-Datei verknüpft werden.
+<html>
+<table>
+<tr><th>HTML</th><th>CSS</th><th>Erläuterung</th></tr>
+<tr><td>&lt;Elementname class = “Wert “&gt;</td><td>.Wert { CSS-Angaben }</td><td>Das class-Attribut wird in der
+CSS-Datei mit dem Punkt angesprochen.</td></tr>
+<tr><td>&lt;Elementname id = “Wert “&gt;</td><td>#Wert { CSS-Angaben }</td><td>Das id-Attribut wird in der CSSDatei
+mit dem # angesprochen.</td></tr>
+ </table>
+</html>
+====== Rahmen und Abstände ======
+{{ :e1:600px-box-modell.svg.png?direct&600 |}}
+Im visuellen Anzeigemodell wie Windows Fenster oder Android Activitys erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus:
+Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
+  * einem Innenabstand (padding),
+  * einem Rahmen (border) und
+  * einem Außenabstand (margin).
+Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.
+Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.
+Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom. Siehe auch [[https://wiki.selfhtml.org/wiki/CSS/Box-Modell|https://wiki.selfhtml.org/wiki/CSS/Box-Modell]]