CSS/טקסט

רמזנו ואמרנו בעדינות, אבל עכשיו אפשר לומר באופן ברור: היכולת של תג <font> של HTML היא פרימיטיבית. כמו שתראו בדף זה, פשוט אי אפשר להשוות בין <font> לבין היכולות שמעניק לנו ה־CSS.

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

צבע

ראיתם את המאפיין הזה בדוגמאות, ולכן אתם כבר אמורים להכיר אותו: color. משתמשים בו באופן הבא:

h1 { color: red; }

ניתן לקבוע את הצבע באופן מילולי ("red"), באמצעות שלישיית הקסא (#FF0000) או באמצעות "אדום, ירוק, כחול" (rgb(255, 0, 0)).

גופן

המאפיין font-family הוא המקבילה של <font face="..."> מ HTML. גם ב CSS ניתן לציין יותר מסוג אחד של גופן, לשם תאימות עם מערכות שבהן לא מותקן הגופן הדרוש. דוגמה:

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

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

גודל

font-size מחליף את <font size="...">. כפי שכבר ציינו, כאן יש באפשרותכם להרחיב באופן ניכר את סוגי וטווח הגדלים שבהם אתם משתמשים. באמצעות התג <font>, אתם יכולים לקבוע את הגודל באמצעות מספר בין 1 ל־7, ותו לא. באמצעות CSS, אתם יכולים לקבוע את גודל הטקסט בדיוק רב, באמצעות יחידות (נקודות, em ופיקסלים), שמות קבועים מראש ואחוזים.

יחידות

נקודות

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

דוגמה לשימוש בנקודות:

p { font-size: 10pt; }

px

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

em

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

<table style="font-size: 10pt;">
  <tr>
    <td>
      <div style="font-size: 1em;">
        .
        .
        .
     </div>
    </td>
  </tr>
</table>

בקטע ה־HTML הנ"ל יצרנו טבלה שגודל הטקסט בה הוא 10 נקודות, ובתוכה יצרנו div עם גודל טקסט של 1em. הגודל של הטקסט המסומן כ־1em יהיה גם הוא 10 נקודות (הכפלנו פעם 1 את 10). אם, לעומת זאת, היינו בוחרים ב־1.5em, אזי היה הגודל 15 נקודות (הכפלנו את 10 פי 1.5). לו היינו בוחרים ב־2em, הגודל היה 20 נקודות (הכפלנו את 10 פי 2) וכד'.

אם היינו משנים את גודל הטקסט בטבלה ל־20 פיקסלים, ומשאירים את הגודל ב־div על 1em, הגודל המתקבל ב־div היה 20 פיקסלים (הכפלנו את 20 פי 1). אם הגודל בטבלה היה 20 פיקסלים, אך ב־div הוא היה גודל של 1.5em, הגודל היה נקבע על $30=20*1.5$ פיקסלים. וכן הלאה.

הערות

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

אחוזים

זהה לשיטת ה־em, אלא שמכפילים במספר האחוזים. לדוגמה:

h1 { font-size: 120%; }

בדוגמה זו קבענו שכותרות מרמה 1 יופיעו בגופן הגדול פי 120 אחוז יותר מאשר גודל ברירת המחדל או התג שבתוכו מקוננת הכותרת.

אחרות

עוד כמה יחידות שאינן נפוצות במיוחד, אך ייתכן שתמצאו בהן שימוש:

• cm - סנטימטרים
• mm - מילימטרים
• in - אינצ'ים

מילות מפתח (keywords)

מילות מפתח אינן מדויקות כמו היחידות, אך עשויות להיות שימושיות כאשר הגודל המדויק של הגופן אינו קריטי. ישנן 7 מילים כאלה, והן מקבילות לשבעת הגדלים של <font size="...">. ה־W3C לא קבע את הגודל המדויק שצפוי להתקבל, ולכן ניתן לצפות לתוצאות שונות בדפדפנים שונים. בדפדפן Netscape Navigator, למשל, הטקסט היה גדול יותר מאשר ב־Internet Explorer. עם זאת, ניתן לשנות את גודל הטקסט שנקבע באמצעות מילות מפתח בדפדפן.

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

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

ניתן גם להשתמש בשתי מילים נוספות, larger ו־smaller, שבדומה לאחוזים ול־em, הן יחסיות.

עיצוב

כדי לעצב טקסט ב־HTML, נהגתם להשתמש בתגים כמו <b> או <strong> להדגשה ותגים כמו <i> או <em> להפיכת הכתב לנטוי. תגי ה-<b> וה-<i>, בדומה לתג <font>, יעלמו בעתיד, כיוון שהם תגי עיצוב, לא מבנה. לעומתם תגי ה-<strong> וה-<em> ישמשו לציון משמעות מיוחדת לטקסט ולא לעיצובו. להזכירכם, HTML משמש לקביעת מבנה הדף, ואילו את העיצוב אנו משאירים ל־CSS. (להרחבה עיינו גם בפרק הדן בתגי טקסט בעלי משמעות בספר על לימוד HTML)

כתב מודגש

המאפיין בו אנו נשתמש לשם הדגשה הוא font-weight. הערכים שמקבל המאפיין font-weight הם:

• bold
• normal
• bolder
• lighter
• מספרים בין 100 ל־900, בכפולות של 100

font-weight: bold; הופך את הגופן למודגש, ו־font-weight: normal; מבטל הדגשה שניתנה מהתג הקודם. הערכים bolder ו־lighter פועלים באופן יחסי, בדומה לאופן בו פועלים האחוזים ו־em בגדלים.

המספרים בין 100 ל־900 קובעים את רמת ההדגשה. לשם השוואה, ההדגשה הרגילה עומדת על 400. שימו לב שלא כל גופן יכול לעבוד בשיטה זו. מרבית הגופנים הנפוצים (Arial ודומיו) עובדים כראוי.

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

<html>
.
.
.
<table style="font-weight: 900;">
  <tr style="font-weight: none;">
    <td>
      .
      .
    </td>
  </tr>
  <tr style="font-weight: lighter;">
    <td>
      .
      .
    </td>
  </tr>
  <tr>
    <td>
      .
      .
    </td>
  </tr>
</table>
.
.
.
</html>

כתב נטוי

המאפיין לכתב נטוי הוא font-style. הערכים שהוא מקבל הם italic (שהופך אותו לנטוי) ו־normal (שמבטל כתב נטוי שנקבע בתג הקודם).

קו תחתון

כן, גם מהתג <u> אתם צריכים להפרד. המאפיין שקובע את הקו התחתי הוא text-decoration, והערך שיוצר קו תחתי הוא underline. הערך none מבטל ירושה מהתג הקודם.

ערכים נוספים ש־text-decoration מקבל הם overline, line-through ו־blink. הערך הראשון, overline, זהה ל־underline, אלא שהקו מופיע מעל לטקסט המסומן ולא תחתיו; line-through מקביל לתגים <strike> ו־<s>, והוא מעביר קו דרך הטקסט עצמו; blink מקביל לתג <blink>, שנתמך רק ב־Netscape. הדפדפן IE, כמובן, עדיין לא תומך בערך זה.

אחרים

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

• text-transform
  • ערכים אפשריים:
  • uppercase - הופך את כל האותיות לאותיות גדולות
  • lowercase - הופך את כל האותיות לאותיות קטנות
  • capitalize - הופך כל אות ראשונה במילה לאות גדולה
  • none - מבטל ירושה מתג קודם
• font-variant
  • ערכים אפשריים:
  • small-caps - הופך את כל האותיות לגדולות, ואת האותיות שאמורות להיות גדולות מאחרות מגדיל מבחינת גופן

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

יישור

יישור אופקי

התג <center> צפוי גם הוא להיעלם ברבות הימים, וכבר אין צורך ב־<div align="..."> (וב־XHTML Strict, הוא גם אסור). המאפיין של CSS לקביעת יישור הטקסט נקרא text-align, והערכים שהוא מקבל הם:

• right - ימין
• left - שמאל
• center - מרכז
• justify - מיושר לשני הצדדים

המאפיין text-align פועל רק עבור תגים מהסוג גוש: div, p, h1 ואחרים. אי אפשר להשתמש בו בתגים כדוגמת span.

יש לשים לב לכך שהתג <center> לא היה רק ממרכז את הטקסט בתוך האלמנט, אלא גם ממרכז את מיקומו של האלמנט בדף. ובמידה ותיצרו טבלה ותרצו למקם אותה במרכז הדף, text-align לא יעזור לכם. גם ;float: center לא (על המאפיין float נלמד בהמשך, בפרק שכבות). הטריק כדי למקם אלמנט, במקרה זה טבלה, במרכז הדף הוא זה:

<table style="margin-right: auto; margin-left: auto;">
  .
  .
  .
</table>

יישור אנכי

הפרמטר לקביעת היישור האנכי הוא vertical-align. הערכים אותם הוא מקבל הם: top, middle ו־bottom. בעתיד יתווספו גם הערכים: text-top, text-bottom, baseline, sub ו־super.

אחר

ריווח אותיות

יתרון נוסף הקיים ב־CSS שלא היה קיים בעבר הוא היכולת לשנות את הריווח בין האותיות. הפרמטר לריווח בין אותיות הוא letter-spacing, והוא מקבל ערכים בפיקסלים, נקודות, אחוזים, em וכיו"ב. לדוגמה:

letter-spacing: 1px

letter-spacing: 3px

ריווח מילים

word-spacing, זהה ל־letter-spacing, אך קובע את הריווח בין המילים ולא האותיות. לא נתמך באופן מלא.

ריווח שורות

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

גובה שורה

Line-height:2pt גובה השורה

הזחה

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

p { text-indent: 0px; }	p { text-indent: 20px; }
אנא שים/י לב שכל תרומה לויקיספר מוצאת לאור תחת הרשיון לשימוש חופשי במסמכים של GNU (ראה ויקיספר:זכויות_יוצרים לפרטים). אם אינך רוצה שעבודתך תהיה זמינה לעריכה על ידי אחרים, ותופץ לעיני כל, אל תפרסם/י אותה פה. כמו-כן, את/ה מבטיח/ה לנו כי את/ה כתבת את הטקסט הזה בעצמך, או העתקת אותו ממקור שאינו מוגן על-ידי זכויות יוצרים. אל תעשו שימוש בחומר המוגן בזכויות יוצרים ללא רשות!	אנא שים/י לב שכל תרומה לויקיפידיה מוצאת לאור תחת הרשיון לשימוש חופשי במסמכים של GNU (ראה ויקיספר:זכויות_יוצרים לפרטים). אם אינך רוצה שעבודתך תהיה זמינה לעריכה על ידי אחרים, ותופץ לעיני כל, אל תפרסם/י אותה פה. כמו-כן, את/ה מבטיח/ה לנו כי את/ה כתבת את הטקסט הזה בעצמך, או העתקת אותו ממקור שאינו מוגן על-ידי זכויות יוצרים. אל תעשו שימוש בחומר המוגן בזכויות יוצרים ללא רשות!

הפרק הקודם: תחביר כללי

טקסט

הפרק הבא: קישורים