Paso 6: Mi CSS
Con mi contenido entrado ahora pude definir cada etiqueta según mis propias preferencias. Lo hice en un documento separado llamado "html-css-editor-screen.css", utilizando descriptores CSS.
Echemos un vistazo a mi hoja de estilo.
div.Page-break
{
Página-break-after: siempre;
Page-break-interior: evitar;
}
Esta primera descripción es de una clase llamada "salto de página". el navegador de internet enviará una señal a mi impresora (Si imprimo el documento) para iniciar una nueva página cuando se encuentra con esta etiqueta de la división, pero sólo después de que se imprima la página de folleto, evitando el comenzar una página nueva si la impresora está todavía en medio de la página del folleto de la impresión.
H1
{
font-size: 2em;
padding-top: 1em;
acolchado inferior: 2em;
}
Esta descripción CSS configura el tamaño de letra y espaciado por encima y por debajo de cualquier texto con la etiqueta < h1 >. "em" es una manera de especificar letra tamaño y espaciado. Ha especificado utilizando otras unidades de medida, tales como pulgadas (in), milímetros (mm), píxeles (px) o puntos (pt).
H2
{
padding-bottom: .2em;
font-size: 1.2em;
}
Define cualquier texto con la etiqueta < h2 >.
p.footer
{
posición: absoluto;
parte inferior: 1em;
altura: 1em;
anchura: 67,9 mm;
margen izquierda: auto;
margen derecha: auto;
texto-alinee: Centro;
color: gris;
}
Esta es la definición de la clase especial de párrafo que mostrará mi números de página. La posición del párrafo número de página será en la parte inferior absoluta de cada página del folleto, espaciada una em para arriba desde la parte inferior. El párrafo sólo será una em de altura, 67,9 milímetros de ancho, equidistantes de los márgenes izquierdos y derecho de la página de manual. El texto de párrafo (número de página) se alinean en el centro de la página, y va a ser color gris.
UL
{
padding-bottom: .8em;
}
Mi lista desordenada contará con un espacio, un poco menos de un em de altura, después de la lista y antes que nada. Esto separa a mi lista de otro texto.
#content
{
altura de línea: 1.3em;
tamaño: .8em;
padding: 1em;
padding-top: 3em;
}
Todo mi texto contenido tendrá una altura de línea de 1.3 em, aunque el tamaño de la fuente sólo será un poco menos de un em. Esto permite un poco de espacio después de cada línea de texto, aumentar la legibilidad. Habrá una línea en blanco de espacio, 1 em de altura, después de cada división del contenido, con em 3 de espacio en la parte superior de cada división de contenido permitido. Esto me permite espacio perforar un par de agujeros en la parte superior de cada página. Te tengo mi folleto junto con un par de fotos del anillo.
#content.cover
{
altura de línea: 2em;
texto-alinee: Centro;
}
Yo quería mi portada para lucir un poco diferente que las páginas normales. Definido una clase especial de contenido división llamada "cubierta". La altura de la línea será mayor y todo el texto se alineará en el centro (justificado).
#page
{
posición: pariente;
Mostrar: bloquear;
Float: left;
anchura: 67,9 mm;
altura: 104mm;
frontera: black 1px solid;
}
Por último, definí la página más grande que yo "pegará" mi contenidos, pequeñas "Notas". Cada página se colocará después de la antes de él, en una secuencia "relativa". La página se mostrará como un solo bloque, que siempre se muestra de izquierda a derecha. La anchura será 67,9 mm y altura será de 104 milímetros. La página se mostrará con un borde de línea sólida negra, solamente un pixel de grosor.
Puedo decirles que el tamaño de mi "página" se derivó con esmero. Empecé con una suposición inteligente de 70 milímetros de ancho y 100 milímetros de alto. Cuando dirigí mi navegador para mostrar una vista previa de cómo se vería si imprime ocho de estas "páginas" en una sola página de papel, el tamaño era lejos. Había ajustado el tamaño, poco a poco, hasta que pude montar ocho páginas del folleto en un solo 8.5 x 11 pulgadas pedazo de papel, como se muestra por mi navegador. El tamaño final es la mayoría absoluta que podía pasar con y todavía imprimir las páginas tal y como deseaba.
