HTML CSS

HTML CSS - Styles


CSS لتقف على أوراق الأنماط المتتالية.
يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى.
يوفر CSS الكثير من العمل.
يُمكنه التحكم في تخطيط صفحات الويب المتعددة دفعة واحدة.
يُمكن إضافة CSS إلى عناصر HTML بثلاث طرق:
مضمنة inline: بإستخدام سمة النمط في عناصر HTML.
داخلي internal: بإستخدام عنصر <style> في القسم <head>.
خارجي external: بإستخدام ملف CSS خارجي.
الطريقة الأكثر شيوعًا لإضافة CSS، هي الحفاظ على الأنماط في ملفات CSS منفصلة.
ومع ذلك، سوف نستخدم هنا التصميم الداخلي والخارجي، لأن هذا يسهل إثباته ويسهل عليك تجربته بنفسك.

التنسيق المضمن inline css

يتم إستخدام CSS مُضمَّنة لتطبيق نمط فريد على عنصر HTML واحد.
وتُستخدم CSS المضمّنة سمة النمط لعنصر HTML.
يقوم هذا المثال بتعيين لون النص الخاص بالعنصر <h1> إلى اللون الأزرق:
مثال:
<h1 style="color:blue;">This is a Blue Heading</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>This is a heading</h1>
<p>This is a paragraph.</p>
<body/>
</htm/>



التنسيق الخارجي فى CSS

يتم إستخدام الأنماط خارجية لتعريف النمط للعديد من صفحات HTML.
بإستخدام الأنماط خارجية، يُمكنك تغيير مظهر موقع ويب بأكمله، عن طريق تغيير ملف واحد !
لإستخدام ورقة أنماط خارجية، أضف رابطاً إليها في قسم <head> في صفحة HTML.
مثال:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body/>
<html/>
يُمكن كتابة ورقة أنماط خارجية في أي محرر نصوص.
يجب ألا يحتوي الملف على أي شفرة HTML، ويجب حفظه بإمتداد css.
إليك كيفية ظهور "styles.css":
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

الخطوط في لغة CSS

تُحدد خاصية CSS Color لون النص المطلوب إستخدامه.
تُحدد الخاصية font-family CSS نوع الخط الذي سيتم إستخدامه.
تًحدد الخاصية  CSS font-size حجم النص المطلوب إستخدامه.
مثال:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;
font-family: verdana;
font-size: 300%;}
p  {color: red;
font-family: courier;
font-size: 160%;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

الحدود CSS Border

تتعرّف الخاصية padding CSS على المسافة بين النص والحدود.
مثال:
p {border: 1px solid powderblue;padding: 30px;}

الهوامش CSS Margin

تحدد الخاصية CSS Margin الهامش وهي المسافة خارج الحد.
مثال:
p {border: 1px solid powderblue;margin: 50px;}

الوسم The id

لتحديد نمط معين أو ستايل معين لعنصر خاص واحد، أضف سمة معرف id إلى العنصر.
<p id="p01">I am different</p>
ثم حدد نمطاً للعنصر ذو المُعرف المُحدد.
مثال:
#p01 {color: blue;}
ملاحظة: يجب أن يكون معرف العنصر فريداً في الصفحة، لذلك يتم إستخدام محدد الهوية لتحديد عنصر فريد واحد.

الوسم class

لتحديد نمط لأنواع خاصة من العناصر، أضف سمة class إلى العنصر.
<p class="error">I am different</p>
ثم تحديد التشكيل الذي تريد إضافته للعناصر مع فئة معينة.
مثال:
p.error {color: red;}

ملخص الدرس HTML CSS - Style

  • إستخدم سمة نمط HTML Style للتصميم الداخلي.
  • إستخدم عنصر HTML link للإشارة إلى ملف CSS خارجي.
  • إستخدم عنصر  HTML head لتخزين عناصر <style> و<link>.
  • إستخدم خاصية لون CSS Color لألوان النص
  • إستخدم خاصية CSS font-family لتغيير عائلة خطوط النص.
  • إستخدم خاصية حجم الخط CSS font-size لتغيير أحجام النص.
  • إستخدم خاصية CSS border للحدود.
  • إستخدم خاصية padding CSS للمساحة الموجودة داخل الحد.
  • استخدم خاصية CSS margin للمساحة خارج الحدود "الهوامش.



0 التعليقات

إرسال تعليق