Qu'est-ce que le plan CSS

Blueprint est un framework CSS qui divise la mise en page, la typographie, le widget, la réinitialisation et l'impression en différents fichiers CSS.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Blueprint (framework CSS)

Blueprint est un framework CSS dont le but est de réduire Il est temps de développer votre CSS. Il vous donne une base solide en CSS, avec une grille facile à utiliser sur laquelle baser vos principaux éléments, une typographie sensée et même des feuilles de style d'impression.

Utilisez Blueprint comme guide lors de la conception de pages Web, puis concevez ou générez du HTML afin que les styles CSS Blueprint soient appliqués aux éléments HTML. En fait, étant donné que Blueprint fournit un CSS puissant, il est possible de concevoir des pages Web en HTML sans avoir à utiliser un programme de conception graphique, tel que Photoshop, pour simuler la page finale. Dans un sens, Blueprint offre une véritable conception Web WYSIWYG (What You See Is What You Get), car le prototype utilisera le même code que le site final.

De plus, étant donné que la fonction principale de Blueprint est de simuler l'apparence d'une page imprimée, l'utilisation de Blueprint pour la conception interactive ressemble davantage à l'utilisation de QuarkXPress ou d'Adobe InDesign. Les styles de plans sont basés sur des pixels et une grille de base de 18 pixels. Avec du talent et des efforts en matière de conception, il est possible de créer des pages d'aspect professionnel.

Exemple de style

La grille par défaut de Blueprint a une largeur de 950 pixels, divisée en 24 colonnes de 30 pixels de large séparées par des séparateurs de 10 pixels : [( 24 colonnes * 30 pixels/colonne ) + (23 diviseurs * 10 pixels/diviseur) = 950 pixels]. Si vous préférez ou avez besoin d'une grille plus large ou plus étroite ou de différentes largeurs de colonnes, Blueprint fournit un outil Ruby pour régénérer le Blueprint selon les spécifications requises. L'outil Ruby crée également une image de grille qui peut être référencée dans Photoshop, et le CSS final est compressé pour réduire la taille du fichier, réduisant ainsi le temps de transfert et la bande passante.

Normalement, les fichiers CSS Blueprint ne doivent pas être modifiés. Au lieu de cela, vous devez définir vos propres styles dans un fichier séparé et remplacer le code Blueprint si nécessaire. C'est le rôle du dernier fichier, css/custom.css, qui est créé et maintenu dans le cadre du code.

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!