עיצוב טקסטים | CSS

מוטי אורן

מדריך לעיצוב טקסטים באמצעות שפת CSS

--

בשביל לצבוע טקסט (לצורך הדוגמה הוא יהיה בתגית p), נשתמש בתכונה color:

p { color: green; }

התכונה color (בעברית – צבע) יכולה לקבל מספר סוגי ערכים.

שמות של צבעים (בזה השתמשנו עד עכשיו) כמו red אדום, blue כחול, green ירוק וכן הלאה (לרשימת שמות הצבעים היכנסו לקישור: https://www.w3schools.com/colors/colors_names.asp).
ערכי rgb שמשמעותו היא red, green, blue כלומר – המינון של כל צבע מרשימת הצבעים red (אדום) green (ירוק) ו – blue (כחול) בצבע הטקסט שלנו (אני מקווה שזה מובן) ניתן לרשום טווח ערכים של 0 עד 255 (כבר נראה דוגמה).
ערכים הקסדצימלים (דומה ל – rgb ברעיון, כבר תבינו למה). למי שלא יודע מדובר בספירה בבסיס 16, שהמספר הגבוה ביותר בספרת האחדות היא F. כלומר, אם אצלינו (בסיס 10) הספירה מתחילה ב – 1 ומסתיימת ב – 9 (שאז עוברים ל - 1 בתוספת 0), בהקסדצימלי הספירה היא מ – 1 עד F, כלומר שכשמגיעים ל – 9 עוברים ל – A וממשיכים עד F. אני לא רוצה להתעכב על זה כאן, אבל בכל זאת העניין הוא שבכל צמד של ספרות בהקסדצימלי, יש 255 אופציות (בדיוק כמו ב – rgb!), מה שאומר ששתי הספרות הראשונות קובעות את מינון הצבע האדום, שתי הספרות הבאות את הצבע הירוק ושתי האחרונות את הצבע הכחול (כבר נראה דוגמה).

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

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

p { color: rgb(125, 230, 40); }

בייצוג הקסדצימלי (hexadecimal) התחביר הוא:

p { color: #3A2B7F; }

טוב, אנחנו צריכים להמשיך (וואו איך גלשתי!).

בכדי ליישר טקסט (בתוך האלמנט המכיל אותו), נשתמש בתכונה text-align כדלהלן:

p { 
  text-align: center;
}

התכונה text-align יכולה לקבל מספר ערכים.

right – הטקסט ייושר ימינה,
left – הטקסט ייושר שמאלה,
center – (כמו בדוגמה) הטקסט ייושר לאמצע,
justify – הטקסט יימתח כך שכל שורה תקבל רוחב שווה לשורות האחרות.

וכמובן, רצוי שאם השפה היא עברית (או כל שפה שכיוון הכתיבה שלה הוא שמאל לימין), ניתן לטקסט עוד תכונה שנקראת direction, שמקבלת שני ערכים:

rtl – שזה אומר right to left (ימין לשמאל),
ltr – שאומר left to right (שמאל לימין).

אם נרצה להוסיף לטקסט קו (ניתן להוסיף קו תחתון, עליון ועל גבי הטקסט), נשתמש בתכונה text-decoration:

p { 
  text-decoration: underline;
}

התכונה text-decoration יכולה לקבל מספר ערכים:

underline – מתחת לטקסט (כמו בדוגמה),
overline – מעל לטקסט,
line-through – על גבי הטקסט עצמו,
none – ללא קו. שימושי לדוגמה בקישורים, שכברירת מחדל מופיעים עם קו ורוצים לשנות את זה.

אם נרצה להוסיף אינדנטציה (הזחה) לטקסט, נשתמש בתכונה text-indent.

p { 
  text-indent: 35px;
}

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

ניתן להשפיע על גודל הריווח שבין אות לאות על ידי התכונה letter-spacing:

p { 
  letter-spacing: 15px;
}

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

אם נרצה להשפיע על הריווח שבין מילה למילה, נשתמש בתכונה word-spacing:

p { 
  word-spacing: 10px;
}

אם נרצה לשנות את הריווח שבין שורה לשורה, נשתמש ב – line-height:

p { 
  line-height: 1.6;
}

הערכים שניתן לתכונה line-height הינם יחסיים לריווח ברירת המחדל שבין שורה לשורה.

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

p { 
  white-space: nowrap;
}

הערך nowrap אומר לדפדפן לא לשבור את השורה במקרה של חריגה מהאורך.

אם נרצה להוסיף צל לטקסט (נדמה לי שזה קיים רק ב – CSS3), נשתמש ב – text-shadow:

p { 
  text-shadow: 2px 3px 5px green;
}

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

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

הערך השלישי קובע את מידת הטשטוש של הצל,

והרביעי קובע את צבע הצל.

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

ליבל

אתה יודע איך עושים מירכוז לאלמנט בדף? לדוגמה תגית וידיאו?

מוטי אורן

@ליבל תגדיר לו ב - style, שיהיה block, וה - margin right ו left יהיו auto. מצרף דוגמה:

video {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

נ.ב. אפשר פשוט לשים את margin ימין ושמאל בתכונה אחת כך:

margin: auto;

הבעיה שזה יגדיר לך גם את ה top ו bottom, האמת לא אמור להיות בעיה כל שהיא.

נ.ב. יש עוד דרכים אבל זאת אמורה לעבוד... אם לא עובד תעדכן כאן.