Site icon موقع Jabism

تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني

عبدالرحيم

تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني « تتمة »

تطبيق نمط style  ب:  class et id

 

رغم ما قمنا به من بداية الدرس إلى الآن  ما زال هناك خلل  و تشوه  في التنسيق، إذ كيف يتفرد اللون الأحمر بكل الفقرات  بينما أنا أريد كتابة فقرات أخرى بشكل مختلف  و بألوان مختلفة ! 🙄  .

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

لحل المشكلة ، يمكننا استخدام هذه السمات الخاصة التي تعمل على جميع الرموز:

لتكن  الأمور أكثر وضوحاً  فإن سمات class  و id  متطابقة تقريبًا. ولا يوجد سوى اختلاف بسيط .

في الوقت الحالي ، ولتبسيط الأمور ، سنهتم فقط بسمة class.

كما أخبرتك للتو ، هذه سمة يمكن وضعها على أي رمز، وكذلك الفقرة  أو الصورة ، أو شيئ آخر.

1
2
3
  <h1 class=""> h1>
  <p class=""> </p>
  <img class="" />

 

حسناً ، ولكن ما هي قيمة السمة class؟

في الواقع ، يجب عليك كتابة اسم يعمل على تحديد الرمز.  على سبيل المثال ، سوف أقوم بربط  class introduction  بالفقرة الأولى (السطر 12).

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
     <title>تجربتي مع CSS </title>
  </head>
  <body>
    <h1>الخطوة الرابعة</h1>
    <p class="introduction">أهلاً و مرحباً بكم في موقعي ! </p>
   <p>يمكنكم وضع اقتراحاتكم في باب الاقتراحات <em> الكتاب الذهبيem>. و شكراً لكم مسبقاً !</p>
  </body>
</html>

 

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

1
2
3
4
.introduction
{
    color: red;
}

 

و في النتيجة ستجد أن الفقرة التي أشرنا إليها ب introduction هي الوحيدة التي تم عرضها باللون الأحمر.

 

هنا يتم عرض الفقرة الأولى فقط باللون الأحمر

 

كما أشرنا سابقاً  إلى أن  class و id  لهما استخدام  مشابه و أنهما يعملان  بنفس الطريقة، إلا أن id لا يمكن  استخدامه إلا مرة واحدة  فقط داخل الكود.

هل سبق لك أن رأيت شيئاً عن id ؟  يا للهول ! كم تنسى يا صاحبي!  راجع درس الروابط في HTML . و ستجد في باب نقط الارتساء في درس إنشاء الروابط بلغة html كيف تعمل id  😆 

لقد قلنا اننا نستعملها مرة واحدة ، و هذا ما يجعلنا نخصصها لشيئ يدرج في الصفحة مرة واجدة مثل شعار الموقع ( logo) 

1
<img src = "images/logo.png" alt="شعار الموقع" id="logo">

في حالة استخدامك ل id  لتحديد الخصائص  في ملف CSS ، فيجب أن نضع علامة (#) قبلها  مثل:

1
2
3
4
#logo
{
    /* هنا ضع خصائص CSS */
}

 

احياناً يكون علينا أن نطبق class فقط على جزء من جملة  ( كلمة مثلاً) ، والتكن كلمة تهنئة داخل هاته الفقرة:

1
<p>  أهلاً و مرحبا بك ، هنيئاً بالنجاح ! </ p>

و لفعل ذلك علينا ان ندرج الرمز < span> داخل الشفيرة وهذا الرمز سيحصر كلمة هنيئاً لتكون مختلفة عن باقي كلمات الجملة :

HTML           

1
<p>أهلاً و مرحباً بك <span class="salutations">هنئاً</span> بالنجاج!</p>

وفي ملف CSS  أضف التالي:

1
2
3
4
  .salutations
  {
     color: red;
  }

والنتيجة ستكون على الشكل التالي:

كلمة “تهنئة” مكتوبة باللون الأحمر

 

تطبيق نمط style :  التحديد المتقدم 

يجب أن تعلم أن أصعب شيئ في  CSS هو كيفية استهداف  العناصر في النص أو النص بعينه لتغيير شكله دون غيره!   و للتعديل على عناصر صفحة الويب  ، نستخدم ما يسمى Les Sélecteurs (المحددات) .

و هذه المحددات  أصبحت مألوفة لدينا و لكن لا بأس أن نعود  لمراجعتها كي نحفظها 🙂  و لا يتحقق ذلك إلا بالتطبيق الدائم لها 😯 

على بركة الله:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  p
  {
 
  }
     /* ---------
ظهور التعديل على جميع الفقرات */
 
  h1, em
  {
 
  }
 
     /* ---------
يظهر التعديل على جميع العناوين و النصوص المهمة */
 
  .class
  {
 
  }
 
  #id
  {
 
  }
 
     /* ---------
وهناك class و id تعمل الكثير من الأشياء راجع ما كتبته فوق */
 
 
 
/*---------  (*) محدد  universel  */
 
  *
  {
 
  }
 
     /*--------- يحدد كل الأكواد دون استثناء */
  h3 em
  {
 
  }
    /*--------- تحديد كل رموز <em> الموجودة داخل الرمز <h3> لاحظ أنها لا توجد فاصلة بينهما كما تعلمنا سابقاً */
 
/*--------- هذا نص html كمثال */
 
<h3>هنا العنوان  <em>بداخله محتوى مهم</em></h3>

 

 رمزان متتاليان:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
  h3 + p
  {
 
  }
  
/* يعرض العنوان <h3> أولاً ثم الفقرة <p> ثانياً */
 
 
/* مثال في HTML */
 
<h3> العنوان </h3>
 
<p>الفقرة</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* يحدد جميع الروابط <a> التي لها سمة title. ولدينا مثال */
 
 
   a[title]
   {
 
   }
    
/* مثال */
   a[title="اضغط هنا لزيارة موقعنا "]
   {
 
   }
 
     /* مثال في HTML*/
 
   <a href="http://jabism.com" title="موقع متنوع">
 
/* ----------*/
 
<a href="http://jabism.com" title="إضغط هنا لزيارة موقعنا">
 
/* <"إداراج قيمة الوسم">  */

تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني

 

 الخلاصة

CSS هي لغة  مُكَمِّلَةٌ للغة HTML. و هي تقوم بدور  تنسيق صفحات  الويب حتى تبدو منظمة مقروئة و جذابة 💡 

يمكننا كتابة كود CSS في عدة أماكن مختلفة ، والأفضل هو إنشاء ملف منفصل (مثال: style.css).

في CSS ، نختار الأجزاء من صفحة HTML التي نريد تعديلها ونغير عرضهم التقديمي بخصائص CSS:

1
2
3
4
5
balise1
{
   propriete1: valeur1;
   propriete2: valeur2;
}

 

أطيب المنى و إلى اللقاء في درس آخر 

 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
Exit mobile version