برمجة مواقع الإنترنت باستخدام لغة CSS
الوصف
المصطلح CSS هو اختصار للعبارة CSS Cascading Style Sheets وهي أداة رائعة لإضافة تصميم لمواقعك، ويمكنها أن توفر عليك الكثير من الوقت باستخدامها في تصميم المواقع بطريقة جديدة تماماً، وهي لغة يجب أن تستخدم من قبل كل شخص يعمل في تصميم المواقع.
في هذا الدرس ستبدأ في تعلم هذه التقنية خلال ساعات قليلة، CSS يسهل فهمها ويمكنك أن تتعلم كل الطرق العملية للتحكم بتصميم موقعك.
تعلم CSS عملية ممتعة، وأنت تقرأ هذا الدرس تذكر أ ن تأخذ وقتاً لتجري بعض التجارب وترى ماذا تعلمت من كل درس.
استخدام CSS يتطلب معرفة أساسيات HTML،إذا لم تكن تعرف HTML فيمكنك أن تبدأ بدرس HTML قبل أن تتعلم CSS.
ما هي البرامج التي أحتاجها؟
تجنب استخدام برامج مثل فرونت بيج أو دريمويفر أو مايكروسوفت وورد عند قراءة وتطبيق هذا الدرس، هذه البرامج لن تساعدك على تعلم CSS، بدلاً من ذلك ستعيقك وتؤخر تعلمك للتقنية.
كل ما تحتاجه هو محرر نصي.
مثلاً مايكروسوفت ويندوز يأتي مع برنامج يسمى Notepad المفكرة ، وهو غالباً ما يوضع في قسم Accessories أدوات الذي تجده في قسم Programs برامج ، وبإمكانك استخدام برامج مماثلة في أنظمة التشغيل الأخرى مثل Pico في لينكس وSimple text لنظام ماك.
المحرر النصي البسيط هو أداة مثالية لتعلم HTML وCSS لأنه لا يؤثر أو يغير ما كتبته من أوامر، بهذه الطريقة نجاحك وأخطائك تعتمد عليك وحدك وليس على البرنامج، وهذا يبسط عملية التعلم لأنك تستطيع كشف الأخطاء بسرعة وسهولة.
يمكنك أن تستخدم أي متصفح لهذا الدرس، ونحن نشجع على أن تستخدم أحدث المتصفحات وتقوم بتحديث متصفحك دائماً.
متصفح ومحرر نصي، هذا كل ما تحتاجه.
تأليف:
درس ؟: كيف تعمل تقنية0655 ؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول؛ ستتعلم أساسيات 055 وما هي
الوسوم اللازمة لتستخدم 055 في وثيقة. 1471/11
الكثير من خصائص 055 تشبه تلك المستخدمة في1471//1 ١ لذلك إذا تعلمت 471/11
واستخداماتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم 055 بسهولة؛ لنلقي نظرة على هذا
المثال الأساسي.
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام 471/1 يمكننا أن تنجز ذلك بهذه الطريقة:
مع 055 يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
ا تلاحظ أوامر 055 تتشابه كثيراً مع-1ا/471] ١ والمثال أعلاه يوضح لك الأسلوب الأساسي
القيمة؛ قيمة خاصية لونا
مثل 880000 الخاصية: يمكن إن التي ستطبق
لون الخلفية
تفعيل 055 في صفحة 1471/0
هناك ثلاث طرق يمكن أن تستخدمها لتفعيل 0655 في صفحةا/171] ؛ هذه الطرق مشروحة أدناد؛
الطريقة :١ ضمن وسوم 1171/1 باستخدام خاصيةعا/51
إحدى الطرق لتفعيل 055 في 1471/1 هي باستخدام خاصيةع5771 ؛ لنأخذ مثالاً على أساس
المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة؛ يمكن تطبيق هذا الأمر بهذا الشكل
جار 420000 عه 1م -9هنة2019 511/1625 لإ وط>
الطريقة ": ضمت ملف 1471/1 باستخدام وسم 51/16
الطريقة “: ملف خارجي
هذه هي الطريقة الأفضل؛ وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر055 ؛ خلال هذا
الدرس سنقوم باستخدام هذه الطريقة لجميع الأمتلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة059. ؛ ومثل الملفات الأخرى يمكنك أن
تضعه في مزود موقعك أو على القرص الصلب.
مثلاً؛ لنقل أن ملف التصميم لديك اسمه 90716.099 وهو موجود في مجلد اسمهع9171 ؛ هذه الحالة
يمكن توضيحها أكثر من خلال هذا الرسم
المهم هنا هو إنشاء رابط بين ملف 1171/1 وملف التصميم(517/16.059) + مثل هذا الرابط يمكن
إنشاءه من خلال سطر واحد في: 1471/11
لفقم لاع جع تر 517156" جلعع غاصتد>
لاحظ كيف أن مسار الملف حددناه باستخدام خاصية.ع ع 1115
هذا الأمر يجب أن يوضع في قسم رأس الصفحة؛ أي بين وسمي <1:880> و <11620/>كما في
المثال الآ
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف 0655 عندما يقوم بعرض ملف
الجميل هنا أنك تت ربط العديد من ملفات .471/11] بملف تصميم واحد؛ بمعنى آخر يمكن لملف
تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات.. 147111
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهده إذا أردت مثلاً أن تغير لون خلفية موقع
يحوي ٠٠١ صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل ٠٠١ ملف
بنك ,باستخدام555 يمكن تغيير ماتزيد خلال تواتي بتغرير سنطى واحد في للف التصفيي.
لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك
قم بتشغيل برنامج المفكرة (01016080) أو أي محرر نصي؛ وقم بإشاء ملفين. أحدهما 471/1]
الصفحة 6
الآن قم بوضع الملفين في نفس المجلد؛ تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
قم بفتح ملف 0948001.1100 في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية»
تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
أسرع واقرأً الدرس اللاحق حيث سنلقي نظرة على بعض خصائص.055
الدرس »: الألوان والخلفيات
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك. سنقوم أيضاً بتعلم طرق متقدمة لتحديد
موقع صورة الخلفية؛ نشرح هذه الخصائص في:055
لون المقدمة: خاصية 00/0"
خاصية -01 01ح تصف لون عنصر .471/11]
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن؛ كل العناوين رمزت
باستخدام وسم< 1:1> ؛ المثال أدناه سيقوم بتوضيح كيفية تحويل كل <111> إلى اللون الأحمر:
شاهد المتل
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه؛ أو بأن تختار اسم
اللون"260" + أو _من خلال اقيم 868 والتي تعني 860 و 5/0636:660؛
خاصية 60107 -016917010170 152 تحدد لون خلفية أي عنصر.
العخنصر <17007> يضم كل محتويات وثيقة 471/1 ؛ لذلك لتغيير خلفية الصفحة بأكملها يجب أن
نفعل خاصيةٌ 01ا080149701000-00 على العنصر. <017 56>
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص؛ في المثال أدناه
قمنا باختيار ألوان خلفية لعخصري <07 50> و.<1٠>
) فوط
990007 عملم
شاهد المثل
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر < 11> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة
الصورة كظفية"111896- 02016901170"
خاصية 0129170101110-1003808 153 تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدام صورة فراشة في المثال أدناه؛ يمكنك إنزال الصورة لتجرب بنفسك على
حاسوبك؛ قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك؛ أو يمكنك استخدام أي صورة
لإدخال صورة_الفراشة . كخلفية للصفحة قم بتفعيل خاصية 08069:0000-00808
للعنصر <1007> وحدد مسار الصورة:
م270066» عملم -ة ماوع وو 2ط
690007 عملم
+ شاهد المثل
وضعت في نفس المجلد مع ملف التصميم؛ يمكنك أن تحدد مسار الصور في مجلدات أخرى
باستخدام ("911./ا11 10116 1012965/5/.. ")11لا أو حتى العنوان الكامل
تكرار صورة الخلفية"881م1701000-78 58.0149"
هل لاحظت في المثال أعلاه أن صورة الفراشة ا وأفقياً لتغطي كامل الصفحة؟
الخاصية +3 766 -011110 172.012 تتحكم بتكرار ا
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية. 1ج عم ع 011110-17 ع و 616 158
مثال الوصف القيمة
الصورة ستتكرر أفقياً داج عم عع :فطع -و صنو وو 382
شاهد المثتل | الصورة ستتكرر عموناً | قمع :316 08 2010710-17 و01 158
تلقل الصورة ستتكرر أفقياً
لن تتكرر بأي شكل عقعمع-م1 : عاقعمع ع -ة نوع وك 2ط
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
الصفحة
شاهد المثتل
تثبيت صورة الخلفية"0801691010070-311861717801"
الخاصية 2110601 01091201170-3118 .178 تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة
مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة؛ بينما الصورة المتحركة
ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصيةً 0 61:118 318 016917011110 158 +
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
مثال الوصف القيمة
شاهد المثال | الصورة ستتحرك مع الصفحة| 5610011 :01 01110-31580111 12و16 1388
شاهد المثل الصورة ستبقى ثابتة 08 : لاصعسطا 2 01001-2 1338016917
المثل ادناه يبين كيفية اختيار القيمة المناسبة
صورة الخلفية:
كتاب أساس التعامل مع لغة برمجة الإستايل CSS .
كتاب يشرح الCSS في 15 درسا.
شرح مفصل وشامل للغة تصميم المواقع لغة CSS تأليف:
من المغرب ايت عيسى اوبراهيم احب ان انشئ الكتب تعلم تأليف: