וובמאסטר - תיכנות ובניית אתרים

מדריך CSS - תכונות של טקסט

רן בר-זיק/‏ 15 דצמבר, 2002
F+
F-

תכונות טקסט מגדירות כיצד טקסט ממוקם בדף וכיצד הוא מוגש למשתמש.

התכונה 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
תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות