محمد السنوسي
محرر html

لغة (Css) المقدمة

Css هي لغة تصميم صفحات الانترنت، تتكون من خصائص ومحددات، تتحكم في مظهر وشكل الصفحات المكتوبة بلغة html من حيث التخطيط وإضافة الالوان والتباعد والحشو وغير ذلك، ويتم إضافة Css داخل ملف Html بطرق عديدة.

مكونات Css

  • الخصائص: تهتم بتخصيص شكل العنصر.
  • المحددات: تهتم بتخصيص عدة عناصر.

خصائص Css

هي عبارة عن قواعد تهتم بتخصيص شكل ظهور العنصر ومظهره في الصفحة.

مثال لخصائص Css:-
color | margin | padding | font-size
border | text-align | background-color
كيفية كتابة خصائص Css مثال:-
color:red;
الشرح والتوضيح
  • color هو اسم الخاصية.
  • العلامة:فاصل بين اسم الخاصية وقيمتها.
  • red هي قيمة الخاصية.
  • العلامة ; هي نهاية الخاصية

محددات Css

وهي استخدام عدة خصائص في مكان واحد لاستهداف عنصر واحد او عناصر متعددة، وتنقسم المحددات الي اربع اقسام هي:-

المحدد العام

يستهدف جميع العناصر في الصفحة ويرمز له بعلامة النجمة * اي خاصية تكتب بداخله تطبق علي جميع العناصر في الصفحة مثال:-

*{.....}

محدد العنصر

يستهدف عنصر محدد في الصفحة، يستهدف اسم العنصر مباشر واي خصائص بداخله تطبق فقط في العنصر نفسه مثال:-

h1{.....}

محدد الفئة

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

 .cool{.....}

محدد المعرف

يستهدف عنصر واحد فريد في الصفحة تكتب علامة هاش # قبل الاسم لاستهداف عنصر واحد فقط في الصفحة ولا يقبل التكرار ويستخدم السمة id مثال:-

#header{.....}

طرق إضافة Css داخل ملف Html

تتم إضافة Css بعدة طرق وهي:-

السمة style

تستخدم هذه السمة لتضمين خصائص Css داخل العنصر مباشرة في وسم البداية للعنصر نفسه مثال:-

<h2 style="font-size:13px;text-align:center;">عنوان جانبي<h2>

العنصر <style>

يستخدم هذا العنصر محددات css كاملة وإضافتها في منطقة الرأس<head> في ملف html مثال:-

<style>
h2{font-size:13px;text-align:center;}
.ahmed{background-color:#333;}
.man{font-weight:bold;margin:15px;}
#home{direction:ltr;padding:5px;}
</style>

العنصر <link>

تتم إضافة Css عبر هذا العنصر عن طريق ملف خارجي يتم حفظه في صفحة خارجية ويتم استدعائه بإضافة سطر واحد في منطقة الرأس ايضا ويكون الملف بإمتدادات (style.css) مثال:-

<link rel="....." stylesheet.css/>

إختبار كيفية تخصيص عناصر html بواسطة css

يمكنك تطبيق الامر في ملف html ادناه:- 
<!DOCTYPE html>
 <html>

      <head>  </head>
      <body>  </body>

 </html>
مثال:- نستخدم عنصر الفقرة<p> لاضافة فقرة نصية نكتب فيها مرحبا بكم في صفحتنا. 
<p>مرحبا بكم في صفحتنا.</p>
نستخدم طريقة التضمين المباشر عن طريقة السمة styleلتخصيص لون الفقرة ليكون لونها بني مائل الي الاحمر brown بدلا من اللون الاسود الافتراضي سيكون الامر هكذا ادناه 
<p style="color:brown;">مرحبا بكم في صفحتنا. </p>
الان في ملف Html 
<!DOCTYPE html>
 <html>

   <head>  </head>
   <body> 
 <p style="color:brown;">مرحبا بكم في صفحتنا.</p> 
   </body>

</html>
ستكون النتيجة هكذا ويمكن ايضا تجربة الامر في محرر html الخاص لتري الامر بنفسك يمكنك تغير اللون بنفسك مثلا امسح اللون brown واكتب بدله لون اخر مثلا blue اللون الازرق سيتغير اللون الي الازرق blue

الخلاصة ☆: تعتبر لغة Css هي ذات أهمية قصوي في تطوير الويب، تعمل داخل ملف Htmlلتغيير مظهر العناصر ، ولديها ادوار مثل تحسين تجربة المستخدم وتساهم في مساعدة الاشخاص ذوي الإحتياجات الخاصة لاستخدام الصفحات