شاركـ أصدقائك

كورس CSS | كيفية إضافة CSS | موقع فولدرات

الرئيسية / الحاسب الآلي / لغات البرمجة / CSS / كورس CSS | كيفية إضافة CSS

القرآن الكريم كامل المصحف الذكي (جديد) , المصحف النصي

شرح كورس اكواد بالعربي للمبتدئين css

هناك ثلاث طرق لإضافة CSS إلى HTML. يمكنك إضافة CSS مضمن لتصميم عنصر HTML واحد على الصفحة. يمكنك تضمين ورقة أنماط داخلية

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

من الناحية الفنية ، يمكنك استخدام الأنماط الثلاثة على نفس الموقع. لفهم الكيفية ، عليك أن تعرف أن CSS تعني "أوراق الأنماط المتتالية". البت المتتالي مهم.

وهذا يعني أن الأنماط يمكن أن ترث وتتجاوز الأنماط الأخرى التي تم الإعلان عنها سابقًا.

لذلك تمت إضافة الأنماط المضمنة إلى عنصر - مثل "style = "font-weight: bold؛ - دائمًا الكتابة فوق الأنماط المحددة في قسممن المستند ،

والذي يستبدل الأنماط المحددة في أوراق الأنماط الخارجية. وإليك طريقة سهلة لتذكر ذلك: أيًا كان نمط CSS الأقرب إلى HTML تعتبره المتصفحات أكثر صلة ،

وبالتالي سيتم تطبيقه. يُعرف هذا التسلسل الهرمي بخصوصية CSS.

نظرًا لأن CSS المضمنة تتمتع بأعلى مستوى من الخصوصية ، فمن الأفضل استخدامها باعتدال ، على كل حال. تخيل أنك تعيد تصميم موقعك.

لديك ورقة أنماط خارجية حيث تحتفظ بـ CSS الخاص بك منفصلاً عن HTML الخاص بك. جزء من إعادة التصميم هو تغيير لون الخط من الأسود إلى الرمادي.

يمكنك إجراء التغيير في ملفك الخارجي ، وحفظه ، ثم إلقاء نظرة على موقعك. تم تغيير كل الخطوط باستثناء فقرة واحدة على الصفحة الرئيسية.

الآن عليك فتح ملف HTML الخاص بك لتصحيح الكود. تبدأ في التمرير والعثور على سمة نمط خادع تحدد هذه الفقرة باستخدام CSS مضمنة. في هذه الحالة الافتراضية ،

يمكنك حذف سمة النمط وحل المشكلة. تخيل قليلاً أن لديك سمة نمط في كل صفحة من صفحات موقعك. إن تتبع كل منها للتأكد من أنها لا تتعارض مع CSS في ورقة الأنماط الخارجية

سيكون مضيعة للوقت ومحبطاً.

ثلاث طرق لإدراج CSS

هناك ثلاث طرق لإدراج ورقة أنماط:

CSS خارجي
CSS داخلي
CSS مضمن

CSS خارجي:

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

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

مثال:


<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
 
<h1>هذا هو العنوان</h1>
<p>هذا هي الفقرة</p>
 
</body>
</html>

النتيجة كالآتي:

شرح كورس للمبتدئين بالعربي كيفية اضافة css الخارجي اساسيات برمجة ويب html

يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص ، ويجب حفظها بامتداد .css.

يجب ألا يحتوي ملف .css الخارجي على أي علامات HTML.

إليك كيف يبدو ملف "mystyle.css":

"mystyle.css"
body {
  background-color: lightblue;
}
 
h1 {
  color: navy;
  margin-left: 20px;
}

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

CSS داخلي

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

يتم تحديد النمط الداخلي داخل عنصر

، داخل قسم الرأس.

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


<html>
<head>
<style>
body {
  background-color: Coral;
}
 
h1 {
  color: Crimson;
  margin-left: 40px;
} 
</style>
</head>
<body>
 
<h1>هذا هو العنوان</h1>
<p>هذا هي الفقرة</p>
 
</body>
</html>

النتيجة كالآتي:

شرح كورس للميتدئين بالعربي cssاكواد برمجة كيفية الأضافه

CSS مضمن

يمكن استخدام نمط مضمن لتطبيق نمط فريد لعنصر واحد.

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

مثال
يتم تحديد الأنماط المضمنة في سمة "style" للعنصر ذي الصلة:


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

النتيجة كالآتي:

اكواد درس شرح كورس css بالعربي للمبتدئين برمجه ويب html

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

أوراق نمط المتعددة:

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

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

:

h1 {
  color: navy;
}

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

:

h1 {
  color: orange;   
}

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

"ماروون":


<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: Maroon;
}
</style>
</head>
<body>
 
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
 
</body>
</html>

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

"البحري":


<html>
<head>
<style>
h1 {
  color: maroon;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
 
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
 
</body>
</html>

ترتيب متتالي

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

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

النمط المضمن (داخل عنصر HTML)
أوراق الأنماط الخارجية والداخلية (في قسم الرأس)
المستعرض الافتراضي

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

لا تنسى مشاركة الصفحة ومن صالح دعائكم

CSS | مقدمة

CSS | شرح Syntax

CSS | شرح Selectors

CSS | كيفية إضافة CSS

CSS | شرح Comments

CSS | شرح Colors

CSS | شرح Backgrounds

CSS | شرح Borders