القائمة الرئيسية

الصفحات

برمجة دروس Css

دروس css | تعلم دروس واساسيات css | الدرس الاول | ادمكس للمعلوميات

ibrahim omar

دروس css | تعلم دروس واساسيات css | الدرس الاول 

فى هذا الدرس سنتعلم اهم اساسيات css مع html المتداخل الداخلى والخارجى .

تصميم HTML مع CSS

أوراق الأنماط المتتالية (بالإنجليزية: Cascading Style Sheets) اختصارًا: سي إس إس (بالإنجليزية: CSS) هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى المستند المكتوب (بلغة مثلا إتش تي إم إل) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامة.
يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى.
 CSS يوفر الكثير من العمل ويمكنه التحكم في تصميم صفحات الويب المتعددة مرة واحدة.
يمكن إضافة CSS إلى عناصر HTML بثلاث طرق:
  • Inline او المتداخل - باستخدام سمة النمط Style في عناصر HTML
  • Internal او داخلي- باستخدام عنصر <style> في قسم <head>
  • External او خارجي - باستخدام ملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة CSS هي الحفاظ على الأنماط في ملفات CSS منفصلة ومع ذلك سنستخدم هنا التصميم الداخلي والمضمّن لأن هذا أسهل في التوضيح.

المتداخل Inline CSS

يتم استخدام CSS المتداخل لتطبيق نمط فريد على عنصر HTML واحد
يستخدم CSS المتداخل سمة النمط style لعنصر HTML
يعين هذا المثال لون نص العنصر <h1> إلى اللون الأزرق:
<h1 style="color:blue;">عنوان باللون الازرق</h1>

الداخلي Internal CSS

يتم استخدام CSS داخلي لتحديد نمط لصفحة HTML واحدة
يتم تعريف CSS داخلي في قسم  <head>بصفحة HTML ضمن عنصر <style>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>عنوان</h1>
<p>فقرة</p>

</body>
</html>

الخارجي Internal CSS

يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات الـ  HTML
باستخدام ورقة أنماط خارجية يمكنك تغيير شكل موقع الويب بالكامل عن طريق تغيير ملف واحد!
لاستخدام ورقة أنماط خارجية أضف رابطًا إليها في قسم  <head> لصفحة HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1> عنوان</h1>
<p> فقرة</p>

</body>
</html>
يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص يجب ألا يحتوي الملف على أي كود HTML ويجب أن يتم حفظه بملحق css
إليك كيف يكون ملف "styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}


reaction: