Webbee
  • שיווק באינטרנט
  • בניית אתרים
  • מאמרים
  • אודותינו
  • צור קשר
  • שיווק באינטרנט
  • בניית אתרים
  • מאמרים
  • אודותינו
  • צור קשר
Webbee
  • שיווק באינטרנט
  • בניית אתרים
  • מאמרים
  • אודותינו
  • צור קשר
  • שיווק באינטרנט
  • בניית אתרים
  • מאמרים
  • אודותינו
  • צור קשר
ראשי » בניית אתרים » עיצוב טקסט – מדריך CSS

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

9 באוגוסט 2011 17:54

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

צבע הטקסט

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

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

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

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

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb (255,0,0);}

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

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

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

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:jutify;}

קישוט טקסט

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

a {text-decoration:none;}

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

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

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

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

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

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
אהבת? הגיע הזמן לשתף
  • Facebook
  • Google
  • Twitter
  • LinkedIn
  • Email
CSS בניית אתרים מאפייני CSS מדריך CSS עיצוב אתרים עיצוב טקסט תכונות CSS
השארת תגובה

ביטול

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



תעשו לנו לייק בפייסבוק
מאמרים חדשים

יש לכם טבלאות באתר \ אפליקציה?

מה זה CMS (מערכת לניהול תוכן)

MVC – model – viewer – controller או מה זה MVC?

להקטין את כל התמונות או להמיר סוג תמונה

מפת אתר HTML דינאמית ובעברית לוורדפרס!

עמודים חשובים
  • שיווק באינטרנט
  • בניית אתרים
  • מאמרים
  • אודותינו
  • צור קשר
קטגוריות מאמרים
  • אחזקת אתרים
  • בניית אתרים
  • עיצוב אתרים
  • קידום אתרים בגוגל
  • שיווק באינטרנט
מאמרים חדשים

יש לכם טבלאות באתר \ אפליקציה?

מה זה CMS (מערכת לניהול תוכן)

MVC – model – viewer – controller או מה זה MVC?

להקטין את כל התמונות או להמיר סוג תמונה

מפת אתר HTML דינאמית ובעברית לוורדפרס!

חפש באתר
כל הזכויות שמורות לWebbee - עושים באזז ברשת 2014
loading ביטול
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.