היכולת לעצב היבטים שונים של דף ה-HTML שלך היא מיומנות חשובה עבור מעצבי ומפתחי אתרים. כדי לעצב את דפי האינטרנט שלך ב-HTML עם צבעים וגדלים של גופנים, תצטרך להכיר את ה-CSS. כדי למקד ספציפית לגודל גופן, אתה יכול להשתמש ב-CSS גודל גופן תכונה.
אם אתה מחפש דרך לשנות את גודל הגופן של HTML באמצעות CSS, דאגנו לך. בואו נצלול פנימה על ידי התחלת מבוא ל-CSS גודל גופן תכונה.
הבנת הנכס בגודל גופן CSS
ה גודל גופן נכס ב-CSS שימושי כאשר אתה צריך לשנות את גודל טקסט HTML. אתה יכול להשתמש במאפיין זה כדי לשנות את הגודל של כל פיסת טקסט בדף HTML או לכוון לרכיבים ספציפיים לשינוי.
בדרך כלל מומלץ למקד לרכיבים ספציפיים מכיוון שבדרך כלל אינך רוצה שהכל יהיה באותו גודל. קשה לסרוק טקסט שאינו עוקב אחר היררכיה חזותית ולהבדיל בין כותרות ברמה גבוהה יותר לכותרות ברמה נמוכה.
במילים פשוטות יותר, אל תנצל לרעה את גודל גופן תכונה. אם אתה רוצה שכותרת תתבלט, יש תגיות HTML שונות עבור זה. בדוק שלנו גיליון הונאה של HTML חיוני עבור תגים שונים, תכונות ועוד יחד עם הסברים.
ה-CSS גודל גופן תכונה מקבלת שני סוגים של ערכים: מוחלט ויחסי.
ערכי אורך מוחלט (כלומר.
פיקסלים) קבועים ואילו יחסיים (למשל. em ו לְשֶׁעָבַר) גמישים. לדוגמה, עבור יחידה יחסית לגופן כמו em, הגודל נקבע בדרך כלל לפי גודל הגופן של רכיב האב. עם זאת, יחידות יחסיות גופנים מבוססות שורש כמו rem מושפעים מגודל הגופן של רכיב הבסיס ().לכל אחד יש את היתרונות והחסרונות שלו, אבל בעצם השמירה על מיקוד הדברים, לא נדון בהם במאמר זה.
כיצד לשנות את גודל הגופן של רכיב HTML ב-CSS
אתה יכול לשנות את גודל הגופן של טקסט HTML על ידי שימוש בתחביר CSS סטנדרטי.
ראשית, ציין את הבורר (הטקסט שברצונך לשנות) ופתח כמה סוגרים מסולסלים. לאחר מכן, הזן את גודל גופן מאפיין ואחריו נקודתיים, ציין את הגודל הספציפי שבו תרצה להציג את טקסט ה-HTML שלך וסגור אותו עם נקודה-פסיק.
הנה התחביר:
בורר CSS {
גודל גופן: ערך;
}כדי להבין טוב יותר את הרעיון, עיין בלוח ה-HTML הבא הכולל כמה שורות קוד נוספות (כותרת ופיסקה):
דף HTML פשוט
זו הכותרת הראשונה שלי
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
אם ברצונך לשנות את גודל הגופן של רכיב הפסקה, עליך לבחור בו (באמצעות מחלקה, תג או מזהה) ובאמצעות ה-CSS גודל גופן נכס, הגדר ערך מותאם אישית עם היחידות המועדפות עליך. בדוגמה שלנו, נשתמש בפיקסלים (פיקסלים).
p {
גודל גופן: 18px;
}למרות שבדרך כלל לא מומלץ להשתמש ב-CSS מוטבע בפרויקטים גדולים, אתה יכול גם להשתמש בו כדי לשנות את גודל טקסט HTML. אם נקבל הערות מקוד ה-CSS החיצוני שלמעלה, נוכל ליישם את אותו הדבר בשורה כך:
דף HTML פשוט
זו הכותרת הראשונה שלי
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
טקסט ב- ע לתג HTML יהיה כעת גודל מותאם אישית חדש.
קָשׁוּר: טיפים וטריקים חיוניים ל-CSS שכל מפתח צריך לדעת
פתרון שגיאות בעת שינוי גודל גופן HTML ב-CSS
אמנם כל התהליך של שינוי גודל הטקסט ב-CSS עשוי להיראות קל, אך ייתכן שלא תמיד הוא יתפתח בדיוק כפי שאתה מצפה ממנו. אם אתה נתקל בבעיות, התחל בבדיקה אם שמרת את השינויים בקובץ שלך (כמו כן, הקפד לקשר את גיליון ה-CSS שלך לקובץ ה-HTML שלך). אם עשית זאת, נסה להשתמש בשיטה המוטבעת ולאחר מכן רענן את הדף.
אם זה עובד, ייתכן שיש בעיה בקוד ה-CSS שלך. נסה להשתמש ב !חָשׁוּב תג, ואם זה עובד, חייב להיות קוד מתנגש. נתח את קוד ה-CSS שלך שורה אחר שורה כדי לנסות לתפוס את השגיאה.
צריך עזרה עם CSS? נסה את דוגמאות קוד ה-CSS הבסיסיות האלה מלכתחילה, ולאחר מכן החל אותן על דפי האינטרנט שלך.
קרא הבא
- תִכנוּת
- HTML
- CSS
- בניית אתרים
- עיצוב אתרים
Alvin Wanjala כותב על טכנולוגיה כבר יותר משנתיים. הוא כותב על היבטים שונים, כולל אך לא רק ניידים, PC ומדיה חברתית. אלווין אוהב תכנות ומשחקים בזמן השבתה.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם
