CSS

ما هي CSS

لغة CSS (Cascading Style Sheets) هي التقنية المسؤولة عن تنسيق مظهر صفحات الويب، حيث تحدد الألوان، الخطوط، التخطيط والمسافات بين العناصر لتظهر بصورة جذابة للمستخدمين.^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد22ما هي CSS؟ — CSS Academycoddykit.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تتكون ملفات CSS من مجموعة من المحددات والكتل البرمجية التي تطبق قواعد النمط على عناصر HTML، وتُحفظ بامتداد ‎.css‎ فقط.^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تتيح اللغة تعديل خصائص العناصر مثل اللون، الموقع، الحجم وإضافة مؤثرات بصرية، بما في ذلك الرسوم المتحركة والانتقالات التي تحسّن تجربة المستخدم.^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد33ما هي لغة css وما هي استخداماتها؟ | Ultrasawtultrasawt.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} بالإضافة إلى ذلك، يمكن للـ CSS جعل الصفحات متجاوبة مع أحجام شاشات مختلفة—هواتف، أجهزّة لوحية أو حواسيب—مما يضمن عرضًا ملائمًا على جميع الأجهزة.^{44تعلم لغة CSSharmash.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُعد CSS لغة مرافقة للـ HTML؛ فـ HTML يحدد بنية المحتوى بينما تتولى CSS مهمة تصميم الشكل الخارجي للموقع.^{33ما هي لغة css وما هي استخداماتها؟ | Ultrasawtultrasawt.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

من أبرز ما توفره CSS:

• تحديد الألوان والخطوط والمسافات لتنسيق النصوص والعناصر^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد22ما هي CSS؟ — CSS Academycoddykit.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• ضبط تخطيط العناصر ومواقعها على الصفحة لتناسب التصميم المطلوب^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد44تعلم لغة CSSharmash.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• إنشاء الرسوم المتحركة والانتقالات لإضفاء حيوية على الواجهة^{11لغة CSS: كيف تجعل تصميم مواقع الويب أكثر جمالًا؟ » مدونة مستقلblog.mostaql.comاذهب إلى المرجع ↓يُفتح في تبويب جديد33ما هي لغة css وما هي استخداماتها؟ | Ultrasawtultrasawt.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• تحقيق استجابة التصميم لأحجام شاشات مختلفة لضمان تجربة موحدة^{44تعلم لغة CSSharmash.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
    margin-top: 20px;
}

طرق الربط بالصفحة

توفّر لغة CSS ثلاث طرق رئيسية لربط الأنماط بصفحة الويب، وهي النمط المضمن داخل العنصر (inline)، والنمط الداخلي داخل وثيقة HTML (internal)، والنمط الخارجي عبر ملف مستقل (external).^{55CSS Basics: How to Use a CSS Stylesheet | Udacityudacity.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

• النمط المضمن يُكتب مباشرةً داخل وسم العنصر باستخدام السمة style.^{55CSS Basics: How to Use a CSS Stylesheet | Udacityudacity.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• النمط الداخلي يُوضع داخل وسم <style> في رأس الصفحة.^{55CSS Basics: How to Use a CSS Stylesheet | Udacityudacity.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• النمط الخارجي يُستدعى عبر وسم <link> الذي يربط ملف CSS خارجي.^{55CSS Basics: How to Use a CSS Stylesheet | Udacityudacity.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال توضيحي يضم الثلاث طرق:

<p style="color:red;">نص مدمج</p>
<style>
  p { color: blue; }
</style>
<link rel="stylesheet" href="styles.css">

المحددات والخصائص

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

• المحددات التي تستجيب لتمرير مؤشر الفأرة فوق العنصر، مثل :hover، مما يتيح تغيير المظهر عند التفاعل المباشر مع المستخدم.^{66المحدداتweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• المحددات التي تستهدف بنية العنصر الداخلي، مثل اختيار العناصر الأبناء أو الأخوة داخل شجرة الـ DOM.^{66المحدداتweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• المحددات التي تستهدف أجزاءً محددة من العنصر، مثل أجزاء النص أو المكونات الفرعية.^{66المحدداتweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال توضيحي يبيّن استخدام محدد :hover لتغيير لون الخلفية عند مرور المؤشر:

button:hover {
    background-color: #4CAF50;
}

التصميم المتجاوب

يعبّر مفهوم التصميم المتجاوب (Responsive Design) عن أسلوب لبناء وتصميم مواقع وتطبيقات الويب يضمن توافقها وتكيفها التلقائي مع مختلف بيئات العرض والشاشات المتباينة في أبعادها، سواء أكان العرض عبر هاتف جوال أم جهاز لوحي أم تلفاز أم ساعة ذكية.^{77التصميم المتجاوب لصفحات الويب Responsive Web Design - CSS - أكاديمية حسوبacademy.hsoub.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} ويعتمد هذا النهج الحديث على الاستفادة من ميزات متنوعة توفرها CSS وHTML إلى جانب تقنيات أخرى أصبحت جزءًا أساسيًا في تطوير الويب.^{77التصميم المتجاوب لصفحات الويب Responsive Web Design - CSS - أكاديمية حسوبacademy.hsoub.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} وبفضل تطبيق التجاوب، لم تعد صفحات الويب تُعرض على الهواتف بتخطيط الحواسب المكتبية نفسه بشكل مصغر، كما لم يعد المستخدم بحاجة إلى الاستعانة بأشرطة التمرير الجانبية للتنقل داخل الصفحة.^{77التصميم المتجاوب لصفحات الويب Responsive Web Design - CSS - أكاديمية حسوبacademy.hsoub.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

وتتميز عناصر HTML بكونها متجاوبة بطبيعتها وقابلة للانسياب وفقًا لأبعاد نافذة العرض (Viewport).^{77التصميم المتجاوب لصفحات الويب Responsive Web Design - CSS - أكاديمية حسوبacademy.hsoub.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} فعند إنشاء صفحة بخطوط شفرة HTML فقط ودون إضافة أي قواعد تنسيق عبر CSS، يمارس المتصفح إعادة ضبط تلقائية لانسياب العناصر لكي تتلاءم مع المساحة المتاحة كلما عُدلت أبعاد شاشة المتصفح.^{77التصميم المتجاوب لصفحات الويب Responsive Web Design - CSS - أكاديمية حسوبacademy.hsoub.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال

يمكن وضع النصوص والصور على صفحة الويب باستخدام XHTML أو HTML، ثم يُستَخدم CSS لتغيير نوع الخط ولون الخلفية وفق الحاجة.^{88ما هو أجاكسس؟ - شرح جافا سكريبت وXML غير متزامنين - AWSaws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} يوضح ذلك كخطوة متتابعة تُظهر كيف يمكن للمنسق أن يتحكم في مظهر العناصر بعد بنائها بالهيكلية الأساسية للصفحة.^{88ما هو أجاكسس؟ - شرح جافا سكريبت وXML غير متزامنين - AWSaws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: "Arial", sans-serif; /* تغيير نوع الخط */
            background-color: #f0f0f0;       /* تغيير لون الخلفية */
        }
    </style>
</head>
<body>
    <h1>عنوان الصفحة</h1>
    <p>نص توضيحي مع صورة.</p>
    <img src="example.jpg" alt="صورة توضيحية">
</body>
</html>

لغة CSS وتطوير الواجهات الأمامية

تُعَدُّ لغة HTML هي بنية صفحات الويب، بينما تُستَخدَم CSS لتحديد مظهر عناصر HTML.^{99ما هي Javascript‏ (JS)؟aws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد10108 من أسهل لغات البرمجة للمبتدئينtech-wd.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُكتب قواعد CSS على شكل أنماط (style rules) تُطبَّق على محتوى HTML لتغيير خصائص مثل ألوان الخلفية والخطوط والأعمدة والحدود.^{1111What is JavaScript? - JavaScript (JS) Explained - AWSaws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} بفضل CSS يمكن للمطورين إنشاء تخطيطات أكثر شمولًا وتنظيمًا، ما يُحسِّن تجربة المستخدم على الواجهة الأمامية.^{1212What is Full Stack Development? - Full Stack Development Explained - AWSaws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُصنَّف CSS ضمن اللغات الأكثر شيوعًا في تطوير الواجهة الأمامية إلى جانب HTML وJavaScript.^{1212What is Full Stack Development? - Full Stack Development Explained - AWSaws.amazon.comاذهب إلى المرجع ↓يُفتح في تبويب جديد10108 من أسهل لغات البرمجة للمبتدئينtech-wd.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  margin-bottom: 20px;
}

أنظر أيضاً

• SQL
• البرمجة كائنية التوجه
• البرمجيات مفتوحة المصدر
• الحوسبة السحابية
• الحوسبة الكمومية