מדריך CSS מספר 5 - איך לעצב טקסט

שלבים

1. 1

   שלב 1

   בואו נתחיל מאחד החלקים הבסיסיים והשימושיים ביותר בעיצוב טקסט שהוא יישור הטקסט (alignment) - האם הטקסט צריך להיות מיושר לימין? האם כותרת צריכה להיות במרכז? אפשר ליישר את הטקסט בCSS בעזרת text-align וזה נראה כך:
2. 2

   שלב 2

   
   h1 {text-align:center;} p.right {text-align:right;} p.left {text-align:left;} This is a headline in the middle.

   This text is on the right.

   This text is on the left.

4. 3

   שלב 3

   
   והפלא ופלא, הטקסט מיושר לצדדים שהגדרנו בחוקי הCSS.
5. 4

   שלב 4

   בכדי לצבוע את הטקסט צריך להשתמש בcolor כאשר את הצבע ניתן להגדיר בכמה צורות: בעזרת שימוש בשמות צבעים רגילים כמו: blue, red וכו' או שאפשר לקרוא לצבע בשם ההקסדצימלי שלו כמו #8B008B שזה שם אחר לסגול (באינטרנט יש אינספור רשימות של צבעים שניתן למצוא את השמות ההקסדצימלים שלהם). קיימת דרך נוספת שהיא בעזרת הRGB (עליה לא נעבור במדריך זה) דוגמא לשימוש בצבעים:
6. 5

   שלב 5

   
   h1 {color:#8B008B;} body {color:red;} p {color:blue;} This is a headline Some text in the body (red)

   The text in the paragraph is blue.

7. 6

   שלב 6

   
   כך זה יראה. שימו לב שהצבע שהגדנו לbody יהיה צבע ברירת המחדל (לאלו שלא הוגדר להם מראש חוק CSS המגדיר צבע).
8. 7

   שלב 7

   כעת נתמקד בחוק CSS שהוא רלוונטי מאוד לכל מי שכותב אתר בעברית - כתיבה מימין לשמאל, בשביל זה נשתמש בdirection.
9. 8

   שלב 8

   
   p {direction:rtl;}

   עברית זה כיף מימין לשמאל.

10. 9

    שלב 9

    
    בחוק הCSS הנקרא direction שמנו את הערך rtl (שאומר right to left).
11. 10

    שלב 10

    במידה ומרווח בין השורות אינו מספק אתכם תוכלו להגדיר אותו כך:
12. 11

    שלב 11

    p {line-height:50%;}
13. 12

    שלב 12

    כמובן שתוכלו לשחק עם הערכים (באחוזים) ולהגדיל ולהקטין את הרווח בין השורות כאוות נפשכם.
14. 13

    שלב 13

    ואם זה לא מספיק, תוכלו להקטין את המרווחים בין האותיות באותה הקלות:
15. 14

    שלב 14

    p {letter-spacing:3px;}
16. 15

    שלב 15

    טווח הערכים יכול להיות גם מספר שלילי.
17. 16

    שלב 16

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