أساسيات لغة CSS | الدرس الأول (مقدمة)

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

مرحبا بكم في أولى دروس لغة التنسيق css ، كما تعلمنا في دروس html تحدثنا عن طبقات الويب الثلاث:

Content : وهي طبقة المحتوى وتمثلها لغة html .

Presentation : وهي طبقة التقديم وتنسق بلغة css .

Behavior : طبقة التفاعل وتمثلها لغات البرمجة مثل JavaScript و php التي تجعل المواقع ديناميكية ومتفاعلة مع المستخدم.

اليوم سنبدأ في دراسة أساسيات لغة التنسيق css ، وسنكتفي في هذا الدرس كمقدمة بمعرفة أين يكتب كود css وصيغة كتابته وفي الدرس القادم سنبدأ في تعلم كيفية تنسيق محتوى html .

أين يكتب كود css ؟

هناك ثلاث طرق لكتابة كود css ، بغض النظر عن صيغة الكتابة التي سأشرحها لاحقا:

الطريقة الأولى: ويصطلح عليها ب Inline style النمط الخطي ، وهي كتابة الخصائص والقيم داخل علامة html كقيمة للخاصية style ، وهذا مثال:

 

الطريقة الثانية: يصطلح عليها ب Internal style النمط الداخلي ، وهي كتابة كود css مستقلا في نفس ملف html ضمن العلامة الزوجية style في رأس الصفحة head ، وهذا مثال عليها:

الطريقة الثالثة: يصطلح عليها ب External style النمط الخارجي، وهي كتابة كود css في ملف مستقل خارجي والإشارة إلى مساره في رأس الصفحة باستخدام العلامة الفردية link كالتالي:

ونكتب كود css بشكل عادي في ملف مستقل نسميه style.css كما في الصورة ونضعه في نفس مسار ملف html السابق :

صيغة الكتابة

Selector هو محتوى html المراد تنسيقه ، property هي خاصية css ، و value هي القيمة التي نعطيها للخاصية ، القيمة والخاصية بشكل مجموع تسمى قاعدة ، وإذا تعددت القواعد نفصل بينها بالفاصلة المنقوطة .

هذه هي صيغة الكتابة في النمط الداخلي والخارجي ، أما في النمط الخطي فالأمر مختلف قليلا ، وهذه هي الصيغة:

سنبدأ في الدرس القادم إن شاء الله تعلم أنواع المعرفات Selectors ، وبعد ذلك نتعلم كيفية التنسيق بلغة css ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.