6. טקסט וכותרות ב - CSS

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

סוגים של טקסט

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

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

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

הגוף והכותרות

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

הצעד הראשון שלנו הוא ליצור כלל המקצה פונט מסויים (גודל וכדו') לטקסט העיקרי בעמוד.

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

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

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

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

הפונט וגודל הטקסט

בשלב זה, מאפייני הטקסט החשובים ביותר הם הפונט וגודל הטקסט. אלה מפורטים ע"י font-family (משפחת הפונט) וע"י המאפיינים של font-size (גודל הפונט).

גופן (הפונט)

המאפיין של משפחת הפונט מציין פונט אחד או יותר עבור אלמנט כלשהו, בשימוש שם המשפחה של הפונט. כל שם של פונט מופרד ע"י פסיק. הדפדפן ישתמש בפונט הראשון ברשימה המותקנת במחשב שלו.
לדוגמא ניקח פונט Verdana.נהוג גם לתאר פונט נפוץ למקינטוש, פונט נפוץ ל- Windows, וגם שם של סוג פונט משותף.
בדוגמא זו ניקח Helvetica, Arial ו- Sans-serif כפונטים אלה.

הכל יחד מרכיב לנו את הכלל הבא

BODY
{
font-family: Verdana, Arial, Helvetica, sans-serif
}

Exercise 1

כעת זהו תורכם. צרו כלל דומה המתאר את הפונטים שאתם רוצים ליישם על הטקסט שבגוף הדף שלכם. אם אתם מעדיפים פונטים מסוג Serif (כמו Times או Palatino), אז סוג שם הפונט המשותף הסופי צריך להיות serif.

גודל הטקסט

גודל הטקסט נקבע ע"י השימוש במאפיין גודל הפונט. אפשר לקבוע את גודל הטקסט במספר דרכים, כולל מילות מפתח, כמו: קטן ואקסטרה-לארג' (x-large), נקודות, פיקסלים ומדידות טיפוגרפיות שונות, כמו: picas ו- ems.
הדרך המדוייקת לתאר גדלים היא נושא טעון, בשל ההבדלים בין מערכות הפעלה שונות ודפדפנים שונים. זה בהחלט משהו שעליכם לחקור יותר לעומק כשתלמדו יותר על CSS(לפנים Verso). מומליץו לבדוק את הדיון המפורט על הנושאים הקשורים לגודל הטקסט מתוך Tod Fahrner at Metrius. אם ברצונכם ללמוד באמת על השימוש הנכון ב-CSS, זוהי קריאת חובה.

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

בכדי לתאר מידה של 150% לדוגמא, המאפיין הוא גודל-פונט: 150%.

font-size: 150%

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

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

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

כותרות

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

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

בוחן פתע

מהי קבוצת הבוררים עבור כל רמות הכותרת (H1 עד H6)?

תרגיל מס' 2

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

התשובה בסוף השיעור.

ושוב… הגיע הזמן לעשות בדיקת התקדמות. כיצד מתקדם הדף?

שלב הבא

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

כעת נבדוק את הדברים הנפלאים שאתם יכולים לעשות עם links (קישורים) בעזרת השימוש ב-CSS.

תשובות לתרגיל 2

החוקים אמורים להיראות כך:

  H1, H2, H3, H4, H5, H6
{
font-family: "Minion Web", Palatino, "Times New Roman", serif
}

/* note the use of quotations around font names of more than one word */

H1 {
font-size: 140%
}

H2 {
font-size: 130%


H3 {
font-size: 120%
}

H4 {
font-size: 110%
}