This page has been robot translated, sorry for typos if any. Original content here.

Positionierung und Visualisierung von Seitenelementen

Positionierung und Visualisierung von Seitenelementen

Stile umfassen die Art und Weise, wie das Element mithilfe der Positionierungsmethode positioniert wird. Diese Methode basiert auf der Angabe der spezifischen Koordinaten für jedes Element. In Cascading Style Sheets wird die Positionierung durch die Eigenschaft position beschrieben, die folgende Werte aufweist:

  • absolut ist der Ursprung der oberen linken Ecke.
  • reativ - relative Positionierung, wobei "Null" entsprechend dem HTML-Code zugewiesen wird.
  • statisch - Der Speicherort ist relativ zu den Werten des HTML-Codes unveränderlich.
  • fixed - Fixieren des Elements auf der Seite (das Element unterliegt nicht dem "Elevator").

Sie können die Position eines Elements auch in CSS ändern, indem Sie es entlang der X-Achse (Eigenschaft links), entlang der Y-Achse (die Eigenschaft top) und der Z-Achse verschieben (die Eigenschaft z-index legt den Zweck der Ebenen fest). Es ist nicht ratsam, solche Stile separat vom Tag zu erstellen, da die Position jedes Elements auf der Seite eindeutig ist. Beispiel: <DIV style = "position: absolute; oben: 200px; links: 160px; z-index: -1"> ein Seitenelement </ DIV>.

Mithilfe von Stilen können Sie den Elementen auch Visualisierungseffekte hinzufügen, dh ihr Aussehen und ihre Darstellung auf dem Bildschirm ändern. Um die Transparenz des Elements zu ändern, wird die visibility- Eigenschaft aufgerufen und ihr visible- Wert (das Element ist sichtbar), hidder (das Element ist nicht sichtbar) und collapse (blendet Text- oder Tabellenelemente aus). Der Code ist folgendermaßen geschrieben: style = "visibility: _value " .

Bilder, die zugeschnitten werden müssen, werden mit der Eigenschaft clip style verarbeitet . Der Wert letzterer wird als rect bezeichnet und ihm werden Zahlen zugeordnet, die angeben, auf welcher Seite und wie stark das Bild zu trimmen ist. Das Prinzip ist das:

STYLE = "clip: rect ( _top_right_bottom_left) , wobei _top und andere die Zahlen in px der Bildbeschneidung von jeder Seite sind und ihre Reihenfolge unverändert ist.

Die Eigenschaft overlow style ist für die Visualisierung des Elements im angegebenen Bereich verantwortlich. Werte:

  • auto - das Aussehen des Scrollens, wenn die Größe des Elements größer als der Bereich ist.
  • scroll - das Aussehen des Scrollens, unabhängig von der Größe der Elemente und des Bereichs.
  • Hidder - das Element wird um die Grenze der Region herum abgeschnitten.
  • sichtbar - das Element wird an die Grenzen der Region gestreckt oder komprimiert.

Die Anzeige auf dem Bildschirm der Elemente passt die Anzeigeeigenschaft und ihre Werte an:

  • keine - Der Artikel wird nicht angezeigt.
  • Block - Das Element wird in einem separaten Absatz platziert.
  • Inline - fügt Text in den aktuellen Absatz ein.
  • Listenelement ist ein Listenelement.
  • Tabelle - Blocktabelle (gilt nur für das <TABLE> -Tag ).
  • Inline-Tabelle - Texttabelle (gilt nur für das <TABLE> -Tag ).
  • Tabelle-Zelle - Tabellenzelle (gilt nur für <TH> und <TD> -Tags).
  • Tabelle-Spalte - Spalte der Tabelle (gilt nur für das <COL> -Tag ).
  • table-row - die Zeile der Tabelle (gilt nur für das <TABLE> -Tag ).
  • Tabelle - Blocktabelle (gilt nur für das <CAPTION> -Tag ).
  • table-row-group - eine Gruppe von Tabellenzeilen (gilt nur für das <TBODY> -Tag ).
  • Tabelle-Spalten-Gruppe - Spalte-Tabellen-Gruppe (gilt nur für das <COLGROUP> -Tag ).
  • table-footer-group - Gruppe von Tabellen-Unterüberschriften (gilt nur für das <THEAD> -Tag ).
  • Tabellenkopfgruppe - Gruppe von Tabellenköpfen (gilt nur für das <THEAD> -Tag ).

Durch Stile können Sie die Elemente umlaufen lassen. Dies wird mit der Eigenschaft float erreicht , wobei der Wert links den Fluss von der linken Seite und von rechts angibt. In ähnlicher Weise wird die Clear- Eigenschaft (Auswahl der Seite eines Elements, die nicht mit dem vorherigen Element berührt werden kann) angewendet. Beispiel: IMG {clear: left} .

Aufgabe

Erstellen Sie basierend auf dem oben genannten Material eine Reihe von Stilen für Tabellen . Zur gleichen Zeit, um zu beginnen, wählen Sie den Code manuell , also merken Sie sich den Namen der Eigenschaften und ihrer Werte. Dann können Sie Ihr Wissen in HTML-Editoren einsetzen , wo es eingebaute Tools zum Kompilieren von CSS- Styles gibt.