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

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

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

Наслов

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

Наслов

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

х1 {фонт-веигхт: нормално; }

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

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

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

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

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

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

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

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

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

тело {
позадина: бела;
боја Црна;
}

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

* {
позадинска слика: нема! важно;
}

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

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

ЦСС је моћан алат за обликовање веб страница. Учење како поставити позадинску слику учи вас многим основама ЦСС-а.

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

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

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

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

@страна {
маржа: 2цм;
}

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

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

@страна {
маргина-лева: 20 мм;
маргина-десно: 20мм;
маргин-топ: 40мм;
маргина-дно: 50 мм;
}
@паге: лефт {
маргина-лева: 30 мм;
}
@паге: десно {
маргина-десно: 30 мм;
}

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

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

#цонтентс, див.ад {дисплаи: ноне; }

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

а {украс текста: ниједан; боја: наследити; }

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

а [хреф]: после {
садржај: "(" аттр (хреф) ")";
величина фонта: 90%;
боја: # 333;
}

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

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

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

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

табела {разбијање странице: избегавање; }

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

х1, х2 {прелом странице: увек; }

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

х1 + х2 {прелом странице: избегавање; }

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

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

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

На новом панелу који се појави изаберите Мени, онда Још алата, затим Приказивање:

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

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

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

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

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

Штампање различитих докумената

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

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

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

О аутору