كيفية كتابة لغة css

في هذا الدرس سوف نتعلم بمزيد من التفصيل كيفية كتابة لغة css
بصورة عامة يتم كتابة لغة css على النحو التالي
المحددات {
الخصائص:القيم
}
وباستخدام المحددات والخصائص والقيم, يمكن تحديد كيف واماذا وأين تقوم بتغيير مظهر الصفحات المختلفة

المحددات

ونعني به العناصر المستخدمة أثناء التصميم, مثل أنواع الأوسمة المختلفة وأسماء المعرفات والإطارات المستخدمة
فمثلا إذا قمنا بكتابة p{ }, فهذا يعني تحديد تصميم وسم الفقرات p. أو إذا قمنا بكتابة h1{ }, فهذا يعني تغيير تصميم وسم h1
وهنالك العديد من طرق الكتابة للمحددات, وسوف نتطرق هنا لأهم 5 من هذه الطرق, ومن يتقنها يستطيع إنشاء التصميم الذي يريد إنشاء الله

1. إستخدام أسماء الأوسمة فقط

الطريقة الأولى هي بكتابة اسم الوسم مباشرة كما هو, a{ } أو div{ }أو img{ }. على سبيل المثال دعونا نغير لون الوسم p إلى اللون البرتقالي
أولا إليكم الجزء الخاص بلغة html والذي سوف نستخدم في هذا الشرح


<body>

<div id="headline">

<h1>أساسيات لغة CSS</h1>

<p>هذه جملة تجريبية</p>

</div>

<div class="main">

<h2>هذا عنوان تجريبي</h2>

<p>وهذا<span class="light">نموذج</span>للتجربة</p>

<p>

lt;a href="https://codeuniverse.net/">الصفحة الرئيسية</a>

السابق</p>

</div>

</body>

 والجزء الخاص لتغيير اللون بلغة css يكون على النحو التالي

p {

  color:orange;

}

بهذه الطريقة يتم تغيير لونالوسم p إلى اللون البرتقالي

ومثال آخر إذا أردنا تغيير لون الجزء الخاص بنصوص الروابط فيمكن كتابته على النحو التالي

a {color: orange}



      
2. إستخدام أسماء المتعرفات
 وتكون كما يلي, # اسم المعرف {    }

وكما هو موضح في النموذج السابق, في نموذج HTML نقوم بكتابة <اسم الوسم ID="اسم المعرف">, لكن لا يمكن إستخدام نفس اسم المعرف لأكثر من مرة واحدة في نفس الصفحة

وإذا أردنا التصميم باستخدام أسماء هذه المعرفات تكتب كما يلي, #اسم المعرف{}, يجب إضافة علامة # قبل اسم المعرف

وعلى سبيل المثال, دعوني نقوم بتغيير الجزء الخاص بالمعرف id="headline" إلى اللون البرتقالي, والموجود في النموذج السابق

فقط نقوم باستخدام علامة # قبل اسم المتعرف المراد التعامل معه, وذلك على النحو التالي

#headline {

  color: orange;

}

بهذه الطريقة وبكل سهولة يمكن تغيير لون المعرف headline

ملحوظة يمكن تغيير اسم المعرف هذا بأي كلمة أخرى كما نشاء

      

      
3. الطريقة الثالثة هي باستخدام اسماء الإطارات
 وتكتب على النحو التالي .اسم الإطار{     }, بمعنى نقوم بكتابة علامة . قبل اسم الإطار مباشرة

وكما هو موضع في المثال السابق, دعونا نقوم بتغيير لون الجزء الخاص بالإطار class="main" إلى اللون البرتقالي

.main {

  color: orange;

}

بهذه الطريقة وبكل سهولة يتم تغيير لون الإطار هذا إلى اللون البرتقالي, وبالتأكيد يمكن تغيير اسم الإطار إلى أي اسم آخر كما نشاء

      

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

 فقط نقوم بكتاة نوع الوسم واسم المعرف أو الإطار ونفصل بينهم بعلامة الفاصلة, ولا يلزم الترتيب عند كتابتها ولا يوجد أي حد معين لعدد العناصر التي يمكن إستخدامها

وعلى سبيل المثال, دعونا نقوم بتغيير لون h2 والجزء الخاص بالمعرف id="headline" إلى اللون البرتقالي

وطريقة كتابتها تكون على النحو التالي

#headline, h2 {

  color: orange;

}

وبهذه الطريقة وبسطر واحد تمكنا من تغيير لون وسم h2 والجزء الخاص بالمعرف id="headline"

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

      

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

وعلى سبيل المثال إذا أردنا تخصيص وسة span والموجود داخل وسم p والذي بدوره موجود داخل إطار class="main", وذلك كما هو موضح في المثال السابق

فيمكن كتابتها على النحو التالي

.main p span {

  color:orange;

}

بهذه الطريقة يتم تغيير لون وسم span فقط ولا يتم تغيير لون الإطار بالكامل

ونقوم بكتابة العناصر بحسب ترتيبها من الخارج ونفصل بينها بعلامة المسافة فقط

وبإستخدام هذه الطرق الخمسة لكتابة المحددات, يمكن وبكل سهولة إنشاء وتصميم الشكل الذي نريد

ملحوظة هنالك العديد من طرق كتابة المحددات لكن نكتفي هنا بهذه الطرق الخمسة فقط

وفي هذا الدرس نكتفي بهذا القدر وسوف نقوم بشرح الخصائص والقيم في الدرس القادم