تعلم CSS : بعض الأساسيات

بعد أن قمنا بإعداد بيئة العمل الأن سنبدأ بتعلم عناصر التنسيق , وكيف يمكننا التحكم في صفحة HTML وتنسيقها كما نريد, هناك العديد من المستويات للتنسيق حيث يمكنك أن تقوم بتنسيق مجموعة من العناصر مرة واحدة , أو أن تقوم بتنسيق عنصر محدد, على سبيل المثال في صفحة HTML وداخل وسم ال body قم بإضافة التالي :

 <h1>عنوان صفحة</h1>
  <h1>عنوان صفحة أخر</h1>

قم الآن بفتح ملف style.css باستخدام محرر النصوص , وقم بإضافة السطر التالي :

h1 {
    color: aqua;
}

الأن قم بحفظ التعديلات وقم بفتح ملف index.html من خلال المتصفح ستلاحظ أن كلا الوسمين H1 أخذا نفس الللون “aqua” , والسبب بطبيعة الحال هو أننا استخدمنا CSS من أجل تلوين جميع الوسم H1 في الصفحة, طبعا هذه الطريقة جيدة إن كنت تريد التحكم في مجموعة من العناصر مرة واحدة , لكنها ليست جيدة إن كنت نريد المزيد من التخصيص.

إستخدام مبسط لل Class

قد تريد على سبيل المثال إعطاء كل عنصر من الصفحة تنسيق مميز , في المثال الذي إستخدمنا فيه وسمي H1 نريد أن نعطي لكل واحد منهما تنسيق مختلف , من أجل هذا يمكننا أن نستخدم إحدى الخصائص إما Class أو ID مثال :

<h1 class="fh1" >عنوان صفحة</h1>
  <h1 class="sh1" >عنوان صفحة أخر</h1>

كما في المثال قم بإضافة خاصية ال class داخل وسم H1 وإعطاء كل كلاس إسم , في هذه الحالة إستخدم إسم fh1 و sh1 يمكنك إستخدام الأسماء التي تريد, الأن سنقوم بالانتقال إلى ملف style.css ولن نكتب التالي :

.fh1 {
    color: aqua;
}
 
.sh1 {
    color: blue;
}

الأن قم بفتح ملف index.html من خلال المتصفح ولاحظ التغييرات , يمكن أن تلاحظ أن H1 الأول أخذ اللون و ال H1 التانية أخذت تنسيق مختلف , الذي حدث هنا هو أننا عندما قمنا بإضافة ال class لموسمين بالتالي القيم التي يحتوي عليها ال class يستخدم من أجل إضافة علامة للعناصر التي نريد تنسيقها.

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

.fh1 {
    color: aqua;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
 
.sh1 {
    color: blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}

قد تلاحظ في هذين التنسيقين أن هناك تنسيقات مكررة وهي “font-size” و “font-family” وهي خصائص مكررة , بالتالي كيف يمكننا إزالة التنسيقات المكررة وكتابتها مرة واحدة .

لفعل هذا يمكننا ببساطة كتابة الوسم الأساسي h1 إلى css وإضافة التنسيقات المكررة إليه على هذا الشكل :

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
 
.fh1 {
    color: aqua;  
}
 
.sh1 {
    color: blue;

قم الأن بفتح المتصفح ستلاحظ أنه لم تحدث أي تغييرات , فالذي قمنا به هو أننا قمنا بجمع التنسيقات المكررة المخصصة للعنصر h1 في مكان واحد.

ال Background في CSS 

الخلفية في مواقع الإنترنت تلعب دور مهم في التصميم والشكل النهائي للموقع , في CSS يمكنك التحكم في الخلفية على هذا الشكل :

h1 {
   background-color: yellowgreen;
}

طبعا الخلفية لا تكون فقط على شكل لون كما هو الحال في المثال الذي استخدمنا فيه الخاصية “background-color” , بل يمكننا أيضا جعل صورة على شكل خلفية , قم بفتح ملف index.html وقم بكتابة التالي :

 <h1 >إضافة صورة عن طريق CSS</h1>
  <div class="addimage">نص فوق صورة</div>

الأن قم بفتح ملف style.css من أجل إضافة التنسيقات المناسبة

.addimage {
    background-image:url('myimage.jpeg');
    width: 500px;
    height: 500px;
}

استخدمنا في هذا المثال الخاصية “background-image” من أجل إضافة الصورة , بالإضافة إلى أن هذه الصورة تحتاج إلى القيمة “url” التي تحتوي على رابط الصورة , بالإضافة إلى “width” و “height” من أجل إضافة أبعاد الطول والعرض.

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