960 Grid System – Grundprinzipien und Verwendung

960 Rastersystem Grundprinzipien

960.css nicht bearbeiten

Bearbeiten Sie die Datei 960.css nicht. Wenn Sie sie ändern, können Sie das Framework in Zukunft nicht mehr aktualisieren.

Leseraster

Bevor wir CSS-Code aus externen Dateien verwenden können, müssen wir diese zunächst in unserer HTML-Datei aufrufen. Nennen Sie es so:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”Stylesheet” Typ=”Text/css” Medien=”alle” href=”Pfad/zu/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

Nachdem wir sie aufgerufen haben, müssen wir unsere eigene CSS-Datei aufrufen. Sie können Ihre CSS-Datei beispielsweise style.css oder site.css oder anders nennen. Nennen Sie es so:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

Behälter

Im 960-Framework können Sie zwischen zwei Containern mit den Klassennamen .container_12 und .container_16 wählen. Beide Container sind 960 Pixel breit (deshalb heißen sie 960-Raster), sie unterscheiden sich aber darin, dass sie eine unterschiedliche Anzahl an Spalten enthalten. Wie die Namen andeuten, ist der Container von .container_12 in 12 Spalten unterteilt, während .container_16 in 16 Spalten unterteilt ist. Beide 960 Pixel breiten Container sind horizontal zentriert.

Raster/Spalten

Sie können aus vielen verschiedenen Kombinationen von Spaltenbreiten wählen, die sich jedoch zwischen den beiden Containern unterscheiden. Sie können sich einen Eindruck von diesen Breiten verschaffen, indem Sie 960.css öffnen, es ist jedoch für die Gestaltung einer Website nicht erforderlich. Hier ist ein nützlicher Trick, um die Verwendung des Frameworks zu vereinfachen.

Wenn Sie beispielsweise nur zwei Spalten in Ihrem Container (Hauptinhaltsbereich/Seitenleiste) verwenden möchten, können Sie Folgendes tun:

<div Klasse="Container_12">
<div class="grid_4">Seitenleiste</div>
<div class="grid_8">Hauptinhalt</div>
</div>

Vielleicht haben Sie es verstanden, nachdem Sie den obigen Code gesehen haben, aber ich möchte es trotzdem erklären. Dies bedeutet, dass Sie die Spalten grid_4 und grid_8 im Container container_12 verwendet haben und 4+8 ergibt 12! Verstehst du? Einer der Vorteile der Verwendung eines Rastersystems besteht darin, dass Sie die Breite jeder einzelnen Spalte nicht berechnen müssen, wodurch viele Berechnungen eingespart werden.

Sehen wir uns an, wie man ein vierspaltiges Layout schreibt:

<div Klasse="Container_12">
<div class="grid_2">Seitenleiste</div>
<div class="grid_6″>Hauptinhalt</div>
<div class="grid_2">Fotos</div>
<div class="grid_2">Werbung</div>
</div>

Wie Sie sehen, funktioniert dieses System ziemlich gut. Wenn Sie versuchen, seine Worte in Ihrem Browser zu lesen, werden Sie feststellen, dass etwas nicht stimmt. Aber das macht nichts, denn genau das werden wir als Nächstes besprechen.

Ränder

Standardmäßig ist zwischen den einzelnen Spalten ein gewisser Rand vorhanden. Jede Grid_(Wert hier einfügen)-Klasse hat einen linken und rechten Rand von 10 Pixeln. Das heißt, der Randwert zwischen den beiden Spalten beträgt 20px.

Ein Rand von 20 Pixeln ermöglicht es dem Layout, den richtigen Weißraum beizubehalten und glatter auszusehen. Das ist einer der Gründe, warum ich das 960-Rastersystem mag.

Im obigen Beispiel hatten wir einige Probleme beim Lesen aus dem Browser, das wollen wir also beheben.

Das Problem besteht darin, dass jede Spalte einen linken und einen rechten Rand enthält, die Spalte ganz links jedoch keinen linken Rand und die Spalte ganz rechts keinen rechten Rand haben sollte. Hier ist die Lösung:

<div Klasse="Container_12">
<div class="grid_2 alpha">Seitenleiste</div>
<div class="grid_6″>Hauptinhalt</div>
<div class="grid_2">Fotos</div>
<div class="grid_2 omega">Werbung</div>
</div>

Sie müssen nur die Alpha- Klasse hinzufügen, um den linken Rand zu entfernen, und die Omega- Klasse, um den rechten Rand zu entfernen. Ok, jetzt ist unser Layout perfekt im Browser ausgerichtet. (ja, einschließlich IE6)

Styling

Tatsächlich haben Sie bereits gelernt, wie Sie mit dem 960-Framework ein grundlegendes Rasterlayout erstellen. Möglicherweise möchten Sie Ihrem Layout aber auch etwas Stil verleihen.

<div Klasse="Container_12">
<div id="sidebar" class="grid_2 alpha">Seitenleiste</div>
<div id=”content” class=”grid_6″>Hauptinhalt</div>
<div id=”photos” class=”grid_2″>Fotos</div>
<div id=”Anzeigen” class=”grid_2 omega”>Anzeige</div>
</div>

Da CSS ein Prioritätsformat verwendet, um zu bestimmen, wie Stile interpretiert werden, hat die ID eine höhere Priorität als die Klasse. Auf diese Weise können wir mithilfe von ID-Selektoren in unseren separaten CSS-Dateien benutzerdefinierte Stile erstellen. Wenn es zufällig ein Stilattribut gibt, das mit 960 identisch ist, aber einen anderen Wert hat, gibt der Browser dem Stil in Ihrer CSS-Datei Vorrang.