HTML/CSS Publisher? (6 / 8 steg)

Steg 6: Min CSS



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.

Se Steg
Relaterade Ämnen

Att göra en hemsida om dig med Visual Studio (HTML, CSS, JQUERY)

Hej alla!Detta är min första instructable och i detta instructable jag ska visa dig hur du använder Visual Studio för att skapa din egen hemsida!Här är en nedladdningslänk för Visual Studio:Visuella Studio´s hem länkRikta data överför länkDetta kan v...

Bildgalleri för enkel HTML CSS Javascript

I det första avsnittet i denna serie, jag tar ett samtal jag hade med en DIYer namngivna Dale och förvandla det till en video tutorial på en möjlig lösning. Vi kommer att bygga från grunden en enkel javascript-funktion som kommer att smälta en mängd...

Hur man kan förbättra din Instructables med HTML-

Instructables är ett häftigt sätt att dela dina kunskaper och lära av andra. Ibland, mycket text i en Instructablecan vara hotfull, eller en Instructable bara ser inte mycket intressant. För att lösa detta, kan du använda HTML och CSS.HTML är användb...

Gör din HTML-webbplats lämplig för rörlig anordningen

först var jag inte nöjd när jag besökte en stationär optimerad webbplats på en smartphone.Typsnitten är för liten, du har panorera och zooma in/ut hela tiden, länkarna är alltid svårt att rikta. Så jag var tvungen att göra en del forskning hur man gö...

Seriell kommunikation mellan Arduino, HTML & Chrome

Arbeta med Arduino är lätt, men att skapa projekt som innebär att programvaran kräver mer kunskaper i programmering. Till skillnad från andra lösningar är mitt projekt sätt att skapa HTML offline app - utan saker som Yun, Ethernet shield eller Node.j...

Den kompletta Nybörjarguide till HTML

denna handledning är skriven från grunden för nybörjare till världen av programmering. Självklart om du är bekant med vissa programspråk kommer detta vara något lättare.Om du är ny till programmering får inte avskräckt. Jag själv försökt Python ett p...

Gör en enkel html hemsida

allt du behöver för detta är en dator lite html/css kunskap och tid.Steg 1. Ladda ner zip-filen och packa upp den. öppna filer i en textredigerare som anteckningar eller notepad ++Steg 2. Fortfarande lära sig html? Nej behov till oroa jag länkade hän...

HTML-RGB reglaget för Arduino via följetong

Hej igen!Jag bestämde mig att skriva fler självstudiekurser om min HTML/CSS & Arduino projekt med namnet Involt. För mer information vad är det kolla projektets webbplats.I detta instructable jag visar than lättast och ovanligt sätt att styra RGB LED...

Flytta HTML-element med JQuery via följetong

Detta instructable handlar om att använda värdena fick från Arduino och använda dem för att manipulera HTML-element inuti Involt. Men detta kommer inte att använda Involt JQuery metoder eller UI-element men detta exempel är att visa möjligheterna av...

Spacebrewer - Remote te-enhet

Vi ville göra en enhet som skulle göra det möjligt att fjärrstyra brygga en kopp te. Varför? Eftersom te är häftigt! På de kalla vinterdagarna, du skulle kunna ha ett te bryggt och redo för dig när du kom hem. Du kan också brygga te för vänner och fa...

Intelly kök

Du någonsin bränna något i ditt liv? Om du säger nej, ljuger du. Jag gjorde alla de mest fruktansvärda saker du kan tänka dig, som Tom kastruller eller pommes frites jag var tvungen att kasta till papperskorgen. Första europeiska Intel IoT turnén gav...

Android Motion Sensing Smart spegel

Vi beslutade att vi behövde en spegel i vårt kök, och jag var också medveten om att min familj använder deras smartphones för att kolla vädret, kalender möten etc innan de fick barnen redo och rubrik ut för dagen.Jag hade hittat många bra exempel på...

Att skapa Bookhuddle.com, en webbplats för att upptäcka, organisera och dela bokinformation

detta inlägg beskriver de olika stegen i att skapa och lanserar Bookhuddle.com, en webbplats syftar till att hjälpa läsarna att upptäcka, organisera och dela informationen.Steg som beskrivs här gäller utvecklingen av andra webbplatser.Steg 1: Komma m...

Redigera en webbsida i Google Chrome

vad händer om jag sa att du kan redigera någon webbsida eller webbplats på internet direkt från ditt hem datorn utan någon särskild programvara eller sinnessjuk dator kunskaper i programmering? Det är lätt! Det enda du behöver göra detta trick funger...

Komma igång med PHP

PHP eller personliga hemsida HyperText Preprocessor, är en server slutet programmeringsspråk för att skapa dynamiska webbsidor. PHP ursprungligen stod för personliga hemsida, men nu på första "P" står för PHP. Förvirrande?? Förmodligen, men abso...

Lätt IoT väderstation med flera sensorer

En väderstation är ett roligt projekt som lär dig massor om elektronik med den extra fördelen att vara en faktiskt användbar liten enhet. Projektet kräver en massa billiga delar och sensorer totalt mindre än $15, och hela slutar montering i din hand....

SafeDrop: en Smart paketet leverans Safe

I detta instructable jag ska visa dig hur mitt team gjorde SafeDrop, en modern Sakernas Internet-ansluten enhet prototyp som skyddar din leverans paket från stöld! Vi kom upp med denna idé på AT & T Developer Summit Hackathon, och kodade och tillverk...

Instructables på din hemsida eller blogg - uppdaterad!

Detta Instructable visar dig hur du kan bädda in en lista med länkar till din Instructables på din webbplats, formaterade precis som på din profilsida. De uppdateras automatiskt varje gång sidan laddas och är sorterbara av vyer, rating, senaste och n...

Kärnan i tid (Animation)

Tid handlar inte om nuet, det handlar också om tidigare. Tänk på otroliga geniet av folket framför oss som uppfann tid som vi känner den av upplever denna animering. Dessa är några bitar av information som presenteras i animeringen...Moderna 12 timma...