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

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

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

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

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

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

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

 

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

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

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

הקוד מייצר שתי פסקאות, רק אחת מהן נמצאת בין התגיות

, ובהתאם העיצוב יחול רק על פסקה זו. נשמור את קובץ ה-html.

 

שינוי תכונות הטקסט

צבע הטקסט

כדי לשנות את צבע הטקסט נשתמש בתכונה color.

נכתוב את הקוד הבא לקובץ ה-css חיצוני, style.css:

p {color: red;}

הקוד נותן צבע אדום לפסקה שנמצאת בין התגיות

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

שינוי צבע הטקסט בCSS באמצעות התכונה color

 

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

p {color: #FF0000;}

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

 

עובי הטקסט

כדי לשנות את עובי הכתב נשתמש בתכונה font-weight ובערך bold.

נכתוב מחדש את קובץ ה-CSS:

p {font-weight: bold;}

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

שינוי עובי הטקסט בCSS באמצעות התכונה font-weight

 

קו תחתון

כדי להוסיף קו תחתי לכתב נשתמש בתכונה text-decoration ובערך underline.

נשכתב את קובץ ה-CSS:

p {text-decoration: underline;}

נשמור בשם style.css, ונריץ מהדפדפן.

נראה את התוצאה:

הוספת קו תחתי באמצעות CSS התכונה text-decoration

 

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

p {text-decoration: none;}

 

מרווח בין אותיות

על מנת לשנות את המרווח בין האותיות, נשתמש בתכונה letter-spacing, ואחריה בערך בפיקסלים (px) שמציין את המרחק הרצוי בין האותיות. לדוגמה:

p {letter-spacing: 7px;}

ייצר את הפסקה הבאה:

דוגמה לפסקה שבה המרווח בין האותיות 7 פיקסלים

 

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

p {letter-spacing: -2px;}

שייצר את הפסקה הבאה:

דוגמה לפסקה שבה המרווח בין האותיות 2- פיקסלים

 

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

p {letter-spacing: normal;}

שיחזיר אותנו למרווח הרגיל בין האותיות.

 

עיצוב הגופנים (פונטים)

כדי לשנות גופנים נשתמש בתכונה font-family.

נכתוב מחדש את קובץ ה-CSS:

p {font-family: sans-serif;}

נשמור בשם style.css , ונריץ מהדפדפן.

נראה את התוצאה:

כך נראים הגופנים בדפדפן

באופן כללי, מומלץ להשתמש בדפי אינטרנט בגופנים ללא תגיות (sans-serif) דוגמת arial (שורה שנייה בתמונה למעלה), ולא בגופנים עם תגיות דוגמת Times New Roman (שורה ראשונה בתמונה למעלה).

כדי לשנות את גודל הגופנים נשתמש בתכונה font-size.

נכתוב מחדש את קובץ ה-CSS:

p {font-size: 20px;}

נשמור בשם style.css , ונריץ מהדפדפן.

נראה את התוצאה:

שינוי גודל הגופן באתר באמצעות התכונה font-size

 

את גודל הגופן ניתן לקבוע באמצעות px או באחוזים מגודל הגופן באתר. לדוגמה:


p {font-size: 140%;}
p {font-size: 70%;}

 

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

 

= 7 + 6