مقدمة في CSS

‫مقدمة في ‪CSS‬‬
‫مقدمة في ‪CSS‬‬
‫في هذ ِه الدورة ستتعلم ‪ CSS‬والتي تعتبر اختصار من ‪ .Cascading Style Sheets‬وهي لغة لوصف تنسيق ملفات ‪ HTML‬وكيفية عرض‬
‫عناصرها‪ ،‬مما يعني أن ‪ CSS‬هي جزء أساسي من تصميم الويب أو ‪ Web design‬ألنها تحدد طريقة عرض وتنسيق صفحات الويب‪ ،‬ويمكن‬
‫كتابة ‪ HTML‬بدون ‪ CSS‬لكن ستكون طريقة عرض العناصر بسيطة وغير منسّقة ّ‬
‫وجذابة‪ ،‬كما أنه اليُمكن كتابة ‪ CSS‬بدون ‪،HTML‬‬
‫باختصار ‪ CSS‬عبارة عن مجموعة من القواعد للتنسيق تسمح للمتصفح معرفة‪ V‬كيفية عرض العناصر الموجودة بملف ‪ ،HTML‬وتساعد على‬
‫تفاعل المستخدم مع صفحات الويب‪.‬‬
‫طريقة كتابة ‪ CSS‬و‪CSS Syntax‬‬

‫في ‪ CSS‬هناك جزئيين أساسيين عند تعريف أي من طرق التنسيق‪ -1 :‬الخاصيّة‪ :‬هي اسم لنوع محدد للتنسيق‪ -2 .‬القيمة‪ :‬هي ما تريد تحديده‬
‫لتلك الخاصيّة‪ .‬مثال لتعريف خاصيّة في ‪:CSS‬‬
‫‪color:‬‬ ‫;‪red‬‬
‫نُالحظ في المثال أعاله أن الخاصية هي ‪ Color‬أو لون والقيمة هي ‪ Red‬أو أحمر‪.‬‬
‫وهناك ثالث طرق إلضافة كود ‪ CSS‬لتنسيق صفحات الويب‪:‬‬
‫طريقة ‪External CSS‬‬

‫وهي عبارة عن ‪ External Style Sheet‬أو ملف منفصل يوجد فيه جميع التنسيقات ويمكنك تغيير تنسيق موقع كامل من ملف واحد فقط‪،‬‬
‫ويجب لكل ملف ‪ HTML‬أن يحتوي على ما يشير لملف التنسيق ‪ CSS‬وذلك يكون عن طريق العنصر في ملف ‪ .HTML‬مثال على طريقة‬
‫إضافة ملف ‪ CSS‬واإلشارة له عن طريق العنصر من ‪:HTML‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<link rel="stylesheet" href="style.css‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<h1>CSS‬‬ ‫>‪Course </h1‬‬

‫‪<p>Learning‬‬ ‫>‪CSS is fun!</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫وملف ‪ CSS‬المشار إليه في المثال أعاله من الممكن أن يتم كتابته في أي ‪ Text Editor‬أو برنامج كتابة لكن بشرط أن يكون الملف بصيغة ‪css‬‬
‫وال يحتوي الملف على أي من عناصر ‪ .HTML‬مثال على كيفية شكل ملف التنسيق محفوظ بصيغة ‪ css‬كالتالي‪:‬‬
‫{ ‪h1‬‬
‫‪color:‬‬ ‫;‪blue‬‬
‫‪text-align:‬‬ ‫;‪center‬‬
‫}‬
‫{ ‪p‬‬
‫‪color:‬‬ ‫;‪pink‬‬
‫‪text-align:‬‬ ‫;‪center‬‬
‫}‬
‫طريقة ‪Internal CSS‬‬

‫وهي طريقة يمكن استخدامها في حال هناك تنسيق مختلف لكل صفحة ويب ويكون التنسيق مكتوب داخليًا في ملف ‪ HTML‬وتحديدًا في داخل‬
‫العنصر‪ >style< ‬الموجود في داخل العنصر ‪ .‬مثال على ذلك‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{ ‪h1‬‬
‫;‪color: blue‬‬
‫;‪text-align: center‬‬
‫}‬
‫{‪p‬‬
‫;‪color: pink‬‬
‫;‪text-align: center‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<h1>CSS‬‬ ‫>‪Course </h1‬‬
‫‪<p>Learning‬‬ ‫>‪CSS is fun!</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫طريقة ‪Inline CSS‬‬

‫وهي طريقة يمكن استخدامها في حال كان هناك تنسيق ُمختلف لكل عنصر‪ .‬ويكون التنسيق مكتوب بداخل العنصر المراد تنسيقه وذلك بإضافة‬
‫السمة ‪ style‬والتي من الممكن أن تحتوي على خصائص ‪ .CSS‬مثال على ذلك‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪<h1 style="color:blue;text-align:center;">CSS‬‬ ‫>‪Course </h1‬‬
‫‪<p style="color:pink;text-align:center;">Learning‬‬ ‫>‪CSS is fun!</p‬‬
‫>‪</body‬‬
‫مفهوم ‪Selectors‬‬
‫يستخدم ‪ Selector‬لتحديد ماهو العنصر المراد تنسيقه من عناصر‪ HTML ‬فيجب قبل أي عملية تنسيق وكتابة خاصيّة وقيمة لها يتم قبلها تحديد‬
‫‪ Selector‬وهو الذي يحدد العنصر الذي سيتم تطبيق التنسيق عليه‪ ،‬مثال على طريقة كتابة ‪ Selector‬كالتالي‪:‬‬
‫وهناك عدة أنواع من ‪ Selectors‬ومن أبرزها‪ Universal Selector :‬وهو الذي تكون بدايته عالمة‪ * ‬و‪ Class Selector‬الذي يبدأ بنقطة‬
‫متبوعه باسم‪ Class ‬تم وضعه مسبقًا بداخل العنصر المراد تنسيقه و‪ Element Selector‬وهو الذي تكون بدايته اسم العنصر المراد تنسيقه‬
‫مثل ‪ h1‬و‪ Id Selector‬الذي يبدأ باسم ‪ Id‬تم وضعه مسبقًا بداخل العنصر المراد تنسيقه‪ ،‬وهناك أيضًا ‪ Grouping Selector‬وهو الذي يختار‬
‫أو يجمع العناصر المراد تنسيقها بنفس التنسيق مثل‪ h1, h2, p :‬وتم الفصل بينهم بعالمة الفاصلة‪.‬‬
‫األلوان‬
‫هناك عدة طرق إلضافة األلوان في ‪ CSS‬إما عن طريق كتابة اسم اللون مباشرة أو بطريقة ‪ RGB‬أو بطريقة ‪ RGBA‬وأخيرًا طريقة‬
‫‪ Hexadecimal‬والتي تكون بدايتها بعالمة‪.# ‬‬
‫نسيق الخلفيات في ‪CSS‬‬
‫هناك خصائص في ‪ CSS‬لتنسيق الخلفيات مثل‪:‬‬
‫خاصيّة‪ background-color ‬لتغيير لون خلفيّة العنصر‪.‬‬ ‫‪‬‬

‫خاصيّة‪ background-image ‬لتغيير خلفيّة العنصر بحيث تكون صورة‪.‬‬ ‫‪‬‬
‫خاصيّة‪ background-repeat ‬للتحكم بتكرار الخلفيّة‪.‬‬ ‫‪‬‬
‫خاصيّة‪ background-position ‬للتحكم بموقع الخلفيّة‪.‬‬ ‫‪‬‬
‫خاصيّة‪ background-attachment ‬للتحكم ما إذا الخلفيّة تكون ثابتة ‪ fixed‬أو ‪ scroll‬متحركة‪.‬‬ ‫‪‬‬
‫وهناك أيضًا خاصيّة لتقليل أسطر الكود‪ V‬وجمع الخصائص للخلفيّة بسطر واحد فقط الحظ في المثال التالي بدون اختصار لخصائص الخلفيّة‪:‬‬
‫{ ‪body‬‬
‫‪background-color:‬‬ ‫;‪#ffffff‬‬
‫;)"‪background-image: url("img_tree.png‬‬
‫‪background-repeat:‬‬ ‫;‪no-repeat‬‬
‫‪background-position:‬‬ ‫;‪right top‬‬
‫}‬
‫‪:‬ويمكن اختصار الكود لقيمة الخصائص بالشكل التالي‬
‫{ ‪body‬‬
‫‪background:‬‬ ‫;‪#ffffff url("img_tree.png") no-repeat right top‬‬
‫}‬
‫في المثال أعاله تم اختصار الخصائص في سطر واحد وبالترتيب تكون القيمة األولى للخاصيّة‪ background-color ‬والقيمة الثانية‬
‫للخاصيّة‪ background-image ‬والقيمة الثالثة للخاصيّة‪ background-repeat ‬والقيمة الرابعة للخاصيّة‪background- ‬‬
‫‪.position‬‬
‫تنسيق النصوص في ‪CSS‬‬
‫النصوص‬
‫هناك خصائص عديدة لتنسيق النصوص في ‪ CSS‬مثل‪:‬‬
‫ع‪+‬م‪+‬ل‪+‬ه‪+‬ا‪+‬‬ ‫ا‪+‬ل‪+‬خ‪+‬ا‪+‬ص‪+‬ي‪+‬ة‪+‬‬
‫لتغيير لون النص‬ ‫‪Color‬‬
‫تحدد إتجاه النص مثالً من اليمين إلى اليسار أو العكس‬ ‫‪Direction‬‬
‫تزيد أو تنقص المساحة‪ S‬بين الحروف‬ ‫‪letter-spacing‬‬
‫لتحديد طول السطر‬ ‫‪line-height‬‬
‫يحدد المحاذاة األفقية للنص‬ ‫‪text-align‬‬
‫يحدد التزيين المضاف للنص‬ ‫‪text-decoration‬‬
‫يحدد المسافة في بداية السطر األول في أي ‪ Block‬نصي‬ ‫‪text-indent‬‬
‫يحدد تأثير الظل المضاف إلى النص‬ ‫‪text-shadow‬‬
‫يتحكم في الكتابة باألحرف الكبيرة للنص‬ ‫‪text-transform‬‬
‫لتحديد كيفية عرض المحتوى الزائد‬ ‫‪text-overflow‬‬
‫يحدد المحاذاة العامودية للنص‬ ‫‪vertical-align‬‬
‫يحدد كيفية التحكم بالمساحة‪ S‬البيضاء للعنصر‬ ‫‪white-space‬‬
‫تزيد أو تنقص المساحة بين الكلمات‪S‬‬ ‫‪word-spacing‬‬
‫الخطوط‬
‫هناك عدد من الخصائص التي يمكن استخدامها لتنسيق الخطوط في ‪ ،CSS‬منها ما يستخدم لتغيير نوع الخط أو حجمه أو شكله‪ ،‬فيما يلي‬
‫سنتعرف على أهمها‪،‬‬
‫خاصية‪font-family ‬‬
‫تستخدم لتحديد نوع خط النص‪ ،‬فمثاًل لو أردنا إضافة نوع الخط‪ Arial ‬فيمكننا كتابته على النحو التالي‪:‬‬
‫{ ‪p‬‬
‫‪font-family:‬‬ ‫;‪Arial‬‬
‫}‬
‫خاصية‪ font-family ‬من الممكن أن تأخذ أكثر من قيمة خط إلنشاء ما يسمى ‪ Fallback System‬أو نظام االحتياط‪ ،‬في حال أن‬
‫المتصفح ال يدعم نوع الخط األول فإنه ينتقل لنوع الخط الثاني وهكذا‪ V،‬يمكننا القيام بذلك بهذا الشكل‪:‬‬
‫{ ‪p‬‬
‫‪font-family:‬‬ ‫};‪Arial, "Times New Roman", sans-serif‬‬

‫ضا اختصار الكود بجمع القيم لتنسيق الخطوط ضمن خاصية واحده فقط وهي‪ font ‬ويكون ترتيب القيم فيها كالتالي‪:‬‬
‫يمكن أي ً‬
‫قيمة الخاصية‪font-style ‬‬ ‫‪‬‬

‫قيمة الخاصية‪font-variant ‬‬ ‫‪‬‬
‫قيمة الخاصية‪font-weight ‬‬ ‫‪‬‬
‫قيمة الخاصية‪font-size/line-height ‬‬ ‫‪‬‬
‫قيمة الخاصية‪font-family ‬‬ ‫‪‬‬
‫تنسيق اإلطارات في ‪CSS‬‬
‫اإلطارات‬
‫لتنسيق اإلطارات في ‪ CSS‬هناك خصائص لتغيير شكل اإلطار وحجمه ولونه‪:‬‬
‫خاصيّة‪ border-style ‬تستخدم لتغيير شكل اإلطار‬ ‫‪‬‬

‫خاصيّة‪ border-color ‬لتغيير لون اإلطار‬ ‫‪‬‬
‫خاصيّة‪ border-width ‬لتغيير حجم اإلطار‬ ‫‪‬‬
‫خاصيّة‪ border-radius ‬لتغيير حدة زوايا اإلطار‬ ‫‪‬‬
‫في خاصيّة‪ border-style ‬من الممكن تحديد جهة على وجه الخصوص بتغييرها وحدها بشكل مختلف عن جهات اإلطار األخرى مثال‬
‫على ذلك‪:‬‬
‫{ ‪p‬‬
‫‪border-top-style:‬‬ ‫;‪solid‬‬
‫‪border-right-style:‬‬ ‫;‪dashed‬‬
‫‪border-bottom-style:‬‬ ‫;‪solid‬‬
‫‪border-left-style:‬‬ ‫;‪dotted‬‬
‫}‬
‫ض ا اختصار القيم بسطر واحد وتكون القيمة األولى للجهة العلوية والقيمة الثانية للجهة اليمنى والقيمة الثالثة للجهة السفلية والقيمة الرابعة‬
‫ويمكن أي ً‬
‫للجهة اليسرى‪ ،‬مثال على ذلك‪:‬‬
‫{ ‪p‬‬
‫‪border-style:‬‬ ‫};‪solid dashed solid dotted‬‬

‫نظرة على ‪Box Model‬‬
‫في ‪ CSS‬جميع عناصر ‪ HTML‬يتم النظر إليها على أنها ‪ Box‬أو صندوق يحتوي على عدة طبقات وهي‪:‬‬
‫أواًل المحتوى‪ :‬وهو مايحتويه العنصر من نص أو صورة‪.‬‬ ‫‪‬‬

‫ثانيًا خاصيّة ‪ :Padding‬وهي المسافة بين المحتوى واإلطار المحدد للمحتوى‪.‬‬ ‫‪‬‬
‫ثالثًا خاصيّة ‪ :Border‬والتي تعتبر إطار حول المحتوى و‪.Padding‬‬ ‫‪‬‬
‫رابعًا ‪ :Margin‬وهي المسافة بين إطار العنصر وأي شيء حوله‪.‬‬ ‫‪‬‬
‫مثال على خصائص ‪:Box model‬‬
‫{ ‪div‬‬
‫‪width:‬‬ ‫;‪500px‬‬
‫‪border:‬‬ ‫;‪5px solid pink‬‬
‫‪padding:‬‬ ‫;‪30px‬‬
‫‪margin:‬‬ ‫;‪50px‬‬
‫}‬
‫تنسيق الصفحة‬
‫الخاصيّة ‪position‬‬
‫في ‪ CSS‬يمكنك تحديد موقع أي عنصر في الصفحة‪ ،‬الخاصيّة ‪ position‬تسمح بتحديد موضع العنصر في الصفحة وهناك خمس قيم لهذه‬
‫الخاصيّة‪:‬‬
‫القيمة ‪static‬‬
‫وهي القيمة االفتراضية لجميع العناصر ولن تكون قاد ًرا على تحريكها بأي جهة عند استخدام هذ ِه القيمة‪.‬‬
‫القيمة ‪relative‬‬
‫وهي التي تسمح بوضع العنصر بأي موقع نسبةً إلى موقعه األصلي وعند تحديد الخصائص ‪ top‬أو ‪ left‬أو ‪ right‬أو ‪ bottom‬سيتحرك العنصر‬
‫عن موقعه األصلي‪.‬‬
‫القيمة ‪absolute‬‬
‫والتي تسمح بوضع العنصر نسبةً إلى أقرب عنصر تم إضافة خاصية ‪ position‬بقيمة ‪ relative‬له‪.‬‬
‫القيمة ‪fixed‬‬
‫والتي يكون العنصر فيها ثابتًا وال يتحرك مهما تم النزول والصعود (‪ )scroll‬بالصفحة‪.‬‬
‫القيمة ‪sticky‬‬
‫التي يكون فيها العنصر بموقعه وعند البدء بتحريك الصفحة والمرور من هذا العنصر عند التحرك بالصفحة (‪ )scroll‬سيثبت العنصر بنفس‬
‫الموقع الذي تم تحديده له‪.‬‬
‫العناصر المتداخلة‬
‫هناك خاصية بسيطة ولكن لها فائدة كبيرة وهي ‪ z-index‬وهي التي تحدد ترتيب العناصر في حال أنهم على شكل طبقات‪ .‬قيم الخاصية ‪z-‬‬
‫‪ index‬من الممكن أن تكون بالسالب أو الموجب على حسب ترتيب العنصر‪ ،‬فالقيمة بالسالب تعني أن العنصر سيكون بالخلف والقيمة بالموجب‬
‫تعني أنه سيكون في األمام‪ ،‬مثال على ذلك‪:‬‬
‫{ ‪img‬‬
‫;‪position: relative‬‬
‫;‪left: 0px‬‬
‫;‪top: 0px‬‬
‫;‪z-index: -1‬‬
‫}‬
‫في المثال أعاله سيكون موقع الصورة بالخلف كالتالي‪:‬‬
‫مشروع تنسيق صفحة ويب‬
‫في نهاية هذ ِه الدورة ستكون لديك المهارات األساسية لعمل صفحة ويب بتنسيقات جذابة‪ ،‬لنفترض أنك ستصمم موقع لدورة تعلّم ‪ ،CSS‬والتصميم‬
‫سيكون من صفحة واحدة وهي الصفحة الرئيسية‪ ،‬فسيمكنك إضافة جميع الخصائص والتنسيقات التي تعلمتها من خالل هذ ِه الدورة وأيضًا يمكنك‬
‫استخدام بعض الخصائص التالية‪:‬‬
‫خلفية للصفحة باستخدام‬
‫الخاصية‪background-image ‬‬ ‫‪‬‬
‫إضافة عنوان رئيسي للصفحة وتنسيقه‬
‫باستخدام بعض من الخصائص مثل‪font-family, text-align, color, position :‬‬ ‫‪‬‬
‫إضافة زر لإلنضمام وتنسيقه‬
‫باستخدام بعض من الخصائص مثل‪border-radius, color, background, position :‬‬ ‫‪‬‬
‫إضافة قائمة تنقل وتنسيقها‬
‫باستخدام بعض من الخصائص مثل‪margin, padding, position, background-color :‬‬ ‫‪‬‬

‫مثال لتقريب فكرة تصميم الصفحة الرئيسية لدورة تعلم ‪CSS‬‬

مقدمة في CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

مقدمة في CSS

Uploaded by

Copyright:

Available Formats

‫مقدمة في ‪CSS‬‬

‫طريقة كتابة ‪ CSS‬و‪CSS Syntax‬‬

‫نُالحظ في المثال أعاله أن الخاصية هي ‪ Color‬أو لون والقيمة هي ‪ Red‬أو أحمر‪.‬‬

‫وهناك ثالث طرق إلضافة كود ‪ CSS‬لتنسيق صفحات الويب‪:‬‬

‫طريقة ‪External CSS‬‬

‫‪<h1>CSS‬‬ ‫>‪Course </h1‬‬

‫طريقة ‪Internal CSS‬‬

‫طريقة ‪Inline CSS‬‬

‫نسيق الخلفيات في ‪CSS‬‬

‫هناك خصائص في ‪ CSS‬لتنسيق الخلفيات مثل‪:‬‬

‫خاصيّة‪ background-color ‬لتغيير لون خلفيّة العنصر‪.‬‬ ‫‪‬‬

‫‪background-position:‬‬ ‫;‪right top‬‬

‫‪:‬ويمكن اختصار الكود لقيمة الخصائص بالشكل التالي‬

‫‪background:‬‬ ‫;‪#ffffff url("img_tree.png") no-repeat right top‬‬

‫‪font-family:‬‬ ‫};‪Arial, "Times New Roman", sans-serif‬‬

‫قيمة الخاصية‪font-style ‬‬ ‫‪‬‬

‫تنسيق اإلطارات في ‪CSS‬‬

‫خاصيّة‪ border-style ‬تستخدم لتغيير شكل اإلطار‬ ‫‪‬‬

‫‪border-style:‬‬ ‫};‪solid dashed solid dotted‬‬

‫أواًل المحتوى‪ :‬وهو مايحتويه العنصر من نص أو صورة‪.‬‬ ‫‪‬‬

‫مثال على خصائص ‪:Box model‬‬

‫‪border:‬‬ ‫;‪5px solid pink‬‬

‫مشروع تنسيق صفحة ويب‬

‫خلفية للصفحة باستخدام‬

‫إضافة عنوان رئيسي للصفحة وتنسيقه‬

‫باستخدام بعض من الخصائص مثل‪font-family, text-align, color, position :‬‬ ‫‪‬‬

‫إضافة زر لإلنضمام وتنسيقه‬

‫باستخدام بعض من الخصائص مثل‪border-radius, color, background, position :‬‬ ‫‪‬‬

‫إضافة قائمة تنقل وتنسيقها‬

‫باستخدام بعض من الخصائص مثل‪margin, padding, position, background-color :‬‬ ‫‪‬‬

You might also like