الرئيسية إدارة المعرفة فرونت اند CSS css introduction

css introduction

, ,

 


css introduction 


قائمة المصطلحات والتعريفات:

التعريف

المصطلح

هي اختصار لـ "Cascading Style Sheets" وهي لغة تنسيق تستخدم في تصميم وتنسيق صفحات الويب. تعتبر   جزءًا أساسيًا من تقنيات تطوير الويب وتستخدم لتحديد كيفية عرض المحتوى الذي تم كتابته بلغة HTML على صفحة الويب.

css



 المقدمة

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

-  سنتناول في هذه المقالة مفاهيم أساسية عن css وكيفية استخدام الخطوط والألوان بها



 الألوان 

يمكننا عن طريق css تغيير الألوان للنصوص و  والأشكال ويمكن تغيير الخلفية للنصوص وإضافة تدرجات لونية ولدينا عدة طرق للتحكم بها 

  1. الخاصية color :

الوصف: تُستخدم لتحديد لون النص داخل العناصر HTML.

القيمة: يمكن أن تكون القيمة لاسم لون (مثل "red")، رمز لون "هكسا" (مثل "#ff0000")، أو تعريف اللون بنموذج RGB مثل "rgb(255, 0, 0)"

 فيما يلي، صورة تشرح الإضافات التي يقدمها كود css الى صفحة الويب ونلاحظ الفرق انه كيف عن طريق خاصية  "color"  وضعنا قيمة  لون احمر للجملة

  1.  الخاصية  background-color :

الوصف: تستخدم لتحديد لون خلفية العنصر
 القيمة: يمكن أن تكون القيمة لاسم لون (مثل "green")، رمز لون "هكسا" (مثل "4Aff#")، أو تعريف اللون بنموذج RGB (مثل "rgb(0, 255, 0)").

يمكن إضافة خلفية للخط عن طريق الخاصية  background-color  واعطاءه اسم اللون "مثلا red " أو يمكن بطريقة أخرى لدينا عدة طرق للتعريف عن الألوان وهي:


هنا نقوم بوضع الألوان بنظام RGB  وتأخذ القيم من 0 وحتى 255 

background-color: rgb(0, 0, 0)

هذا الأسلوب يكون بوضع رمز المربع # و يليه 3 أو 6 أرقام و أحرف تمثّل اللون الذي سيتم عرضه. هنا الرقم الذي تمرره مسموح أن يكون بين 0-9 و الحرف الذي تمرره مسموح أن يكون بين A-F.ويطلق عليه نظام الهيكسا

background-color: #ff6347  == RRGGBB

هذا الأسلوب يكون بتمرير أربعة أعداد وهي اللون الساسي ما بين 0 حتى 360  - التشبع ويكون بنسبة مئوية 

 نسبة الإضاءة  وتكون بنسبة مئوية  - الشفافية  وتأخذ قيما من 0 حتى 1

(background-color: hsla(Hue, Saturation, Lightness, Alpha 

(background-color: hsla(300, 40%, 29%, 0  

  1. الخاصية  background-image :


 هو نوع من أنواع التدرجات في CSS يتيح لك تحديد تدرج للألوان يمكن استخدام هذه الخاصية لتحديد خلفيات ملونة لعناصر HTML:

الصيغة الأساسية: linear-gradient(direction, color-stop1, color-stop2, ...)

direction: يحدد اتجاه التدرج. يمكن أن يكون في درجات (deg)، أو كلمات مثل to right, to left, to bottom, to top، إلخ.

color-stop: يحدد الألوان التي ستتغير على طول التدرج.

نلاحظ في الصورة التالية تطبيق الخصائص المذكورة

الخطوط 

  1.  خاصية   font-family 

يمكننا تغيير أنواع الخطوط عن طريق خاصية   font-family  ونضع اسم الخط كقيمة وهناك قواعد لكتابة اسم الخط :

- إذا كان يتألف من كلمة واحدة، يمكنك وضعه كما هو مثال:font-family: Arial;

- إذا كان يتألف من أكثر من كلمة و بينهما شرطة، يمكنك وضعه كما هو مثال: font-family: sans-serif;

- إذا كان يتألف من أكثر من كلمة و بينهما مسافة فارغة، يجب وضعه بين ' ' )أو  " " ) مثال: font-family: "Courier New";

ويمكن تغيير حجم الخط عن طريق الخاصية  font-size   وبعدها يتم تحديد الحجم الخط بقيمة رقمية بإحدى وحدات القياس التالية بعدها:


الوحدة

معناها

px

لجعل حجم الخط ثابت و لا يتأثر بإعدادات حجم الخط الموضوعة في المتصفح.

em

نسبة لحجم خط العنصر الأب المباشر

rem

نسبة لحجم خط عنصر الجذر (root) <html>

%

لجعل حجم الخط يتحدد بشكل مئوي و بالتالي يتغير نسبةً لحجم العنصر الأب الموضوع فيه.

الفرق بين حجم الخط الثابت والمتغير


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

حجم الخط المتغير ( Relative ) هو الذي يتغير نسبةً للحجم الذي حدده المستخدم في إعدادات المتصفح أو نسبةً لحجم العنصر الأب أو نسبةً لحجم الشاشة نفسها.

  1.  الخاصية font-weight

يمكن تحديد وزن الخط الى خط عريض مثلا او عادي او غيره من الاوزان عن طريق الخاصية font-weight  ويمكن استخدام قيم رقمية تعبر عن وزن الخط او كنص :


القيمة

معناها

bold

لجعل النص يظهر بشكل عريض.

normal

لجعل النص يظهر بشكل عادي.

<number>

و هنا نقصد وضع رقم يحدد درجة عرض الخط، فمثلاً حجم الخط normal يمكن كتاتبه 400 و حجم الخط bold يمكن كتابته 700.

ويمكن استخدام قيم رقمية من 100 إلى 900، بمضاعفات الـ 100

  1. الخاصية direction

يمكن تحديد اتجاه الخط عن طريق الخاصية direction  واعطائها قيمة rtl   او    ltr  أي أنه من اليمين الى اليسار او من اليسار إلى اليمين 

نلاحظ الخواص التي تمت إضافتها بالكود كيف تطبق على النص بينما النص الثاني كما هو 

  1.  الخاصية  text-decoration


إضافة تسطير النص نستخدم الخاصية  text-decoration  وتكون على الأشكال التالية :

حيث القسم الأول من الصورة يعبر عن الخاصية وقيمتها والقسم الثاني يعبر عن تأثير الخاصية على النص  


 وأيضا يمكن ان تأخذ قيم ثانية مثل نوع الخط ولون الخط كما الاشكال التالية:  حيث نلاحظ خط متقطع dashed او بشكل نقطي  dotted تحت النص او تغير لون الخط بحسب المطلوب

 

  1. خاصية text-transform  

يمكن تحديد حالة الأحرف وأحجامها باستخدام خاصية text-transform  

يمكننا جعل أحرف النص صغيرة او كبيرة او جعل الأحرف في بداية كل كلمة من النص بشكل كبير 

كما في الصورة المجاورة نلاحظ اسم الخاصية وقيمتها وتأثيرها على النص 


  1.  الخاصية text-shadow

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

لإضافة ظل حول النص نستخدم الخاصية text-shadow و نمرر لها القيم الخاصة بالظل كإحداثيات ظهوره، لون و حجم ضبابيته

- بالنص الأول تم تمرير مقدار 2 بكسل  لليمين ثم 2 بكسل للأسفل ومررنا قيمة اللون

- بالنص الثاني قمنا بتمرير نفس القيم مع إضافة ضبابية بمقدار 5 بكسل 

- بالنص الأخير قمنا بكتابة القيم بشكل سالب لنجعل الظل ينزاح بالاتجاهين اليسار والاعلى وتمرير اللون بنظام "الهيكسا"

 


 المراجع:

اسم المرجع 

الرابط 

منصة W3school

CSS Tutorial

مقالة من منصة medium

CSS Basics for Typography. CSS Basics | by Elad Shechter | cssclass.com | Medium

موقع هرمش 

تعلم لغة CSS
css introduction css introduction بواسطة Remocolla Academy في فبراير 08, 2026 تقييم: 5

ليست هناك تعليقات:

الاشتراك في: تعليقات الرسالة ( Atom )
يتم التشغيل بواسطة Blogger.