מדריך 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
>

כך זה נראה בדפדפן:

טקסט CSS text-align text-indent text-transform text-decoration טקסט

התכונה 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
>

יראה כך:

טקסט CSS text-align text-indent text-transform text-decoration טקסט

התכונה 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
>

טקסט CSS text-align text-indent text-transform text-decoration טקסט

 

התכונה 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
>

ובדפדפן:

טקסט CSS text-align text-indent text-transform text-decoration טקסט

תגיות: , ,

רן בר-זיק

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!