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
, הגודל היה נקבע על פיקסלים. וכן הלאה.
הערות
עריכה- שימו לב שעל אף שעשינו כאן שימוש ב־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 (ראה ויקיספר:זכויות_יוצרים לפרטים). אם אינך רוצה שעבודתך תהיה זמינה לעריכה על ידי אחרים, ותופץ לעיני כל, אל תפרסם/י אותה פה. כמו-כן, את/ה מבטיח/ה לנו כי את/ה כתבת את הטקסט הזה בעצמך, או העתקת אותו ממקור שאינו מוגן על-ידי זכויות יוצרים. אל תעשו שימוש בחומר המוגן בזכויות יוצרים ללא רשות! |
הפרק הקודם: תחביר כללי |
טקסט | הפרק הבא: קישורים |