Stap 6: Mijn CSS
Met mijn inhoud ingevoerd kon ik nu elke code definiëren volgens mijn eigen voorkeuren. Ik deed dat op een afzonderlijk document genaamd "html-css-Uitgever-screen.css", met behulp van CSS descriptoren.
Laten we eens kijken naar mijn stylesheet.
div.page-break
{
pagina-einde-na: altijd;
pagina-einde-inside: voorkomen;
}
Deze eerste beschrijving is voor een klasse met de naam "page-break". de internetbrowser stuurt een signaal naar mijn printer (als ik het document afdrukken) start van een nieuwe pagina wanneer deze divisie-tag wordt aangetroffen, maar pas nadat de klein boekje pagina wordt afgedrukt, vermijden begint een nieuwe pagina als de printer is aangesloten nog steeds in het midden van de afdrukken van de pagina van de brochure.
H1
{
tekengrootte: 2em;
padding-top: 1em;
padding-bottom: 2em;
}
Deze beschrijving CSS Hiermee configureert u de tekengrootte en de afstand boven en onder elke tekst gelabeld < h1 >. "em" is een manier om opgeeft letter-formaat en de grootte van de afstand. Ik kon hebt opgegeven met behulp van andere meeteenheden, zoals inches (in), millimeter (mm), pixels (px) of punten (pt).
H2
{
padding-bottom: .2em;
tekengrootte: 1.2em;
}
Dit definieert een tekst gelabeld < h2 >.
p.footer
{
positie: absoluut;
bodem: 1em;
hoogte: 1em;
breedte: 67,9 mm;
margin-left: automobiel;
margin-right: automobiel;
text-align: Midden;
kleur: grijs;
}
Dit is de definitie van de speciale klasse van alinea die mijn paginanummers verschijnt. De positie van de pagina nummer lid zal worden op de absolute onderkant van elke pagina van de brochure, verdeelde één em omhoog vanaf de onderkant. De alinea worden alleen één em in hoogte, 67,9 millimeter breed, even van de linker- en rechtermarge van de pagina boekje gelijkmatig verdeeld. De alineatekst (paginanummer) wordt uitgelijnd in het midden van de pagina, en zal zij in de kleur grijs.
UL
{
padding-bottom: .8em;
}
Mijn niet-geordende lijst hebben een ruimte, iets minder dan een em in hoogte, na de lijst en voordat er iets anders. Dit scheidt mijn lijst van andere tekst.
#content
{
regelafstand: 1.3em;
tekengrootte: .8em;
padding: 1em;
padding-top: 3em;
}
Mijn inhoud tekst zullen allemaal een regelhoogte van 1.3 em, hoewel de grootte van het lettertype zal slechts iets minder dan een em. Dit laat een beetje afstand na elke regel tekst, verhoging van de leesbaarheid. Zal er een witregel ruimte, 1 em in hoogte, na elke divisie van inhoud, met 3 em van ruimte aan de bovenkant van elke divisie van inhoud. Dit kan ik ruimte om punch een paar gaten aan de bovenkant van elke pagina. Ik zal houden mijn boekje samen met een paar kiekjes van de ring.
#content.cover
{
line-height: 2em;
text-align: Midden;
}
Ik wilde mijn voorblad te kijken een beetje anders dat de normale pagina's. Ik heb een speciale klasse van inhoud afdeling genaamd "cover" gedefinieerd. De regelhoogte zal worden groter, en alle de de tekst wordt uitgelijnd in het centrum (centrum gerechtvaardigd).
#page
{
positie: relatief;
weergeven: blokkeren;
float: links;
breedte: 67,9 mm;
hoogte: 104mm;
rand: 1px zwarte solide;
}
Tot slot, ik heb gedefinieerd de grotere pagina waarop ik "plakken zal" mijn kleinere inhoud, "notities". Elke pagina wordt geplaatst na de dia, in een "relatieve" reeks. De pagina wordt weergegeven als één blok, altijd van links naar rechts weergegeven. De breedte zullen 67,9 millimeter, en hoogte zullen 104 millimeter. De pagina wordt weergegeven met een enkele ononderbroken zwarte lijn grens, slechts één pixel in dikte.
Ik kan u zeggen dat de grootte van mijn "pagina" nauwgezet is afgeleid. Ik ben begonnen met een educated guess van 70 millimeter breed en 100 millimeter hoog. Toen ik mijn browser om me te tonen een voorbeeld van hoe het eruit zien zou als ik acht van deze "pagina's" afgedrukt op één vel papier gericht, was de grootte weg. Ik tweaked de grootte, beetje bij beetje, totdat ik acht boekje pagina's op een enkel 8,5 x 11 inch stuk papier, paste zoals weergegeven door mijn browser. De uiteindelijke grootte is het absolute meest dat ik kon door met krijgen en nog steeds de pagina's afdrukken zoals ik gewenst.
