Get Adobe Flash player
דף הבית כללי עיצוב מאפייני טקסט

CSS מכילה מספר לא קטן של מאפיינים המשמשים לעיצוב הטקסט:

שימושמאפיין
צבע הטקסט color
יישור הטקסט text-align
קו - מתחת, מעל או דרך הטקסט text-decoration
כניסת שורה ראשונה text-indent
כיוון הכתיבה direction
מרווח בין השורות line-height
מרווח בין האותיות letter-spacing
מרווח בין המילים word-spacing
תווים "לבנים" (ירידת שורה, מרווחים, enter וכו') white-space
שינוי האותיות מגדולה לקטנה (כתב לטיני) text-transform
יישור אנכי של אלמנט vertical-align

צבע הטקסט

צבע הטקסט נקבע ע"י המאפיין color. לערכים הניתנים למאפיין זה ראה בפרק 'מאפייני רקע'  

יישור טקסט

המאפיין ליישור הטקסט (לימין, לשמאל וכו') הוא text-align. ערכי המאפיין הם:

left - יישור לשמאל

right - יישור לימין

center - יישור למרכז

Justify - ישור לשני הצדדים:

קו בטקסט

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

a:hover {
     text-decoration: none;
             }

ערכי המאפיין הזה הם:

underline - קו תחתי

overline - קו עילי

line-through - קו חוצה

blink - הבהוב

הערה: הערך blink לא עובד באינטרנט אקספלורר, גוגל כרום ובספרי.

כניסת שורה ראשונה

המאפיין text-indent מיועד לפיסקאות בהם העיצוב דורש כניסה של שורה ראשונה פנימה.

את גודל הכניסה ניתן לקבוע בכמה יחידות: פיקסלים (px), נקודות (pt), ס"מ (cm) מילימטרים (mm) או אינצ'ים (in).

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

ההוראה הבאה:  p { text-indent: 50px; }, תגרום לכך שהשורה הראשונה שבכל הפסקאות בדף, תוכנס פנימה למרחק של 50 פיקסלים מהשוליים.

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

כיוון הטקסט

המאפיין direction דומה לתכונה dir שב HTML.

המאפיין הזה מקבל שני ערכים: rtl - ימין לשמאל ו-ltr - שמאל לימין

מרווח בין שורות

המאפיין line-height קובע את גודל המרווח שבין השורות בפסקה.

גודל המרווח בין השורות ניתן להיקבע בכמה דרכים:

אחוזים: המרווח יהיה חישוב האחוז מגודל הפונט הגדול ביותר הנמצא בשימוש בשורה. ברירת המחדל היא 100%. לפי זה, מרווח בן 150% נותן רווח של שורה וחצי.

ערך מספרי: המרווח יהיה הכפלת גודל הגופן במספר. הערך 1.5 יתן מרווח של שורה וחצי. ברירת המחדל היא: 1

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

בדוגמא הבאה, הבורר p יקבל מרווח של 2 ס"מ בין השורות:  p { line-height: 2cm; }

מרווח בין המילים ובין האותיות

שני המאפיינים letter-spacing ו-word-spacing קובעים את המרווח שבין האותיות או בין המילים בפסקה.

המאפיין letter-spacing קוביע את המרווח בין האותיות, ו-word-spacing את המרווח בין המילים. ערכי המרווח הן כמו ביחידות (פיקסלים, נקודות, סנטימטרים, אינצ'ים וכו')

 טיפול בתווים "לבנים"

המאפיין white-space נועד לשליטה בתווים "הלבנים". אלו הם אותם תווים המעצבים את השורה והפסקה אך אינם נראים על המסך. למשל "טאב", רווח,  Enter וכו'.

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

המאפיין white-space מאפשר שליטה בתווים אלו ויש לו את הערכים הבאים:

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

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

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

pre-wrap - זהה כמעט לגמרי ל pre, אבל יכבד ירידת שורה אם הטקסט הגיע לגבול המסך או המקטע בו הוא נמצא

יישור אנכי

ליישור האנכי שנקבע ע"י vertical-align יש מספר אפשרויות עם משמעויות שונות:

baseline - ברירת המחדל. תחתית הטקסט נמצאת בגובה תחתית האלמנט בו הוא נמצא

bottom - תחתית האלמנט נמצאת בקו אחד עם האלמנט הנמוך ביותר בשורה

top - שיא האלמנט נמצא בקו אחד עם האלמנט הגבוה ביותר בשורה

text-top - שיא האלמנט מיושר עם שיא הפונטים  שבאלמנט ההורה

text-bottom - תחתית האלמנט מיושרת עם תחתית הפונטים שבאלמנט ההורה

middle - האלמנט מיושר במרכז גובה אלמנט ההורה

sub - האלמנט מתיישר למצב של כתב תחתי (H2O)
super - האלמנט מתיישר למצב של כתב עילי 32=9

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

אות גדולה וקטנה (לועזית)

המאפיין text-transform מאפשר מעבר בין אותיות גדולות (Capital Letter) לקטנות ולהיפך. הוא גם מאפשר שינוי כל האותיות הראשונות שבמשפט לאות גדולה.

uppercase - הופך את כל האותיות לאות גדולה (CAPITAL LETTER)

lowercase - הופך את כל האותיות לאות קטנה

capitalize - הופך את האות הראשונה בכל המילים לאות גדולה.

 

אל השיעור הקודם אל השיעור הבא