Étape 6: Mon CSS
Avec mon contenu entré je pourrais maintenant définir chaque balise selon mes propres préférences. Je l’ai fait sur un document distinct, appelé "html-css-Editeur-screen.css", à l’aide de descripteurs CSS.
Penchons-nous sur ma feuille de style.
div.page-pause
{
page-break-after : toujours ;
page-break-inside : éviter ;
}
Cette première description est pour une classe appelée « saut de page ». le navigateur internet enverra un signal à mon imprimante (si j’ai imprimer le document) pour commencer une nouvelle page lorsqu’il rencontre cette balise de division, mais uniquement après que la page petit livret est imprimée, en évitant de commencer une nouvelle page si l’imprimante est toujours au milieu de l’impression de la page du livret.
H1
{
font-size : 2em ;
padding-top : 1em ;
padding-bottom : 2em ;
}
Cette description CSS configure la taille de la police et l’espacement au-dessus et en dessous de tout texte contenant le tag < h1 >. « em » est un moyen de spécifier taille de lettre et espacement. Je pourrais avez spécifié à l’aide d’autres unités de mesure, telle que pouces (po), en millimètres (mm), pixel (px) ou en points (pt).
H2
{
padding-bottom : .2em ;
la taille de police : 1.2em ;
}
Ceci définit tout texte contenant le tag < h2 >.
p.footer
{
position : absolute ;
bas : 1em ;
hauteur : 1em ;
Largeur : 67,9 mm ;
marge à gauche : auto ;
marge-right : auto ;
text-align : center ;
couleur : gris ;
}
Il s’agit de la définition de la classe spéciale de paragraphe qui affiche mes numéros de page. La position du paragraphe numéro page sera au bas de chaque page du livret, espacés un em absolu vers le haut du bas. Le paragraphe ne sera un em en hauteur, 67,9 millimètres de largeur, à distance égale des marges gauche et droite de la page du livret. Le texte du paragraphe (numéro de la page) sera aligné au centre de la page, et il sera de couleur grise.
UL
{
padding-bottom : .8em ;
}
Ma liste non ordonnée aura un espace, un peu moins d’un em en hauteur, après la liste et avant toute autre chose. Ceci sépare ma liste d’autre texte.
#content
{
line-height : 1.3em ;
font-size : .8em ;
Rembourrage : 1em ;
padding-top : 3em ;
}
Tout mon texte contenu aura une hauteur de ligne de 1,3 em, bien que la taille de la police ne sera un peu moins d’un em. Cela permet un peu d’espacement après chaque ligne de texte, augmenter la lisibilité. Il y aura une ligne vide de l’espace, 1 cadratin en hauteur, après chaque division du contenu, avec 3 em de l’espace a permis au sommet de chaque division du contenu. Cela me permet de l’espace percer quelques trous en haut de chaque page. Je vais tenir mon livret avec quelques clichés de l’anneau.
#content.cover
{
line-height : 2em ;
text-align : center ;
}
Je voulais que ma page de couverture pour un aspect un peu différent que les pages normales. J’ai défini une classe spéciale de contenu division appelée « couverture ». La hauteur de ligne sera plus grande et tous les le texte sera aligné au Centre (Centre justifié).
#page
{
position : relative ;
afficher : bloquer ;
float : left ;
Largeur : 67,9 mm ;
hauteur : 104mm ;
border : 1px noir solide ;
}
Enfin, j’ai défini l’agrandissement page sur lequel j’ai "collera" mon plus petits contenus, "notes". Chaque page sera placé après la saisie, dans une séquence « relative ». La page s’affiche comme un seul bloc, toujours affiché de gauche à droite. La largeur sera de 67,9 millimètres et hauteur sera de 104 millimètres. La page s’affiche avec une bordure de ligne noire continue unique, un seul pixel d’épaisseur.
Je peux vous dire que la taille de ma « page » a été soigneusement tirée. J’ai commencé avec une conjecture de 70 millimètres de large et 100 millimètres de hauts. Lorsque j’ai réalisé mon navigateur pour me montrer un aperçu de quoi il ressemblerait si j’ai huit de ces « pages » imprimé sur une seule page de papier, la taille était lointaine. J’ai modifié la taille, peu à peu, jusqu'à ce que je pouvais tenir huit pages de la brochure sur un seul 8,5 x 11 pouces bout de papier, tel qu’affiché par mon navigateur. La taille finale est le plus absolu que je pourrais sortir avec et toujours pas à imprimer les pages que j’ai désiré.
