أخر الاخبار

ما هي لغة CSS وخصائصها

ما هي لغة CSS وكيف تعمل؟

CSS هو ما يضيف أسلوبًا إلى موقع الويب. بدون CSS ، ستكون صفحات الويب بنص عادي ، على خلفية بيضاء ، ومن الصعب جدًا استخدامها! يعتمد CSS على HTML لإنشاء العناصر المرئية التي تراها على مواقع الويب كل يوم.

ما هو CSS؟

CSS هو ما يضيف الأسلوب واللون إلى كل صفحة ويب. بينما يتحكم HTML في بنية المستند بالفقرات والعناوين والصور ، يتيح لك CSS تحديد الألوان والخطوط والتخطيطات والمزيد. إذا فكرنا في مستند ويب كجسم بشري ، فإن HTML هو الرأس والجسد. سيكون CSS هو أسلوب ذلك. على سبيل المثال ، لون عيوننا ، حجم آذاننا ، صبغة بشرتنا ، وحتى الملابس التي نرتديها. بعبارة أخرى - إنه شكلنا وأسلوبنا. لتقديم بعض المنظور ، ستكون جافا سكريبت مكافئة لكيفية تفاعلنا مع الناس.

محددات CSS Selectors

محدد CSS هو ما نستخدمه لاستهداف HTML على صفحات الويب الخاصة بنا التي ننوي تصميمها. المحدد هو جزء من قاعدة CSS التي تخبر المتصفح بمكان تنفيذ CSS على الصفحة.

عناصر CSS

تتكون قاعدة CSS من محدد واحد أو أكثر وقائمة تعريفات مفصولة بفاصلة منقوطة داخل أقواس. كل إعلان له خاصية والقيمة مفصولة بنقطتين. تتكون القاعدة من محدد واحد أو أكثر. في المثال أدناه ، المحدد هو عنصر فقرة يمثله الحرف P. وهذا يعني أن القاعدة ستنطبق على جميع الفقرات. ينص هذا الإعلان على أن لون النص داخل الفقرة سيكون أزرق مخضر. لاحظ تهجئة "اللون".

p {color:red}

لمزيد من المعلومات حول كيفية ربط CSS مع HTML ، راجع مقالنا المفيد.

ما هو ملف CSS؟

ملف Cascading Style Sheet هو امتداد يقوم بتنسيق صفحات الويب الخاصة بنا. تعطي الملفات المختلفة أنماطًا مختلفة للعناصر الموجودة على مواقعنا وتطبيقاتنا. يمكن أن يكون ملف CSS مثل القالب الذي يحتوي على خصائص مخصصة لكيفية تصميم عناصر HTML لموقع الويب.

يستخدم المصممون ملفات CSS للحفاظ على نمط مماثل في جميع أنحاء موقع الويب بأكمله. يخزن الملف خصائص كل صفحة من صفحات الموقع في مكان واحد. يعد هذا مفيدًا بشكل لا يصدق عند تصميم أو إعادة تصميم موقع ويب لأنه يعني أنك لست مضطرًا إلى تصميم كل صفحة بشكل فردي.

يمكنك بسرعة وسهولة استهداف عنصر واحد أو بعض أو كل العناصر المحددة في صفحة واحدة أو حتى جميع الصفحات على الموقع.

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

CSS الخارجية والداخلية والمضمنة

يمكن استخدام CSS بثلاث طرق - مضمنة وداخلية وخارجية. هذا هو الفرق بين الثلاثة.

  • ما هو CSS الخارجي؟
  • تعد أوراق الأنماط الخارجية مفيدة جدًا ، خاصةً عندما تريد الحفاظ على نمط واحد في جميع أنحاء الموقع بأكمله. يجب إنشاء قواعد النمط مرة واحدة فقط ويتم تطبيقها على جميع الصفحات المطلوبة داخل الموقع. إذا كنت بحاجة إلى تغيير النمط قليلاً في جميع الصفحات التي تستخدم هذه الورقة الخارجية ، فحينئذٍ تحتاج فقط إلى التغيير مرة واحدة ويتم تطبيقها تلقائيًا على جميع الصفحات - وهو أمر سهل! بشكل عام ، هذه هي الطريقة القياسية لاستخدام CSS.
  • ما هي CSS الداخلية؟
  • هذا ينطبق فقط على الصفحة التي تعمل عليها. يمكن استخدام هذا إذا كان نمطًا فريدًا مطلوبًا لصفحة واحدة من تطبيق الويب الخاص بك.
  • ما هو Inline CSS؟
  • يتعلق CSS المضمن ، الذي سأستخدمه في المثال أدناه ، بعنصر صفحة معين. في المثال أدناه ، نستخدم CSS لتحويل العنوان إلى اللون الأحمر على الصفحة. ستلاحظ أن الطلب مضمن في نص HTML - وهي طريقة كتابته. ومع ذلك ، يتم استخدام Inline CSS فقط حيث تريد تطبيق نمط فريد على عنصر واحد.
<!DOCTYPE html>
 <html> 
 <body> 
 <h2 style="color:red;">عنوان H2</h2> 
 </body> 
 </html>

كيف يعمل CSS؟

يتم الجمع بين معلومات HTML ونمط CSS على مرحلتين بعد التحميل والتحليل. يقوم المستعرض أولاً بتحويلها إلى نموذج كائن المستند (DOM). سيعرض المتصفح المحتوى بمجرد أن يجمع DOM ، وهو تمثيل للصفحة المخزنة في ذاكرة الكمبيوتر ، محتوى المستند وأسلوبه.

يضع الكود في DOM بعد تحليل مستند HTML. يصف الموقع الكامل ، والذي يتضمن الأشقاء والآباء والأطفال. عند التحليل ، فإنه يقسم روابط الرأس التي تحتوي على ملفات CSS. يتم تحميل ملفات CSS في المرحلة التالية بعد تقسيمها. يتم تحليل CSS بمجرد تحميل ملفات CSS ؛ ومع ذلك ، هناك اختلاف طفيف عن تحليل ملفات HTML.

تعد معالجة ملفات CSS أكثر تعقيدًا قليلاً وتتضمن عمليتين. المرحلة الأولى ، عادةً ما تكون متتالية ، هي حل التعارضات بين إعلانات CSS. إن الجمع بين العديد من ملفات CSS أثناء حل مشكلات مثل التناقضات بين القواعد والإعلانات المختلفة المطبقة على نفس العنصر هو ما يستتبعه. المرحلة الثانية هي معالجة قيم CSS النهائية.

أفضل 5 محررات CSS

لاستخدام CSS بشكل فعال ، تحتاج إلى معرفة بعض برامج CSS الشائعة المستخدمة:

  • PostCSS: من خلال JavaScript ، تمكنك PostCSS من إضافة وإدارة CSS. PostCSS هي أكثر من مجرد أداة CSS واحدة ؛ إنها مجموعة قوية من الميزات والحزم التي تعمل على تحسين عملية CSS الخاصة بك. الشبكة في PostCSS مرنة وقابلة للتكيف بشكل لا يصدق.
  • Visual Studio: أنشأت Microsoft Visual Studio Code ، وهو محرر CSS مفتوح المصدر. يحتوي على دعم مدمج لـ TypeScript و JavaScript و Node.js. توفر أداة محرر CSS هذه ميزة IntelliSense ، والتي تقدم إكمالات ذكية بناءً على الوحدات النمطية الهامة وأنواع المتغيرات وتعريفات الوظائف.
  • Notepad ++: محرر أكواد CSS المجاني الشهير Notepad ++ تم إنشاؤه في C ++. يتم استخدام Pure Win32 API ، مما يسمح بتنفيذ أسرع للبرنامج. جميع إمكانات محرر الكود القياسي ، مثل التحرير المبوب ، والبحث والاستبدال ، والإكمال التلقائي ، موجودة في Notepad ++.
  • Koala :Koala هو برنامج واجهة مستخدم رسومية كامل يدير مجموعات CoffeeScript و Compass و Less و Sass من مكان واحد. يدعم كل من Windows و Linux و macOS استخدامه. يوفر Koala للمطورين مجموعة مختارة من معلمات المشروع وخيارات تجميع إضافية ورسائل خطأ مخصصة.
  • Komodo Edit : Komodo Edit هي أداة CSS تقليدية. إنها أداة قوية وسهلة الاستخدام لتعديل التعليمات البرمجية. إنه يمكّن المطورين من تصحيح الأخطاء وإجراء اختبار الوحدة وإعادة بناء التعليمات البرمجية وأداء مهام أخرى. بالإضافة إلى ذلك ، فإنه يوفر ملفات تعريف التعليمات البرمجية والاتصالات مع تقنيات أخرى مثل Grunt.

خصائص لغة CSS

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

اقرأ المزيد: مميزات وعيوب CSS

على الرغم من أن إعلان الخاصية النهائي يجب ألا يحتوي على فاصلة منقوطة ، فإن القيام بذلك يجعل من الأسهل إضافة المزيد من خصائص CSS دون نسيان تضمين تلك الفاصلة المنقوطة الإضافية. بالنسبة لمكونات HTML المختلفة ، يمكن للمرء تعيين مجموعة متنوعة من خصائص CSS ، مثل

1. Display

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

2. Color

يتم تحديد لون نص العنصر بواسطة معلمة اللون الخاصة به. على سبيل المثال ، تحدد سمة لون محدد النص لون النص الافتراضي للصفحة. هناك العديد من التنسيقات المقبولة لقيم الألوان ، ولكن أكثرها استخدامًا هي القيم السداسية و RGB والألوان المسماة.

3. Syntax

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

4. Background

يتأثر العرض المرئي لصفحة الويب بشكل كبير بخلفيتها. تقدم CSS العديد من الخصائص لتخصيص خلفية عنصر ، مثل لون الخلفية ، وموضع الصورة ، وتحديد الموضع ، وما إلى ذلك. خصائص الخلفية هي لون الخلفية ، وصورة الخلفية ، وتكرار الخلفية ، وإرفاق الخلفية ، وموضع الخلفية.

5. Fonts

يجب على المرء استخدام الخط والنمط الصحيحين للنص ليكون قابلاً للقراءة بسهولة. تتضمن خيارات تصميم خط النص في CSS تغيير وجه الخط وتعديل حجمه ودرجة جاذبيته وإدارة المتغيرات وما إلى ذلك. Font- family و -style و -weight و -size و -variant هي سمات الخط المختلفة.

6. Text

يوفر CSS العديد من الميزات التي تجعل تحديد أنماط نص مختلفة أمرًا بسيطًا وفعالًا ، بما في ذلك اللون ، والمحاذاة ، والتباعد ، والزخرفة ، والتحويل ، وما إلى ذلك. تشتمل العديد من خصائص النص المستخدمة بشكل متكرر على محاذاة النص ، وزخرفة النص ، وتحويل النص ، والمسافة البادئة للنص ، ارتفاع الأسطر ، تباعد الأحرف ، وتباعد الكلمات.

7. Dimension

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

8. Margin

باستخدام خصائص هامش CSS ، من الممكن تعيين تباعد الحدود لعنصر مربع. يكون Margin العنصر دائمًا شفافًا ومستقلًا عن لون الخلفية. إذا كان العنصر الأصل له لون خلفية موجود مسبقًا ، فسيكون مرئيًا عبر منطقة Margin.

9. List

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

10. Links

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

11. Layers

نظرًا لأن النص والرسومات والعناصر الأخرى مرتبة في الصفحة دون لمس بعضها البعض ، فإن صفحات HTML تعتبر ثنائية الأبعاد. يمكن تكديس الصناديق أفقيًا وفي اتجاهات رأسية وعلى طول المحور z.

12. Gradients

يمكن للمرء تسريع التنزيلات واستخدام نطاق ترددي أقل من خلال استخدام التدرجات. سيتم عرض الإخراج بشكل أسرع لأن المتصفح يقوم بإنشائه ، ويمكن زيادة العناصر المحتوية على التدرج أو تقليلها إلى أي درجة دون فقدان الجودة.

13. Outline

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

14. Filters

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

15. Units

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

16. Opacity

كانت Opacity موجودة قبل وقت طويل من تضمينها في مواصفات الإصدار 3 من CSS. مع ذلك ، تحتوي المتصفحات القديمة على إعدادات مختلفة للشفافية أو الشفافية. نطاق Opacity هو 0.0 إلى 1.0. باستخدام Opacity CSS ، يمكن للمطورين أيضًا إنشاء صور نصف شفافة.

17. Validation

التحقق من صحة موقع الويب هو عملية التأكد من التزام صفحات موقع الويب بالمعايير والقواعد الرسمية التي وضعها اتحاد شبكة الويب العالمية (W3C). التحقق أمر بالغ الأهمية. سيضمن أن تقوم جميع متصفحات الويب ومحركات البحث وما إلى ذلك بترجمة صفحات الويب الخاصة بك بنفس الطريقة.

18. Position

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

19. Padding

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

20. Tables

غالبًا ما يتم عرض البيانات الجدولية ، مثل التقارير المالية التي يتم جلبها من نظام إدارة قاعدة البيانات (DBMS) ، في جداول. ومع ذلك ، عند إنشاء جدول HTML بدون أي أنماط أو سمات ، فإن المستعرضات تعرضها بدون حدود. يمكنك تحسين جمالية الجداول بشكل كبير باستخدام CSS.

تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -