Was ist CSS Blueprint?

Blueprint ist ein CSS-Framework, das Layout, Typografie, Widget, Zurücksetzen und Drucken in verschiedene CSS-Dateien unterteilt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

Blueprint (CSS-Framework)

Blueprint ist ein CSS-Framework, dessen Zweck darin besteht, Ihre CSS-Entwicklungszeit zu verkürzen. Es bietet Ihnen eine solide Grundlage in CSS, mit einem benutzerfreundlichen Raster, auf dem Sie Ihre Top-Elemente aufbauen können, sinnvoller Typografie und sogar Druckstilvorlagen.

Verwenden Sie Blueprint als Leitfaden beim Entwerfen von Webseiten und entwerfen oder generieren Sie dann HTML, um Blueprint-CSS-Stile auf HTML-Elemente anzuwenden. Da Blueprint leistungsstarkes CSS bietet, ist es tatsächlich möglich, Webseiten in HTML zu entwerfen, ohne ein Grafikdesignprogramm wie Photoshop verwenden zu müssen, um die endgültige Seite zu simulieren. In gewisser Weise bietet Blueprint echtes What You See Is What You Get (WYSIWYG)-Webdesign, da der Prototyp denselben Code wie die endgültige Website verwendet.

Da die Hauptaufgabe von Blueprint außerdem darin besteht, das Erscheinungsbild einer gedruckten Seite zu simulieren, ähnelt die Verwendung von Blueprint für interaktives Design eher der Verwendung von QuarkXPress oder Adobe InDesign. Blaupausenstile basieren auf Pixeln und einem Grundlinienraster von 18 Pixeln. Mit Designtalent und Mühe ist es möglich, professionell aussehende Seiten zu erstellen.

Stilbeispiel

Das Standardraster von Blueprint ist 950 Pixel breit und in 24 30 Pixel breite Spalten unterteilt, die durch 10 Pixel-Trennzeichen getrennt sind: [(24 Spalten * 30 Pixel/Spalte) + (23 Trennzeichenlinie * 10 Pixel/Teiler) = 950 Pixel]. Wenn Sie ein breiteres oder schmaleres Raster oder unterschiedliche Spaltenbreiten bevorzugen oder benötigen, bietet Blueprint ein Ruby-Tool zum Regenerieren des Blueprints gemäß der erforderlichen Spezifikation. Das Ruby-Tool erstellt außerdem ein Rasterbild, auf das in Photoshop verwiesen werden kann, und das endgültige CSS wird komprimiert, um die Dateigröße zu reduzieren und so Übertragungszeit und Bandbreite zu reduzieren.

Normalerweise sollten Blueprint-CSS-Dateien nicht bearbeitet werden. Stattdessen sollten Sie Ihre eigenen Stile in einer separaten Datei definieren und den Blueprint-Code nach Bedarf überschreiben. Dies ist die Rolle der letzten Datei, css/custom.css, die als Teil des Codes erstellt und verwaltet wird.

Weitere Programmierkenntnisse finden Sie unter: Programmierkurse! !

Das obige ist der detaillierte Inhalt vonWas ist CSS Blueprint?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!