אם אי פעם הדפסת הזמנות כרטיסים או הוראות הגעה למלון מהאינטרנט, כנראה שהתרשמת פחות מהתוצאות. לכן, ייתכן שלא תהיה מודע לכך שניתן לעצב מסמכים מודפסים באופן זהה לזה שהם יכולים על גבי המסך, באמצעות גליונות סגנון מדורגים (CSS).

הפרדת דאגות

יתרון מרכזי של CSS הוא הפרדת התוכן מהמצגת. במילים הפשוטות ביותר, פירוש הדבר במקום סימון סגנוני מיושן מאוד כגון:

כּוֹתֶרֶת

אנו משתמשים בסימון סמנטי:

כּוֹתֶרֶת

לא רק שזה הרבה יותר נקי, זה גם אומר שהמצגת שלנו מופרדת מהתוכן שלנו. דפדפנים מעבירים h1 אלמנטים כטקסט גדול ומודגש כברירת מחדל, אך אנו יכולים לשנות את הסגנון בכל עת באמצעות גיליון סגנונות:

h1 {font-weight: normal; }

על ידי איסוף הצהרות סגנון אלה בקובץ נפרד, והפניה לקובץ זה ממסמך ה- HTML שלנו, אנו יכולים לעשות שימוש טוב יותר בהפרדה. ניתן לעשות שימוש חוזר בגליון הסגנון, ואנחנו יכולים לשנות את הקובץ היחיד בכל עת כדי לעדכן את העיצוב בכל מסמך המשתמש בו.

כולל גיליון לסגנון הדפסה

באופן דומה לכלול גיליון סגנונות מסך, אנו יכולים לציין גיליון סגנון להדפסה. דף סגנון מסך כלול בדרך כלל כך:

עם זאת, מאפיין נוסף, כְּלֵי תִקְשׁוֹרֶת, מאפשר מיקוד על סמך ההקשר בו מסמך מוצג. כברירת מחדל, האלמנט הקודם שווה ערך ל:

המשמעות היא שגיליון הסגנונות יוחל על כל מדיום בו יוצג המסמך. עם זאת, תכונת המדיה יכולה גם לקבל ערכי הדפסה ומסך:

בדוגמה זו, print.css גליון סגנונות ישמש רק כאשר המסמך מודפס. זהו מנגנון מאוד שימושי. אנו יכולים לאסוף את כל העיצוב הנפוץ (אולי משפחת גופנים או רווחי שורות) בגליון סגנון המתאים לכל המדיה, ועיצוב ספציפי למדיה בגיליונות סגנון בודדים. שוב, זהו שימוש נוסף בהפרדת דאגות.

כמה הצהרות סגנון לדוגמא

רקע נקי

כמעט בוודאות אינך רוצה לבזבז דיו על הדפסת רקע צבעוני או תמונת רקע. התחל על ידי איפוס כל ברירות המחדל עבור ערכים אלה שייתכן שהוגדרו במסמך שלך:

גוף {
רקע: לבן;
צבע שחור;
}

ייתכן שתרצה גם למנוע הדפסת תמונות רקע - אלה צריכות להיות דקורטיביות ולכן אינן חלק נדרש מהתוכן שלך:

* {
תמונת רקע: אף אחד לא חשוב;
}

קָשׁוּר: כיצד להגדיר תמונת רקע ב- CSS

כיצד להגדיר תמונת רקע ב- CSS

CSS הוא כלי רב עוצמה לעיצוב דפי אינטרנט. ללמוד כיצד להציב תמונת רקע מלמד אותך הרבה יסודות CSS.

שוליים שולטים

נקודה ברורה נוספת שיש לקחת בחשבון בנוגע להדפסה היא שוליים העמודים. בעוד ש- CSS מספק אמצעי לקביעת גודל השוליים, עליך לזכור כי הדפדפן והמדפסת עשויים להשפיע גם על הגדרות השוליים עצמם.

לדוגמא, בדיאלוג ההדפסה של Chrome, יש הגדרת שוליים הכוללת ערכים אף אחד ו המותאם אישית אשר יעקוף כל מה שצוין באמצעות CSS:

מסיבה זו, מומלץ להשאיר לקוראים החלטות שוליים בדפי אינטרנט ציבוריים. עם זאת, לשימוש אישי או ליצירת פריסת ברירת מחדל, הגדרת שוליים להדפסה באמצעות CSS עשויה להיות מתאימה. ה @עמוד הכלל מאפשר להגדיר שוליים, ויש להשתמש בו באופן הבא:

@עמוד {
שוליים: 2 ס"מ;
}

ל- CSS יכולת גם פריסות הדפסה מתוחכמות יותר, כמו למשל לשנות את השוליים בהתאם לדף שהוא מספר אי זוגי (מימין), מספר זוגי (משמאל) או עמוד השער.

למרבה הצער, הדבר אינו נתמך בצורה גרועה - במיוחד באפשרות עמוד השער - אך ניתן להשתמש בו במינימום. הסגנונות הבאים מייצרים דפים עם שוליים תחתונים מעט גדולים יותר מאשר שוליים עליונים ומעט גדולים יותר בקצה העמוד החיצוני מאשר עמוד השדרה:

@עמוד {
שוליים-שמאל: 20 מ"מ;
שוליים מימין: 20 מ"מ;
שוליים למעלה: 40 מ"מ;
שוליים תחתונים: 50 מ"מ;
}
דף @: שמאל {
שוליים-שמאל: 30 מ"מ;
}
דף @: נכון {
שוליים מימין: 30 מ"מ;
}

הסתרת תוכן לא רלוונטי

לא כל התוכן יתאים לגרסת הדפסה של המסמך שלך. אם הדף שלך כולל ניווט באנרים, פרסומות או סרגל צד, ייתכן שתרצה למנוע את הצגת הפרטים בגרסת ההדפסה, למשל:

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

היפר-קישורים הם כמובן לא רלוונטיים בחומר מודפס, לכן סביר להניח שתרצה להסיר את כל הסגנונות המבדילים אותם מהטקסט שמסביב:

{קישוט טקסט: אין; צבע: לרשת; }

עם זאת, ייתכן שעדיין תרצה שהקוראים יקבלו גישה לכתובות האתר המקוריות, ופתרון פשוט הוא להוסיף אותם באופן אוטומטי לאחר הטקסט המקושר:

a [href]: אחרי {
content: "(" attr (href) ")";
גודל גופן: 90%;
צבע: # 333;
}

CSS זה נותן תוצאות כגון:

a [href]: אחרי ממקד במיוחד למיקום לאחר (:לאחר) כל רכיב קישור (א) שיש לה למעשה כתובת URL ([href]). ה תוֹכֶן הצהרה כאן מכניסה את הערך של href תכונה בין סוגריים. שים לב כי ניתן להחיל כללי סגנון אחרים כדי לשלוט בתצוגת התוכן שנוצר.

טיפול בהפסקות עמודים

כדי למנוע מעברי עמודים שמשאירים תוכן מבודד, או שבירתם במבוכה באמצע, השתמש במאפייני מעבר העמודים: מעבר לדף לפני, מעבר לדף ו פריצת עמודים. לדוגמה:

טבלה {פירוק דף: הימנע; }

זה אמור לסייע במניעת טבלאות המשתרעות על פני מספר עמודים, ובלבד שלא יהיו גבוהות מדף אחד. בדומה לכך:

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

המשמעות היא שכותרות כאלה מתחילות תמיד דף חדש. זה עלול לגרום לבעיות אם אתה מיד עוקב אחר h1 של הדף שלך עם h2, מכיוון ש- h1 יסתיים בעמוד לגמרי בפני עצמו. כדי להימנע מכך, פשוט בטל את מעבר הדף באמצעות בורר המכוון למופע הספציפי הזה, למשל:

h1 + h2 {break-break-before: הימנע; }

הצגת סגנונות הדפסה

בכל המקרים, הדפדפן ומערכת ההפעלה שלך צריכים לספק תכונת תצוגה מקדימה של הדפסה, לעתים קרובות כחלק מתיבת הדו-שיח ההדפסה הרגילה.

דפדפן Chrome הופך את זה ליותר נוח לבדיקת ואפילו ניפוי באגים בסגנונות ההדפסה שלך באמצעות כלי מפתח, כפי שמוצג בדוגמה זו המציגה קורות חיים עם דף סגנון הדפסה. ראשית, פתח את התפריט הראשי ובחר כלים נוספים ואחריו כלי מפתח אוֹפְּצִיָה:

מהחלונית החדשה שמופיעה בחר תַפרִיט, לאחר מכן כלים נוספים, בא אחריו טִיוּחַ:

ואז גלול מטה אל לחקות את סוג המדיה של CSS הגדרה. התפריט הנפתח מאפשר לך לעבור בין תצוגות ההדפסה למסך של המסמך שלך:

בעת חיקוי גיליון סגנונות ההדפסה, הסטנדרט דפדפן סגנונות זמין לבדיקה ולשינוי כללי הסגנון החי. זכור כי חיקוי פלט ההדפסה על גבי המסך עדיין אינו מדויק ב 100%. הדפדפן אינו יודע דבר על גודל הנייר ועל @עמוד לא ניתן לחקות את הכלל.

הדפסה למסמך PDF

מאפיין שימושי של מערכות הפעלה מודרניות הוא היכולת להדפיס לקובץ PDF. למעשה, כל דבר שתוכלו להדפיס יכול להישלח במקום קובץ PDF - אין הפתעה אמיתית מכיוון שקובץ PDF אמור לייצג מסמך מודפס, אחרי הכל.

זה הופך את HTML, בשילוב עם גיליון סגנונות הדפסה, לאמצעי מצוין ליצירת מסמך איכותי שניתן לשלוח כקובץ מצורף, כמו גם להדפסה.

הדפיסו מגוון מסמכים

אתה יכול להשתמש בגיליון סגנונות להדפסה כדי ליצור מסמכים איכותיים, כולל כל דבר, החל בקורות החיים שלך ועד מתכונים או הכרזות על אירועים. דפי אינטרנט בדרך כלל נראים מכוערים ומכילים פרטים לא רצויים בעת ההדפסה, אך מספר קטן של שינויים בסגנון יכול לשפר באופן דרמטי את תוצאות ההדפסה. שמירת התוצאות הסופיות כקובץ PDF היא דרך מהירה ליצור מסמכים אטרקטיביים ומקצועיים.

כיצד להדפיס דפי אינטרנט ל- PDF באמצעות Microsoft Edge

האם נתקלתם פעם במאמר מעניין שרציתם לשמור עליו בהמשך? ובכן, אתה יכול לשמור כ- PDF עם Edge בשלושה שלבים פשוטים.

על הסופר