הצגת המקור של הדף "CSS/טקסט"

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

רשימה מרוכזת של כל המאפיינים הנלמדים בפרק זה, יחד עם דוגמאות, ניתן למצוא בסוף הדף.
== צבע ==
ראיתם את המאפיין הזה בדוגמאות, ולכן אתם כבר אמורים להכיר אותו: '''<code>color</code>'''. משתמשים בו באופן הבא:
<syntaxhighlight lang="css">
h1 { color: red; }
</syntaxhighlight>

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

== גופן ==
המאפיין '''<code>font-family</code>''' הוא המקבילה של <syntaxhighlight inline class=nowrap lang="html"><font face="..."></syntaxhighlight> מ HTML. גם ב CSS ניתן לציין יותר מסוג אחד של גופן, לשם תאימות עם מערכות שבהן לא מותקן הגופן הדרוש. דוגמה:
<syntaxhighlight lang="css">
p { font-family: Verdana, Arial, Helvetica, sans-serif; }
</syntaxhighlight>

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

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

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

דוגמה לשימוש בנקודות:
<syntaxhighlight lang="css">
p { font-size: 10pt; }
</syntaxhighlight>

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

==== em ====
'''em''' היא יחידת מידה יחסית. כלומר, הגודל שיתקבל בכל מקום שבו תכתבו <code>1em</code> לאו דווקא יהיה זהה - הגודל יקבע על פי הקינון של התג. em פירושו - '''מספר הפעמים שיש להכפיל את הגודל שנקבע בתג הקודם'''. לדוגמה:
<syntaxhighlight lang="html">
<table style="font-size: 10pt;">
  <tr>
    <td>
      <div style="font-size: 1em;">
        .
        .
        .
     </div>
    </td>
  </tr>
</table>
</syntaxhighlight>

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

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

===== הערות =====
* שימו לב שעל אף שעשינו כאן שימוש ב־[[#נקודות|pt]], הטקסט שסומן על ידי <code>em</code> '''יוכל''' להשתנות בהתאם להגדרות הדפדפן. כך שכאן, בניגוד למצב הקודם, הקוראים יוכלו לשנות את גודל הטקסט באמצעות הגדרות הדפדפן שלהם.
* במידה וציינתם גודל באמצעות <code>em</code> אך לא הגדרתם קודם לכן גודל באמצעים אחרים, כדוגמת נקודות או פיקסלים, ההכפלה תתבצע על פי הגודל הקבוע בברירת המחדל של הדפדפן.

==== אחוזים ====
זהה לשיטת ה־em, אלא שמכפילים במספר האחוזים. לדוגמה:
<syntaxhighlight lang="css">
h1 { font-size: 120%; }
</syntaxhighlight>

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

==== אחרות ====
עוד כמה יחידות שאינן נפוצות במיוחד, אך ייתכן שתמצאו בהן שימוש:
* <code>cm</code> - סנטימטרים
* <code>mm</code> - מילימטרים
* <code>in</code> - אינצ'ים

=== מילות מפתח (keywords) ===
'''מילות מפתח''' אינן מדויקות כמו היחידות, אך עשויות להיות שימושיות כאשר הגודל המדויק של הגופן אינו קריטי. ישנן 7 מילים כאלה, והן מקבילות לשבעת הגדלים של <syntaxhighlight inline class=nowrap lang="html"><font size="..."></syntaxhighlight>. ה־W3C לא קבע את הגודל המדויק שצפוי להתקבל, ולכן ניתן לצפות לתוצאות שונות בדפדפנים שונים. בדפדפן [[w:he:נטסקייפ|Netscape Navigator]], למשל, הטקסט היה גדול יותר מאשר ב־[[w:he:אינטרנט אקספלורר|Internet Explorer]]. עם זאת, ניתן לשנות את גודל הטקסט שנקבע באמצעות מילות מפתח בדפדפן.

אלה הן מילות המפתח:
* <code>xx-small</code>
* <code>x-small</code>
* <code>small</code>
* <code>medium</code>
* <code>large</code>
* <code>x-large</code>
* <code>xx-large</code>

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

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

=== כתב מודגש ===
המאפיין בו אנו נשתמש לשם '''הדגשה''' הוא <code>font-weight</code>. הערכים שמקבל המאפיין <code>font-weight</code> הם:
* <code>bold</code>
* <code>normal</code>
* <code>bolder</code>
* <code>lighter</code>
* מספרים בין 100 ל־900, בכפולות של 100

<syntaxhighlight inline class=nowrap lang="css">font-weight: bold;</syntaxhighlight> הופך את הגופן ל'''מודגש''', ו־<syntaxhighlight inline class=nowrap lang="css">font-weight: normal;</syntaxhighlight> '''מבטל''' הדגשה שניתנה מהתג הקודם. הערכים <code>bolder</code> ו־<code>lighter</code> פועלים באופן יחסי, בדומה לאופן בו פועלים האחוזים ו־em בגדלים.

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

בדוגמה הבאה, השורה הראשונה לא תכתב בגופן מודגש על אף שבהגדרת הטבלה נקבע כי הטבלה תופיע בגופן המודגש החזק ביותר. בשורה השנייה עדיין יופיע כתב מודגש, אך חלש מזה שנקבע לטבלה. השורה השלישית, שבה לא שונו הגדרות העיצוב, תופיע בכתב המודגש ביותר, כפי שנקבע לטבלה במלואה.
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

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

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

=== אחרים ===
ישנם עוד שני מאפיינים נוספים, אך אין להם שימוש בעברית:
* <code>text-transform</code>
** '''ערכים אפשריים''':
** <code>uppercase</code> - הופך את כל האותיות לאותיות גדולות
** <code>lowercase</code> - הופך את כל האותיות לאותיות קטנות
** <code>capitalize</code> - הופך כל אות ראשונה במילה לאות גדולה
** <code>none</code> - מבטל ירושה מתג קודם
* <code>font-variant</code>
** '''ערכים אפשריים''':
** <code>small-caps</code> - הופך את כל האותיות לגדולות, ואת האותיות שאמורות להיות גדולות מאחרות מגדיל מבחינת גופן

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

== יישור ==
=== יישור אופקי ===
התג <code><nowiki><center></nowiki></code> צפוי גם הוא להיעלם ברבות הימים, וכבר אין צורך ב־<syntaxhighlight inline class=nowrap lang="html"><div align="..."></syntaxhighlight> (וב־XHTML Strict, הוא גם אסור). המאפיין של CSS לקביעת יישור הטקסט נקרא <code>text-align</code>, והערכים שהוא מקבל הם:
* <code>right</code> - ימין
* <code>left</code> - שמאל
* <code>center</code> - מרכז
* <code>justify</code> - מיושר לשני הצדדים

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

יש לשים לב לכך שהתג <code><nowiki><center></nowiki></code> לא היה רק ממרכז את הטקסט '''בתוך האלמנט''', אלא גם ממרכז את '''מיקומו של האלמנט''' בדף. ובמידה ותיצרו טבלה ותרצו למקם אותה במרכז הדף, <code>text-align</code> לא יעזור לכם. גם <code>;float: center</code> לא (על המאפיין <code>float</code> נלמד בהמשך, בפרק '''[[CSS/שכבות|שכבות]]'''). הטריק כדי למקם אלמנט, במקרה זה טבלה, במרכז הדף הוא זה:
<syntaxhighlight lang="html">
<table style="margin-right: auto; margin-left: auto;">
  .
  .
  .
</table>
</syntaxhighlight>

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

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

{| border="1"
|-
|
<div style="letter-spacing: 1px;">letter-spacing: 1px</div>
|
<div style="letter-spacing: 3px;">letter-spacing: 3px</div>
|}

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

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

=== גובה שורה ===
<code>Line-height:2pt</code> גובה השורה

=== הזחה ===
אפשרות נוספת שלא הייתה קיימת ב־HTML. באמצעות CSS, יש באפשרותכם להזיח את השורה הראשונה בכל פסקה. לדוגמה:
{| border="1"
|-
!
<div style="direction: ltr;">p { text-indent: 0px; }</div>
!
<div style="direction: ltr;">p { text-indent: 20px; }</div>
|-
|
אנא שים/י לב שכל תרומה לויקיספר מוצאת לאור תחת הרשיון לשימוש חופשי במסמכים של GNU (ראה ויקיספר:זכויות_יוצרים לפרטים). אם אינך רוצה שעבודתך תהיה זמינה לעריכה על ידי אחרים, ותופץ לעיני כל, אל תפרסם/י אותה פה. כמו-כן, את/ה מבטיח/ה לנו כי את/ה כתבת את הטקסט הזה בעצמך, או העתקת אותו ממקור שאינו מוגן על-ידי זכויות יוצרים. אל תעשו שימוש בחומר המוגן בזכויות יוצרים ללא רשות!
|
<p style="text-indent: 20px;">
אנא שים/י לב שכל תרומה לויקיפידיה מוצאת לאור תחת הרשיון לשימוש חופשי במסמכים של GNU (ראה ויקיספר:זכויות_יוצרים לפרטים). אם אינך רוצה שעבודתך תהיה זמינה לעריכה על ידי אחרים, ותופץ לעיני כל, אל תפרסם/י אותה פה. כמו-כן, את/ה מבטיח/ה לנו כי את/ה כתבת את הטקסט הזה בעצמך, או העתקת אותו ממקור שאינו מוגן על-ידי זכויות יוצרים. אל תעשו שימוש בחומר המוגן בזכויות יוצרים ללא רשות!
</p>
|}

{{CSS|מוגבל=כן}}

[[קטגוריה:CSS|טקסט]]