עיצוב טקסט – מדריך CSS

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

צבע הטקסט

אנו משתמשים במאפיין הצבע על מנת לקבוע את הצבע של הטקסט
בcss הצבע מיוצג באחת משלוש דרכים:

• ערך HEX – לדוגמה "#ff0000"
• ערך RGB- לדוגמה "rgb(255,0,0)"
• שם הצבע- לדוגמה "red"

לרשימת ערכי צבע css

צבע ברירת המחדל של טקסט בעמוד מסוים מוגדר בstyle של תגית הbody, וכותרות ברירת המחדל בתגיות הרלוונטיות:
לדוגמה:

הערה! בשביל שהCSS שלנו יהיה תקין מבחינת w3c כשנגדיר את מאפיין הצבע נגדיר גם אתאת מאפיין צבע הרקע.

יישור הטקסט text aligment

ערך המאפיין יישור הטקסט (text align) קובע את היישור האופקי של הטקסט
הטקסט יכול להיות ממורכז, מיושר לשמאל או לימין, או קבוע.
כאשר יישור הטקסט מוגדר קבוע (justify) כל שורה נמתחת כך שכל השורות באותו רוחב,
והצד השמאלי והימני של השורה ישרים. (כמו בעיתון או במגזין).
דוגמא:

קישוט טקסט

בעזרת מאפיין קישוט הטקסט אני יכולים לקשט טקסט וכמו כן לבטל את הקישוט.
במאפיין קישוט טקסט בדר"כ משתמשים ע"מ להסיר קו תחתון מלינק למטרות עיצוב.
דוגמה:

ניתן גם להשתמש בו ע"מ לקשט טקסט:

הערה: לא מומלץ לשים קו תחתון בטקסט שהוא לא לינק, זה יבלבל את המשתמשים שלנו.

שינוי צורת טקסט

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