بسم الله الرحمن الرحيم
لمشاهدة الروابط يلزمك التسجيل
في درس اليوم من الدورة سوف أشرح لكم عن طرق اضافة اكواد الـ css وكيف ترتبط باكواد الـ HTML
عندما يقرأ المتصفح ورقة الـ css ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في الورقة.
وهناك 3 طرق لاضافة اكواد الـ css وهي :
- Css خارجي
- Css داخلي
- Css بين السطور
اولا الخارجي :
باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!
يجب أن تتضمن كل صفحة HTML مرجعًا لملف ورقة الأنماط الخارجية داخل عنصر <link> ، داخل قسم الرأس.
مثلا : يتم تحديد الأنماط الخارجية داخل عنصر <link> ، داخل قسم <head> لصفحة HTML:
CODE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص ، ويجب حفظها بامتداد .css.
يجب ألا يحتوي ملف .css الخارجي على أي علامات HTML.
إليك كيف يبدو ملف "mystyle.css":
CODE
body {<br />
background-color: lightblue;<br />
}<br />
<br />
h1 {<br />
color: navy;<br />
margin-left: 20px;<br />
}<br />
<br />
ملاحظة : لا تقم بإضافة مسافة بين قيمة الخاصية والوحدة (مثل margin-left: 20 px ؛). الطريقة الصحيحة هي: margin-left: 20px؛
ثانيا الداخلي :
يمكن استخدام ورقة أنماط داخلية إذا كانت صفحة HTML واحدة لها نمط فريد.
يتم تحديد النمط الداخلي داخل عنصر <style> ، داخل قسم <head>.
مثلا : يتم تحديد الأنماط الداخلية داخل عنصر <style> ، داخل قسم <head> لصفحة HTML:
CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>ههنا العنوان</h1>
<p>هنا الفقرة.</p>
</body>
</html>
ثالثا بين السطور :
يمكن استخدام نمط مضمن بين السطور لتطبيق نمط فريد لعنصر واحد.
لاستخدام الأنماط المضمنة ، أضف سمة النمط إلى العنصر ذي الصلة. يمكن أن تحتوي سمة النمط على أي خاصية CSS.
مثلا : يتم تحديد الأنماط المضمنة في كلاس "style" للعنصر ذي الصلة:
CODE
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">هنا العنوان</h1>
<p style="color:red;">هنا الفقرة</p>
</body>
</html>
نصيحة: يفقد النمط المضمن العديد من مزايا ورقة الأنماط (عن طريق مزج المحتوى مع العرض التقديمي). استخدم هذه الطريقة باعتدال.
تعدد طرق اضافة الـ Css :
إذا تم تحديد بعض الخصائص لنفس المحدد (العنصر) في أوراق أنماط مختلفة ، فسيتم استخدام القيمة من آخر ورقة أنماط للقراءة.
فمثلا افترض أن ورقة الأنماط الخارجية لها النمط التالي للعنصر [h1]:
CODE
h1 {<br />
color: navy;<br />
}<br />
<br />
بعد ذلك ، افترض أن ورقة الأنماط الداخلية تحتوي أيضًا على النمط التالي للعنصر [h1]:
CODE
h1 {
color: orange;
}
إذا تم تحديد النمط الداخلي بعد الارتباط بورقة الأنماط الخارجية ، فستكون عناصر [h1] "برتقالية":
CODE
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
ومع ذلك ، إذا تم تحديد النمط الداخلي قبل الارتباط بورقة الأنماط الخارجية ، فإن عناصر [h1] ستكون "navy":
CODE
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ترتيب متتالي :
ما هو النمط الذي سيتم استخدامه عندما يكون هناك أكثر من نمط محدد لعنصر HTML؟
سيتم "تتالي" جميع الأنماط الموجودة في الصفحة في ورقة أنماط "افتراضية" جديدة وفقًا للقواعد التالية ، حيث يكون للرقم الأول الأولوية القصوى:
- النمط المضمن بين السطور (داخل عنصر HTML)
- أوراق الأنماط الخارجية والداخلية (في قسم head)
- المتصفح الافتراضي
لذلك ، فإن النمط المضمن له الأولوية القصوى ، وسوف يلغي الأنماط الخارجية والداخلية وافتراضيات المتصفح.
وهنا نكون وصلنا الى نهاية الشرح
ان شاء الله يكون شرح خفيف بسيط عليكم
جميع حقوق الشرح محفوظة لـ
لمشاهدة الروابط يلزمك التسجيل
بالتوفيق للجميع
والسلام ختام
[الدرس الثالث] اضافة اكواد الـ css
