تنسيق صفحات الويب باستخدام لغة CSS
أهـلاً و سهلاً بكم في هذا الفصل من دورة إنشاء موقع على الويب ! 💡
مدخل للغة css
عندما تعلمتُ لغة HTML منذ سنوات لم أكن أسمع بلغة إسمها CSS ، بل تعلمتُها مُنْدمِجةً و مُتَداخلةً بعضها في بعض دون التفريق بينهما 🙄 و كُنْتُ أكتب رموز اللغتين معاً ، بل كنت جِدَّ مسرورٍ بنتائجها! و اليوم أدركت أن فصلهما عن بعض كان فكرةً جيدةً و مفيدةً !
لا شك أن حصة HTML كانت شيقةً ، و أن اكتشافنا لها كان مُهِمّاً ومُمْتِعاً . و بما أن صفحات الويب لا تخلو من رموز و أكواد HTML فإن تنسيق محتوى هاته الصفحات باتَ ضرورةً مُـلِحَّةً كي يَنْعَم الزائر بالشكل الجميل و الهيكلة المقبولة. في هاته الحصة سنكتشف قُدُرات CSS على تزيين البيت الذي بنيناه بلغة HTML.
إذا كنت ممن فهموا لغة HTML فلن تَـتْعَبَ في فهم CSS لأنهما ينحدران من ينبوع واحد . و إن شئت فقل يكمل أحدهما الآخر.
دعنا نتعرف في هذا الفصل على عمل CSS :
ما هـو CSS؟ كيف سيتم كتابة رموزه؟ وأين سنكتب هاته الرموز ؟
ربما تقول: – و لما كل هاته الثرثرة ؟ أدخل في الموضوع و دعنا من التعريفات 😯 حسناً! عليك أن تعلم أن لغة CSS ليست معقدة كما يتهيأ لك ، وأن أساسياتها و كيفية استخدامها تُحَتِّم عليك التَّحلي بالصّبر 😆 . و لكي لا أطيل عليك فإني أخبرك شيئاً غايةً في الأهمية! ” إن HTML بدون CSS هو عبارة عن حديقة جرذاء لا نبات فيها و لا ماء 🌲💦 و لنا في الآتي ما يثبت ذلك👌 “
إذن فالنبدأ على بركــة الله قبل ان ينفذ صبرك !
ما هـو CSS؟
CSS هو اختصار ل Cascading Style Sheets و تعني « صفحات الأنماط الانسيابية » و هو مكمل للغة HTML.
CSS هو الذي:
-
يسمح لك باختيار لون النص الخاص بك.
يسمح لك بتحديد الخط المستخدم على موقعك.
يحدد حجم النص ، الحدود ، الخلفية، يمين، شمال ، وسط …
وأيضا ، هو الذي يصمم التخطيط الذي تريد أن يظهر به موقعك. سيمكنك من قول: أريد أن تكون القائمة الخاصة بي على اليسار، عرضها كذا و خلفيتها كذا و حدودها كم ➡ ، وأن رأس موقعي مثبتًا في الأعلى وأنه دائمًا مرئي ، و الصورة يجب أن تكون في الجانب الأيسر من الكتابة، وما إلى ذلك.
تذكر دائماً أننا بفضل HTML ، تمكنا من كتابة محتوى موقعنا ، ولكنه كان غير جميل و ممل يؤذي العين ! و لكننا مع CSS سنجعله منسقاً و يبدو بمظهر أنيق و جذاب ( كل هذا ذكرناه مع المثــال)
كيف دخل CSS على HTML؟
سيكون ممتعاً لو عرفنا كيف كان يشتغل HTML قبل ولادة CSS 😆
خرجت HTML إلى الوجود سنة 1991 لكن CSS لم ترى النور إلا سنة 1996. ومن خلال هاته التواريخ ربما ستسأل ، كيف كان تنسيق صفحات الويب ما بين 1991 إلى 1996؟
جسنـاً ! كما ذكرت في مقدمة هذا الدرس أنني لم أكن أسمع في البداية بلغة إسمها CSS ; و أنها كانت HTML وحدها توفي بالغرض مع تنسيقات ما زالت تعمل لحد الآن و لكنها حتماً ستندثر، و سنعرف لماذا ؟ سأدرج مثال لهذا التنسيق القديم الحديث ، فَلِكَيْ نلون الكتابة كنا نكتبها داخل هذا الرمز :
|
1 |
<font color ="#FF00FF"> هنا تكون الكتاية </font> |
لكن هذا النموذج من صفحات 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 كالتالــي:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <link rel="stylesheet" href="style.css"/> <title>الفصل الثاني في لغة برمجة مواقع الويب</title> </head> <body> <h1>الخطـوة الأولـى</h1> <p> أتعلم الآن لغة برمجة المواقع من <em>أجل موقع رائع</em>.لاحقاً ستلاحظون الفرق!</p> <p>أهلاً و مرحباً بكم في موقعي الجديد !</p> </body></html> |
تنسيق صفحات الويب باستخدام لغة CSS
واليكن ملف CSS باسم style.css ، فإنك ستلاحظ أن السطر رقم 5 يحتوي على الرابط الذي سيستدعي ملف CSS من خلال ملف HTML الذي نشتغل عليه.
|
1 |
<link rel="stylesheet" href="style.css"/> |
.و بما أن التطبيقات ستأتي اتباعاً، أدعوك لحفظ هذا الملف بالإسم الذي تريده ، على سبيل المثال ، premierpas.html. إلى هنا ، لا يوجد شيء خاص باستثناء العلامة الجديدة التي أضفناها.
الآن نقوم بفتح محرر النصوص الذي نشتغل عليه مثلاً : ++Notepad ونكتب أو نسخ هذا المقتطف من CSS لنشرحه لاحقاً :
|
1 2 3 4 |
p { color: red; } |
ثم إعمل حفظ لهاته الصفحة بامتداد css. والتكن style.css
واجعل هذين الملفين : premierpas.html و style.css في نفس المجلد على سبيل المثال : monsite
ملف css و ملف html جنباً إلى جنب في نفس المجلد
الآن افتح ملفك premierpas.html في متصفحك كما تفعل عادة. و أنظر إلى النتيجة، إنها حقاً مبهرة : فقراتك أصبحت مكتوبةً باللون الأحمر ، كما في الشكل التالي!
النص مكتوب باللون الأحمر
في الرأس <head> لملف HTML
كما قلت في الأعلى أن هناك طريقةً أخرى لاستخدام CSS في ملفات HTML وهي إدراج شفرة CSS مباشرة في علامة <style> داخل الرأس <head>.
إليك كيفية الحصول على نفس النتيجة بالضبط مع ملف 2pas.html الذي يحتوي على شفرة CSS ، تجدها في الخطوط من 5 إلى 10 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> p { color: red; } </style> <title>الفصل الثاني في لغة برمجة مواقع الويب</title> </head> <body> <h1>الخطوة الثانية</h1> <p>أهلاً و مرحباً بكم في موقعي الجديد !</p> <p> أتعلم الآن لغة برمجة المواقع من <em>أجل موقع رائع</em>.لاحقاً ستلاحظون الفرق!</p> </body> </html> |
نفس النتيجة سواء ادراج css داخل ملف html أو وضعه في ملف مستقل.
مباشرة داخل أكواد HTML
هذه الطريقة و هي الثالثة و الأخيرة ، و هي التي كانت مدمجة منذ البداية مع أكواد HTML إذ يقوم المبرمج بإدراج CSS عند أي إضافة على عناصر HTML.
و إليك هذا المثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <HTML> <meta charset = "utf-8"/> <head> <title>الفصل الثاني في برمجة مواقع االويب </title> </head> <body> <h1> الخطوة الثالثة </h1> <p style="color: red;">أهلاً و مرحباً بكم في موقعي الجديد !</p> <p> أتعلم الآن لغة برمجة المواقع من <em>أجل موقع رائع</em>.لاحقاً ستلاحظون الفرق!</p> </body> </html> |
تنسيق صفحات الويب باستخدام لغة CSS
كما نلاحظ أن التلوين شمل فقط الفقرة الأولى ، و إذا أردنا تلوين الفقرة الثانية علينا أن ندرج css مرة أخرى ، و قد نختار لوناً آخر .
الفقرة الأولى كتبت بالأحمر
أيُّ طَـرِيقَة تَنْصَحُنا أنْ نَخْتَار؟
بعدما تعلمنا كيف تعمل كل طريقة على حِـدَى ، كان لا بد لنا أن نعرف الطريقة الأنسب و الأكثر استعمالاً في الوقت الرّاهن لدى المبرمجين 💡
الطريقة الأولى :
تبدو هاته الطريقة متعبة و أكثر تعقيداً من الطريقتين الأخريتين ! و رغم ذلك فهي الأكثر استعمالاً ! لكن لماذا تريدنا أن نختار المعقد في حين يوجد الأسهل و النتيجة واحدة، بالاضافة إلى تجنب كثرة الملفات ؟
حسناً ! هذا السؤال شغل فكري لمدة طويلة ، ثم غيرت فكرتي حين علمت أن الملف المستقل يوفر علينا الجهد و الوقت. لذلك و جب علينا التعود على التعامل مع الطريقة الأولى لأنها الأكثر استخداماً لدى أغلب مبرمجي المواقع.
قد تقول هذا الكلام لأنك الآن تجـرب في ملف واحد ، فماذا لو كبر موقعك وأصبح يتكون من عدد كبير من الصفحات. ركز معي جيداً 😯 فأنت حين تضع شفرة CSS في ملف HTML بشكل مباشر ، يتعين عليك بعدها نسخ هاته الشفرة في جميع ملفات HTML التي تنتمي إلى موقعك للحفاظ على التنسيق ! أما إذا غيرت رأيك غداً ، و اردت مثلاً تغيير الخلفية، أو تغيير لون العناوين الرئيسية أو توسيط الصور و تحديد حجمها، فسيكون عليك حينها فتح كل الملفات و التجول بين الأكواد و محتوى الصفحات بحثاً عن ما تريد تغييره . أما في حالة استعمال CSS في ملف مستقل ، فسيبقى التغيير دائماً من هذا الملف في وقت وجيز و النتيجة ستظهر في كل الصفحات.
في هاته الحالة يتم تكرار شفرة CSS في كل ملفات HTML
إذا كنت تعمل مع ملف CSS خارجي أو مستقل، فستحتاج إلى كتابة هذه الشفيرة مرة واحدة فقط لموقعك بالكامل ، كما هو موضح في الشكل التالي.
من خلال ملف style.css نستطيع كتابة شفيرة CSS مرة واحدة و كل الملفات تستجيب.
تطبيق نمط الملف الخارجي يجعلنا نحدد رمزاً واحداً لكل الصفحات
الآن بعد أن عرفنا مكان أين ندرج شفرة CSS ، دعنا نلقي نظرة على هذا الرمز و ندرسه بتأنٍّ لتوضيح كل رمز على حدى. ،
الجزء الأول من شفرة CSS:
|
1 2 3 4 |
p { color: red; } |
تنسيق صفحات الويب باستخدام لغة CSS
لو تأملنا شفيرة CSS التي كتبناها سالفاً نجدها تتكون من ثلاثة عناصر مختلفة:
- أسماء الرموز: أول ما نكتب هو إسم الرمز التي نريد تغيير مظهره. فإذا كنت أرغب في تغيير مظهر الفقرات <p> ، فيجب أن نكتب p كما هو مبين في الشفيرة فوق.
- خصائص CSS: يتم تخزين “تأثيرات style” للصفحة في خصائصها. هناك مثلاً ، خاصية تلوين النص و حجم الخط الذي يكتب به و نوع الخط و خلفيته .. إلخ.
- أشير إلى أن هناك العديد من خصائص CSS ، و ليس من الضروي حفظها كلها ، يكفي أن تكون لديك دراية بكيفية استخدامها ، وحين تضطر لاستعمالها فلن تعدم الوسيلة.
- القيم: لكل خاصية CSS قيمة يجب تحديدها مثل خاصية حجم الخط font-size وكذلك خاصية لون الخط الذي تريده color ، إلخ.
من الناحية التخطيطية ، تبدو ورقة CSS مختلفة عن HTML ، شاهد الشكل التالي و سنعود إليه بالمثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.salutations { color: red; } h1 { color: red; background-color: #d8da3d; } h2 { color: blue; right: 1em; } p { color: #B429A9; } em { color: blue; } |
في مقتطف الشفرة هذا ، ستجد الرموز والخصائص والقيم التي تعلمناها آنفاً.
كما ترى ، نكتب اسم الرمز كــ h1 ونفتح المعقوفات } و بداخلها نضع الخصائص والقيم التي نريدها. و يمكنك وضع العديد من الخصائص داخل المعقوفات ، كما هو ميبن في المثال فوق.و كل خاصية يجب أن نضيف بعدها النقطتين (:) ثم القيمة التي تقابلها. وأخيرًا ، و في نهاية السطر نضع فاصلة منقوطة (؛).
الآن وصلنا إلى مرحلة تعلم عدة خواص CSS . و في الأمثلة التي ستأتي ، سنقوم بتغيير اللّون كخطوة أولى في عالم CSS
إلى هنا نكون قد تعلمنا فقط هاته الشفيرة:
|
1 2 3 4 |
p { color: red; } |
و لكن ماذا تعني ؟
بكتابتنا لهاته الشفيرة فإننا نصدر الأمر للحاسوب بأن يكتب كل القفرات باللون الأحمر .
جرِّب تغيير إسم الرمز المعين من خلال شفرة CSS. إذا كتبت مثلاً H1 ، فسيتم كتابة العنوان باللون الأحمر. غير ذلك في ملف style.css مثل:
|
1 2 3 4 |
h1 { color: red; } |
الآن سجل ملف CSS ، فم إفتح صفحة HTML التي نشتغل عليها و هناك سترى أن العنوان تم تلوينه بالأحمر كما في المثالل!
العنوان مكتوب باللون الأحمر
تطبيق نمط ما على رموز متعددة
لنأخذ رمز CSS التالي:
|
1 2 3 4 5 6 7 8 9 |
h1 { color: red; } em { color: blue; } |
هذا يعني أن عناويننا <h1> ستظهر باللون الأحمر ونصوصنا الهامة<em> ستظهر باللون الأزرق.
العنوان باللون الأحمر و النص المهم بالأزرق
و لكن إذا كان لهما نفس اللّون مثلاً العناوين بالأخضر و النصوص الهامة بالأخضر أيضاً فهناك طريقة في CSS مختضرة و سريعة . ويتم ذلك بجمع الرموز و التفريق بينها بفاصلة كما في المثال التالي:
|
1 2 3 4 |
h1, em { color: green; } |
من خلا هذا النموذج يمكنكم استعمال عدة رموز للوصول إلى نتائج رائعة .
التعليقات في CSS
كما في HTML ، يمكنك وضع التعليقات في CSS . وطبعاً لن يتم عرض التعليقات ، لأنها بكل بساطة تُعْلِمُك بالحقل الذي تعمل فيه كي لا تتيه عنما تعود للتغيير في الملف بعد زمن بعيد ،خصوصاً إذا كان هذا الملف طويلاً.
لا تنسى أن ملف CSS يحتوي على جميع عناصر أنماط الموقع في حالة فصله عن أقسام الموقع، لذلك تجده أطول من ملف HTML .
.و بما أن ملف CSS يكون في الغالب طويلاً ،كان لزاماً علينا أن نكتب التعليقات التي نستطيع بواسطتها الوصول إلى عناصر أنماط الموقع بسهولة.
و لكن كيف تكتب التعليقات دون أن تظهر على صفحاتنا؟ الأمر جد سهل! فقط أُكتب */ متبوعًا بتعليقك ، ثم أُكتب /* لإنهاء التعليق.
يمكن كتابة تعليقاتك على سطر واحد أو أكثر. مثلا :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* style.css --------- هذا الملف مكتوب بواسطة عبدالرحيم jabism */ /* العناوين ستكتب باللون الأحمر */ h1 { color: red; } /* هاته الفقرات ستكتب باللون الأزرق */ p { color: blue; } |
إضغط لاستكمال الدرس
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.