עיצוב טקסט - צבע גופן, עימוד, יישור והזחה

שינוי צבע גופן

נוכל לקבוע צבע של גופן באמצעות התכונה color.

דוגמה:

#topic {
	color:#d000fd;
}

בדוגמה זו, האלמנט עם המזהה topic יהיה בצבע d000fd שהוא צבע סגול.

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

עימוד פיסקאות, יישור הטקסט לצדדים או מירכוז הטקסט

נוכל לשלוט ביישור הטקסט (הצמדתו) באמצעות התכונה text-align. התכונה יכולה לקבל את הערכים הבאים:

• left - יישור לשמאל.
• right - יישור לימין.
• start - יישור להתחלה. אם כיווניות הטקסט היא מימין-לשמאל כמו בעברית, אז היישור הוא לימין, אחרת היישור הוא לשמאל.
• end - יישור לסוף. אם כיווניות הטקסט היא מימין-לשמאל כמו בעברית, אז היישור הוא לשמאל, אחרת היישור הוא לימין.
• justify - עימוד של הטקסט לכל רוחב השורה. מתווסף ריווח אחיד באופן שימתח את הכיתוב מקצה לקצה (למעט השורה האחרונה בפיסקה, שהיא בד"כ קצרה יותר).
• center - מירכוז.

כאשר מדובר על אתר רב-לשוני, או חשיבה עתידית לתרגם את האתר בין שפות שונות, נעדיף להשתמש בערכים start, end במקום בערכים left, right עבור טקסטים שמיושרים בהתאם לכיווניות השפה. באופן הזה, תיקון ה-CSS במעבר משפה לשפה יהיה קל יותר.

דוגמה:

h1 {
	text-align:center;
}

p {
	text-align:justify;
}

p .date {
	text-align:end;
}

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

טרנספורמציה לטקסט

בשפות בהן יש לכל אות גירסה קטנה (כגון a) או גדולה (כגון A) ניתן לקבוע את הקפיטליזציה (אם האותיות גדולות או קטנות) באמצעות התכונה text-transform.

התכונה יכולה לקבל את הערכים הבאים:

• none - ללא שינוי (ברירת המחדל).
• capitalize - הפיכת האות הראשית של כל מילה לאות גדולה.
• uppercase - הפיכת כל הטקסט לאותיות גדולות.
• lowercase - הפיכת כל הטקסט לאותיות קטנות.

דוגמה:

.cap {
	text-transform:capitalize;
}

.up {
	text-transform:uppercase;
}

.low {
	text-transform:lowercase;
}

אם לדוגמה הטקסט שלנו היה My name is alice במקור, המחלקה cap תהפוך אותו לטקסט MY NAME IS ALICE, המחלקה up תהפוך אותו לטקסט My Name Is Alice והמחלקה low תהפוך אותו לטקסט my name is alice.

הזחה של הטקסט

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

דוגמה:

p {
	text-indent:5px;
}

בדוגמה זו, הפיסקה תוסט 5 פיקסלים קדימה.