יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

עיצוב טקסט - color, text-decoration, text-align

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב טקסט - color, text-decoration, text-align
הגדרות ואפיון הטקסט באמצעות תכונות כמו color, text-align.

שיטות לכתיבת צבעים ב-CSS

ב-CSS צבע הטקסט מוגדר בדרך כלל ע"י אחת מהשיטות הבאות:

  • שם של צבע באנגלית (פלטת 16 צבעים) - למשל yellow מציין צהוב.
  • ערך HEX ב-3 ספרות (פלטת 4096 צבעים) - למשל fff# מציין לבן.
  • ערך HEX ב-6 ספרות (פלטת 16.8 מליון צבעים) - זו השיטה הנפוצה ביותר היום. למשל ffffff# מציין לבן.
  • ערך RGB במספר עשרוני (פלטת 16.8 מליון צבעים) - למשל (rgb(255,0,0 מציין אדום.

צבע ברירת המחדל עבור אתר אינטרנט מוגדר ב-CSS ע"י הסלקטור body. נשתמש בתכונה color בתוך ההצהרה של סלקטור body. הדוגמה הבאה מראה כיצד להגדיר שצבע הטקסט יהיה ירוק:

body {
    color:blue;
}

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

על מנת שה-CSS יותאם לתקנים של W3C, אם הגדרנו את צבע הטקסט, עלינו להגדיר גם את צבע הרקע, וחשוב שהוא לא יהיה זהה לצבע הטקסט.

יישור טקסט

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

p {
    text-align:right;
}

עכשיו נגדיר שכל הכותרות h1 יהיו ממורכזות. נעשה זאת באופן הבא:

h1 {
    text-align:center;
}

אם נרצה למשל שחתימת הכותב בסוף כל עמוד תיושר דווקא לשמאל, נגדיר ב-html את חתימת הכותב כמחלקה (class), ונגדיר ב-CSS את היישור באופן הבא:

p.signature {
    text-align:right;
}

קישוט טקסט

ניתן להוסיף מעיין קישוטים לטקסט, ע"י שימוש בתכונה text-decoration. תכונה זו מאפשרת למשל להוסיף קו על הטקסט או מתחתיו, ליצור טקסט מהבהב (blink) ועוד. בדוגמה הבאה נגדיר למשל שכותרת h3 תהבהב:

h3 {
    text-decoration:blink;
}

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

a {
    text-decoration:none;
}

כתיב עליון או תחתון

על מנת ליצור טקסט עליון (uppercase) או תחתון (lowercase), או בכדי לשנות כל אות ראשונה במילה לאות גדולה (Capital letter), משתמשים בתכונה text-transformation. לדוגמא:

p.topic {
    text-transform:uppercase;
}
p.internal_text {
    text-transform:lowercase;
}
p.special_info {
    text-transform:capitalize;
}

הזחה

כשרוצים ליצור הזחה (indentation), משתמשים בתכונה text-indentation על מנת לקבוע את מרחק הטקסט מהשוליים. למשל:

p {
    text-indent:75px;
}

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: