cascading style sheets reference

text_style

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

CSS מספק את התכונות הבאות:

• צבע (color)
• משקל פונט (font-weight)
• משפחת פונט (font-family)
• גודל פונט (font-size)
• סגנון פונט (font-style)
• קישוט טקסט (text-decoration)
• שינוי טקסט (text-transform)

CSS2 מציג בפנינו את תכונת צל הטקסט תכונות התאמת גודל הפונט ותכונת מתיחת הפונט.

צבע

מה הוא עושה?

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

ערכים אפשריים

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

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

אלמנטים ילדים (child) יורשים את הצבע של האלמנטים ההורים שלהם.זכרו, תכונות מורשות יכולות להתבטל.

רמזים והצעות

לדוברי אנגלית לא של ארה"ב (non US) אנא שימו לב שצבע (colour) הוא אינו משתנה איות מקובל עבור הכוונות של תחביר ה-CSS.

משקל הפונט

מה הוא עושה?

משקל הפונט משמעו עד כמה הוא בולט (bold). תכונת משקל הפונט משפיעה על כמה כבד מצוייר הטקסט על העמוד.

ערכים אפשריים

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

ניתן להשתמש במילות המפתח הבאות: נורמלי (normal), בולט (bold), בולט יותר (bolder), בהיר יותר (lighter).
bolder - מגדיר כי על הטקסט להיות בדרגה אחת בולט יותר מן הטקסט המקיף אותו (אלמנט ההורה).
lighter- מגדיר כי על הטקסט להיות בדרגה אחת בהיר יותר מאשר הטקסט המקיף אותו.

גם את משקל הפונט ניתן להגדיר בעזרת ערכים מספריים: 100, 200, 300, 400, 500, 600, 700, 800, 900.

כל ערך הוא בדרגה אחת בולט יותר מקודמו. נורמלי (normal) - הוא שווה ערך ל400 מודגש (bold) - שווה ערך ל700.

ערכים של ברירת מחדל

בברירת מחדל, משקל הפונט של אלמנט מסוים הינו (נורמלי) normal.

האם זה עובר בירושה ?

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

רמזים והצעות

גרסאות עכשוויות של הדפדפנים העיקריים מציגים רק שני משקלים - נורמל ובולט (bold). כל הערכים מתורגמים לאחד משני אלה. לדוגמא, 100-600 בדרך כלל מופיעים כמשקל נורמלי, בעוד ש700-900 מופיעים כבולט. עבור מידע מפורט יותר בנושא זה בדקו את החלק בנוגע ל משקל-פונט במדריך העזרה לדפדפן (Browser Support Guide).

משפחת-פונט

מה היא עושה?

אם אתם מכירים את התווית <font face="font name"> ב-HTML, אתם תגלו שתכונת משפחת הפונט עובדת באופן זהה. תכונה זו מגדירה רשימה של פונטים מועדפים שעל הדפדפן להשתמש בהם כדי להציג את האלמנט.

דפדפן כלשהו ישתמש בפונט הראשון ברשימה שמותקן במערכת שדרכה הוא פועל.

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

serif (e.g. Times)

sans-serif (e.g. Helvetica)

cursive (e.g. Zapf-Chancery)

fantasy (e.g. Western)

monospace (e.g. Courier)

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

ערכים אפשריים

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

כאשר שמו של הפונט בנוי מיותר ממילה אחת, יש לצטט אותו, כמו: "Times New Roman" .

פונטים של מערכת יכולים להיות אחד מתוך הבאים :

• כיתוב (caption) המשמש עבור אמצעי פיקוח של כיתוב (לדוגמא, כפתורים, drop-downs וכו').
• (icon) משמש עבור תיוג של אייקונים.
• תפריט (menu) משמש בתפריטים (לדוגמא, תפריטי drop-down ורשימות תפריט).
• קופסת הודעה (messagebox) המשמש בקופסאות דיאלוג.
• כיתוב קטן (smallcaption) משמש עבור תיוג של אמצעי פיקוח קטנים.
• פס סטאטוס (statusbar) משמש בחלון של פסי סטאטוס.

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

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

לאלמנט כלשהו יופיע פונט זהה לזה של אלמנט ההורה, אלא אם יש לו תכונת משפחת-פונט משלו.

רמזים והצעות

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

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

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

גודל-פונט

מה הוא עושה?

תכונת גודל-הפונט מאפשרת לכם להגדיר כמה גדול מופיע הטקסט בדף האתר. עם HTML אתם מוגבלים ל7- גדלים יחסיים שאין ביניהם ובין סוגי מדידות מסורתיות, כמו נקודות, ems, exs ן-picas, כל קשר. לגדליי טקסט של HTML אין גם שום קשר לפיקסלים.

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

ערכים אפשריים

ערכיי אורך

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

• points (נקודות)
• ems
• exs
• picas
• pixels (פיקסלים)
• inches (אינצ'ים)
• millimeters (מילימטרים)
• centimeters (סנטימטרים)

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

ערכים של מילת מפתח

בנוסף, ניתן להגדיר גדליי פונט בשימוש במילות מפתח יחסיות ומוחלטות.

המילים הבאות הן מילות המפתח היחסיות: גדול יותר (larger) וקטן יותר (smaller).

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

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

מילות המפתח המוחלטות הן:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

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

ערכיי ברירת מחדל

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

האם זה עובר בירושה?

גודל הטקסט הוא זהה לגודל האלמנט המכיל אותו, אלא אם כן מיושמת לו תכונת גודל-פונט.

רמזים והצעות

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

התאמת גודל-פונט (font-size-adjust)

מה זה עושה?

CSS2 מציג בפנינו תכונה מתוחכמת זו בכדי לאפשר לנו החלפה טובה יותר של פונטים כאשר פונט של בחירה ראשונית אינו מתאפשר.

תכונת משפחת הפונטים מאפשרת את ההגדרה של מספר פונטים שבהם מתכוונים להשתמש עבור אלמנט כלשהו. כאשר הפונט של הבחירה הראשונית אינו מתאפשר הדפדפן ישתמש בפונט הראשון ברשימה שהוא בנמצא, או שלא נצליח וישתמש בפונט כללי (generic). עבור יותר פרטים בדקו את תכונת משפחת-פונט. הדבר מוביל לבעיות כיוון שמעט מאוד פונטים הם "בעלי משקל זהה", כלומר נראים אותו הדבר. אחד מן ההיבטים החשובים של הפונטים הנותנים להם מראה זהה הוא היחס בין הגובה (גובה ה-em) של הפונט, וגובה ה-x שלו. זה מוכר כיחס ה-z של הפונט. פונטים בעלי יחס z זהה נראים דומים (כדי להיות מדויקים יותר, הם מאוד דומים בגודלם הנראה לעין כאשר ניתן להם אותו הגודל בפיקסלים, נקודות וכו'…). ככל שיחס זה נמוך יותר, כך ייראה הפונט "גדול" יותר. בעזרת שקילת פונטים, המבוססת על יחס זה, טקסט בגודל זהה יופיע ללא הבדל מן הפונט שנמצא למעשה בשימוש.

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

ערכים אפשריים

תכונת התאמת-גודל-פונט מקבלת את הערך none או ערך דצימלי.

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

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

ערכים של ברירת מחדל

בברירת מחדל, התאמת-גודל-פונט היא קבועה ל-none.

האם זה עובר בירושה?

התאמת-גודל-פונט הנה עוברת בירושה, אך גודל הפונט של ההורה ולא גודל הפונט המותאם הוא זה שעובר בירושה.

משתנה פונט

מה הוא עושה?

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

ערכים אפשריים

משתנה-פונט יכול לקבל ערך של נורמלי או של אותיות קטנות.

הערך נורמלי מגדיר כי הטקסט אמור להופיע או באותיות גדולות (capital) או באותיות קטנות (lowercase letters), כפי שהוא מופיע במקור.

אותיות תחילת משפט קטנות (small-caps) מגדירות כי אותיות קטנות (אך לא כאלה של תחילת משפט) אמורות להופיע כאותיות תחילת משפט קטנות (אלו הן אותיות גדולות בעלות אותו גודל, פחות או יותר, כמו האותיות הקטנות).

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

משתנה הטקסט עובר בירושה מאלמנט ההורה.

סגנון פונט (font-style)

מה הוא עושה?

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

שלושת סגנונות הפונט הנתמכים ע"י CSS הם normal, נטוי - italic , מלוכסן - oblique. .מבלי להיכנס לפירוט מיותר, פונט נורמלי הוא צורת הפונט הסטנדרטית המתייחסים אליה כ "roman" במינוח הדפוס המסורתי.סגנונות-פונט italic ו-oblique, סביר מאוד להניח, שיופיעו בצורה זהה. נושא זה הוא מעבר להיקף היריעה של דיון זה להיכנס לפרטים אודות מדוע ומה בדיוק ההבדל ביניהם.

ערכים אפשריים

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

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

סגנון-הפונט של אלמנט כלשהו הוא גם זה של אלמנט ההורה שלו, אלא אם כן הוגדר סגנון-פונט כלשהו עבור האלמנט.

רמזים והצעות

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

מתיחת-פונט

מה זה עושה?

CSS2 מציג בפנינו את תכונת מתיחת-הפונט. הדבר מאפשר לך לרכז או לפשט (להרחיב) את אותיות הטקסט.

ערכים אפשריים

ערכים של מילת מפתח

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

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

 בנוסף, מתיחת הפונט מקבלת אחת מתוך שתי מילות מפתח יחסיות, רחב יותר (wider) ןצר יותר (narrower).

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

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

קישוט-טקסט

מה זה עושה?

תכונת קישוט-הטקסט מאפשרת לכם להגדיר מספר השפעות שניתן לחשוב עליהן כעל סגנון. בעזרת CSS אתם יכולים ליישם את הסגנונות הבאים על הטקסט: none, underline, overline, line-through, blink.

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

ערכים אפשריים

קישוט-טקסט יכול להיות או none או רשימה של אחד או יותר מתוך underline, overline, line-through, blink. אם קיים יותר מערך אחד ברשימה, הערכים צריכים להיות מופרדים במרווחים.

ערכים של ברירת מחדל.

כברירת מחדל, קישוט-הטקסט של אלמנט כלשהו הוא none.

האם זה עובר בירושה?

טכנית, תכונת קישוט-הטקסט אינה עוברת בירושה, אך מעשית, היא כן!

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

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

רמזים והצעות

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

שינוי-טקסט

מה זה עושה?

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

ערכים אפשריים

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

• כתיבת אותיות גדולות - כאשר כל מילה נכתבת בצורה זו (והאות הראשונה היא באות גדולה).
• אותיות גדולות (uppercase) - כאשר כל אות היא באותיות גדולות.
• אותיות קטנות (lowercase) - כאשר כל אות היא באותיות קטנות.

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

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

ערכים של ברירת מחדל

כברירת מחדל, לאלמנט מסוים יש שינוי-טקסט של none.

האם זה עובר בירושה?

לאלמנט מסוים יהיה ערך שינוי-טקסט זהה לזה של אלמנט ההורה שלו.

רמזים והצעות

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

צל-טקסט

מה הוא עושה?

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

ערכים אפשריים

צל-טקסט הינו רשימה של אפקטים של צל, שכל אחד מופרד ע"י פסיק. אפקט צל מוגדר ע"י שני ערכיי יחידה (עבור החלק העליון והחלק השמאלי של האפקט) וע"י רדיוס טשטוש נבחר, וכל אלה יכולים להיות מוגדרים בכל יחידת אורך שהיא (pts, pxs, ems, exs וכו').

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

ערכים של ברירת מחדל

אם לא מוגדר כל צל-טקסט שהוא, צל הטקסט של אלמנט מסוים יהיה none.

האם זה עובר בירושה?

אלמנט מסוים אינו יורש את צל-הטקסט של ההורה שלו.