அச்சிடுவதற்கு ஆவணங்களை வடிவமைக்க CSS ஐப் பயன்படுத்துதல்

அச்சிடுவதற்கு ஆவணங்களை வடிவமைக்க CSS ஐப் பயன்படுத்துதல்

இணையத்திலிருந்து டிக்கெட் முன்பதிவு அல்லது ஒரு ஹோட்டலுக்கான திசைகளை நீங்கள் எப்போதாவது அச்சிட்டிருந்தால், நீங்கள் முடிவுகளால் ஈர்க்கப்பட்டதை விட குறைவாக இருக்கலாம். ஆகையால், அச்சிடப்பட்ட ஆவணங்கள் திரையில் செய்யக்கூடிய அதே வழியில், அடுக்கு பாணி தாள்களை (CSS) பயன்படுத்தி வடிவமைக்கப்படலாம் என்பது உங்களுக்குத் தெரியாது.





கவலைகளைப் பிரித்தல்

CSS இன் ஒரு முக்கிய நன்மை, உள்ளடக்கத்தை விளக்கக்காட்சியில் இருந்து பிரிப்பது. எளிமையான சொற்களில், இது போன்ற மிகவும் பழமையான ஸ்டைலிஸ்டிக் மார்க்அப் போன்றது:



Heading

நாங்கள் சொற்பொருள் மார்க்அப்பைப் பயன்படுத்துகிறோம்:






இது மிகவும் தூய்மையானது மட்டுமல்ல, எங்கள் விளக்கக்காட்சி எங்கள் உள்ளடக்கத்திலிருந்து பிரிக்கப்பட்டுள்ளது என்பதையும் குறிக்கிறது. உலாவிகள் வழங்குகின்றன h1 உறுப்புகள் இயல்பாகவே பெரிய, தடித்த உரை, ஆனால் ஸ்டைல்ஷீட் மூலம் எந்த நேரத்திலும் அந்த பாணியை மாற்றலாம்:

h1 { font-weight: normal; }

அந்த ஸ்டைல் ​​பிரகடனங்களை ஒரு தனி கோப்பில் சேகரித்து, அந்த கோப்பை எங்கள் HTML ஆவணத்திலிருந்து குறிப்பிடுவதன் மூலம், நாம் பிரிவை இன்னும் சிறப்பாகப் பயன்படுத்தலாம். ஸ்டைல் ​​ஷீட்டை மீண்டும் பயன்படுத்தலாம், அதை பயன்படுத்தும் ஒவ்வொரு ஆவணத்திலும் வடிவமைப்பைப் புதுப்பிக்க எந்த நேரத்திலும் அந்த ஒற்றை கோப்பை மாற்றலாம்.



ஒரு அச்சு பாணி தாள் உட்பட

ஒரு திரை பாணித் தாளைச் சேர்ப்பதற்கு ஒத்த முறையில், அச்சுக்கு ஒரு ஸ்டைல் ​​ஷீட்டை நாம் குறிப்பிடலாம். ஒரு திரை பாணி தாள் பொதுவாக இவ்வாறு சேர்க்கப்பட்டுள்ளது:


எனினும், ஒரு கூடுதல் பண்பு, பாதி ஆவணம் வழங்கப்பட்ட சூழலின் அடிப்படையில் இலக்கு வைக்க அனுமதிக்கிறது. இயல்பாக, முந்தைய உறுப்பு இதற்கு சமம்:




இதன் பொருள் ஸ்டைல்ஷீட் ஆவணம் வழங்கப்படும் எந்த ஊடகத்திற்கும் பயன்படுத்தப்படும். இருப்பினும், ஊடக பண்புக்கூறு அச்சு மற்றும் திரையின் மதிப்புகளையும் எடுக்கலாம்:


இந்த எடுத்துக்காட்டில், தி print.css ஆவணம் அச்சிடப்படும் போது மட்டுமே ஸ்டைல்ஷீட் பயன்படுத்தப்படும். இது மிகவும் பயனுள்ள பொறிமுறையாகும். அனைத்து ஸ்டைலிங்கிலும் (அநேகமாக எழுத்துரு குடும்பம் அல்லது வரி இடைவெளி) அனைத்து ஊடகங்களுக்கும் பொருந்தும் ஒரு ஸ்டைல்ஷீட்டில், மற்றும் தனிப்பட்ட ஸ்டைல்ஷீட்களில் மீடியா-குறிப்பிட்ட வடிவமைப்பை நாம் சேகரிக்கலாம். மீண்டும், இது கவலைகளைப் பிரிப்பதற்கான மற்றொரு பயன்பாடாகும்.



சில உதாரண பாணி பிரகடனங்கள்

ஒரு சுத்தமான பின்னணி

வண்ணமயமான பின்னணி அல்லது பின்னணி படத்தை அச்சிட்டு மை வீணடிக்க நீங்கள் நிச்சயமாக விரும்பவில்லை. உங்கள் ஆவணத்தில் அமைக்கப்பட்டுள்ள இந்த மதிப்புகளுக்கான இயல்புநிலைகளை மீட்டமைப்பதன் மூலம் தொடங்கவும்:

body {
background: white;
color: black;
}

நீங்கள் எந்த பின்னணி படங்களையும் அச்சிடுவதைத் தடுக்க விரும்பலாம் - இவை அலங்காரமாக இருக்க வேண்டும், எனவே, உங்கள் உள்ளடக்கத்தின் தேவையான பகுதி அல்ல:

* {
background-image: none !important;
}

தொடர்புடையது: CSS இல் பின்னணி படத்தை எப்படி அமைப்பது

தனிப்பயன் ஸ்னாப்சாட் வடிப்பான்களை எவ்வாறு பெறுவது

கட்டுப்பாடுகளை கட்டுப்படுத்துதல்

அச்சு பற்றி கருத்தில் கொள்ள வேண்டிய மற்றொரு வெளிப்படையான புள்ளி பக்க விளிம்பு. விளிம்பு அளவை அமைப்பதற்கான வழிமுறையை CSS வழங்கும் அதே வேளையில், உங்கள் உலாவி மற்றும் அச்சுப்பொறி விளிம்பு அமைப்புகளையும் பாதிக்கலாம் என்பதை நீங்கள் நினைவில் கொள்ள வேண்டும்.

எடுத்துக்காட்டாக, Chrome இன் அச்சு உரையாடலில், உள்ளிட்ட மதிப்புகளைக் கொண்ட ஒரு விளிம்பு அமைப்பு உள்ளது இல்லை மற்றும் விருப்ப இது CSS வழியாக குறிப்பிடப்பட்ட எதையும் மேலெழுதும்:

இந்த காரணத்திற்காக, பொது வலைப்பக்கங்களில் விளிம்பு முடிவுகளை வாசகருக்கு விட்டுவிட பரிந்துரைக்கப்படுகிறது. இருப்பினும், தனிப்பட்ட பயன்பாட்டிற்காக அல்லது இயல்புநிலை அமைப்பை உருவாக்க, CSS வழியாக அச்சு விளிம்புகளை அமைப்பது பொருத்தமானதாக இருக்கலாம். தி @பக்கம் விதிகள் விளிம்புகளை அமைக்க அனுமதிக்கிறது, பின்வருமாறு பயன்படுத்தப்பட வேண்டும்:

@page {
margin: 2cm;
}

பக்கம் ஒற்றைப்படை எண் (வலது), இரட்டை எண் (இடது) அல்லது அட்டைப் பக்கம் என்பதைப் பொறுத்து விளிம்பை மாற்றுவது போன்ற அதிநவீன அச்சு அமைப்புகளுக்கான திறனையும் CSS கொண்டுள்ளது.

எனது அமேசான் ஆர்டரை நான் பெறவில்லை

துரதிருஷ்டவசமாக, இது மோசமாக ஆதரிக்கப்படுகிறது -குறிப்பாக அட்டைப் பக்கம் விருப்பம் -ஆனால் இது குறைந்தபட்ச அளவிற்குப் பயன்படுத்தப்படலாம். பின்வரும் பாணிகள் முதுகெலும்பை விட மேல்புறத்தை விட சற்று பெரிய விளிம்புகள் மற்றும் வெளிப்புற பக்க விளிம்பில் சற்று பெரிய விளிம்புகள் கொண்ட பக்கங்களை உருவாக்குகின்றன:

@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; }

இருப்பினும், அசல் URL களை வாசகர்கள் அணுக வேண்டும் என்று நீங்கள் இன்னும் விரும்பலாம், மேலும் இணைக்கப்பட்ட உரைக்குப் பிறகு அவற்றைத் தானாகவே செருகுவதே நேரடியான தீர்வாகும்:

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

இந்த CSS பின்வருவன போன்ற முடிவுகளை அளிக்கிறது:

a [href]: பிறகு குறிப்பாக பின் இலக்கை குறிவைக்கிறது ( : பிறகு ஒவ்வொரு இணைப்பு உறுப்பு ( க்கு ) உண்மையில் ஒரு URL உள்ளது ( [href] ) தி உள்ளடக்கம் அறிவிப்பு இங்கே மதிப்பைச் செருகுகிறது href அடைப்புக்குறிக்குள் பண்பு. உருவாக்கப்பட்ட உள்ளடக்கத்தின் காட்சியை கட்டுப்படுத்த மற்ற பாணி விதிகள் பயன்படுத்தப்படலாம் என்பதை நினைவில் கொள்க.

பக்க இடைவெளிகளைக் கையாளுதல்

தனிமைப்படுத்தப்பட்ட உள்ளடக்கத்தை விட்டு, அல்லது நடுவில் மோசமாக உடைப்பதை பக்க இடைவெளிகளை தவிர்க்க, பக்க இடைவெளி பண்புகளை பயன்படுத்தவும்: page-break-before , பக்கம் இடைவெளிக்குப் பிறகு மற்றும் பக்கம் உடைப்பு உள்ளே . உதாரணத்திற்கு:

table { page-break-inside: avoid; }

அட்டவணைகள் பல பக்கங்களை விரிவாக்காமல் இருக்க இது உதவும், ஒரு பக்கத்தை விட உயரமானது எதுவுமில்லை. இதேபோல்:

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

இதன் பொருள் இதுபோன்ற தலைப்புகள் எப்போதும் ஒரு புதிய பக்கத்தைத் தொடங்கும். உங்கள் பக்கத்தின் h1 ஐ உடனடியாக h2 உடன் பின்தொடர்ந்தால் அது சிக்கல்களை ஏற்படுத்தலாம், இருப்பினும், h1 அதன் சொந்த பக்கத்தில் ஒரு பக்கத்தில் முடிவடையும். இதைத் தவிர்க்க, குறிப்பிட்ட நிகழ்வை இலக்காகக் கொண்ட தேர்வாளரைப் பயன்படுத்தி பக்க இடைவெளியை ரத்து செய்யுங்கள், எடுத்துக்காட்டாக:

யுஎஸ்பி மூலம் மடிக்கணினியை சார்ஜ் செய்ய முடியுமா?
h1 + h2 { page-break-before: avoid; }

பிரிண்ட் ஸ்டைல்களைப் பார்க்கிறது

எல்லா சந்தர்ப்பங்களிலும், உங்கள் உலாவி மற்றும் இயக்க முறைமை ஒரு அச்சு முன்னோட்ட அம்சத்தை வழங்க வேண்டும், பெரும்பாலும் நிலையான அச்சு உரையாடலின் ஒரு பகுதியாக.

Chrome உலாவி டெவலப்பர் கருவிகள் வழியாக உங்கள் அச்சு பாணியை சரிபார்த்து பிழைதிருத்தம் செய்வதை மிகவும் வசதியாக ஆக்குகிறது, இந்த உதாரணம் ஒரு அச்சு பாணி தாள் கொண்ட CV ஐக் காட்டுகிறது. முதலில், பிரதான மெனுவைத் திறந்து தேர்ந்தெடுக்கவும் இன்னும் கருவிகள் தொடர்ந்து டெவலப்பர் கருவிகள் விருப்பம்:

தோன்றும் புதிய பேனலில் இருந்து தேர்ந்தெடுக்கவும் பட்டியல் , பிறகு இன்னும் கருவிகள் , தொடர்ந்து வழங்குதல் :

பின்னர் கீழே உருட்டவும் சிஎஸ்எஸ் ஊடக வகையைப் பின்பற்றவும் அமைத்தல். உங்கள் ஆவணத்தின் அச்சு மற்றும் திரை காட்சிகளுக்கு இடையில் மாற்றுவதற்கு கீழ்தோன்றல் உங்களை அனுமதிக்கிறது:

அச்சு ஸ்டைல்ஷீட்டைப் பின்பற்றும்போது, ​​தரநிலை பாங்குகள் உலாவி நேரடி பாணி விதிகளை ஆய்வு செய்யவும் மாற்றவும் கிடைக்கிறது. ஒரு திரையில் அச்சு வெளியீட்டைப் பின்பற்றுவது இன்னும் 100% துல்லியமாக இல்லை என்பதை நினைவில் கொள்ளுங்கள். உலாவிக்கு காகித அளவு பற்றி எதுவும் தெரியாது, மற்றும் @பக்கம் விதியை பின்பற்ற முடியாது.

ஒரு PDF க்கு அச்சிடுதல்

நவீன இயக்க முறைமைகளின் எளிமையான அம்சம் PDF கோப்பில் அச்சிடக்கூடிய திறன் ஆகும். உண்மையில், நீங்கள் அச்சிடக்கூடிய எதையும் ஒரு PDF கோப்பிற்கு அனுப்பலாம் - ஒரு PDF கோப்பு அச்சிடப்பட்ட ஆவணத்தை பிரதிநிதித்துவப்படுத்தும் என்பதால், உண்மையில் ஆச்சரியமில்லை.

இது HTML, அச்சு பாணியுடன் இணைந்து, உயர்தர ஆவணத்தை இணைப்பதற்கான ஒரு சிறந்த வழிமுறையாகும், அதை இணைப்பாகவும் அச்சிடவும் செய்யலாம்.

உங்கள் சிவி முதல் சமையல் குறிப்புகள் அல்லது நிகழ்வு அறிவிப்புகள் உட்பட தரமான ஆவணங்களை உருவாக்க நீங்கள் ஒரு அச்சு பாணியைப் பயன்படுத்தலாம். இணையப் பக்கங்கள் பொதுவாக அசிங்கமாகத் தோன்றும் மற்றும் அச்சிடப்படும் போது தேவையற்ற விவரங்களைக் கொண்டிருக்கும், ஆனால் குறைந்த எண்ணிக்கையிலான பாணி மாற்றங்கள் கிறுக்கல் அச்சு முடிவுகளை வியத்தகு முறையில் மேம்படுத்தலாம். இறுதி முடிவுகளை PDF ஆக சேமிப்பது கவர்ச்சிகரமான, தொழில்முறை ஆவணங்களை உருவாக்க விரைவான வழியாகும்.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் மைக்ரோசாப்ட் எட்ஜ் மூலம் வலைப்பக்கங்களை PDF க்கு அச்சிடுவது எப்படி

நீங்கள் பின்னர் சேமிக்க விரும்பும் ஒரு சுவாரஸ்யமான கட்டுரையை நீங்கள் எப்போதாவது பார்த்தீர்களா? சரி, நீங்கள் மூன்று எளிய படிகளில் எட்ஜ் உடன் PDF ஆக சேமிக்கலாம்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • அச்சிடுதல்
  • CSS
எழுத்தாளர் பற்றி பாபி ஜாக்(58 கட்டுரைகள் வெளியிடப்பட்டன)

பாபி ஒரு தொழில்நுட்ப ஆர்வலர் ஆவார், அவர் இரண்டு தசாப்தங்களாக மென்பொருள் உருவாக்குநராக பணியாற்றினார். அவர் கேமிங் மீது ஆர்வம் கொண்டவர், ஸ்விட்ச் பிளேயர் இதழில் விமர்சனம் ஆசிரியராகப் பணியாற்றுகிறார், மேலும் ஆன்லைன் வெளியீடு மற்றும் வலை மேம்பாட்டின் அனைத்து அம்சங்களிலும் மூழ்கி இருக்கிறார்.

பாபி ஜாக் இருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்