גלה מושגי CSS

4 דקות

מבנה CSS

אם ברצונך שדף ה- HTML יציג את כל הטקסט h1 התגיות בצבע כתום, באפשרותך להשתמש בקוד CSS הבא.

h1 {
    color: orange;
}

קוד ה- CSS לעיל מתחיל ב- (h1) שבו בחר את ה- HTML שברצונך לשנות את הסגנון שלו. הטבלה h1 בדוגמה נקראת בורר .

שים לב לקוד בתוך סוגריים מסולסלים, color: orange;מצהיר על האופן שבו יש h1 את התגית שנבחרה. קוד ה- CSS בסוגריים מסולסלים { }, כגון color: orange; נקרא מסולסל.

ההצהרה לדוגמה מכילה מאפיין , color, המופרד מערך , orange, עם נקודתיים (:), וסוף ההגדרה מסומן באמצעות נקודה-פסיק (;).

הערה

אין צורך לשנן כל מאפיין וערך זמינים ב-CSS. ישנם אתרים רבים שאתה יכול להתייחס אליהם. כמו כן, כלים כגון vscode.dev או Visual Studio Code מציעים אפשרויות השלמה אוטומטית שיכולות לעזור להדריך אותך בעת יצירת CSS.

הטבעת קובץ CSS

דרך מהירה להוסיף מידע סגנון היא למקם אותו בתוך head של דף ה- HTML שלך באמצעות style אישית. שיטה זו אינה נחשבת לשיטה המומלצת, אך ניתן להשתמש בה ללמידה ולבדיקה.

הדוגמה הבאה מוסיפה את התגית <style> עם מידע עיצוב עבור כל h1 להציג באפור. מאחר שזהו העיצוב היחיד, שאר ה- HTML מוצג עם סגנון ברירת המחדל של הדפדפן.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

בעת הצגה בדפדפן, הטקסט "ברוך הבא" <h1> מוצג באפור.

מסך של עמוד H T M L המעובד מציג את הכותרת 1 באפור.

החלת סגנונות על HTML באמצעות CSS

קישור לקובץ CSS

בעת הוספת סגנונות ל- Hypertext Markup Language (HTML), מומלץ לבצע את העיצוב בקובץ CSS נפרד. כשמספר קובצי HTML משתמשים באותו CSS, יש להם מראה עקבי. בנוסף, קל יותר לעדכן קובץ CSS אחד מאשר לעדכן כל קובץ HTML בודד.

כדי להפנות לקובץ CSS, עליך להשתמש ברכיב link הבא.

link כוללת שתי תכונות, rel ו- href. rel משמש לזיהוי סוג המשאב שאתה מפנה אליו, סגנונות עבור גליונות סגנונות. href משמש לזיהוי הנתיב לקובץ ה- CSS. אם קובץ ה- CSS שלך היה באותה תיקיה שבה נמצא קובץ ה- HTML שלך והשתמש בשם style.css, תוכל להשתמש באפשרויות הבאות כדי להפנות אליה מהדף שלך:

<link rel="stylesheet" href="style.css">

כעת יש לך לפחות שני קבצים, .html קובץ וקובץ .css . בדוגמה הקודמת יהיה קובץ HTML המקשר ל- CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

משוב

האם עמוד זה היה מועיל?