נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS מספר 5 - עיצוב פסקה

מחבר:
בתאריך:

 

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

נתחיל מהעתקת הקוד הבא לקובץ ה-html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
   זו פסקה מאוד פשוטה שנועדה להדגים את המצב שבו לא מחילים כלל עיצוב על הפסקה
<p> זו פסקה פשוטה שכל מטרתה להראות מה קורה לפסקה שמחילים עליה את עיצובה</p>
</body> </html>

הקוד מוסיף 2 פסקאות לדף. נשמור את הקובץ.

 

שליטה ברווח בין השורות

כדי לשלוט ברווח בין השורות נשתמש בתכונה line-height. תכונה זו יכולה לקבל ערכים בפיקסלים (px) או באחוזים (%). נתבונן בשורת הקוד הבאה לדוגמה:

p {line-height: 200%;}

משמעות הקוד שגובה השורה יהיה כפליים מגובה האותיות. את הקוד נעתיק לגיליון העיצוב החיצוני, style.css. נריץ את דף ה-html על הדפדפן, ונצפה בתוצאה:

קביעת המרווח בין השורות על ידי קביעת גובה השורה עם line-height

אפשר לראות שהפסקה השנייה שעליה פעל line-height נראית מרווחת יותר. באופן כללי, מומלץ שהמרווח בין השורות יהיה כ120%-140%.

 

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

body { 
    font: 13px/15px Arial, Helvetica, sans-serif;
}

 

שליטה בכיוון הפסקה

שליטה בכיוון הפסקה באמצעות text-align

כדי לשלוט על כוון הפסקה נשתמש בתכונה text-align, שיכולה לקבל את הערכים הבאים:

  • מיישר פסקה לימין,
  • מיישר פסקה למרכז,
  • מיישר פסקה לשמאל.

כדי ליישר פסקה לימין נכתוב לקובץ style.css את הקוד הבא:

p {
    text-align: right;
}

נריץ את קובץ ה-html על הדפדפן, ונצפה בתוצאה:

קביעת כיוון הפסקה על ידי CSS והתכונה text-align

אנחנו יכולים לראות שהפסקה השנייה שעליה פעל text-align מיושרת עכשיו ימינה.

שליטה בכיוון הפסקה באמצעות direction

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

  • מיישר פסקה לימין,
  • מיישר פסקה לשמאל.

 

הוסף תגובה חדשה

 

= 8 + 6