تنسيق صفحات الويب باستخدام لغة CSS

تنسيق صفحات الويب باستخدام لغة CSS

أهـلاً و سهلاً بكم في هذا الفصل من دورة إنشاء موقع على الويب !  💡 

 

مدخل للغة  css 

css

عندما تعلمتُ لغة HTML منذ سنوات لم أكن أسمع بلغة إسمها CSS ، بل تعلمتُها مُنْدمِجةً و مُتَداخلةً بعضها في بعض دون التفريق بينهما  🙄  و كُنْتُ أكتب رموز اللغتين معاً ، بل كنت جِدَّ مسرورٍ بنتائجها! و اليوم أدركت أن فصلهما عن بعض كان فكرةً  جيدةً و مفيدةً !

لا شك أن حصة HTML كانت شيقةً ، و أن اكتشافنا لها كان مُهِمّاً ومُمْتِعاً . و بما أن صفحات الويب لا تخلو من رموز و أكواد HTML فإن تنسيق محتوى هاته الصفحات باتَ ضرورةً مُـلِحَّةً كي يَنْعَم الزائر  بالشكل الجميل و الهيكلة  المقبولة. في هاته الحصة سنكتشف قُدُرات CSS على تزيين البيت الذي بنيناه  بلغة HTML.

إذا كنت ممن فهموا لغة  HTML  فلن تَـتْعَبَ في فهم  CSS لأنهما ينحدران من ينبوع واحد . و إن شئت فقل يكمل أحدهما الآخر. 

دعنا نتعرف في هذا الفصل على عمل CSS :

 ما هـو CSS؟  كيف سيتم كتابة رموزه؟ وأين سنكتب هاته الرموز ؟

ربما تقول: – و لما كل هاته الثرثرة ؟ أدخل في الموضوع  و دعنا من التعريفات 😯  حسناً! عليك أن تعلم أن لغة CSS ليست معقدة كما يتهيأ لك ، وأن أساسياتها و كيفية استخدامها تُحَتِّم عليك التَّحلي بالصّبر 😆  . و لكي لا أطيل عليك فإني أخبرك شيئاً  غايةً في الأهمية! ” إن  HTML بدون CSS هو عبارة عن حديقة جرذاء لا نبات فيها و لا ماء  🌲💦 و لنا في الآتي ما يثبت ذلك👌 “

إذن فالنبدأ على بركــة الله  قبل ان ينفذ صبرك !

 

ركِّـز مَعِـي:
إحفظ ما قلناه سابقاً  « لغة CSS  مكملة ل HTML » ،  و اعلم أن ما تعلمناه في الدرو س السابقة ليس هو كل شيئ عن HTML .  لا يزال هناك الكثير من الأشياء للتعلم (سوف نعود إليها كلما دعت الضرورة كي لا تبقى حائراً) .وسوف أخصص بعض المقالات لأهم أكواد و شفرات HTML لتساعدك  على  بناء موقع جذّاب .  دَعْنا من كل هذا ، فنحن الآن بصدد  تعلم لغة  CSS.

ما هـو CSS؟

CSS  هو  اختصار ل Cascading Style Sheets و تعني « صفحات الأنماط الانسيابية » و هو مكمل للغة HTML.

CSS  هو الذي:

  • يسمح لك باختيار لون النص الخاص بك.

    يسمح لك بتحديد الخط المستخدم على موقعك.

     يحدد حجم النص ، الحدود ، الخلفية، يمين، شمال ، وسط …

وأيضا ، هو الذي يصمم التخطيط الذي تريد أن يظهر به موقعك. سيمكنك من قول: أريد أن تكون القائمة الخاصة بي على اليسار، عرضها كذا و خلفيتها كذا و حدودها كم ➡ ، وأن رأس موقعي مثبتًا في الأعلى وأنه دائمًا مرئي ، و الصورة يجب أن تكون في الجانب الأيسر من الكتابة، وما إلى ذلك.


 

تذكر دائماً أننا بفضل HTML ، تمكنا من كتابة محتوى موقعنا ، ولكنه كان غير جميل و ممل يؤذي العين ! و لكننا مع CSS سنجعله منسقاً و يبدو بمظهر أنيق و جذاب ( كل هذا ذكرناه مع المثــال)

كيف دخل CSS على HTML؟

 

سيكون ممتعاً لو عرفنا كيف كان يشتغل HTML  قبل ولادة CSS  😆  

خرجت HTML إلى الوجود  سنة 1991 لكن  CSS   لم ترى النور إلا سنة  1996. ومن خلال هاته التواريخ ربما ستسأل ،  كيف كان تنسيق صفحات الويب ما بين   1991 إلى 1996؟

جسنـاً ! كما ذكرت في مقدمة هذا الدرس أنني لم أكن أسمع في البداية بلغة إسمها  CSS   ; و أنها كانت HTML  وحدها توفي بالغرض مع تنسيقات ما زالت تعمل لحد الآن و لكنها حتماً ستندثر، و سنعرف لماذا ؟ سأدرج مثال لهذا التنسيق القديم الحديث ، فَلِكَيْ نلون  الكتابة كنا نكتبها داخل هذا الرمز  :

 

لكن هذا النموذج  من صفحات HTML آخذ في التعقيد ، و مع كثرة الرموز و الأكواد المبرمجة في الخلفية ، جعل تحديث صفحات الويب أكثر تعقيدًا و مضيعةً للوقت. لذلك كان لزاماً على المبرمجين أن يُنشئوا  لغة CSS. و لم يتم اعتماد هاته اللغة  على الفور من قبل مشرفي المواقع  و أنا واحد منهم ، لأنه كان من الضروري التَّخلص من بعض العادات السيئة وهذا حتماً سيستغرق بعض الوقت ⏱ . حتى اليوم ، يمكننا العثور على مواقع الويب التي تحتوي على علامات تنسيق HTML القديمة وغير المستخدمة ، مثل <font>!

CSS ودعم  متصفحات الويب

 

مثلما تطورت  HTML ، فإن  CSS كما ذكرنا سابقاً  تطورت في  أربع إصدارات :

  • CSS 1 
  • CSS 2.0
  • CSS 2.1 
  • CSS 3

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

في أوائل عام 2000 ، كان Internet Explorer هو المتصفح الأكثر شعبية ، لكن إدارته لـ CSS لم ترقى للمستوى المطلوب لفترة طويلة  حتى طـورت إصداراتها. و برزت متصفحات أخرى و أخذت مكانها  مثل Mozilla Firefox و  Google Chrome 

طَيِّبْ! قد يبدو الحديث عن تاريخ CSS مشوقاً بعض الشيء و لكن ما الفائدة؟  

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


 

أين نكتب CSS؟

لقد وصلنا الآن إلى مربط الفرس 🔑 .

تتيح لنا لغة  CSS  كتابتها في  ثلاثة أماكن مختلفة:

  • في ملف  مستقل بامتداد css.*  و يعتبر هذا النوع من البرمجة الأكثر تداولاً و هو الذي يوصي به أغلب المبرمجين.
  • في الرأس <head> لملف HTML .
  • مباشرة في أكواد  ملف HTML باستخدام الرمز style    (هاته الطريقة أصبح يتجنبها المبرمجون).

سوف نُعَرِّجُ على  هذه الأساليب الثلاثة ولكن عليك أن تعلم أن الأسلوب الأول هو الأفضل.

في ملف  css

إذن هنا  سيتم كتابة CSS  في  ملف خاص بـامتداد  CSS . (على عكس ملفات HTML التي تحتوي على الامتداد. html).

هذه  الطريقة ستوفر علينا محنة خلط كل شيء في نفس الملف. و سوف لن نتوانى في  استخدام  هذه التقنية باستمرار إن شاء الله.

لِنبدأ على بركة الله  في تطبيقهاالآن!

إذن، نشئ  ملف HTML كالتالــي:

تنسيق صفحات الويب باستخدام لغة CSS

 

واليكن ملف CSS  باسم  style.css  ، فإنك ستلاحظ  أن السطر رقم 5 يحتوي على الرابط الذي سيستدعي ملف CSS  من خلال ملف HTML  الذي نشتغل عليه.

 

.و بما أن التطبيقات ستأتي اتباعاً، أدعوك لحفظ هذا الملف بالإسم الذي تريده ، على سبيل المثال ، premierpas.html.  إلى هنا ، لا يوجد شيء خاص باستثناء العلامة الجديدة التي أضفناها.

الآن نقوم  بفتح محرر النصوص الذي نشتغل عليه   مثلاً :  ++Notepad  ونكتب أو نسخ هذا المقتطف من CSS  لنشرحه لاحقاً :

 

 

ثم إعمل حفظ لهاته الصفحة بامتداد css.  والتكن style.css

واجعل هذين الملفين :  premierpas.html  و style.css  في نفس المجلد على سبيل المثال : monsite

ملف css و ملف html جنباً إلى جنب في نفس المجلد

ملف css و ملف html جنباً إلى جنب في نفس المجلد

 

الآن افتح ملفك premierpas.html في متصفحك كما تفعل عادة. و أنظر إلى النتيجة، إنها حقاً مبهرة : فقراتك أصبحت مكتوبةً باللون الأحمر ، كما في الشكل التالي!

التلوين باستخدام css

النص مكتوب باللون الأحمر

 

إنتبــاه:
لا يتعين عليك فتح ملف   style.css  مباشرة في المتصفح.  فقط عليك فتح ملف premierpas.html وسوف يقوم تلقائيًا بالاتصال بـ  style.css.

في الرأس <head> لملف HTML

 

كما قلت في الأعلى أن هناك طريقةً أخرى لاستخدام CSS في ملفات HTML وهي إدراج شفرة CSS  مباشرة في  علامة   <style>  داخل   الرأس <head>.

إليك كيفية الحصول على نفس النتيجة بالضبط مع ملف 2pas.html  الذي يحتوي على شفرة CSS   ، تجدها  في الخطوط من 5 إلى 10 :

نفس النتيجة سواء ادراج css داخل ملف html  أو وضعه في ملف مستقل.

 

مباشرة داخل أكواد HTML 

 

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

و إليك هذا المثال:

تنسيق صفحات الويب باستخدام لغة CSS

 

كما نلاحظ أن التلوين شمل فقط الفقرة الأولى ، و إذا  أردنا تلوين الفقرة   الثانية علينا أن ندرج  css  مرة أخرى ، و قد نختار لوناً آخر .

الفقرة الأولى كتبت بالأحمر

الفقرة الأولى كتبت بالأحمر


أيُّ طَـرِيقَة تَنْصَحُنا أنْ نَخْتَار؟

بعدما تعلمنا كيف تعمل كل طريقة  على حِـدَى ، كان لا بد لنا أن نعرف الطريقة الأنسب و الأكثر استعمالاً في الوقت الرّاهن  لدى المبرمجين 💡 

الطريقة الأولى :

تبدو هاته الطريقة  متعبة و أكثر تعقيداً  من الطريقتين الأخريتين !  و رغم ذلك  فهي الأكثر استعمالاً !   لكن لماذا تريدنا أن  نختار المعقد  في حين يوجد الأسهل و النتيجة واحدة، بالاضافة إلى تجنب كثرة الملفات ؟

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

قد تقول هذا الكلام  لأنك الآن  تجـرب في ملف واحد ، فماذا لو كبر موقعك وأصبح يتكون من عدد كبير من الصفحات.  ركز معي جيداً 😯  فأنت حين تضع شفرة CSS في ملف HTML بشكل مباشر ، يتعين عليك بعدها نسخ هاته الشفرة في جميع ملفات HTML التي تنتمي إلى موقعك للحفاظ على التنسيق ! أما إذا غيرت رأيك غداً ، و اردت مثلاً تغيير الخلفية، أو تغيير لون العناوين الرئيسية أو توسيط الصور و تحديد حجمها، فسيكون عليك حينها فتح كل الملفات و التجول بين الأكواد و محتوى الصفحات بحثاً عن ما تريد تغييره . أما في حالة استعمال CSS  في ملف مستقل ، فسيبقى التغيير دائماً من هذا الملف في وقت وجيز و النتيجة ستظهر في كل الصفحات.

في هاته الحالة يتم تكرار شفرة CSS في كل ملفات HTML

في هاته الحالة يتم تكرار شفرة CSS في كل ملفات HTML

 

إذا كنت تعمل مع ملف CSS خارجي  أو مستقل، فستحتاج إلى كتابة هذه الشفيرة مرة واحدة فقط لموقعك بالكامل ، كما هو موضح في الشكل التالي.

من خلال ملف style.css نستطيع كتابة  شفيرة CSS مرة واحدة و كل الملفات تستجيب.

من خلال ملف style.css نستطيع كتابة  شفيرة CSS مرة واحدة و كل الملفات تستجيب.

 

تطبيق نمط الملف الخارجي يجعلنا نحدد رمزاً واحداً لكل الصفحات

الآن بعد أن عرفنا مكان أين ندرج  شفرة CSS ، دعنا نلقي نظرة على هذا الرمز و ندرسه بتأنٍّ لتوضيح كل رمز على حدى. ،

 الجزء الأول من شفرة CSS:

تنسيق صفحات الويب باستخدام لغة CSS

 

لو تأملنا شفيرة CSS التي كتبناها  سالفاً  نجدها تتكون من  ثلاثة عناصر مختلفة:

  1. أسماء الرموز  أول ما نكتب هو إسم  الرمز التي نريد تغيير مظهره. فإذا كنت أرغب في تغيير مظهر  الفقرات <p> ، فيجب أن نكتب p كما هو مبين في الشفيرة فوق.
  2. خصائص CSS:  يتم تخزين “تأثيرات style” للصفحة في خصائصها. هناك مثلاً ، خاصية تلوين النص و حجم الخط الذي يكتب به  و نوع الخط  و خلفيته .. إلخ.
  3. أشير إلى أن هناك العديد من خصائص CSS ، و ليس من الضروي  حفظها  كلها ، يكفي أن تكون لديك دراية بكيفية استخدامها ، وحين تضطر لاستعمالها فلن تعدم الوسيلة.
  4. القيم:  لكل خاصية CSS   قيمة يجب تحديدها مثل خاصية حجم الخط  font-size    وكذلك خاصية  لون الخط   الذي تريده    color ، إلخ.

من الناحية التخطيطية ، تبدو ورقة   CSS  مختلفة عن  HTML ، شاهد الشكل التالي و سنعود إليه بالمثال:

 

في مقتطف الشفرة هذا ، ستجد الرموز والخصائص  والقيم التي تعلمناها آنفاً.

كما ترى ، نكتب اسم الرمز  كــ h1 ونفتح المعقوفات  } و بداخلها  نضع الخصائص والقيم التي نريدها. و  يمكنك وضع العديد من الخصائص  داخل المعقوفات ، كما هو ميبن في المثال فوق.و كل خاصية يجب أن نضيف بعدها  النقطتين (:)  ثم القيمة التي تقابلها. وأخيرًا ، و في نهاية السطر نضع فاصلة منقوطة (؛).

الآن وصلنا إلى مرحلة  تعلم  عدة خواص CSS . و في الأمثلة التي ستأتي  ، سنقوم  بتغيير اللّون كخطوة أولى في عالم CSS

إلى هنا نكون قد تعلمنا فقط  هاته الشفيرة:

 

و لكن ماذا تعني ؟

بكتابتنا لهاته الشفيرة فإننا  نصدر الأمر للحاسوب بأن يكتب كل القفرات باللون الأحمر .

جرِّب تغيير إسم  الرمز المعين من خلال شفرة CSS.  إذا كتبت مثلاً  H1 ، فسيتم كتابة العنوان باللون الأحمر. غير ذلك في ملف   style.css  مثل:

 

 

 

الآن  سجل ملف CSS ، فم  إفتح صفحة HTML التي نشتغل عليها  و هناك سترى  أن العنوان تم تلوينه بالأحمر  كما في المثالل!

العنوان مكتوب باللون الأحمر

العنوان مكتوب باللون الأحمر

 

تطبيق نمط  ما  على رموز متعددة

لنأخذ رمز CSS التالي:

 

هذا يعني أن عناويننا <h1> ستظهر باللون  الأحمر  ونصوصنا الهامة<em> ستظهر باللون الأزرق. 

العنوان باللون الأحمر و النص المهم بالأزرق

العنوان باللون الأحمر و النص المهم بالأزرق

و لكن إذا كان  لهما نفس اللّون مثلاً  العناوين بالأخضر   و النصوص الهامة بالأخضر أيضاً  فهناك طريقة في CSS مختضرة و سريعة . ويتم ذلك  بجمع الرموز و التفريق بينها بفاصلة  كما في المثال التالي:

 

من خلا هذا النموذج يمكنكم استعمال عدة  رموز  للوصول إلى نتائج رائعة  .

التعليقات في CSS

كما في HTML ، يمكنك وضع التعليقات في CSS . وطبعاً لن يتم عرض التعليقات ، لأنها بكل بساطة تُعْلِمُك  بالحقل الذي  تعمل فيه كي لا تتيه عنما تعود للتغيير في الملف بعد زمن بعيد ،خصوصاً إذا كان هذا الملف طويلاً.

لا تنسى أن ملف CSS  يحتوي على جميع عناصر أنماط الموقع  في حالة فصله عن أقسام الموقع،  لذلك تجده أطول من  ملف  HTML .

.و بما أن ملف CSS يكون في الغالب طويلاً ،كان لزاماً علينا أن نكتب التعليقات التي  نستطيع بواسطتها الوصول إلى عناصر أنماط الموقع بسهولة.

 و لكن كيف تكتب  التعليقات  دون أن تظهر على صفحاتنا؟  الأمر جد سهل! فقط أُكتب  */   متبوعًا بتعليقك ، ثم   أُكتب  /* لإنهاء التعليق.

يمكن كتابة تعليقاتك على سطر واحد أو أكثر. مثلا :

 

إضغط لاستكمال الدرس

 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

380 عدد المشاهدات لهذا المحتوى
Scroll to Top