HTML/CSS Publisher? (6 / 8 steg)
Steg 6: Min CSS
Mitt innehåll in skulle jag nu definiera varje tagg enligt egna önskemål. Jag gjorde det på ett separat dokument som kallas "html-css-publisher-screen.css", med hjälp av CSS deskriptorer.
Låt oss titta på min formatmall.
div.Page-break
{
sida-paus-efter: alltid;
sida-paus-inside: undvika;
}
Denna första beskrivning är för en klass som kallas "sidbrytning". webbläsaren skickar en signal till min skrivare (om jag skriver ut dokumentet) att starta en ny sida när den stöter på denna division tagg, men först efter sidan litet häfte är tryckt, undvika att starta en ny sida om skrivaren är fortfarande mitt i skriva ut häftet sidan.
H1
{
font-size: 2em;
padding-top: 1em;
padding-botten: 2em;
}
Denna CSS Beskrivning konfigurerar teckenstorlek och avstånd över och under någon text taggade < h1 >. "em" är ett sätt att precisera brev storlek och avstånd storlek. Jag kunde ha anges med andra måttenheter, som tum (in), millimeter (mm), pixlar (px) eller poäng (pt).
H2
{
padding-botten: .2em;
font-size: 1.2em;
}
Detta definierar text taggade < h2 >.
p.footer
{
position: absolute;
botten: 1em;
höjd: 1em;
bredd: 67,9 mm.
marginal till vänster: auto;
högra marginal: auto;
text-align: center;
färg: grå;
}
Detta är definitionen av klassen speciell punkt som visar min sidnummer. Ståndpunkten sida nummer stycket kommer att vara absolut längst ned i varje häfte sida, fördelade en em upp från botten. Stycket ska ett em i höjd, 67,9 millimeter på bredden, jämnt fördelade från vänster- och högermarginalerna på sidan häfte. Texten i stycken (sidnummer) justeras i mitten av sidan, och det blir grått i färgen.
UL
{
padding-botten: .8em;
}
Min oordnad lista kommer att ha ett utrymme, något mindre än en em i höjd, efter listan och före allt annat. Detta skiljer min lista från annan text.
#content
{
line-height: 1.3em;
font-size: .8em;
stoppning: 1em;
padding-top: 3em;
}
All min belåtenhet text kommer att ha en linje höjd på 1.3 em, även om storleken på teckensnittet blir bara något mindre än en em. Detta gör att lite av avstånd efter varje textrad, öka läsbarheten. Det blir en tom rad utrymme, 1 em i höjd, efter varje division av innehåll, med 3 em utrymme tillåts högst upp i varje division av innehåll. Detta gör mig utrymme att slå ett par hål högst upp på varje sida. Jag ska hålla mitt häfte tillsammans med ett par ring snaps.
#content.cover
{
line-height: 2em;
text-align: center;
}
Jag ville ha min försättsbladet ska se lite annorlunda som de normala sidorna. Jag definierade en särskild klass av innehåll division kallas "täcka". Linjen kommer att vara större, och alla den texten kommer att justeras i center (center motiverat).
#page
{
position: släkting;
Visa: blockera;
Float: left;
bredd: 67,9 mm.
höjd: 104mm.
Border: 1px svart solid;
}
Slutligen, definierade jag större sidan som jag kommer att "klistra in" mina mindre innehåll, "anteckningar". Varje sida kommer att placeras efter den föregående, i en "släkting" sekvens. Sidan visas som en enstaka, alltid visas från vänster till höger. Bredden kommer att 67,9 millimetrar, och höjd kommer att vara 104 millimeter. Sidan kommer att visas med en enda svart heldragen kant, endast en pixel i tjocklek.
Jag kan berätta att storleken på min "sida" härrörde mödosamt. Jag började med en kvalificerad gissning av 70 millimeter brett och 100 millimeter höga. När jag riktade min webbläsare att visa mig en förhandsgranskning av hur det skulle se ut om jag ut åtta av dessa "sidor" på en sida av papperet, var storleken långt borta. Jag fejk storleken, lite i taget, tills jag kunde plats åtta häfte sidor på ett enda 8,5 x 11 tum pappersark, som visas av min webbläsare. Den slutliga storleken är den absoluta mest att jag kunde få av med och fortfarande skriva ut sidorna som jag önskade.