أهلاً بك في منتدى انكور التطويري

شرفتنا بحضورك لمنتدى انكور التطويري، المجتمع العربي للمحتوى المفيد والحصري حيث ستجد لدينا ما تحتاج لتزيد من معرفتك وخبراتك والمساحة الآمنة لنشر معرفتك ومشاركتها مع الاعضاء والزوار
تسجيل

[الدرس الثالث] اضافة اكواد الـ css

Admin

Admin

مدير شركة انكور التطويرية
طاقم الإدارة
ادارة انكور
بسم الله الرحمن الرحيم



[الدرس الثالث] اضافة اكواد الـ css

في درس اليوم من الدورة سوف أشرح لكم عن طرق اضافة اكواد الـ css وكيف ترتبط باكواد الـ HTML

عندما يقرأ المتصفح ورقة الـ css ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في الورقة.

وهناك 3 طرق لاضافة اكواد الـ css وهي :

- Css خارجي

- Css داخلي

- Css بين السطور
اولا الخارجي :

باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!

يجب أن تتضمن كل صفحة HTML مرجعًا لملف ورقة الأنماط الخارجية داخل عنصر ، داخل قسم الرأس.

مثلا : يتم تحديد الأنماط الخارجية داخل عنصر ، داخل قسم لصفحة HTML:

كود: 
<!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":

كود: 
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

ملاحظة : لا تقم بإضافة مسافة بين قيمة الخاصية والوحدة (مثل margin-left: 20 px ؛). الطريقة الصحيحة هي: margin-left: 20px؛​

ثانيا الداخلي :

يمكن استخدام ورقة أنماط داخلية إذا كانت صفحة HTML واحدة لها نمط فريد.

يتم تحديد النمط الداخلي داخل عنصر <style> ، داخل قسم .

مثلا : يتم تحديد الأنماط الداخلية داخل عنصر <style> ، داخل قسم لصفحة HTML:

كود: 
<!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" للعنصر ذي الصلة:

كود: 
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">هنا العنوان</h1>
<p style="color:red;">هنا الفقرة</p>

</body>
</html>

نصيحة: يفقد النمط المضمن العديد من مزايا ورقة الأنماط (عن طريق مزج المحتوى مع العرض التقديمي). استخدم هذه الطريقة باعتدال.

تعدد طرق اضافة الـ Css  :

إذا تم تحديد بعض الخصائص لنفس المحدد (العنصر) في أوراق أنماط مختلفة ، فسيتم استخدام القيمة من آخر ورقة أنماط للقراءة.

فمثلا افترض أن ورقة الأنماط الخارجية لها النمط التالي للعنصر :

كود: 
h1 {
  color: navy;
}

بعد ذلك ، افترض أن ورقة الأنماط الداخلية تحتوي أيضًا على النمط التالي للعنصر :

كود: 
h1 {
  color: orange;   
}

إذا تم تحديد النمط الداخلي بعد الارتباط بورقة الأنماط الخارجية ، فستكون عناصر "برتقالية":

كود: 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

ومع ذلك ، إذا تم تحديد النمط الداخلي قبل الارتباط بورقة الأنماط الخارجية ، فإن عناصر ستكون "navy":

كود: 
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ترتيب متتالي :

ما هو النمط الذي سيتم استخدامه عندما يكون هناك أكثر من نمط محدد لعنصر HTML؟



سيتم "تتالي" جميع الأنماط الموجودة في الصفحة في ورقة أنماط "افتراضية" جديدة وفقًا للقواعد التالية ، حيث يكون للرقم الأول الأولوية القصوى:

- النمط المضمن بين السطور (داخل عنصر HTML)

- أوراق الأنماط الخارجية والداخلية (في قسم head)

- المتصفح الافتراضي



لذلك ، فإن النمط المضمن له الأولوية القصوى ، وسوف يلغي الأنماط الخارجية والداخلية وافتراضيات المتصفح.



وهنا نكون وصلنا الى نهاية الشرح

ان شاء الله يكون شرح خفيف بسيط عليكم

جميع حقوق الشرح محفوظة لـ شركة انكور التطويرية

بالتوفيق للجميع

والسلام ختام​
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

✔ نبذة عنا

منتدى انكور التطويري لدعم وتطوير المواقع والمنتديات والمحتوى العربي. نسعى للارتقاء في المحتوى العربي وتقديم الخدمات المتنوعة لأصحاب المواقع والمنتديات بأحدث الامكانيات والشروحات مجانًا.

🚀 روابط نصية

◃منتديات واب تونس◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

عودة
أعلى