מחשבים

נתחיל מעיצוב הטקסט - בעיצוב טקסט בCSS, ניתן להגדיר האם הטקסט יהיה italic, bold וכו'.

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

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

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

שימו לב לתצורה של חוק הCSS שהגדרנו (p.ariel), הגדרנו שאנו רוצים לשנות את font-family ולאחר מכן (משמאל לימין) יש את שם הפונט בו אתם רוצים להשתמש (לדוגמא ariel), שם הפונט שהדפדפן ישתמש בו (Helvetica) במקרה שהוא לא יצליח להציג את הפונט הראשון והשם השלישי ברשימה הוא שם של משפחה גנרית (sans-serfi) של פונטים מהם יבחר הדפדפן אקראית אם הוא לא יצליח להציג את השניים האחרים.

תוכלו למצוא באינטרנט המון פונטים שונים ומשפחות פונטים.

אם שם של פונט הוא יותר ממילה אחת יש לשים אותו בגרשיים.

את גודל הפונט ניתן גם כן לשנות בעזרת תגית הfont-size.
את גודל הפונט ניתן לשנות באופן יחסי או אבסולוטי כאשר אנו מגדילים שהטקסט יהיה בגדול יחסי אנחנו מגדילים את הגודל שלו ביחס לאלמנטים הסובבים אותו בדף ואילו כאשר אנחנו משנים אותו באופן אבסולוטי אנו מגדירים לו גודל קבוע (לא טוב כאשר נרצה לשנות את גודל הטקסט בדפדפנים שונים).

אם לא תגדירו גודל פונט, גודל ברירת המחדל יהיה 16 פיקסלים - 16px.

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

p {font-size:18px;}

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

em זו יחידת מידה אחרת שערך em אחד = 16px.

חוק הCSS להגדרת גודל פונט עם em יראה כך:

h2 {font-size:2.5em;}

בדוגמא הזו הגדרנו שמה שבתגית h2 יהיה בגודל 2.5em. ומה זה בעצם 2.5em?
זה 40px לחלק ב16 = 2.5.
בכדי לחשב em בפיקסלים, יש לחלק את מספר הפיקסלים ב16.

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

כך:

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