Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
e1:css_boxen [2017/07/03 12:58] – admin03 | e1:css_boxen [2017/07/14 19:56] (aktuell) – admin03 | ||
---|---|---|---|
Zeile 9: | Zeile 9: | ||
angegeben: | angegeben: | ||
- | [[http:// | + | [[http:// |
Zeile 82: | Zeile 82: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | |||
+ | 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, | ||
+ | HTML-Dokument mit den Formatierungen in einer CSS-Datei verknüpft werden. | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | CSS-Datei mit dem Punkt angesprochen.</ | ||
+ | < | ||
+ | mit dem # angesprochen.</ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ====== Rahmen und Abstände ====== | ||
+ | {{ : | ||
+ | |||
+ | 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, | ||
+ | * 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, | ||
+ | |||
+ | |||
+ | |||
+ |