قم بإنشاء ورقة أنماط CSS
بنفس الطريقة التي أنشأنا بها ملفًا نصيًا منفصلاً لـ لغة البرمجة، ستقوم بإنشاء ملف نصي لـ CSS. إذا كنت بحاجة إلى عناصر مرئية لهذه العملية ، فيرجى الاطلاع على البرنامج التعليمي الأول. فيما يلي خطوات إنشاء ورقة أنماط CSS في Notepad:
- إختر ملف> جديد في المفكرة للحصول على نافذة فارغة
- احفظ الملف بتنسيق CSS بالنقر فوق ملف
- انتقل إلى مجلد my_website على محرك الأقراص الثابتة
- غير ال "حفظ كنوع:" ل "كل الملفات"
- اسم ملفك "Styles.css"(اترك الاقتباسات) وانقر يحفظ
اربط ورقة أنماط CSS بـ HTML الخاص بك
بمجرد حصولك على ملف ورقة الأنماط لموقع الويب الخاص بك ، ستحتاج إلى ربطه بصفحة الويب نفسها. للقيام بذلك تستخدم علامة الارتباط. ضع علامة الارتباط التالية في أي مكان داخل ملف.
إصلاح هوامش الصفحة
عندما تكتب XHTML بالنسبة للمتصفحات المختلفة ، هناك شيء واحد ستتعلمه وهو أنه يبدو أن لديهم جميعًا هوامش وقواعد مختلفة لكيفية عرض الأشياء. أفضل طريقة للتأكد من أن موقعك يبدو كما هو في معظم المتصفحات هو عدم السماح لأشياء مثل الهوامش بالتعيين الافتراضي لاختيار المتصفح.
نحن نفضل أن تبدأ الصفحات في الزاوية اليسرى العليا ، مع عدم وجود مساحة إضافية أو هامش يحيط بالنص. حتى إذا كنا سنقوم بتعبئة المحتويات ، فإننا نضبط الهوامش على صفر حتى نبدأ بنفس اللوح الفارغ. للقيام بذلك ، أضف ما يلي إلى مستند styles.css الخاص بك:
html ، جسم {
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
الحدود: 0 بكسل ؛
اليسار: 0 بكسل ؛
أعلى: 0 بكسل ؛
}
تغيير الخط في الصفحة
غالبًا ما يكون الخط هو أول شيء تريد تغييره على صفحة الويب. الافتراضي الخط على صفحة الويب يمكن أن يكون قبيحًا ويعود بالفعل إلى متصفح الويب نفسه ، لذلك إذا لم تحدد الخط ، فأنت لا تعرف حقًا كيف ستبدو صفحتك.
عادة ، يمكنك تغيير الخط في الفقرات ، أو في بعض الأحيان على المستند بأكمله. بالنسبة لهذا الموقع ، سنقوم بتعريف الخط على مستوى الرأس والفقرة. أضف ما يلي إلى مستند styles.css الخاص بك:
ص ، لي {
الخط: 1em Arial، Helvetica، sans-serif؛
}
h1 {
الخط: 2em Arial، Helvetica، sans-serif؛
}
h2 {
الخط: 1.5em Arial، Helvetica، sans-serif ؛
}
h3 {
الخط: 1.25em Arial، Helvetica، sans-serif ؛
}
بدأنا بـ 1em كحجم أساسي للفقرات وعناصر القائمة ثم استخدمنا ذلك لتعيين حجم عناويني الرئيسية. لا نتوقع استخدام عنوان أعمق من h4 ، ولكن إذا كنت تخطط لذلك فأنت تريد تصميمه أيضًا.
جعل الروابط الخاصة بك أكثر إثارة للاهتمام
اللونان الافتراضيان للروابط هما الأزرق والأرجواني للروابط التي لم تتم زيارتها والروابط التي تمت زيارتها على التوالي. على الرغم من أن هذا أمر قياسي ، إلا أنه قد لا يتناسب مع مخطط ألوان صفحاتك ، لذا فلنغيره. في ملف styles.css ، أضف ما يلي:
رابط {
عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
اللون: # FF9900 ؛
زخرفة النص: تسطير ؛
}
أ: زار {
اللون: # FFCC66 ؛
}
أ: تحوم {
الخلفية: #FFFFCC ؛
وزن الخط: عريض ؛
}
قمنا بإعداد ثلاثة أنماط للارتباط ، الرابط: a باعتباره الافتراضي ، و: تمت زيارته عند زيارته ، وقمنا بتغيير اللون ، و a: hover. باستخدام a: مرر الماوس ، نحصل على الرابط بلون الخلفية واذهب بالخط العريض للتأكيد على أنه رابط يمكن النقر فوقه.
تصميم قسم التنقل
نظرًا لأننا وضعنا قسم التنقل (id = "nav") أولاً في HTML ، فلنقم بتصميمه أولاً. نحتاج إلى تحديد مدى اتساعها ووضع هامش أوسع على الجانب الأيمن حتى لا يصطدم النص الرئيسي به. نحن أيضًا ، نضع حدودًا حولها.
أضف CSS التالي إلى مستند styles.css الخاص بك:
#nav {
العرض: 225 بكسل ؛
الهامش الأيمن: 15 بكسل ؛
الحد: متوسط صلب # 000000 ؛
}
#nav li {
نمط القائمة: لا شيء ؛
}
.تذييل {
حجم الخط: 75em ؛
واضحة على حد سواء؛
العرض: 100٪؛
محاذاة النص: مركز ؛
}
تقوم خاصية list-style بإعداد القائمة داخل قسم التنقل بحيث لا تحتوي على تعداد نقطي أو أرقام ، ويقوم .footer بتصميم قسم حقوق النشر ليكون أصغر ويتم توسيطه داخل القسم.
وضع القسم الرئيسي
من خلال وضع القسم الرئيسي الخاص بك مع تحديد الموضع المطلق ، يمكنك التأكد من أنه سيبقى بالضبط في المكان الذي تريده أن يبقى فيه على صفحة الويب الخاصة بك. لقد جعلناها بعرض 800 بكسل ليستوعب شاشات أكبر، ولكن إذا كان لديك شاشة أصغر ، فقد ترغب في جعلها أضيق.
ضع ما يلي في مستند styles.css الخاص بك:
#رئيسي {
العرض: 800 بكسل ؛
أعلى: 0 بكسل ؛
الموقف: مطلق.
اليسار: 250 بكسل ؛
}
تصميم فقراتك
نظرًا لأنني قمت بالفعل بتعيين خط الفقرة أعلاه ، فقد أردت إعطاء كل فقرة "دفعة" إضافية قليلاً لجعلها تبرز بشكل أفضل. لقد فعلت ذلك من خلال وضع حد في الأعلى يبرز الفقرة أكثر من مجرد الصورة وحدها.
ضع ما يلي في مستند styles.css الخاص بك:
.السطر العلوي {
أعلى الحد: صلبة سميكة # FFCC00 ؛
}
قررنا القيام بذلك كفئة تسمى "topline" بدلاً من مجرد تعريف جميع الفقرات بهذه الطريقة. بهذه الطريقة ، إذا قررنا أننا نريد فقرة بدون خط أصفر علوي ، فيمكننا ببساطة ترك class = "topline" في علامة الفقرة ولن يكون لها الحد العلوي.
تنسيق الصور
عادةً ما يكون للصور حدود حولها ، ولا يكون هذا مرئيًا دائمًا إلا إذا كانت الصورة عبارة عن رابط ، ولكننا نود أن يكون لدينا فئة داخل ورقة أنماط CSS تقوم بإيقاف تشغيل الحد تلقائيًا. بالنسبة إلى ورقة الأنماط هذه ، أنشأنا فئة "Noborder" ، وتشكل معظم الصور الموجودة في المستند جزءًا من هذه الفئة.
الجزء الخاص الآخر من هذه الصور هو موقعها على الصفحة. أردنا أن يكونوا جزءًا من الفقرة التي كانوا فيها دون استخدام الجداول لمواءمتها. إن أبسط طريقة للقيام بذلك هي استخدام خاصية float CSS.
ضع ما يلي في مستند styles.css الخاص بك:
#main img {
تعويم: اليسار؛
الهامش الأيمن: 5 بكسل ؛
الهامش السفلي: 15 بكسل ؛
}
.ليس لها حدود {
الحدود: 0 بكسل ؛
}
كما ترى ، هناك أيضًا خصائص للهامش تم تعيينها على الصور ، للتأكد من عدم تحطيمها مقابل النص العائم الموجود بجانبها في الفقرات.
انظر الآن إلى صفحتك المكتملة
بمجرد حفظ CSS الخاص بك ، يمكنك إعادة تحميل صفحة pets.htm في متصفح الويب الخاص بك. يجب أن تبدو صفحتك مشابهة للصفحة المعروضة في هذه الصورة ، مع محاذاة الصور ووضع التنقل بشكل صحيح على الجانب الأيسر من الصفحة.
اتبع نفس الخطوات لجميع صفحاتك الداخلية لهذا الموقع. تريد أن يكون لديك صفحة واحدة لكل صفحة في التنقل الخاص بك.