שיעור 5: טקסט
עיצוב והוספת סגנון לטקסט היא נושא מפתח בכל עיצוב אתר. בשיעור זה נכיר את האפשרויות המדהימות שקיימות ב-CSS להוספת תבנית עיצוב לטקסט. בשיעור יתוארו התכונות הבאות:
הזחת טקסט [Text-Indent]
התכונה
text-indent
מאפשרת לך להוסיף מגע אלגנטי לפסקת טקסט על ידי הזחת שורת הטקסט הראשונה של הפסקה.
בדוגמה למטה החלנו הזחה של 30 פיקסל לכל הפסקאות המסומנות בתג
<p>:
p {
text-indent: 30px;
}
יישור טקסט [Text-Align]
תכונת ה-text-align
CSS מתייחסת למאפיין
align ששימש
בגרסאות HTML ישנות. טקסט ניתן ליישור לשמאל (left),
לימין (right)
או למרכז (centered).
בנוסף, הערך יישר לשני הצדדים (justify)
ימתח כל שורה כך
שהשוליים הימנים והשמאליים יהיו ישרים. אתה מכיר תבנית עיצוב זאת מעיתונים
ושבועונים.
בדוגמה שלמטה הטקסט שבראש הטבלה
<th>
מיושר לימין בעוד שהנתונים שבטבלה
<td>
מיושרים למרכז. בנוסף, פסקאות טקסט רגילות מיושרות לשני
הצדדים.
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
קישוט טקסט [Text-Decoration]
התכונה
text-decoration
מאפשרת להוסיף "קישוטים" או "אפקטים" לטקסט. למשל, אתה יכול למתוח
קו מתחת לטקסט, להוסיף קו חוצה לטקסט או למתוח קו מעל הטקסט. בדוגמה הבאה,
<h1>
הן כותרות עם קו
תחתי, <h2>
הן
כותרות עם קו מעל הטקסט ו-<h3>
הן כותרות עם קו חוצה.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
ריווח אות [Letter-Space]
הרווח בין תוויות טקסט ניתן להגדרה באמצעות התכונה
letter-spacing. ערך התכונה הוא פשוט הרוחב המבוקש. למשל, אם אנחנו
רוצים רוחב של
3px בין אותיות הטקסט
בפסקה <p>
ו-6px
בין האותיות בכותרת
<h1> ניתן
להשתמש בקוד שלמטה:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
שינוי טקסט [Text-Transform]
התכונה
text-transform שולטת
בצורת האות של קטע טקסט. אתה יכול לבחור להפוך תחילית בכל מילה לאות גדולה, להציג
את הטקסט באותיות גדולות או קטנות והכול ללא תלות באופן בו הוזן הטקסט בקוד ה-HTML.
המילה "headline" יכולה להיות דוגמה שתוצג למשתמש כ-"HEADLINE" או "Headline". ישנם ארבע ערכים אפשריים לשינוי טקסט.
- capitalize
- הצגת האות הראשונה בכל מילה באות גדולה. למשל: "john doe" יהפוך ל-"John Doe".
- uppercase
- תשנה את כל האותיות לאותיות גדולות. למשל: "john doe" יהפוך ל-"JOHN DOE".
- lowercase
- תשנה את כל האותיות לאותיות קטנות. למשל: "JOHN DOE" יהפוך ל-"john doe".
- none
- אין שינוי - הטקסט מוצג כפי שהוא מופיע בקוד ה-HTML.
כדוגמה, נשתמש ברשימת שמות. השמות מסומנים כולם ב-<li> (רשימת פריטים - list-item). נניח שאנחנו רוצים שהשמות יתחילו באותיות גדולות והכותרות יוצגו באותיות גדולות במלואן.
הסתכל בקוד ה-HTML של דוגמה זו ותבחין שהטקסט למעשה כתוב באותיות קטנות.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
סיכום
בשלושת השיעורים האחרונים למדת מספר תכונות של CSS, אבל ב-CSS יש הרבה יותר. בשיעור הבא נלמד על קישורים.