Коришћење ЦСС -а за обликовање докумената за штампање

Коришћење ЦСС -а за обликовање докумената за штампање

Ако сте икада одштампали резервације карата или упутства до хотела са веба, вероватно сте били мање него импресионирани резултатима. Стога можда нисте свесни да се штампани документи могу стилизовати на исти начин на који то могу на екрану, коришћењем каскадних стилских листова (ЦСС).





Одвајање од забринутости

Кључна предност ЦСС -а је одвајање садржаја од презентације. Најједноставније речено, ово значи уместо веома старомодних стилских ознака као што су:



Heading

Користимо семантичко означавање:




Не само да је ово много чистије, већ значи и да је наша презентација одвојена од нашег садржаја. Прегледници се исцртавају х1 елементи подразумевано велики, подебљани текст, али тај стил можемо променити у било ком тренутку помоћу табеле стилова:

h1 { font-weight: normal; }

Скупљањем тих декларација о стилу у засебну датотеку и позивањем те датотеке на наш ХТМЛ документ можемо још боље искористити раздвајање. Таблица стилова може се поново користити, а ту појединачну датотеку можемо промијенити у било којем тренутку како бисмо ажурирали обликовање у сваком документу који је користи.



Укључујући лист стилова штампе

На сличан начин као и додавање листа стилова екрана, можемо навести листу стилова за штампање. Лист са стилом екрана се обично укључује на следећи начин:


Међутим, додатни атрибут, пола , омогућава циљање на основу контекста у којем је документ приказан. Подразумевано, претходни елемент је еквивалентан:




То значи да ће се стилска таблица примијенити на било који медиј у којем је документ приказан. Међутим, атрибут медија може попримити и вриједности исписа и екрана:


У овом примеру, принт.цсс Табела стилова ће се користити само када се документ одштампа. Ово је веома користан механизам. Можемо окупити све уобичајене стилове (можда породицу фонтова или проред) у листу стилова која се односи на све медије и обликовање специфично за медије у појединачне таблице стилова. Опет, ово је још једна употреба раздвајања брига.



Неки примери декларација о стилу

Чиста позадина

Скоро сигурно не желите да трошите мастило на штампање шарене позадине или слике у позадини. Почните тако што ћете ресетовати све подразумеване вредности за ове вредности које су можда постављене у вашем документу:

body {
background: white;
color: black;
}

Можда бисте такође желели да спречите штампање било које слике у позадини - оне би требале бити декоративне и, према томе, нису обавезни део вашег садржаја:

* {
background-image: none !important;
}

Повезан: Како поставити позадинску слику у ЦСС -у

бесплатна апликација за гледање бесплатних филмова

Контрола маржи

Још једна очигледна тачка коју треба узети у обзир у вези са штампањем је маргина странице. Иако ЦСС пружа начин подешавања величине маргина, треба имати на уму да ваш прегледач и штампач такође могу утицати на сама подешавања маргине.

На пример, у Цхроме -овом дијалогу за штампање постоји подешавање маргине које има вредности укључујући ниједан и обичај који ће надјачати све наведено путем ЦСС -а:

Из тог разлога, препоручује се да одлуке о маргинама оставите читаоцу на јавним веб страницама. Међутим, за личну употребу или за креирање подразумеваног изгледа, подешавање маргина за штампање путем ЦСС -а може бити прикладно. Тхе @страна правило дозвољава постављање маргина и треба га користити на следећи начин:

@page {
margin: 2cm;
}

ЦСС такође има капацитет за софистицираније распореде штампе, као што је промена маргине у зависности од тога да ли је страница непарна (десно), парна (лево) или насловна страница.

зашто моје поруке кажу да није испоручено

Нажалост, ово је слабо подржано - посебно опција насловне странице - али се може користити у минималној мери. Следећи стилови производе странице са нешто већим доњим маргинама од горњих и нешто већим маргинама на спољној ивици странице од кичме:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Скривање ирелевантног садржаја

Неће сав садржај бити прикладан за штампану верзију вашег документа. Ако ваша страница садржи навигацију банерима, огласе или бочну траку, можда бисте желели да спречите да се ти детаљи појављују у верзији за штампање, на пример:

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

Хипервезе очигледно нису релевантне у штампаном материјалу, па ћете вероватно желети да уклоните све стилове који их разликују од околног текста:

a { text-decoration: none; color: inherit; }

Међутим, можда бисте ипак желели да читаоци имају приступ оригиналним УРЛ -овима, а једноставно решење је да их аутоматски уметнете после повезаног текста:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Овај ЦСС даје резултате попут следећих:

а [хреф]: после посебно циља позицију након ( :после ) сваки елемент везе ( до ) који заправо има УРЛ ( [хреф] ). Тхе садржај декларација овде убацује вредност хреф атрибут између заграда. Имајте на уму да се друга правила стила могу применити за контролу приказа генерисаног садржаја.

Руковање преломом странице

Да бисте избегли да преломи страница оставе изоловани садржај или да га незгодно разбију у средини, користите својства прелома странице: прелом странице пре , прелом странице и пробијање странице . На пример:

table { page-break-inside: avoid; }

Ово би требало да помогне да се табеле не простиру на више страница, под условом да ниједна није виша од једне странице. Слично:

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

То значи да такви наслови увек започињу нову страницу. Међутим, могло би изазвати проблеме ако одмах пратите х1 странице са х2, јер ће х1 сама завршити на страници. Да бисте то избегли, једноставно откажите прелом странице помоћу бирача који циља ту одређену инстанцу, на пример:

веб странице које вам омогућавају бесплатно гледање филмова
h1 + h2 { page-break-before: avoid; }

Преглед стилова штампе

У свим случајевима, ваш прегледач и оперативни систем треба да обезбеде функцију прегледа штампе, често као део стандардног дијалога за штампање.

Цхроме прегледач олакшава проверу, па чак и отклањање грешака у стиловима штампања путем Алата за програмере, што показује овај пример који приказује ЦВ са листом стилова штампе. Прво отворите главни мени и изаберите Више алата након чега следи Алати за програмере опција:

На новом панелу који се појави изаберите Мени , онда Више алата , затим Рендеринг :

Затим се померите надоле до Емулирајте тип медија ЦСС -а подешавање. Падајући мени вам омогућава да се пребацујете између приказа штампе и екрана вашег документа:

Приликом емулације табеле стилова штампе, стандард Претраживач стилова је доступан за преглед и измену правила стила уживо. Имајте на уму да опонашање штампања на екрану још увек није 100% тачно. Претраживач не зна ништа о величини папира и @страна правило се не може опонашати.

Штампање у ПДФ -у

Згодна карактеристика савремених оперативних система је могућност штампања у ПДФ датотеци. У ствари, све што можете одштампати може се, уместо тога, послати у ПДФ датотеку - није право изненађење јер би ПДФ датотека, на крају крајева, требало да представља штампани документ.

Ово чини ХТМЛ, у комбинацији са стилом за штампање, одличним средством за креирање висококвалитетног документа који се може послати као прилог, али и одштампати.

Табелу стилова за штампање можете користити за креирање квалитетних докумената, укључујући све од ваше биографије до рецепата или најава догађаја. Веб странице обично изгледају ружно и садрже нежељене детаље приликом штампања, али мали број измена стилова може драматично побољшати резултате штампања. Чување коначних резултата у ПДФ формату брз је начин за стварање атрактивних, професионалних докумената.

Објави Објави Твеет Емаил Како штампати веб странице у ПДФ -у помоћу Мицрософт Едге -а

Јесте ли икада наишли на занимљив чланак који сте желели да сачувате за касније? Па, можете сачувати као ПДФ са Едге -ом у три једноставна корака.

Прочитајте следеће Повезане теме
  • Програмирање
  • Штампање
  • ЦСС
О аутору Бобби Јацк(Објављено 58 чланака)

Бобби је ентузијаст технологије који је скоро две деценије радио као програмер софтвера. Одушевљен је играњем игара, ради као уредник рецензија у магазину Свитцх Плаиер, и уроњен је у све аспекте издаваштва на мрежи и веб развоја.

Више од Боббија Јацка

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили