لغة css : لمحة أساسية عن أشهر لغة تصميم نمطية

لغة css هي اختصار لـ Cascading Style Sheets ، حيث أنها لغة تنسيق وهيكلة لصفحات الويب. تصب اهتمامها الكامل على عملية التصميم مثل الألوان والأزرار والخطوط وتنسيقات التصميم الأخرى التي تحتويها هذه اللغة.

يمكن الاشارة إليها ايضًا بأنها صفحة الأنماط , حيث أنها تمثل المكون المرئي لمستند ما.[1] ويمكن ربطها بلغات عديدة من ناحية التصميم بما في ذلك ملفات SVG  وملفات XML  التي يتم اعتمادها في الوقت الحالي في برمجة وتصميم الأجهزة الذكية وبعض الأماكن في أجهزة الحاسوب.[1]

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

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

 

 

ميزات لغة CSS

وسنذكر العديد من المزايا التي تتضمنها لغة css في صفحات الويب وهي:

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

 

تعريف صيغة عامة

call
{
   //html elements
}

ولأن هذه اللغة من اللغات المستخدمة في تطوير صفحات الويب ، فإن استخدامها يقتصر على:

    • <div , p , ….> tags.
    • Classes.
    • ID’s

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

 

 

مثال

من فضلك ، لفهم لغة CSS جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<html>

<head>

<style>
div
{
    color:red;
}
</style>


</head>

<body>

<div>Hello World</div>
</body>

</html>

 

 

المراجع

 

هل أعجبك المقال؟

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es