تصميم هيدر اون لاين Html - Css

Html Code العرض و الإرتفاع الحشو و الحاشية التعويم الخطوط النصوص الحدود الألوان الصور خصائص آخرى الأكواد css الكود كامل

الكود الكامل

الهيدر Css

الشعار Css

العنوان Css

الوصف Css

الشريط Css

أقسام الشريط Css

روابط اقسام الشريط Css

روابط أقسام الشريط عند مرور الماوس عليها Css

الشريط Css كود css الكامل

الوسم / العنصر	النصوص	الروابط	كود Html	تعديل أو حذف
الوسم(<div>) العنصر
العنصر
h1
h2
العنصر
<li>	النص	الرابط
<li>	النص	الرابط

العرض و الإرتفاع

الخاصية	الوسم	القيم	كود css	تعديل الكود
العرض width	div - رأس الصفحة الهيدر
الإرتفاع height	div - رأس الصفحة الهيدر
العرض width	nav - الشريط
nav - الشريط height	الإرتفاع

خصائص آخرى

الخاصية	الوسم	القيم	كود css	تعديل الكود
شكل list-style	nav - الشريط
عرض display	li - روابط أقسام الشريط

الحدود

الخاصية	الوسم	القيم	كود css	تعديل الكود
حدود border	div - الهيدر رأس الصفحة	solid double groove dotted inset outset ridge hidden
حدود border	nav - الشريط	solid double groove dotted inset outset ridge hidden
حدود border	li - أقسام الشريط	solid double groove dotted inset outset ridge hidden

التعويم

الخاصية	الوسم	القيم	كود css	تعديل الكود
التعويم float	img - الشعار
التعويم float	h1 - العنوان	الخاصية float لها قيمتين right و left
التعويم float	h2 - الوصف	الخاصية float لها قيمتين right و left
التعويم float	nav - الشريط
التعويم float	li - أقسام الشريط

الحشو و الحاشية

margin:0px 0px 0px 0px; الخاصية مارجين تتحكم في المحاذاة بين العنصر و ما حوله و ترتيب القيم من اليسار ( فوق يمين تحت شمال )

margin:0px 0px 0px 0px; الخاصية بادينج تتحكم في المحاذاة داخل العنصر و ترتيب القيم من اليسار ( فوق يمين تحت شمال )

الخاصية	الوسم	القيم	كود css	تعديل الكود
الحاشية margin	img - الشعار
الحاشية margin	h1 - العنوان
الحاشية margin	h2 - الوصف
الحشو padding	li - روابط أقسام الشريط
الحاشية margin	li - أقسام الشريط
الحاشية margin	nav - الشريط

الخاصية	الوسم	القيم	كود css	تعديل الكود
خلفية background:;	div - الهيدر		لا تكرار تكرار الصورة تكرار أفقي تكرار عمودي تغيير الخلفية تكنولوجيا متنوعة مربعات سحاب خطوط نقاط خشب
صورة	img - الشعار		الحجم الرابط
لون خلفية background	nav - الشريط
لون خلفية background	li - أقسام الشريط
لون الخلفية عند مرور الماوس على background	li - روابط أقسام الشريط

الألوان

الخاصية	الوسم	القيم	كود css	تعديل الكود
لون color	h1 العنوان
لون color	h2 الوصف
لون ظل color	h1 العنوان
لون ظل color	h2 - الوصف
لون color	li - روابط أقسام الشريط
لون النص عند مرور الماوس على color	li - روابط أقسام الشريط

الخطوط

الخاصية	الوسم	القيم	كود css	تعديل الكود
خط font	h1 - العنوان	عادي bold bolder lighter 100 200 300 400 500 600 700 800 900 سماكة الخط الحجم الاسم
خط font	h2 - خط الوصف	عادي bold bolder lighter 100 200 300 400 500 600 700 800 900 سماكة الخط الحجم الإسم
سماكة الخط لـ font-weight	li - روابط أقسام الشريط	عادي bold bolder lighter 100 200 300 400 500 600 700 800 900 سماكة الخط

النصوص

text-shadow: << اسم الخاصية | 1px < بعد الظل أفقيأ | 2px < بعد الظل عموديأ | 3px < درجة الظل | rgba < لون الظل

الخاصية	الوسم	القيم	كود css	تعديل الكود
تأثير الظل text-shadow:;	h1 - العنوان		1 2 Hard Shadow Double Shadow Down and Distant 3D Text Inset Text Glowing Superhero Multiple Light Sources Soft Emboss Close and Heavy 3
تأثير الظل text-shadow:;	h2 - الوصف		1 2 Hard Shadow Double Shadow Down and Distant 3D Text Inset Text Glowing Superhero Multiple Light Sources Soft Emboss Close and Heavy 3
زخرفة النص text-decoration:;	li - روابط أقسام الشريط