Dacă ați tipărit vreodată de pe web rezervările de bilete sau indicațiile către un hotel, probabil că ați fost mai puțin impresionat de rezultate. Prin urmare, este posibil să nu fiți conștient de faptul că documentele tipărite pot fi stilizate în același mod în care pot fi afișate pe ecran, utilizând Foi de stil în cascadă (CSS).

Separarea preocupărilor

Un beneficiu cheie al CSS este separarea conținutului de prezentare. În termeni simpli, acest lucru înseamnă, în loc de un marcaj stilistic foarte vechi, cum ar fi:

Titlu

Folosim marcaj semantic:

Titlu

Nu numai că este mult mai curat, ci înseamnă și că prezentarea noastră este separată de conținutul nostru. Redarea browserelor h1 elemente ca text mare, aldin în mod implicit, dar putem schimba stilul în orice moment cu o foaie de stil:

h1 {font-weight: normal; }

Adunând acele declarații de stil într-un fișier separat și făcând referire la fișierul respectiv din documentul nostru HTML, putem folosi și mai bine separarea. Foaia de stil poate fi reutilizată și putem schimba fișierul în orice moment pentru a actualiza formatarea în fiecare document care îl folosește.

Inclusiv o foaie de stil de imprimare

În mod similar cu includerea unei foi de stil a ecranului, putem specifica o foaie de stil pentru imprimare. O foaie de stil a ecranului este de obicei inclusă astfel:

Cu toate acestea, un atribut suplimentar, mass-media, permite direcționarea pe baza contextului în care este redat documentul. În mod implicit, elementul anterior este echivalent cu:

Aceasta înseamnă că foaia de stil va fi aplicată pentru orice suport în care este redat documentul. Cu toate acestea, atributul media poate lua și valori de tipărire și ecran:

În acest exemplu, print.css foaia de stil va fi utilizată numai atunci când documentul este tipărit. Acesta este un mecanism foarte util. Putem aduna toate stilurile obișnuite (poate familia fonturilor sau spațiere între linii) într-o foaie de stil care se aplică tuturor mediilor și formatării specifice mediului în foile de stil individuale. Din nou, aceasta este o altă utilizare a separării preocupărilor.

Câteva exemple de declarații de stil

Un fundal curat

Aproape sigur nu doriți să pierdeți cerneala imprimând un fundal colorat sau o imagine de fundal. Începeți prin resetarea valorilor implicite pentru aceste valori care ar fi putut fi setate în documentul dvs.:

corp {
fundal: alb;
culoarea neagra;
}

S-ar putea să doriți, de asemenea, să împiedicați imprimarea oricăror imagini de fundal - acestea ar trebui să fie decorative și, prin urmare, să nu fie o parte necesară a conținutului:

* {
imagine de fundal: niciunul! important;
}

Legate de: Cum să setați o imagine de fundal în CSS

Cum să setați o imagine de fundal în CSS

CSS este un instrument puternic pentru stilizarea paginilor web. Învățarea plasării unei imagini de fundal vă învață o mulțime de elemente de bază CSS.

Controlul marginilor

Un alt punct evident de luat în considerare în ceea ce privește tipărirea este marginea paginii. În timp ce CSS oferă un mijloc de setare a dimensiunii marginii, trebuie să aveți în vedere faptul că browserul și imprimanta dvs. pot influența ele însele setările de marjă.

De exemplu, în dialogul de imprimare al Chrome, există o setare de marjă care are valori inclusiv nici unul și personalizat care va suprascrie orice specificat prin CSS:

Din acest motiv, se recomandă să lăsați cititorului deciziile de marjă pe paginile web publice. Cu toate acestea, pentru uz personal sau pentru crearea unui aspect implicit, setarea marginilor de imprimare prin CSS poate fi adecvată. @pagină regula permite setarea marginilor și trebuie utilizată după cum urmează:

@page {
margine: 2cm;
}

CSS are, de asemenea, capacitatea de a face machete de imprimare mai sofisticate, cum ar fi modificarea marginii în funcție de faptul dacă pagina este una impar (dreapta), pare (stânga) sau pagina de copertă.

Din păcate, acest lucru este slab acceptat - în special opțiunea de copertă - dar poate fi folosit într-o măsură minimă. Următoarele stiluri produc pagini cu margini inferioare ușor mai mari decât partea superioară și margini puțin mai mari pe marginea exterioară a paginii decât coloana vertebrală:

@page {
margine-stânga: 20mm;
margine-dreapta: 20mm;
marginea de sus: 40mm;
marginea-fund: 50mm;
}
@page: left {
margine-stânga: 30mm;
}
@page: dreapta {
margine-dreapta: 30mm;
}

Ascunderea conținutului irelevant

Nu tot conținutul va fi potrivit pentru o versiune tipărită a documentului dvs. Dacă pagina dvs. include navigare banner, reclame sau o bară laterală, vă recomandăm să împiedicați aceste detalii să apară în versiunea tipărită, de exemplu:

#contents, div.ad {display: none; }

În mod evident, hyperlinkurile nu sunt relevante în materialele tipărite, așa că probabil veți dori să eliminați orice stiluri care le diferențiază de textul înconjurător:

a {text-decoration: none; culoare: moșteni; }

Cu toate acestea, este posibil să doriți ca cititorii să aibă acces la adresele URL originale și o soluție simplă este să le inserați automat după textul legat:

a [href]: după {
conținut: "(" attr (href) ")";
dimensiunea fontului: 90%;
culoare: # 333;
}

Acest CSS oferă rezultate precum următoarele:

a [href]: după vizează în mod specific poziția după (:după) fiecare element de legătură (A) care are de fapt o adresă URL ([href]). conţinut declarația aici introduce valoarea href atribut între paranteze. Rețineți că pot fi aplicate alte reguli de stil pentru a controla afișarea conținutului generat.

Gestionarea pauzelor de pagină

Pentru a evita întreruperile de pagină să lase conținut izolat sau să le rupă incomod în mijloc, folosiți proprietățile de întrerupere a paginii: pagina-break-before, pagina-break-after și pagina-break-inside. De exemplu:

table {page-break-inside: evita; }

Acest lucru ar trebui să împiedice tabelele să se întindă pe mai multe pagini, cu condiția ca niciuna să nu fie mai înaltă decât o singură pagină. În mod similar:

h1, h2 {page-break-before: always; }

Aceasta înseamnă că astfel de titluri încep întotdeauna o pagină nouă. S-ar putea să apară probleme dacă urmăriți imediat h1-ul paginii dvs. cu un h2, totuși, deoarece h1 va ajunge pe o pagină pe cont propriu. Pentru a evita acest lucru, pur și simplu anulați întreruperea de pagină utilizând un selector care vizează acea instanță specifică, de exemplu:

h1 + h2 {page-break-before: evita; }

Vizualizarea stilurilor de imprimare

În toate cazurile, browserul și sistemul de operare ar trebui să ofere o caracteristică de previzualizare a imprimării, adesea ca parte a dialogului de imprimare standard.

Browserul Chrome face mai convenabil verificarea și chiar depanarea stilurilor dvs. de imprimare prin Instrumentele pentru dezvoltatori, așa cum demonstrează acest exemplu care arată un CV cu o foaie de stil de imprimare. Mai întâi, deschideți meniul principal și selectați Mai multe unelte urmat de Instrumente de dezvoltare opțiune:

Din noul panou care apare, selectați Meniul, atunci Mai multe unelte, urmată de Redare:

Apoi derulați în jos până la Emulează tipul media CSS setare. Meniul derulant vă permite să comutați între vizualizările de imprimare și ecran ale documentului dvs.:

Când emulați foaia de stil de imprimare, standardul Browser de stiluri este disponibil pentru a inspecta și modifica regulile stilului live. Rețineți că emularea rezultatelor de imprimare pe un ecran nu este încă 100% precisă. Browserul nu știe nimic despre dimensiunea hârtiei și @pagină regula nu poate fi imitată.

Tipărirea într-un PDF

O caracteristică utilă a sistemelor de operare moderne este capacitatea de a imprima într-un fișier PDF. De fapt, orice puteți imprima poate fi, în schimb, trimis într-un fișier PDF - nu este o surpriză reală, deoarece un fișier PDF ar trebui să reprezinte un document tipărit, la urma urmei.

Acest lucru face ca HTML, în combinație cu o foaie de stil de imprimare, să fie un mijloc excelent pentru crearea unui document de înaltă calitate care poate fi trimis ca atașament, precum și tipărit.

Tipăriți o varietate de documente

Puteți utiliza o foaie de stil de imprimare pentru a crea documente de calitate, inclusiv orice, de la CV-ul dvs. la rețete sau anunțuri de evenimente. Paginile web arată de obicei urât și conțin detalii nedorite atunci când sunt tipărite, dar un număr mic de modificări ale stilului pot îmbunătăți dramatic rezultatele tipăririi. Salvarea rezultatelor finale ca PDF este o modalitate rapidă de a crea documente atractive și profesionale.

Cum se imprimă pagini web în PDF cu Microsoft Edge

Ați dat vreodată peste un articol interesant pe care ați vrut să îl salvați mai târziu? Ei bine, puteți salva ca PDF cu Edge în trei pași simpli.

Despre autor