معلومات عن لغة css

معلومات عن لغة css

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

ما هي لغة CSS؟

CSS اختصار لـ Cascading Style Sheets أي "أوراق الأنماط المتتالية".

تُستخدم لتنسيق المستندات المكتوبة بلغات هيكلية مثل HTML و XML.

الهدف الأساسي هو الفصل بين المحتوى (النصوص والبيانات) والعرض (الألوان، الخطوط، التخطيط).

تُستعمل عادةً مع HTML و JavaScript لإنشاء صفحات ويب تفاعلية وجذابة.

مميزات CSS

التحكم الكامل في الشكل: تغيير الألوان، الخطوط، الهوامش، الخلفيات، وغيرها.

إعادة الاستخدام: يمكن تعديل ملف CSS واحد ليؤثر على عشرات الصفحات في الموقع.

المرونة: تسهّل التوافق مع مختلف الأجهزة (حاسوب، هاتف، جهاز لوحي).

سهولة التعديل: بدلاً من تعديل كل صفحة على حدة، يكفي تعديل ملف CSS المركزي.

تحسين الوصولية: فصل التنسيق عن المحتوى يساعد في جعل المواقع أكثر وضوحًا لبرامج قراءة الشاشة.

تاريخ CSS

ظهرت أول مواصفات CSS في منتصف التسعينيات من قبل W3C (اتحاد شبكة الويب العالمية).

تطورت عبر نسخ متعددة: CSS1، ثم CSS2، وصولًا إلى CSS3 الذي أضاف خصائص متقدمة مثل الرسوم المتحركة، الظلال، والتحكم في الوسائط.

أمثلة عملية

css

/* تغيير لون النص إلى أزرق */

p {

  color: blue;

}



/* إضافة خلفية رمادية للصفحة */

body {

  background-color: lightgray;

}



/* تنسيق العناوين */

h1 {

  font-size: 24px;

  text-align: center;

}

الفرق بين CSS و HTML

العنصر	HTML	CSS
الوظيفة	بناء هيكل الصفحة (نصوص، صور، روابط)	تنسيق الشكل والمظهر
الاستخدام	يحدد المحتوى	يحدد العرض
مثال	مرحبا بالعالم	p { color: red; }

خلاصة

HTML يحدد ما هو المحتوى.

CSS يحدد كيف يظهر المحتوى.

معًا يشكلان الأساس لأي موقع ويب حديث

أنواع CSS

هناك ثلاث طرق رئيسية لاستخدام CSS:

Inline CSS: كتابة التنسيق مباشرة داخل وسم HTML باستخدام خاصية style.

html

<p style="color:red;">نص باللون الأحمر</p>

Internal CSS: كتابة التنسيقات داخل وسم <style> في نفس ملف HTML.

html

<style>

  p { color: blue; }

</style>

External CSS: وضع التنسيقات في ملف منفصل بامتداد .css وربطه بالصفحة عبر وسم <link>.

html

<link rel="stylesheet" href="style.css">

أهم خصائص CSS

الألوان (Colors): تحديد لون النصوص والخلفيات باستخدام أسماء ألوان أو أكواد HEX و RGB.

الخطوط (Fonts): التحكم في نوع الخط، حجمه، وزنه (Bold/Normal).

التخطيط (Layout): باستخدام خصائص مثل margin, padding, display, position.

المرونة (Flexbox & Grid): أدوات حديثة لترتيب العناصر بشكل متجاوب وسهل.

الرسوم المتحركة (Animations): إضافة حركة ديناميكية للعناصر باستخدام @keyframes.

مميزات CSS3 (الجيل الحديث)

التحكم في الوسائط (Media Queries): لتصميم مواقع متجاوبة مع مختلف الشاشات.

التحولات (Transitions): لإضافة تأثيرات سلسة عند تغيير الخصائص.

الظلال (Shadows): مثل box-shadow و text-shadow.

الزوايا المستديرة (Border-radius): لتصميم عناصر بأطراف دائرية.

الرسوم المتحركة (Animations): تحريك العناصر بدون الحاجة إلى JavaScript.

مثال متكامل

css

/* تنسيق عام للصفحة */

body {

  font-family: Arial, sans-serif;

  background: #f0f0f0;

  margin: 0;

  padding: 0;

}



/* تنسيق العناوين */

h1 {

  color: #333;

  text-align: center;

}



/* صندوق مع ظل وزوايا مستديرة */

.box {

  background: white;

  padding: 20px;

  margin: 50px auto;

  width: 300px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0,0,0,0.2);

}



/* زر مع تأثير عند المرور */

button {

  background: #007BFF;

  color: white;

  border: none;

  padding: 10px 20px;

  cursor: pointer;

  transition: background 0.3s;

}



button:hover {

  background: #0056b3;

}

لماذا CSS مهم؟

يجعل المواقع أكثر جاذبية بصريًا.

يسهل تجربة المستخدم (UX) عبر تنظيم العناصر.

يساهم في سرعة تحميل الصفحات لأن التنسيقات تُفصل عن المحتوى.

ضروري لأي مطور ويب، سواء في تصميم واجهات المستخدم (UI) أو تطوير الواجهة الأمامية (Frontend Development).