טקסט ב – CSS

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

התכונה Font-family

תכונה זו מגדירה את סוג הפונט שישמש את הטקסט בעמוד ( למשל, Times New Roman, Arial, או Verdana).

סוג הפונט שתבחר חייב להימצא על מחשב הגולשים ולכן אין טעם לבחור פונטים לא מוכרים. ישנם מספר סוגי פונטים שהשימוש בהם נחשב בטוח יחסית כמו Times New Roman, Arial, או Verdana. מטרת הההגדרה היא לציין לדפדפן שבמידה והפונט Times New Roman לא נמצא על מחשב הגולשים באתר שיבחר בפונט Arial או Verdana.

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

  1. font-family: "Times New Roman"

התכונה Font-size

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

התכונה Font-weight

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

  1. font-weight: bold
  2. font-weight: normal

אך תיאורטית ניתן להזין לתכונה גם את הערכים הבאים : bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ו- 900.

התכונה Font-style

תכונה זו מציינת אם הטקסט יוצג בצורה נטויה או לא. ניתן ליישם זאת ב – 2 הצורות הבאות :

  1. font-style: italic
  2. font-style: normal

התכונה text-decoration

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

  • text-decoration: overline - יוצג קו מודגש מעל הטקסט.
  • text-decoration: line-through - יוצג קו מודגש באמצע הטקסט.
  • text-decoration: underline - יוצג קו מודגש מתחת הטקסט – מומלץ להשתמש באופציה זו על קישורי טקסט בלבד.

בדרך כלל משתמשים בתכונה זו על מנת לקשט קישורים טקסט באמצעות הסרה של הקו התחתון של הקישור. הגדרה זו מוחלת בצורה הבאה : text-decoration: none

התכונה text-transform

תכונה זו אחראית על הצגה של אותיות גדולות באנגלית בלבד.

  • text-transform: capitalize - כל האותיות הראשונות בכל מילה יוצגו באות גדולה.
  • text-transform: uppercase - כל האותיות בכל המילים יוצגו באותיות גדולות.
  • text-transform: lowercase - כל האותיות בכל המילים יוצגו באותיות קטנות.
  • text-transform: none - מה נראה לך שזה עושה ?

דוגמא לכל התכונות הנ"ל

  1. body {
  2.     font-family: arial, helvetica, sans-serif;
  3.     font-size: 0.8em;
  4. }
  5. h1 {
  6.     font-size: 2em;
  7. }
  8. h2 {
  9.     font-size: 1.5em;
  10. }
  11. a {
  12.     text-decoration: none;
  13. }
  14. strong {
  15.     font-style: italic;
  16.     text-transform: uppercase;
  17. }

ריווח טקסטים באמצעות CSS

התכונות letter-spacing ו – word-spacing אחראיות על פיזור רווחים בין אותיות או מילים. הערכים לתכונות הנ"ל יכולים להיות אורך כלשהו או normal.

התכונה line-height מגדירה את גובה השורה באלמנט HTML. הערכים לתכונה יכולים להיות מספר המציין את הכפלת הפונט, אורך כלשהו, אחוז או normal.

התכונה text-align אחראית על יישור הטקסט באלמנט HTML לימין (right), שמאל (left), מרכז (center) או מוחלט (justify).

התכונה text-indent אחראית על "דחיפה" של השורה הראשונה בכל פיסקה. צורת עיצוב זו באה לידי ביטוי בדפוס אך לא נפוצה כל כך באינטרנט.

דוגמא לכל התכונות הנ"ל :

  1. p {
  2.     letter-spacing: 0.5em;
  3.     word-spacing: 2em;
  4.     line-height: 1.5;
  5.     text-align: center;
  6. }

עמודים רלוונטים

דוגמאות קוד

  • הגודל לא קובע – כיצד ניתן לשנות את גודל ברירת המחדל באמצעות font-size.
  • הצגה של אותיות גדולות – שימוש בתכונות text-transform ו – font-variant.
  • ריווח של טקסטים – שימוש בתכונות text-align, text-indent, word-spacing ו- letter-spacing.

רפרנס

  • התגית font-family
  • התגית font-size
  • התגית font-weight
  • התגית font-style
  • התגית text-decoration
  • התגית text-transform
  • התגית letter-spacing
  • התגית word-spacing
  • התגית line-height
  • התגית text-align
  • התגית text-indent