Facebook
Twitter
RSSמדריך CSS – תכונות של טקסט
תכונות טקסט מגדירות כיצד טקסט ממוקם בדף וכיצד הוא מוגש למשתמש.
התכונה text-decoration
קובעת האם יש קו תחתון מעל, מתחת או על פני הטקסט.
text-decoration: overlineהגדרת קו מעל לטקסט.text-decoration: line-throughהגדרת קו חוצה על פני הטקסט. מעין מחיקה של הטקסט.text-decoration: underlineקו תחתון. מקובל להשתמש רק עבור קישורים, כיוון שגולשים מזהים קישורים ע”פ הקו התחתון שיש להם.text-decoration: noneללא כל דקורציה. בדר”כ משתמשים בקישורים כדי לבטל את הקו התחתון שלהן.
לדוגמא, 4 משפטים זהים שלכל אחד מהם מוגדר text-decoration אחר.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sample</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-decoration: overline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-decoration: line-through">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-decoration: underline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</body>
</html>
כך זה נראה בדפדפן:
התכונה text-transform
מגדיר לטקסט האם להשתמש באותיות גדולות / קטנות (רלוונטי באנגלית)
text-transform: capitalizeהופך את האות הראשונה בכל מילה לאות גדולהtext-transform: uppercaseהופך את כל הטקסט לאותיות גדולותtext-transform: lowercaseהופך את כל הטקסט לאותיות קטנותtext-transform: noneללא שינוי. זהו ערך ברירת המחדל, אלא אם כן מקבלים ערך אחר בירושה מאלמנט קודם.
דוגמא:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-transform: capitalize">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-transform: uppercase">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="text-transform: lowercase">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</body>
יראה כך:
התכונה text-align
קובעת לאן יישור הטקסט בתוך בלוק של טקסט. ערכים אפשריים:
inheritמקבל את הערך של אלמנט האבleftיישור לשמאל (ערך ברירת מחדל)rightיישור לימיןcenterיישור למרכזjustifyיישור לשני הצדדים
<!DOCTYPE html>
<html>
<head>
<title>CSS Sample</title>
</head>
<body>
<p style="text-align: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-align: right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-align: center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</body>
</html>
התכונה text-indent
מגדירה איפה תתחיל המילה הראשונה של הטקסט בתוך בלוק טקסט. ערכים אפשריים:
- ערך אבסולוטי
- אחוזים
- inherit
דוגמא:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-indent: 2em">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-indent: 20%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p style="text-indent: 15px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin mollis lacinia hendrerit. Vestibulum et metus massa,
vitae hendrerit quam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</body>
ובדפדפן:
תגובות בפייסבוק