اساسيات لغة CSS

اساسيات لغة CSS

ما هى لغة CSS ؟

لغة CSS هى لغة خاصة بانماط اوراق العمل الخاصة بالموقع الذى تقوم بتصميمه او ايا كان العمل الذى تصممه وتعتبر هذه الثلاثة حروف CSS هى اختصار لثلاث كلمات هى Cascading style sheets والتى تعنى انماط اوراق العمل المتتالية وهى تحدد طريقة عرض عناصر صفحة الـ HTML 

 لابد ان يكون لديك خلفية جيدة عن لغة HTML حتى تستطيع تعلم CSS

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

Css الحل لمشاكل مطورى المواقع 

ان لغة HTML لم تكن معدة على الاطلاق لتحتوى على وسوم خاصة بتنسيق الصفحات ولكن كانت معدة لكى تحدد محتويات الصفحات مثل ان تحدد العناوين والفقرات وهكذا ، الى ان تم ادخال وسوم جديدة مثل <font> فى لغة HTML فى خصائص الاصدار 3.2 . ولقد كان هذا حلما لمطورى المواقع ان يتحكموا فى تنسيق الصفحة باستخدام لغة HTML ولكن كانت المشكلة ، ان المواقع الكبيرة وجدت انها لابد ان تدخل بيانات التنسيق لصفحات الموقع من الخطوط والالوان فى كل صفحة على حدة . مما كان يكلف الكثير من الوقت والجهد والمال .
ولحل هذه المشكلة قام الاتحاد العالمى لشبكة الويب world wide web consortium بانتاج لغة CSS
والان اصبحت جميع برامج مستعرض الويب تدعم لغة CSS بشكل كامل

CSS توفر الكثير من الوقت :

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

بناء الجملة فى لغة CSS

تحتوى الجملة فى لغة CSS على جزئين رئيسيين هما :

• Selectors
• declarations

الـ Selectors هو الجزء الذى يحدد عنصر الـ HTML المراد تنسيقه ،  اما الـ declaration هوالذى يحتوى على الخصائص والقيم التى تطبق على العنصر .

هذا هو الشرح النظرى ولكن لنفهم لابد من التجربة العملية

هنا الـ Selector هو العنصر الذى نريد تنسيقه وهو كما فى المثال العنوان h1 

كما ان لدينا اثنين من الـ Declarations لتنسيق ال Selctor وهى color:red  و  font-size:14px و كل declaration يتكون من جزئين هما ( الخاصية مثل color او font-size ) و( القيمة مثل red و 14px )

يطلق على الخاصية property  والقيمة value

                   يكتب الـ selector فى بداية الجملة ثم توضع الـ declarations داخل اقواس بهذا الشكل {    }  وتكتب الخاصية property ثم نقطتين بهذا الشكل  :  ثم تكتب القيمة value ثم تغلق ال declaration بفاصلة منقوطة بهذا الشكل ;  ثم تكتب بقية الـ declarations المراد اضافتها بنفس الطريقة .

ولكتابة اكواد CSS بطريقة اسهل فى القراءة يتم كتابة كل declaration فى سطر منفصل بهذه الطريقة : 

h1

{

color:red;

font-size:14px;

}

 الان نقوم بتجربة مثال عملى ،  توجه الى هذا الموقع CssDesk والان فى الجزء الخاص بلغة CSS قم باضافة هذا الكود السابق

h1

{

color:red;

font-size:14px;

}

ثم قم بكتابة عنوان فى الجزء الخاص بHTML بهذا الشكل مثلا

<h1> www.ra3dnet.com </h1>

اضافة التعليقات الى اكود CSS :

تعتبر التعليقات مهمة جدا عند كتابة الاكواد وخاصة التى تقوم بعملها وتتوقع ان يريد احد ما تعديلها ولكى تسهل عملية التعديل تستيع اضافة تعليقات توجيهية لمن سيقوم بالتعديل تتم كتابتها داخل الكود ولا تؤثر فى النتيجة .

ولكتابة التعليق فى CSS  يكون بهذا الشكل 

/* التعليق الذى تريد كتابته */