' أو ' <القسم> 'يمكن أيضًا استخدام العلامات ولكن من الممارسات الجيدة استخدام' <رأس> ' بطاقة شعار. بعد ذلك ، قم بتعيين ' رأس 'لتطبيق أنماط CSS على قسم الرأس. بعد ذلك ، أضف '

'في ذلك وتعيين فئة من' عنوان 'لعرض محتوى' مرحبًا بك في Linuxhint! ':

<رأس فصل = 'رأس' >

< h1 فصل = 'عنوان' > مرحبًا بك في Linuxhint! < / h1 >

< / رأس>

بعد ذلك ، حدد ' <رأس> 'فئة العلامة وتعيين الأنماط التالية:

---

---

.header {

صورة الخلفية: url ( '../bg.jpg' ) ؛

خلفية- مقاس : غطاء؛

تكرار الخلفية: لا تكرار ؛

لون : دخان ابيض؛

موضع الخلفية: أعلى ؛

الحشو: 0 بكسل 20 بكسل 20 بكسل 20 بكسل ؛

}

شرح الكود أعلاه مذكور أدناه:

• أولاً ، قم بتعيين الصورة ' bg.jpg 'كخلفية لقسم العنوان باستخدام' الصورة الخلفية ' ملكية.
• بعد ذلك ، ' حجم الخلفية ' و ' تكرار الخلفية 'لضبط حجم الصورة وإيقاف تكرار الصورة ، على التوالي.
• بعد ذلك ، اضبط لون النص وموضع الصورة في الأعلى بمساعدة ' لون ' و ' خلفية الموقف ' ملكيات.
• في النهاية ، ' حشوة 'يتم استخدام الخاصية لتحديد مسافة بين محتوى الرأس والحدود.

بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يوضح الإخراج أعلاه إنشاء قسم الرأس ، وتطبيق أنماط CSS عليه.

الخطوة 2: إنشاء شريط التنقل

يمكن أن يحتوي الرأس أيضًا على شريط تنقل في معظم الحالات. لإنشاء شريط التنقل ، يتم استخدام HTML ' <بلا> ”يمكن أن تكون مفيدة جدًا. لهذا السبب ، أضف عناصر شريط التنقل باستخدام ' 'وتعيين فئة من' يمثل ':

<رأس فصل = 'رأس' >

<بلا>

< أ فصل = 'يمثل' href = '#' > الصفحة الرئيسية < / أ >

< أ فصل = 'يمثل' href = '#' > الخدمات < / أ >

< أ فصل = 'يمثل' href = '#' > عنا < / أ >

< أ فصل = 'يمثل' href = '#' > اتصل بنا < / أ >

< أ فصل = 'يمثل' href = '#' > القادمون الجدد < / أ >

< / لا>

< ر > < ر >

< h1 فصل = 'عنوان' > مرحبًا بك في Linuxhint! < / h1 >

< / رأس>

بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يوضح الناتج أعلاه أن عناصر navbar ' بيت '،' خدمات '،' معلومات عنا '،' اتصل بنا ' و ' القادمون الجدد ' صنعت.

الخطوة 3: تطبيق الأنماط على عناصر Navbar

لتحديد نمط عناصر شريط التنقل ، حدد ' يمثل 'وتعيين خصائص أنماط CSS التالية:

.يمثل {

زخرفة النص: لا شيء ؛

لون : أبيض؛

العرض محجوب؛

الحشو: 15 بكسل ؛

الخط- مقاس : كبير؛

تعويم: اليسار؛

الهامش: 0 بكسل 20 بكسل ؛

}

شرح الكود أعلاه هو:

• لأول مرة ' زخرفة النص 'على' بلا 'لإزالة التصميم المعرّف مسبقًا لـ' ' بطاقة شعار.
• لتعزيز رؤية النص للمستخدم ، فإن ' أبيض ' و ' كبير 'يتم توفير قيم' لون ' و ال ' حجم الخط ' ملكية.
• بعد ذلك ، ' عرض ' و ' يطفو تساعد خصائص ' 'التي تظهر على نفس السطر.
• في النهاية ، ' حشوة ' و ' هامِش يتم استخدام قيم الخصائص لإنشاء مسافة بين كل علامة ' '.

بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يوضح الإخراج أعلاه أن عناصر شريط التنقل الآن على غرار.

الخطوة 4: إضافة تأثير التمرير إلى عناصر Navbar

كما في الإخراج أعلاه ، لا يتوفر تأثير التمرير في عنصر شريط التنقل. لإضافة كليهما ، حدد ' عنوان 'الفئة المخصصة لـ'

' بطاقة شعار. بعد ذلك ، أضف ' :يحوم 'المحدد مع' يمثل 'فئة لتطبيق تأثير التمرير على عناصر شريط التنقل:

.act: hover {

حدود : 2 بكسل بيضاء صلبة ؛

لون : بنفسجي مزرق؛

}

.عنوان {

نص- محاذاة : مركز؛

هامِش: 18 ٪ 0 بكسل ؛

}

يتم توفير شرح للكود أعلاه أدناه:

• أولاً ، قم بتعيين ' حدود 'من نوع صلب بحجم 2 بكسل وتعيين' لون '. إلى جانب ذلك ، اضبط ' بنفسجي مزرق ”فقط عندما يحوم المستخدم الماوس فوق عناصر شريط التنقل.
• بعد ذلك ، حدد ' عنوان 'فئة وتعيين محاذاة إلى' مركز 'وتوفير بعض الهامش لجعل القسم يبدو أكبر.

بعد تنفيذ الكود أعلاه ، يبدو المظهر النهائي للرأس كما يلي:

يوضح الإخراج أعلاه أنه تم إنشاء الرأس باستخدام HTML و CSS.

خاتمة

في ملف HTML ، يتم استخدام علامة '

' لإنشاء قسم للرأس. بعد ذلك ، يمكن للمستخدمين تطبيق خصائص CSS مثل الحشو وصور الخلفية لتحسين قسم الرأس. يتم تطبيقه على جميع عناصر الرأس مثل شريط التنقل. لإنشاء شريط تنقل ، يمكن للمستخدمين استخدام علامة '