القائمة الرئيسية

الصفحات

ماهي لغة css ؟ تعلم لغة css بكل سهولة من خلال هذا المقال

لغة css

لغة css أو (cascading style sheet) هي لغة مكملة للغة html التي بدورها تستخدم لبناء هيكل موقع الويب و إنشاء العناصر داخل الصفحة دون تحكم في التصميم . بعد هذه الخطوة نستعمل لغة css لتنسيق العناصر و تحديد الشكل الذي تظهر عليه  من لون و حجم و كل ما يتعلق بالتصميم . وتعتبر لغة وصفية و ليست لغة برمجة .
قبل إبتكار لغة css كان التعديل على شكل عناصر الصفحة يتم بجهد منفرد من عنصر لآخر فيأخد وقتا طويلا بالنسبة للمصمم و يكلف ميزانية لا يستهان بها بالنسبة لأصحاب المواقع , ولا ينتهي الأمر عند هذا الحد بل يسبب هذا الأسلوب عدة مشاكل فيما بعد مثل صعوبة تصفح الموقع و ضعف إستجابته بسبب حجمه الكبير .
لكن في عام 1994 إبتكر النرويجي هاكوم فيوم لاي لغة css بهدف تنسيق صفحات الويب بكفاءة عالية . و تم إطلاق النسخة الأولى منها سنة 1996 بإسم css . و في عام 1998 تم تحديث اللغة و إطلاق الإصدار الثاني لها بإسم css2 لتكتمل التحديثات بإطلاق النسخة الأخيرة لحد الآن بإسم css3 , ونظرا لمميزاتها و أهميتها الكبيرة في مجال الويب فمن وقت ظهورها عرفت إنتشارا سريعا و لاقت قبولا من طرف الشركات و الأفراد و أصبح إسمها لصيقا بمجال الويب رفقة html و Javascript . 
css لغة سهلة للتعلم لكن يجب أن يكون المتلقي على دراية بأساسيات html لذلك ننصحك بقراءة :

ماهي لغة html ؟ و في ماذا تستخدم ؟

شرح لغة css : 

أولا علينا معرفة المحدد أو selector الذي يعتبر أهم مفهوم في اللغة , المحددات هي الأنماط التي تصف شكل العنصر المراد التعديل عليه داخل صفحة الويب مثل h1 أو p أو div أو أي وسم آخر .
و يمكن كذلك التحكم في شكل عنصر html من خلال تعريف class أو id بداخله .
class : هو معرف عام تتم كتابته داخل أي وسم في ملف html بحيث يمكن تعريف أكثر من class بإسم واحد , تتم مناداته في css بإضافة رمز (.) .
id : هو معرف خاص لا تختلف كتابته عن الـ class و يعتبر فريد من نوعه و لا يصح تسمية أكثر من id بنفس الإسم , تتم مناداته في css بإضافة رمز (#) .
بما أن اللغة تصف عنصر معين في صفحة الويب فأولا نكتب المحدد أو selector الذي يصف العنصر ثم نضيف حاضنتين { } و نكتب الخاصية المراد تنسيقها داخل الحاضنتين مثل اللون color أو حجم الخط font-size و نضيف لها قيمة و نفصل بين الخاصية و القيمة بعلامة النقطتين (:) , للإنتقال إلى خاصية أخرى يجب إضافة علامة الفاصلة المنقوطة (;) . كما هو مبين .

كتابة أكواد css

توجد ثلاثة طرق أو أماكن مختلفة لكتابة أكواد css هي :
1. ملف خارجي external stylesheet .
2. تنسيقات داخلية internal stylesheet .
3. مضمنة داخل الوسم inline block .

ملف خارجي external stylesheet  

تتم كتابة تنسيقات لغة css في ملف خارجي يحفظ بصيغة css و يتم الربط بينه و بين ملف html المراد تنسيقة بوسم <link> ثم كتابة القيم التالية كما هو مبين . مع تغيير العنوان href بإسم الملف لديك , و مراعاة أمر مهم و هو أن يكون كلا الملفان في مجلد واحد .



بهذه الطريقة يمكن تنسيق أكثر من صفحة بواسطة ملف تنسيقات واحد , و تعتبر أفضل طريقة لكتابة أكواد css و ذلك لفصل المحتوى عن التصميم .

تنسيقات داخلية internal stylesheet 

بهذه الطريقة لست بحاجة لفصل الملفين لتنسيق الصفحة , بل يتم مباشرة في ملف الـhtml داخل وسم الـ<head> لكن لا يتم كتابة التنسيقات بشكل عشوائي بل تكتب داخل وسم آخر هو وسم <style> كما هو  مبين .


مضمنة داخل الوسم inline block :

سبق القول أنه قبل ظهور اللغة كان يتم تنسيق عناصر صفحة الويب بشكل منفرد و هذا هو مفاد هذه الطريقة بحيث يتم تنسيق كل عنصر في ملف الـhtml مباشرة داخل الوسم نفسه الذي يصف العنصر كما هو مبين .



الآن و صلنا لأهم جزء في المقال و هو شرح مفاهيم اللغة و كيف يمكننا التحكم في شكل الصفحة .

أساسيات لغة css

الألوان - colors

للتحكم في لون عنصر ما نكتب الخاصية color و نضيف لها قيمة حسب الصيغة التي نختارها لكتابة اللون على الشكل :
;color : name .
و توجد أكثر من صيغة و هي كالتالي :
أسماء الألوان : وهذه الصيغة هي الأكثر شيوعا بحيث نعبر عن اللون بكتابة إسمه مباشرة مثل red أو green أو blue أو yellow أو أي لون يخطر ببالك و يصل عدد الألوان إلى 140 لون تعرفها كافة المتصفحات . 
hexAdecimal أو الستة عشري : و هنا نعبر عن اللون برمز يتكون من 6 أرقام أو حروف و إضافة رمز # على الشكل
rrggbb# بحيث r يمثل الأحمر و g يمثل الأخضر و b يمثل الأزرق . 
صيغة rgb : في هذه الصيغة نكتب اللون على الشكل (rgb (red,green,blue مع استبدال أسماء الألوان داخل الأقواس بأرقام من 0 إلى 255 تمثل ألوان و درجات مختلفة لكل لون و يمكن كتابة نسبة مئوية لتحديد اللون .
صيغة rgba : تختلف هذه الصيغة عن السابقة بإضافة alpha الذي يمثل شفافية العنصر , بحيث يمكن تحديدها بكتابة رقم إبتداءا من 0.0 إلى 1.0 على الشكل (rgb (red,green,blue,alpha
صيغة hsl : و تكتب مثل rgb لكن لا يتم تحديد الألوان و إنما التحكم في الألوان و طبقا لذلك نحصل على اللون المطلوب بحيث : (hsl (hue , saturation , lightness
صيغة hsla : نفس الصيغة السابقة مع إضافة الشفافية alpha

الخلفيات - background

الخلفية أو background هي خاصية للتعديل على خلفية عنصر ما و أولها background-color للتحكم في لون الخلفية أو إضافة صورة لها عن طريق الخاصية background-image أو تحديد الوضع أو الركن الذي تشغله background-position و كذلك تحديد ثباتها و حركتها عند التمرير للأسفل background-attachment.

background-color : و كما يتضح من إسم الخاصية أنها للتعديل على لون خلفية العنصر و ذلك بإدخاله بإحدى الصيغ التي ذكرناها .
background-image : يمكن إضافة صورة كخلفية للعنصر مثلا خلفية لوسم <body> و بذلك تشغل كل مساحة الموقع أو خلفية لـ <div> تغطي المساحة التي يشغلها أو حتى لوسم <nav> و بذلك تكون خلفية لشريط أقسام الموقع . و تكتب على الشكل ;("background-image:url("name.jpg . مع الأخذ في الإعتبار صيغة الصورة و تحديد مكانها في الحاسوب إذا لزم الأمر ذلك .
background-repeat : بما أن قياس صورة الخلفية ليس دائما مساو لمساحة العنصر فإن المتصفح بشكل تلقائي يكرر الصورة إلا أن تغطي كل مساحة العنصر فللتحكم في ذلك نستعمل الخاصية background-repeat , في حالة عدم التكرار نضيف القيمة no-repeat أما لتكرار صورة الخلفية عموديا نضيف القيمة repeat-y و أفقيا نضيف القيمة
repeat-x .
background-position : إذا كان قياس صورة الخلفية مختلف عن مساحة العنصر يمكن تحديد الجهة التي تشغلها الصورة بإضافة القيمة مثلا top right أو bottom left و تحديد مكانها عموديا و أفقيا .
و للتحكم أكثر في وضع الصورة نستعمل النسب المئوية مثلا 25% 40% و بهذا سيضع المتصفح الصورة 25 بالمائة عموديا و 40 بالمائة أفقيا .
background attachment : و هي خاصية تستخدم لتحديد ثبات أو حركة العنصر عند التمرير للأسفل فعند إضافة القيمة scroll _و هي القيمة الإفتراضية في المتصفح_ فإن العنصر سيتم تمريره و تخطيه و عند إضافة القيمة fixed سيبقى العنصر ثابتا في حالة التمرير .

وحدات القياس - units

px : و نقصد به بيكسل و هي أصغر نقطة في الشاشة على إعتبار أن شاشة الحاسوب متكونة من عدد كبير من البيكسل المصفوفة بجانب بعضها .
pt : أو point 
in : أو inches و هي وحدة قياس معروفة تساوي 2.54 سم و تساوي 96 بيكسل.
cm : السنتيمتر و هي وحدة قياس غنية عن التعريف .
mm : الميليمتر و هي وحدة معروفة كذلك و تساوي 10 سنتيمتر .
em :هي وحدة قياس نسبية تحدد قياس العنصر بالنظرلحجم الـ font size الخاص به , فمثلا العنصر <h1> قياس خطه 50px , فإذا أدخلنا قيمة قياس الهوامش الداخلية 1em فإنها ستكون 50px و إذا كانت 2em فقيمتها تعادل 100px و هكذا


rem : هي وحدة قياس نسبية تحدد القياس بالنسبة للعنصر الجذر <html> فإذا فرضنا أن قياس الخط في هذا العنصر  16px فإن 1rem = 16px و 2rem = 32px و هكذا .

% : علامة النسبة المئوية تستخدم كوحدة قياس و تعتبر من أهم الوحدات و بواسطتها يمكن إستخدام قياس العنصر لتحديد قياس العنصر الذي بداخله بنسبة مئوية , فمثلا يوجد في صفحة الويب <div> عرضه 200px و بداخله صورة نحدد عرضها 25من قياس <div> و منه يكون عرضها  50px  .

الخطوط - fonts

font-family : أو عائلة الخطوط من خلال هذه الخاصية نغير الخط الإفتراضي إلى خط آخرمثل tahoma أو arial و غيرهم , و لكن يوجد بعض الخطوط لا تعمل على جميع المتصفحات و عند إختيارها نضيف خطوط أخرى للإحتياط . و من جهة أخرى توجد مجموعة من الخطوط تدعى web safe fonts أي الخطوط الآمنة و يمكنك إستعمالها بكل أمان .
font-size : و هي خاصية للتحكم في حجم الخط بإحدى وحدات القياس و أشهرها px .
font-style : هذه الخاصية الغرض منها تغيير شكل الخط إلى مائل و ذلك بإضافة القيمة etalic أو تركه كما هو بالقيمة normal و هي القيمة الإفتراضية و هناك قيمة أخرى هي oblique و تشبه إلى حد كبير etalic  لكنها أقل دعما من قبل المتصفحات .
font-weight : من خلالها يمكن جعل الخط سميك بإرفاق القيمة bold و القيمة الإفتراضية هي normal .
font-variant : حيث يمكن من خلال هذه الخاصية التحكم في حجم الحروف مع إبقاء نوع الحروف كما هو سواء أحرف كبيرة capital أو صغيرة small , القيمة الإفتراضية لهذه الخاصية هي normal و القيمة small-caps تقوم بتصغير حجم الحروف بالرغم من أن شكلها يبدو كأنها حروف كبيرة capital .

النصوص - text

color : و هي خاصية تستخدم لتغيير لون الخط .
text-align : أي محاذاة النص بحيث توجد ثلاث مواضع للنص إما يمين الصفحة بإرفاق القيمة left أو في اليسار بإرفاق القيمة right أو في الوسط center و توجد قيمة مهمة أيضا وهي justify بحيث تتم محاذاة النص في الوسط و تكون بداية السطور و نهايتها في نقطة واحدة و كأن النص شكل هندسي .
text-decoration : أو تزيين النص و تستخدم هذه الخاصية في تصميم الويب لوضع خط إما تحت النص بإرفاق القيمة underline أو وضع خط فوق النص بإرفاق القيمة overline أو خط يمر في وسط النص بالقيمة line-through . و هناك قيمة إفتراضية لهذه الخاصية هي none تستعمل غالبا لحذف الخط تحت النص إذا كان بداخل وسم <a> . 
text-transform : تستخدم هذه الخاصية للتحكم في شكل الحروف في النص إما حروف صغيرة بكتابة القيمة lowercase أو حروف كبيرة بالقيمة uppercase أو حروف كبيرة في بداية الكلمة و باقي الحروف صغير عن طريق القيمة capitalize 
text-indent : عند بداية الفقرة أو النص عادة ما نجد مسافة في أول السطر و هذا هو الغرض من هذه الخاصية و يتم قيمة لها لتحديد المسافة .
letter-spacing : تستعمل لتحديد المسافة بين الحروف في الكلمة و تكون القيمة إما موجبة لإظهار مسافة بين الحروف أو سالبة لتقريب الحروف من بعضها و إلغاء المسافة الإفتراضية بينها .
line-height : و كما يظهر من الإسم هي لتحديد المسافة بين أسطر النص بحيث تكون القيمة عدد عشري لدقة أكثر و في الغالب لا يكون العدد كبير لأن وحدة القياس هي em .
word-spaccing : و تستخدم لتحديد المسافة بين الكلمات . و يمكن أن تكون قيمتها سالبة أو موجبة . 
direction : تستخدم لتحديد إتجاه النص و تتضمن قيمتان إما rtl أي right to left أو ltr أي left to right .و تختلف عن محاذات النص text-align أن هذه الأخيرة تحدد محاذاة النص بالنسبة للعنصر التي يتضمنه أما direction فتحدد إتجاه النص بشكل عام .

الهوامش الخارجية - margin

نقصد بالهوامش الخارجية المسافة المحيطة بالعنصر من الجهات الأربعة (top , right , bottom , left) و التي تكون خارج مساحته و يمكن كتابة هذه الخاصية margin كما يمكن تحديد الجهة مثلا margin-top أو margin-left و هكذا .
و هناك عدة قواعد لابد من إتباعها عند إنشاء أو تعديل هوامش الخارجية للعنصر .
يمكن التحكم في كل الجهات المحيطة بالعنصر عن طريق الخاصية ;:margin بكتابة أربع قيم كل قيمة تحدد هامش إتجاه معين على الترتيب (top , right , bottom , left) , أما في حال كتابة ثلاثة قيم فإن القيمة الثانية تنسب لـ (right , left) 
و في حال إدخال قيمتين فإن القيمة الأولى للأعلى و الأسفل و القيمة الثانية لليمين و اليسار .

الهوامش الداخلية - padding

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

الإطارات - border

يمكن إنشاء إطار حول العنصر و تحديد لونه و شكله و جهته .
border-style : و هي خاصية لتحديد شكل الإطار . حيث يوجد العديد من الأشكال و هي كالآتي :
dotted : نسبة إلى dot أي إطار منقط .
dashed : نسبة إلى كلمة dash و شكله خط متقطع .
solid : أي إطار صلب عبارة عن خط متواصل . 
double : إطار شكله مزدوج خطين متوازيين .
groove : إطارثلاثي الأبعاد على شكل أخدود .
ridge : إطار ثلاثي الأبعاد .
inset : شكله يشبه مجسم مساحته تمتد للداخل . 
outset : شكله يشبه مجسم مساحته تمتد للخارج .
none : و هي القيمة الإفتراضية ماعدا لبعض العناصر مثل حقل الكتابة <input> أو الأزرار <button> تكون قيمتها اللإتراضية إطار من نوع solid .
hidden : أي أن الإطار غير مرئي و يكمن الفرق بين هذه القيمة و none أن none محذوف من الصفحة و لاوجود له بينما hidden غير مرئي في الصفحة .
خاصية border-style إلزامية و لا يظهر الإطار بدونها  .
border-color : و هي خاصية لتحديد لون الإطار .
border-width : أي عرض الإطار و سمكه فلا توجد قيمة ثابتة و يمكن إدخال العرض بما يتناسب مع التصميم . 
يمكن وصف إطار جهة معينة دون باقي الجهات و ذلك بإضافة جهة الإطار ضمن الخاصية عوض كتابة border-style نكتب على سبيل المثال border-top-style . و بدل كتابة border-width نكتب border-left-width و هكذا مع الجهات الأربعة .
border-radius : تعتبر هذه الخاصية مختلفة في وظيفتها بحيث تستخدم لإنشاء حواف دائرية بإرفاق قيمة معينة . 

العرض و الإرتفاع - width & height

توجد ستة خاصيات للتحكم في أبعاد العناصر التي تشمل العرض و الإرتفاع و هي :
width : للتحكم في عرض العنصر وتحديد الإمتداد الأفقي له . بحيث تختلف عن padding في أنها تحدد العرض الكلي للعنصر أما padding عند إضافته فإن المساحة التي يشغلها تكون مضافة للعرض الكلي للعنصر . و هنا قد يواجه المصمم بعض المشاكل في القياسات لذا يجب إدخال الخاصية box-sizing و إرفاق القيمة border-box لتحديد العرض الفعلي للعنصر بالرغم من وجود الهوامش الخارجية و الإطار .
height : للتحكم في إرتفاع العنصر , و تحديد الحيز العمودي الذي يتموضع بداخله المحتوى .
max-width و min width : هذان الخاصيتان كما هو مبين من الإسم تحددان العرض الأقصى و الأدنى الذي يمكن أن يشغله العنصر و تستخدم غالبا لإعداد صفحات ويب متجاوبة بحيث تكون لها قياسات مضبوطة لا تتجاوزها .
max-height و min-height : على عكس الخاصيتان السابقتان هاذان الخاصيتان لتحديد العرض الأدنى و الإرتفاع الأدنى  الذي يمكن أن يصل عنصر ما .
كانت هذه أهم أساسيات css .
هل اعجبك الموضوع :

تعليقات