أنماط HTML Styles - CSS (ما هو CSS؟)

الدرس السابق الدرس التالي
أنماط  HTML Styles - CSS
CSS تعني أوراق الأنماط المتتالية.
يوفر CSS الكثير من العمل. يمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحدة.

CSS = Styles and Colors

Manipulate Text
Colors,  Boxes





ما هو CSS؟
تستخدم أوراق الأنماط المتتالية (CSS) لتنسيق تخطيط صفحة الويب.
باستخدام CSS ، يمكنك التحكم في اللون ، والخط ، وحجم النص ، والتباعد بين العناصر ، وكيفية وضع العناصر وتخطيطها ، وما هي صور الخلفية أو ألوان الخلفية التي سيتم استخدامها ، وشاشات العرض المختلفة للأجهزة وأحجام الشاشات المختلفة ، و أكثر بكثير!
تلميح: الكلمة المتتالية تعني أن النمط المطبق على عنصر أصلي سينطبق أيضًا على جميع العناصر الفرعية داخل العنصر الرئيسي. لذلك ، إذا قمت بتعيين لون النص الأساسي على "أزرق" ، فستحصل أيضًا جميع العناوين والفقرات وعناصر النص الأخرى داخل النص على نفس اللون (ما لم تحدد شيئًا آخر)!
إستخدام CSS
يمكن إضافة CSS إلى مستندات HTML بثلاث طرق:
  • مضمنة (Inline) - باستخدام سمة النمط (style) داخل عناصر HTML
  • داخلي (Internal ) - باستخدام عنصر <style> في قسم <head>
  • خارجي (External )- باستخدام عنصر <link> للارتباط بملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة CSS هي الاحتفاظ بالأنماط في ملفات CSS الخارجية. ومع ذلك ، في هذا البرنامج التعليمي سوف نستخدم الأنماط المضمنة(Inline) والداخلية  (Internal )، لأن هذا أسهل في التوضيح ، ويسهل عليك تجربته بنفسك.
المضمنة CSS
يتم استخدام CSS المضمن لتطبيق نمط (style) فريد على عنصر HTML واحد.
يستخدم CSS المضمن سمة النمط  (style)  لعنصر HTML.
يضبط المثال التالي لون نص العنصر <h1> على اللون الأزرق ، ولون النص الخاص بالعنصر <p> إلى اللون الأحمر:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">عنوان باللون الازرق</h1>
<p style="color:red;">فقرة باللون الاحمر</p>
</body>
</html>
CSS الداخلي
يتم استخدام CSS داخلي لتحديد نمط (style) لصفحة HTML واحدة.
يتم تعريف CSS داخلي في قسم <head> لصفحة HTML ، داخل عنصر <style>.
يقوم المثال التالي بتعيين لون النص لجميع عناصر <h1> (في تلك الصفحة) إلى اللون الأزرق ، ولون النص لجميع عناصر <p> إلى اللون الأحمر. بالإضافة إلى ذلك ، سيتم عرض الصفحة بلون خلفية "مسحوق أزرق": 
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>هذا عنوان الدرس</h1>
<p>هذه فقرة الموضوع.</p>
</body>
</html>
CSS خارجي
يتم استخدام صفحة أنماط (css style) خارجية لتحديد النمط style للعديد من صفحات 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":
ملف "styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
نصيحة: باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله ، عن طريق تغيير ملف واحد!
ألوان وخطوط وأحجام CSS
هنا ، سوف نوضح بعض خصائص CSS شائعة الاستخدام. سوف تتعلم المزيد عنها لاحقًا.
  • تحدد خاصية اللون (color) في CSS لون النص الذي سيتم استخدامه.
  • تحدد خاصية عائلة الخطوط (font-family) في CSS الخط الذي سيتم استخدامه.
  • تحدد خاصية حجم الخط (font-size) في CSS حجم النص الذي سيتم استخدامه.
مثال
استخدام خصائص لون وعائلة الخط وحجم الخط في CSS:  
<!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>هذا عنوان الموضوع</h1>
<p>هذه فقرة الموضوع .</p>

</body>
</html>
الحدود CSS border
تحدد خاصية CSS border حدًا حول عنصر HTML.
نصيحة: يمكنك تحديد حد لجميع عناصر HTML تقريبًا.
مثال
استخدام خاصية CSS border:
  
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>هذا عنوان الموضوع</h1>

<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>

</body>
</html>
الحشو CSS padding
تحدد خاصية CSS padding مساحة (مسافة) بين النص والحد.
مثال
استخدام حدود CSS وخصائص المساحة المتروكة:
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>هذا عنوان الموضوع</h1>

<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>

</body>
</html>
الهامش Margin CSS
تحدد خاصية الهامش (Margin) CSS هامشًا (مسافة) خارج الحدود.
مثال
استخدام خصائص الحدود(border) والهامش (Margin ) في CSS:
  
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>هذا عنوان الموضوع</h1>

<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>
<p>هذه فقرة الموضوع.</p>

</body>
</html>
454
ارتباط (Link) بـ CSS خارجي
يمكن الرجوع إلى صفحات الأنماط الخارجية (External style sheets) بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.
مثال
يستخدم هذا المثال عنوان URL كاملًا للارتباط بورقة أنماط (style sheets) :
  
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://itqan7.blogspot.com/html/styles.css">
</head>
<body>

<h1>هذا عنوان مهم </h1>
<p>هذه فقرة العنوان.</p>

</body>
</html>
مثال
 يرتبط هذا المثال بصفحة أنماط (css style) موجودة في مجلد html على موقع الويب الحالي:
  
<link rel="stylesheet" href="/html/styles.css">
يرتبط هذا المثال بورقة أنماط موجودة في نفس المجلد مثل الصفحة الحالية: 
<link rel="stylesheet" href="styles.css">
ملخص الفصل
  • استخدم سمة النمط (style attribute) HTML للتصميم المضمن(inline styling)
  • استخدم عنصر <style> في HTML لتعريف CSS الداخلي
  • استخدم عنصر <link> للإشارة إلى ملف CSS خارجي
  • استخدم عنصر  <head> لتخزين عناصر <style> و <link>
  • استخدم خاصية لون (color) CSS لألوان النص
  • استخدم خاصية عائلة الخطوط (font-family)CSS لخطوط النص
  • استخدم خاصية حجم الخط (font-size) CSS لأحجام النص
  • استخدم خاصية CSS border للحدود
  • استخدم خاصية CSS padding للمساحة داخل الحد
  • استخدم خاصية CSS margin للمساحة خارج الحدود
الدرس السابق الدرس التالي
القسم: