Add DIV, um vorhandenes CSS-Stylesheet
Zeitgenössische Web-Design-Standards haben sich von der Erstellung von Layouts mit <TABLE> tags verschoben. Die viel flexibler und nützlicher <DIV> Tag ist der Weg zu gehen. Hier sind einige grundlegende best practices Sie sofort verwenden können auf Ihrer Website.
DIV-und Conquer
Der beste Weg, um ein DIV denken, ist wie eine Schachtel.
Es ist ein Container von Informationen, mehr nicht.
Das Tolle daran ist, dass es eine Box, die alles halten kann, ist, und kann die Art und Weise die Inhalte darin sieht zu ändern.
Es ist für "block-level" Inhalte (zum Beispiel: große Teile des Textes, oder Gruppen von Bildern oder Sätze von Navigationsschaltflächen) verwendet, so dass Sie die Regeln darüber, wie diese Inhalte präsentiert werden können.
Es gibt auch einen Tag, das DIV Der kleine Bruder namens SPAN, die verwendet, um das Aussehen der in Online-Inhalten zu ändern ist.
Während das ist nützlich, hat SPAN nichts über die vielfältigen Einsatzmöglichkeiten der eine gut gemachte DIV.
Wie man mit Style (Sheets) DIV
Wenn Sie ein Stylesheet öffnen, stehen die Chancen, dass Sie mehrere Klassen entworfen, um mit DIVs auf der Seite der Arbeit zu finden. Es gibt verschiedene Arten, aber vier der häufigsten sind Header, Content, Sidebar und Footer. Die Namen dieser DIVs geben Ihnen einen guten Eindruck von ihrem Zweck. Im Folgenden werden einige Beispiele für die Art, wie sie innerhalb einer bestehenden CSS-Struktur verwendet werden kann.
Vielleicht möchten Sie zum Einrichten der Header-Bereich. Richten Sie zunächst eine Klasse HEADER, die nur mit DIVs verwendet werden kann. Starten Sie dann die Gestaltung der Eigenschaften des Textes, Rahmen und Hintergründen, die Sie hoffen, zu verwenden:
DIV.header
{
Font-weight: kühnsten;
FONT-SIZE: groß;
Padding-bottom: 5px;
Text-transform: none;
Border-left: # 990033 3px solid;
Border-right: # 990033 3px solid;
COLOR: # CCFFFF;
Padding-top: 5px;
Border-top: # 990033 3px dash;
Border-bottom: # 990033 3px dash;
Font-style: normal;
FONT-FAMILY: Verdana, Arial;
Background-color: # cc3300;
TEXT-align: right;
Font-variant: small caps;
Text-decoration: none
}
Dadurch wird ein Teil der Seite mit einem leichten lila Hintergrund, dunkelrot Grenzen (mit gestrichelten Linien am oberen und unteren) und hellgrau Schriftzug in einem small-caps san-serif. Normalerweise würde dieser Code auf einem Haupt-Stylesheet-Dokuments ("yourDoc.css"), die der Web-Seite mit dem folgenden Code in die HTML-HEAD-Abschnitt verbunden wäre gesetzt werden:
<link rel="stylesheet" type="text/css" href="yourDoc.css" />
Offensichtlich ist dies ein Beispiel zu nennen, und man müsste dafür sorgen, dass der Pfad zu Ihrer CSS-Datei korrekt war. Die wahre Stärke von CSS ist jedoch, dass, wenn Sie sich entscheiden, nachdem hunderte von Seiten mit diesen Header, dass du lieber würde roter Schrift auf grauem Hintergrund in einer benutzerdefinierten Schriftart , müssen Sie einfach den Code in das eine Änderung CSS Blatt und es wird durchdringen die gesamte Website.
Wenn Sie spielen, um mit den verschiedenen Arten von Eigenschaften für verschiedene Elemente innerhalb eines DIV, können Sie ganz Form und re-shape Ihre gesamte Website einfach von der CSS Blatt selber. Best of all, kann es DIVs innerhalb DIVs, verschachtelte so weit, wie Sie wollen, und jede "Container" kann seine eigenen Eigenschaften sowie die Eigenschaften der größeren DIV haben. Innerhalb eines DIV.body, zum Beispiel, könnten Sie entscheiden, dass der gesamte Text sollte linksbündig sein. Allerdings könnten Sie auch kleinere DIV.redText und DIV.whiteText, dass einfach die Farben der späteren Absätzen, wenn er sie alle fein säuberlich auf der linken Seite ausgerichtet.
The Strange and Wonderful Eigenschaft float
Eine andere sehr wichtige Qualität der Verschachtelung DIVs in einem Stylesheet ist die Idee des "float".
Dies ermöglicht es Ihnen, exakt zu positionieren, wo auf einer Seite ein DIV erscheint.
Die Eigenschaft float hilft zu bestimmen, wo ein SPAN oder DIV Inhalte in Bezug auf die größeren Behälter werden.
Wenn Sie zwei Spalten innerhalb der Hauptteil, einer der "Sidebar" und einer der "Inhalt" haben wollten, würden Sie zwei Klassen: # sidebar und # content.
Sie könnten Stil der Text, Hintergrund und grenzt alle, wie Sie mit der HEADER Beispiel oben hat, aber Sie würden auch in eine weitere Eigenschaft hinzu: float: left.
Addiert man diese Eigenschaft drückt zuerst die Seitenleiste auf der linken Seite des größeren Behälter, dann den Content-Bereich rechts neben ihm, die Schaffung einer flexibleren Struktur als Tabellen mit allen Vorteilen einer sauberen Layout.
Wenn Sie ein weiteres DIV unterhalb des schwimmenden Abschnitte (wie eine Fußzeile DIV) haben wollte, wäre es notwendig, einen FLOAT einfügen: CLEAR-Eigenschaft in der DIV unten, so dass die "Kiste" nicht erben die FLOAT: left-Eigenschaft. Das Gegenteil von einem "schwebenden" DIV ist eins mit der Position-Eigenschaft auf "absolute" gesetzt. In diesem Fall können Sie die Position der Box genau auf die Pixel-Koordinaten oder prozentualen Werte der Basis Browser-Fenster .
Mastering the DIV
Dies ist eine sehr allgemeine Übersicht, wie ein DIV können auf Ihrer Website verwendet werden. Die volle Kraft des DIV erfordert viel mehr Seiten und Konzepte. Sie können selbst auf Webseiten wie lernen DevArticles , DesignPlace und Juixe . Weitere Beispiele für die erstaunlichen Möglichkeiten sind jeden Tag in der Put- CSS Zen Garden , oder Sie können versuchen, Ihren eigenen Code in den CSS Desk Sandkasten . Nehmen Sie sich Zeit, um das DIV ein nützliches und flexibles Fundament für Ihre eigenen Web-Design und ihr werdet es nicht bereuen.
Verwandte Themen
