Home-theater-designers
Dacă ați imprimat vreodată rezervări de bilete sau instrucțiuni către un hotel de pe web, probabil că ați fost mai puțin impresionat de rezultate. Prin urmare, este posibil să nu știți 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:
Heading
Folosim marcaj semantic:
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 acel fișier 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, jumătate , 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 suportului 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 fișierelor î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.:
body {
background: white;
color: black;
}
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:
* {
background-image: none !important;
}
Legate de: Cum să setați o imagine de fundal în CSS
puteți roti un videoclip în Windows Media Player
Controlul marjelor
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 cititorilor 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ă. The @pagină regula permite setarea marginilor și trebuie utilizată după cum urmează:
@page {
margin: 2cm;
}
CSS are, de asemenea, capacitatea de a face machete de imprimare mai sofisticate, cum ar fi variația marginii în funcție de faptul dacă pagina este una impar (dreapta), pare (stânga) sau pagina de copertă.
cum se deschide Outlook în modul sigur
Din păcate, acest lucru este slab acceptat - în special opțiunea de copertă - dar poate fi utilizat într-o măsură minimă. Următoarele stiluri produc pagini cu margini inferioare puțin mai mari decât partea superioară și margini puțin mai mari pe marginea exterioară a paginii decât coloana vertebrală:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 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; }
Fixarea legăturilor
Î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; color: inherit; }
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]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
Acest CSS oferă rezultate precum următoarele:
a [href]: după vizează în mod specific poziția după ( :după ) fiecare element de legătură ( la ) care are de fapt o adresă URL ( [href] ). The conţinut declarația aici introduce valoarea href atribut între paranteze. Rețineți că alte reguli de stil pot fi aplicate 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: avoid; }
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 singur pe o pagină. Pentru a evita acest lucru, pur și simplu anulați întreruperea de pagină utilizând un selector care vizează acea instanță specifică, de exemplu:
cum se înlocuiește portul USB pe laptop
h1 + h2 { page-break-before: avoid; }
Vizualizarea stilurilor de imprimare
În toate cazurile, browserul și sistemul de operare ar trebui să ofere o funcție 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, în schimb, să fie 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 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.
Acțiune Acțiune Tweet E-mail Cum se imprimă pagini web în PDF cu Microsoft EdgeAț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.
Citiți în continuare Subiecte asemănătoare- Programare
- Tipărire
- CSS
Bobby este un pasionat de tehnologie care a lucrat ca dezvoltator de software timp de aproape două decenii. Este pasionat de jocuri, lucrează ca editor de recenzii la Switch Player Magazine și este cufundat în toate aspectele publicării online și dezvoltării web.
Mai multe de la Bobby JackAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona