גלה עוד אודות CSS

  • 4 דקות

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

הערות

בדומה לכל שפת מחשב, CSS תומך בהערות. כדי להוסיף הערות במקטע של CSS, עליך להשתמש ב- /* comment */. הטבלה /* מזהה את תחילת ההערה, */ מסמן את הסיום. הערת CSS יכולה לכסות שורות טקסט מרובות. הערות הן דרך נהדרת להשאיר הערות לעצמך או למפתחים אחרים או לרשום הערות בזמן שלמידת השפה.

חשוב

הערות CSS הן ציבוריות ונגישות הן על-ידי הדפדפן והן המשתמשים של אתר האינטרנט שלך. לא מידע רגיש בהערות.

הערות CSS מעוצבות באופן שונה מהערות HTML. הערות ב- HTML משתמשות <!--comment--> התחביר.

הגדרת גופנים

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

מסך של עיבוד דפדפן של טקסט H T M L בשני גופנים.

האפשרות הנפוצה ביותר להגדרת הגופן לשימוש בעמוד היא font-family. font-family מוגדרת בדרך כלל לרשימת גופנים, ומאפשרת לדפדפן להשתמש בגופן הראשון הרשום שהוא יכול לתמוך בו. לדוגמה, הגדרה של Tahoma, Verdana, sans-serif ניסיונות להשתמש ב-Tahoma, ואחריה Verdana, ולבסוף גופן sans serif גנרי.

באפשרותך גם להשתמש באפשרויות אחרות, כגון הסגנון, העובי והעיצוב. font-style משמש להטיית טקסט על-ידי הגדרת הערך ל- italic. font-weight תומך בהגדרות מודגשות שונות, bold בהגדרות הנפוצות ביותר. ולבסוף, text-decoration משמש ליצירת underline, overlineאו line-through טקסט.

CSS תוצאה
font-weight: bold; הדגמה
font-style: italic; הדגמה
text-decoration: line-through; הדגמה

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

הערה

בדרך כלל יש להימנע משימוש בקו תחתון בדף אינטרנט מכיוון שהטקסט עשוי להיראות כהיפר-קישור.

שינוי גודל גופנים

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

הערה

גודל הגופן המוגדר כברירת מחדל עבור דפדפנים רבים הוא 16 פיקסלים.

ניתן למדוד גודל מוחלט בפיקסלים ולציין אותו ב- CSS באמצעות px. כדי להגדיר גופן ל- 14 פיקסלים, באפשרותך להשתמש בהצה font-size: 14px;.

שינוי גודל יחסי עבור גופנים נמדד בדרך כלל באמצעות em או rem. em הוא רכיב קצר והוא יחסי לרכיב האב (em) או לבסיס (rem). הבסיס הוא הרכיב html הבא. 1em או 1rem שווה לגודל של רכיב האב או רכיב הבסיס, בעוד 2em או 2em יהיה כפול מהגודל. מאחר שגודלי המסך עשויים להשתנות, מומלץ בדרך כלל להשתמש בגודל יחסי כאשר הדבר אפשרי.

שקול את ה- HTML וה- CSS הבאים כדוגמה:

<html>
    <body>  
        <div>Sample text</div>
    </body>
</html>

html {
    font-size: 18px;
}
div {
    font-size: 14px;
}

אם הרכיב div הוא 14 פיקסלים מכיוון שהמאסטר 1em הוא div ומוגדר ל- 14px, בעוד שיהיה 1rem 18 פיקסלים מכיוון שהשורש html מוגדר ל- 18px.

1.5em עבור הרכיב div יהיה 21 פיקסלים (14 * 1.5 = 21), ו- 1.5rem יהיו 27 פיקסלים (18 * 1.5 = 27). באפשרותך להשתמש em ו- rem כדי להבטיח את שאר קנה המידה של העמוד בעת עדכון גודל האב או הבסיס.

צבעים

ניתן להגדיר את צבע הגופן באמצעות color הגופן. color להגדיר ערכי RGB (אדום, ירוק, כחול) או לאחד מצבעים בעלי שם רבים, כגון black או lightgray.

ערכי RGB ב- CSS יכולים להיות ערכים הקסדדימאליים עם ערך #, או ערכים של 0 עד 255 בתוך rgb העליונה. כדי להגדיר את הצבע לגוון ברירת המחדל של חום, השתמש color: brown;. עבור הצללה מותאמת אישית של סגול, באפשרותך להשתמש ב- color: #7462e0.

/* named value */
div {
    color: brown;
}

/* RGB hex value */
h1 {
    color: #7462e0;
}

/* RGB function */
h2 {
    color: rgb(105, 6, 19);
}

חשוב

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

כפי שאתה עשוי לחשוד, קיימים עשרות צבעים בעלי שם זמינים, ותרכירכי RGB מציעים קבוצה אינסופית של אפשרויות. Editors such vscode.dev or Visual Studio Code can help identify the available color values. שני העורכים מציגים תצוגה מקדימה של דוגמית צבע ב-CSS. אם תעביר את העכבר מעל דוגמית הצבע, יוצג בפניך בורר צבע שניתן להשתמש בו לקביעת הצבע הרצוי.

מסך של בורר צבעים מתוך Visual Studio Code.