مرحبا بكم في موقع (WEP.X) موقع متخصص في علوم التكنولوجيا والبرمجة نقدم محتوي تعليمي عن لغات البرمجة وتكنولوجيا الحاسوب
اول ما يجب ذكرة هو ان ملفات (css) يتم دمجها مع ملفات (html) لتنسيق المحتوي
كيف عمل ملفات (css) :
عند كتابة اكواد (css) يتم استخدام نفس محررات (html)
فأن محررات اكواد (html) هي مخصصة للغات الويب مثل لغة (html) او (css) او (js)
افضل محررات اكواد (html) مثل
(wep code) او (++coding) لجميع لغات البرمجة لكن هذا يعمل بلانترنت
كيف يتم كتابة خصائص (css) :
خصائص (css) هي عبارة عن خاصيات معرفة مسبقا كل خاصية له عمل معين
تكتب الخاصيات بالشكل التالي (;color:red) بحيث ان الخاصية تعتبر جزئين منفصلين بنقتطين اول كلمة وهي اسم الخاصية مثل خاصية (color) لتحديد اللون والكلمة الثانية وهي (red) وهي قيمة الخاصية التي تحدد اللون الاحمر
وتنتهي الخصائص بالفاصلة المنقوطة (;)
اول خصائص سنتعلمها وهي خصائص تنطبق علي معظم عناصر (html)
الخصية (id) تعمل مع معظم عناصر (html) وتأخذ اسم منفرد لتمييز العنصر للتعامل معه برمجيا باستخدام (js) او اخري
تأخذ قيم left right center لمحاذات النص الي اليمين او اليسار او المنتصف
تأخذ قيمتين (rtl) و (ltr) اختصار (right to left) او العكس وهي تستخدم لتحديد اتجاه القرائة من اليمين لليسار او العكس
<p align="center">hi</p>هذا مثال علي استخدام الخصائص تعمل هذه الخاصية علي وضع النص في منتصف الصفحة يعني غير ظاهر في احد جوانب الصفحة
كيف يتم تحديد العناصر التي ستطبق عليها خصائص (css)
لغة (css) له محددات خاصة لتمييز العناصر المراد تطبيق الخصائص عليها بسهولة والمحددات لها اشكال كثيرة
سنذكر بعض المحددات في البداية لعدم اختلاط الافكارالمحددات .....
هذا المحدد وهو يتم تطبيق كل الخصائص علي جميع عناصر (p) الموجودة في الصفحة
محدد (a) و (p) معا بينهم مسافة فارغة هكذا يتم التطبيق علي جميع عناصر (a) و (p) الموجودين في الصفحة
محدد (a,p) بينهم فاصلة بمعني تطبيق الخصائص علي جميع عناصر (a) الموجودة داخل عنصر (p)
يتم دمج (css) مع (html) بثلاث طرق مختلفة
1. عن طريق وضع خاصية (css) في عنصر (html) نفسه كخاصية
2. عن طريق وضع خصائص (css) في صفحة (html) ايضا لكن غي قسم head بين وسمين <style type=""></style>
وسم (style) خاص لتعيين خصائص css داخلة ويتم تحديد النوع عبر الخاصية (type) التي تأخذ قيمة (text/css) لتحديد ان هذه هي خصائص css
3. عن طريق وضع (css) في ملف مستقل بامتداد (css) ثم دمجة الي صفحة (html) من خلال العنصر (link) في قسم ال(head)
مثال...<link type="text/css"
rel="stylesheet"
/href="style.css" >
حددنا النوع في الخاصية (type) ثم الخاصية (rel) التي تحدد العلاقة بين الملفين ثم المسار في الخاصية (href)
فيديو شرح
هكذا قد اتممنا شرح اول درس في لغة (css)