Positionierung und Visualisierung von Seitenelementen

Positionierung und Visualisierung von Seitenelementen

Styles umfassen ein Verfahren, das Element-Positionierungsverfahren installieren. Dieses Verfahren wird die Aufgabe zugrunde Koordinaten für jedes spezifische Element. Die Blattpositionierung Cascading Style beschrieben, die Position-Eigenschaft, die die Sachen aufgeführten Werte:

  • absolut - der Ursprung links oben.
  • retative - relative Positionierung, wobei "Null" im HTML-Code entsprechend zugeordnet ist.
  • statisch - Standort konsequent, relativen Werte von HTML-Code.
  • Fest - Befestigungselement auf der Seite (nicht Gegenstand Element "Lift").

Ändern Sie Position in der CSS-Element und können von ihm auf der X (links Eigenschaft) Achse, Y-Achse (oben Eigenschaft) und die Z-Achse (die Ernennung von Schichten bestimmt die z-index-Eigenschaft) ausgeglichen werden. Erstellen Sie diese Stile getrennt von der Tag ist nicht ratsam, da die Position jedes Elements auf der Seite eindeutig ist. Beispiel: <div style = "position: absolute; top: 200px; links: 160px; z-index: -1"> </ DIV> Element der Seite.

Styles auch ermöglicht es Ihnen , Elemente der Visualisierung Effekte hinzufügen, das heißt, ihr Aussehen zu verändern und die Art und Weise auf dem Bildschirm angezeigt werden soll . Ändern Sie die Transparenz Element soll die Sichtbarkeit Eigenschaft und deren Wert sichtbar (siehe Artikel), Versteckt (kein Element sichtbar ist ) und Zusammenbruch (Text verbergen oder Tabellenzellen). style = "Sichtbarkeit: _znachenie" Der Code wird in dieser Form geschrieben.

Bilder , die geschnitten werden soll, verarbeitet Clip Art Eigenschaft. Der Wert des letzteren genannt wird rect er Nummern zugeordnet, durch welche Seite anzuzeigen , und wie viel das Bild zu trimmen. Das Prinzip ist wie folgt:

Style = "clip: rect (_top_right_bottom_left ), wo _top usw. - in der Anzahl der Schnitte px Bilder von jeder der Parteien und deren Reihenfolge unverändert bleibt ..

Overtlow Stil - Eigenschaft ist für das Visualisierungselement verantwortlich darin Bereich gegeben. Werte:

  • Auto - das Aussehen bewegen, wenn die Elementgröße größer ist als die Region ist.
  • bewegen - nach Auftreten, unabhängig von der Größe der Elemente und das Feld.
  • Versteckt - Element ist mit der Grenze geschnitten.
  • sichtbar - das Element wird durch die Grenzen des Feldes gedehnt oder komprimiert werden.

Angezeigt werden die Einträge auf dem Bildschirm passt die Anzeigeeigenschaft und seinen Wert:

  • keine - das Element wird nicht angezeigt.
  • Block - Element wird in einem eigenen Absatz.
  • Inline - Einfügen von Text in den aktuellen Absatz.
  • list-item - Artikel.
  • Tabelle - ein Tabellenblock (gilt nur für den Tag <TABLE>).
  • inline-table - Texttabelle (gilt nur für den Tag <TABLE>).
  • table-cell - die Zellentabelle (gilt nur für Tags <TH> und <TD>).
  • Tisch-Spalte - Spalte der Tabelle (gilt nur für Tag <COL>).
  • table-row - Zeile der Tabelle (gilt nur für den Tag <TABLE>).
  • table-caption - Blocktabelle (gilt nur für Tag <CAPTION>).
  • table-row-Gruppe - eine Gruppe von Zeilen in der Tabelle (gilt nur für den Tag <TBODY>).
  • table-column-Gruppe - eine Gruppe von Spalten in einer Tabelle (gilt nur für Tag <COLGROUP>).
  • table-footer-Gruppe - eine Gruppe von Unterschriften der Tabelle (nur <THEAD> zu markieren).
  • table-header-Gruppe - eine Gruppe Kopftabelle (gilt nur für Tag <THEAD>).

Durch Stile machen können Elemente wickeln. Dies wird durch die Verwendung der Eigenschaften des Schwimmers erreicht, wo der linke Wickel Wert auf der linken Seite und der rechten Seite mit der rechten Seite zeigt. In ähnlicher Weise wird klar Eigenschaft (die Wahl des Elements Seite, die nicht in Kontakt mit dem vorhergehenden Punkt kommen können) verwendet. Beispiel: IMG {clear: left}.

Job

Basierend auf dem obigen Material eine Reihe von Stylesheets zu machen. Zur gleichen Zeit , um die Wahl Code von Hand zu starten, so wird es in Erinnerung am besten den Namen der Eigenschaften und deren Werte. Sie können dann ihre Kenntnisse in HTML-Editor zu verwenden, die Werkzeuge Blätter für die Erstellung von Cascading Style CSS-in gebaut hat.