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 enthalten eine Positionierungsmethode für Artikel. Diese Methode basiert auf der Angabe spezifischer Koordinaten für jedes Element. In kaskadierten Stylesheets wird die Positionierung durch die position -Eigenschaft beschrieben, die die folgenden Werte aufweist:

  • absolut - der Ursprung der oberen linken Ecke.
  • Retativ - relative Positionierung, wobei "Null" entsprechend dem HTML-Code zugewiesen wird.
  • statisch - Die Position ist relativ zu den Werten des HTML-Codes konstant.
  • fixed - Fixieren eines Elements auf der Seite (das Element unterliegt nicht dem "Aufzug").

Sie können die Position eines Elements in CSS ändern, indem Sie es entlang der X-Achse (linke Eigenschaft), entlang der Y-Achse (obere Eigenschaft) und der Z-Achse verschieben (die Zuweisung von Ebenen bestimmt die Z-Index-Eigenschaft). Das Erstellen solcher Stile getrennt vom Tag ist nicht ratsam, da jede Position des Elements auf der Seite eindeutig ist. Beispiel: <DIV style = "position: absolut; oben: 200px; links: 160px; z-index: -1"> Seitenelement </ DIV>.

Mithilfe von Stilen können Sie Elementen auch Visualisierungseffekte hinzufügen, d. H. Ihr Aussehen und ihre Darstellung auf dem Bildschirm ändern. Die Sichtbarkeitseigenschaft und ihre sichtbaren Werte (das Element ist sichtbar), hidder (das Element ist nicht sichtbar) und collapse (blendet den Text oder die Elemente der Tabellen aus) soll die Transparenz des Elements ändern. Der Code ist in dieser Form geschrieben: style = "Sichtbarkeit: _wert " .

Zu beschneidende Bilder werden von der Clip- Style- Eigenschaft verarbeitet. Der Wert des letzteren wird als Rect bezeichnet, ihm werden Nummern zugewiesen, die angeben, welche Seite und wie viel das Bild geschnitten werden soll. Das Prinzip lautet:

STYLE = "clip: rect" ( _top_right_bottom_left) , wobei _top und andere die Zahlen in px für Bildschnitte auf jeder Seite sind und ihre Reihenfolge dieselbe ist.

Die overert- style- Eigenschaft ist dafür verantwortlich, das Element in dem ihm zugewiesenen Bereich zu rendern. Werte:

  • auto - das Erscheinungsbild der Bildlaufleiste, wenn die Größe des Elements größer als der Bereich ist.
  • scroll - das Erscheinungsbild der Bildlaufleiste unabhängig von der Größe der Elemente und des Bereichs.
  • hidder - das Element wird am Rand des Bereichs abgeschnitten.
  • sichtbar - das Element wird entlang der Grenzen des Bereichs gestreckt oder zusammengedrückt.

Die Bildschirmanzeige steuert die Anzeigeeigenschaft und ihre Werte:

  • none - Der Artikel wird nicht angezeigt.
  • Block - Das Element wird in einem separaten Absatz platziert.
  • Inline - Text in den aktuellen Absatz einfügen.
  • Listenelement ist ein Listenelement.
  • Tabellenblocktabelle (gilt nur für das <TABLE> -Tag ).
  • Inline-Tabelle - eine Texttabelle (gilt nur für das <TABLE> -Tag ).
  • Tabellenzelle ist eine Tabellenzelle (gilt nur für die Tags <TH> und <TD> ).
  • Tabellenspalte ist eine Tabellenspalte (gilt nur für das <COL> -Tag ).
  • Tabellenzeile ist eine Tabellenzeile (gilt nur für das <TABLE> -Tag ).
  • table-caption ist eine Blocktabelle (gilt nur für das <CAPTION> -Tag ).
  • Tabellenzeilengruppe ist eine Gruppe von Tabellenzeilen (gilt nur für das <TBODY> -Tag ).
  • Tabellenspaltengruppe - Tabellenspaltengruppe (gilt nur für das <COLGROUP> -Tag ).
  • Fußzeile-Gruppe - Eine Gruppe von Tabellenuntertiteln (gilt nur für das Tag <THEAD> ).
  • Tabellenkopfgruppe - Eine Gruppe von Tabellenköpfen (gilt nur für das Tag <THEAD> ).

Mit Stilen können Sie Elemente umschließen. Dies geschieht mithilfe der float -Eigenschaft, wobei der Wert von left einen Umbruch auf der linken Seite und rechts mit einem Rechtsumbruch angibt. Die clear- Eigenschaft wird auf dieselbe Weise angewendet (Auswahl der Elementseite, die nicht mit dem vorherigen Element in Kontakt stehen kann). Beispiel: IMG {clear: left} .

Aufgabe

Gestalten Sie auf der Grundlage des obigen Materials einen Satz von Stilen für Tabellen . Gleichzeitig müssen Sie den Code zunächst manuell anwählen, damit der Name der Eigenschaften und ihre Werte besser gespeichert werden. Anschließend können Sie Ihr Wissen in HTML-Editoren einsetzen , in denen integrierte Tools zum Zeichnen von Kaskadierungsblättern von CSS- Stilen vorhanden sind.