'תייג בו והקצה לו מחלקה של ' כּוֹתֶרֶת ' כדי להציג את התוכן 'ברוכים הבאים ל-Linuxhint!':

מעמד = 'כּוֹתֶרֶת' >

< h1 מעמד = 'כּוֹתֶרֶת' > ברוכים הבאים ל- Linuxhint! < / h1 >

< / כותרת>

לאחר מכן, בחר את '

' תייגו מחלקה והקצו את הסגנונות הבאים:

---

---

.כּוֹתֶרֶת {

רקע-תמונה: url ( '../bg.jpg' ) ;

רקע כללי- גודל : כיסוי;

רקע-חזרה: אין-חזרה;

צֶבַע : עשן לבן;

מיקום רקע: למעלה;

ריפוד: 0px 20px 20px 20px;

}

ההסבר של הקוד לעיל מוזכר להלן:

• ראשית, הגדר את התמונה ' bg.jpg ' כרקע למדור הכותרת באמצעות ' תמונת רקע ' תכונה.
• לאחר מכן, ה' גודל רקע ' ו' רקע-חזרה מאפיינים משמשים להגדרת גודל התמונה ולעצירת החזרה על התמונה, בהתאמה.
• לאחר מכן, הגדר את צבע הטקסט והתמונה למעלה בעזרת ' צֶבַע ' ו' מיקום רקע ' נכסים.
• בסופו של דבר, ה' ריפוד 'מאפיין משמש להגדרת רווח בין תוכן הכותרת לגבול.

לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:

הפלט שלמעלה מציג שקטע הכותרת נוצר, וסגנונות CSS מוחלים עליו.

שלב 2: צור סרגל ניווט

הכותרת יכולה להכיל גם סרגל ניווט ברוב המקרים. ליצירת סרגל הניווט ה-HTML ' <אין> 'תג יכול להיות מאוד שימושי. לכן, הוסף פריטי ניווט באמצעות ' ' תגים ולהקצות מחלקה של ' פעולה ”:

מעמד = 'כּוֹתֶרֶת' >

<אין>

< א מעמד = 'פעולה' href = '#' >בית< / א >

< א מעמד = 'פעולה' href = '#' >שירותים< / א >

< א מעמד = 'פעולה' href = '#' >אודותינו< / א >

< א מעמד = 'פעולה' href = '#' >צור קשר< / א >

< א מעמד = 'פעולה' href = '#' >כניסות חדשות< / א >

< / לא>

< br >< br >

< h1 מעמד = 'כּוֹתֶרֶת' > ברוכים הבאים ל- Linuxhint! < / h1 >

< / כותרת>

לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:

הפלט שלמעלה ממחיש שפריטי ה-navbar ' בית ', ' שירותים ', ' עלינו ', ' צור קשר ' ו' כניסות חדשות ' נוצר.

שלב 3: החל סגנונות על פריטי Navbar

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

.פעולה {

קישוט טקסט: אין;

צֶבַע : לבן;

בלוק תצוגה;

ריפוד:15px;

גוֹפָן- גודל : גדול;

לצוף: שמאל;

שוליים: 0px 20px;

}

ההסבר של הקוד לעיל הוא:

• קודם ה ' טקסט-קישוט מאפיין ' מוגדר ל'ללא' כדי להסיר את הסגנון המוגדר מראש של ' 'תג.
• כדי לשפר את נראות הטקסט עבור המשתמש, ' לבן ' ו' גָדוֹל ערכים מסופקים ל- צֶבַע ' וה ' גודל גופן ' תכונה.
• לאחר מכן, ה' לְהַצִיג ' ו' לָצוּף מאפיינים עוזרים ל' ' תגיות שיופיעו באותה שורה.
• בסופו של דבר, ה' ריפוד ' ו' שולים ' ערכי מאפיינים משמשים ליצירת רווח בין כל תג ' '.

לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:

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

שלב 4: הוסף אפקט ריחוף לפריטי Navbar

כמו בפלט לעיל, אפקט הריחוף אינו זמין בפריט הניווט. כדי להוסיף את שניהם, בחר את ' כּוֹתֶרֶת ' מחלקה המוקצה ל'

'תג. לאחר מכן, הוסף את ' :לְרַחֵף ' בורר עם ' פעולה ' מחלקה כדי להחיל את אפקט הרחף על פריטי הניווט:

.act:hover {

גבול : 2px לבן מלא;

צֶבַע : כחול סגול;

}

.כּוֹתֶרֶת {

טֶקסט- ליישר : מרכז;

שולים: 18 % 0px;

}

ההסבר של הקוד לעיל מסופק להלן:

• ראשית, הגדר את ' גבול ' מסוג 2px מוצק ולהקצות לבן ' צֶבַע '. יחד עם זה, הגדר את ' כחול סגול ” צבע רק כאשר העכבר מרחף על ידי המשתמש על פריטי הניווט.
• לאחר מכן, בחר את ' כּוֹתֶרֶת ' מחלקה והגדר את היישור שלו ל' מֶרְכָּז ' ולספק קצת מרווח כדי לגרום לקטע להיראות גדול יותר.

לאחר ביצוע הקוד לעיל, המראה הסופי של הכותרת נראה כך:

הפלט לעיל מציג שהכותרת נוצרת באמצעות HTML ו-CSS.

סיכום

בקובץ ה-HTML, תג '

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