مدخل الى لغة CSS

مدخل الى لغة CSS

مدخل الى لغة CSS

مدخل الى لغة CSS :لغة السي اس اس CSS هي لغة التجميل، هي اللغة الخاصة بوصف شكل صفحات HTML لغة مكملة فلا يجب ان تتكون الصفحات بدونها.

لغة السي اس اس CSS تعمل على عرض صفحات HTML بما يجب ان تكون عليه فهي الشكل كما ان HTML هي الأساس والجوهر.

أولًا ما هي لغة السي اس اس؟

What is the CSS?

الـ CSS هي اختصار لـ Cascading Style Sheet وهي تعمل كما قلنا كوصف لشكل صفحات الـ HTML هي تنسيقنا للصفحات وعرضها على المتصفح كما ينبغي ان تعرض، من ألوان وخلفيات وقوائم وحركات تجميلية وغيرها.

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

كما يمكنك حفظ العمل والعرض في العديد من الشاشات، كشاشات الكمبيوتر أو المحمول او التاب كما ايضًا تنسيقات المطبوعات وغيره.

تركيب السي اس اس :

CSS Syntax:

تتكون لغة السي اس اس من شكل بسيط مكون من جزئين وهما: الـSelector والوصف او الصفات declaration

h1{color:red;}

وترجمة السطر السابق هو ان كل العناوين التي تتسم بوسم الـh1 سوف يتحول لونها الى اللون الأحمر، بهذه البساطة.

ما هو الـSelectors ؟

هو الي بنستخدمه لنحدد عنصر معين من كود الHTML الي عايزين اننا ننسقه ودا ممكن انو يشمل عدد من العناصر مش عنصر واحد فقط وممكن يكون كـ:

1 – class أو id

لو كان Class بنقدر نستدعيه في السي اس اس من خلال اسمه يسبقه علامة الدوت مثل:

.nav{color:blue;}

أو id بيسبق الاسم بتاعه بعلامة الهاش # مثل:

#nav{color:blue;}

2 – يمكن ان نحدد عنصر بعينه من داخل Class محدد مثل:

p .nav {color:red;}

والكود السابق يحدد لنا كل الباراجرافز الي موجودة داخل الكلاس الس اسمه nav فقط ولن تطبق على غيره من العناصر او خارج الكلاس.

3 – التحديد الشامل أو العام وهو باضافة النجمة * وهو يطبق الكود على كافة العناصر

*{

text-align: center;

color: blue;

}

4- تحديد مجموعة من العناصر تشمل نفس التنسيق مثل:

h1, h2, p{

color: red;

}

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

كيف يمككنا اضافة السي اس اس؟

How to Add CSS?

هناك ثلاثة طرق لاضافة اكواد السي اس اس وهي:

1 – (خارجي أو ملحق) عن طريق ملف خارجي يمكن استدعائه عن طريق اضافة الكود في عنصر الـ head مثل:

<link rel=”stylesheet” type=”text/css” href=”مسار الملف/”>

2 – (داخلي) داخل صفحة الـHTML ولكن ايضَا يتم اضافته داخل عنصر الـhead مثل:

<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>

3 – داخل الكود وهو بتحديد عنصر فريد من نوعه بتنسيق مختلف مثل :

<p style=”color:red;”>This is a red paragraph</p>

التعليقات أو الـ comments في لغة السي اس اس:

CSS Comments:

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

يكون شكل التعليقات كالآتي:

/* This is a single-line comment */

ومن الممكن ان يكون التعليق اكثر من سطر واحد فيشمل عدة اسطر:

/* This is
a multi-line
comment */

الكتابة بداخل وسم التعليق لا يؤثر بشكل او بآخر على الأكواد ولا يدخل من ضمنها ابدًا، هو يعمل فقط على شيء من الترتيب والتذكر.

من المصادر الهامة : w3schools

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This Content is Protected !
%d bloggers like this: