اضافة اكواد الـ css - شركة انكور التطويرية

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

[الدرس,الثالث],اضافة,اكواد,keyword

اضافة اكواد الـ css - شركة انكور التطويرية

دليل انكور للمواقع





نحتاج اقتراحك لتحسين المنتدى اضغط هنا

القوانين العامة لشركة انكور التطويرية | وجب على الجميع القراءة والالتزام
يجب عليك تفعيل عضويتك من الايميل عند التسجيل او ارسال طلب للتفعيل من هنا



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


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

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


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 1311
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 10
قوة السمعة : 80
موقعي : زيارة موقعي
 offline 
بسم الله الرحمن الرحيم

لرؤية الروابط والمرفقات عليك الرد على الموضوع
في درس اليوم من الدورة سوف أشرح لكم عن طرق اضافة اكواد الـ css وكيف ترتبط باكواد الـ HTML
عندما يقرأ المتصفح ورقة الـ css ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في الورقة.
وهناك 3 طرق لاضافة اكواد الـ css وهي :
- Css خارجي
- Css داخلي
- Css بين السطور

اولا الخارجي :
باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!
يجب أن تتضمن كل صفحة HTML مرجعًا لملف ورقة الأنماط الخارجية داخل عنصر <link> ، داخل قسم الرأس.
مثلا : يتم تحديد الأنماط الخارجية داخل عنصر <link> ، داخل قسم <head> لصفحة 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> ، داخل قسم <head>.
مثلا : يتم تحديد الأنماط الداخلية داخل عنصر <style> ، داخل قسم <head> لصفحة 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>:

h1 {
  color: navy;
}

بعد ذلك ، افترض أن ورقة الأنماط الداخلية تحتوي أيضًا على النمط التالي للعنصر <h1>:
h1 {
  color: orange;   
}

إذا تم تحديد النمط الداخلي بعد الارتباط بورقة الأنماط الخارجية ، فستكون عناصر <h1> "برتقالية":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

ومع ذلك ، إذا تم تحديد النمط الداخلي قبل الارتباط بورقة الأنماط الخارجية ، فإن عناصر <h1> ستكون "navy":
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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

سيتم "تتالي" جميع الأنماط الموجودة في الصفحة في ورقة أنماط "افتراضية" جديدة وفقًا للقواعد التالية ، حيث يكون للرقم الأول الأولوية القصوى:
- النمط المضمن بين السطور (داخل عنصر HTML)
- أوراق الأنماط الخارجية والداخلية (في قسم head)
- المتصفح الافتراضي

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

وهنا نكون وصلنا الى نهاية الشرح
ان شاء الله يكون شرح خفيف بسيط عليكم
جميع حقوق الشرح محفوظة لـلرؤية الروابط والمرفقات عليك الرد على الموضوع
بالتوفيق للجميع
والسلام ختام



:. كاتب الموضوع Admin ، المصدر: [الدرس الثالث] اضافة اكواد الـ css .:


Fhg]vs hgehgeD hqhtm h;,h] hgJ css

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل


29-08-2020 12:46 مساء
مشاهدة مشاركة منفردة [1]
zoolraqey
.:: عضو مشارك ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2020
رقم العضوية : 249
المشاركات : 68
الجنس : ذكر
تاريخ الميلاد : 27-10-1998
قوة السمعة : 10
 offline 
بارك الله فيك ، شرح واضح وجميل




الكلمات الدلالية
[الدرس ، الثالث] ، اضافة ، اكواد ،

« [الدرس الثاني] محددات Css | [الدرس الرابع] التعليقات والاسماء »

 














الساعة الآن 03:08 صباحا


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum