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

هيكل البناء و الشكل
تمامًا كتذكير: يصف HTML هيكل صفحة الويب بينما يعرّف CSS المظهر المرئي. إن للفصل بين الهيكل والمظهر المرئي العديد من المزايا ، كما سنرى. ليس إلزاميًا ، ولكن من الأفضل عادة كتابة HTML و CSS في ملفات منفصلة.

ربط ملف CSS
ملف CSS هو ملف نصي عادي بالملحق .css. سنربط ملف CSS من داخل ملف HTML. قم بإنشاء ملف جديد في مجلد Portfolio الخاص بك. اسم main.css .

الملف الجديد

افتح الآن index.html وأضف عنصر داخل عنصر . باستخدام عنصر ، نطلب من صفحة HTML تحميل ملف CSS: رابط لملف CSS

<link rel="stylesheet" href="main.css">

أدخل هذا العنصر في كتلة الخاصة بك. الآن يجب أن يبدو رمزك كما يلي:

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

كمثال ، سوف نقوم بتغيير لون الخلفية ولون نص العنوان الثاني. اكتب الأسطر التالية في ملف CSS الخاص بك. main.css

رموز الالوان
يتم إنشاء الألوان على الشاشة بواسطة مزيج من أجزاء مختلفة من الأحمر والأخضر والأزرق (RGB). يمكن التعبير عن مزيج الأحمر والأخضر والأزرق في CSS بطريقتين: كقيم RGB أو كقيم سداسية عشرية (قيم ست عشرية). التعبير عن الالوان برقم سداسي عشري هو الأكثر شيوعًا.

دعونا نلقي نظرة على مثالنا بلون الخلفية الأزرق الرمادي من الأعلى:

اولا: كقيم سداسى عشريه   Hex:     # 607d8b

  ثانيا  :كقيم      RGB:      rgb (96 ، 125 ، 139)

في التعبير عن اللون برقم سداسى عشرى Hex ، يمثل أول رقمين اللون الاحمر والرقمين الوسطى يمثلان اللون الاخضر والرقمين الأخيرين يمثلان اللون القناة الازرق

العمل مع رموز اللون

يعد التعبير عن الألوان بالقيم السداسية العشرية شائعًا للغاية لأنه يمكنك من خلالها تمثيل مجموعة كبيرة من مجموعات الألوان (أكثر من 16.7 مليون). ومع ذلك ، فمن الصعب إلى حد ما العمل معها. في معظم الحالات ، ستحتاج إلى   منتقي ألوان   color picker.

إذا كنت تستخدم Visual Studio Code كمحرر ، يمكنك فتح منتقي ألوان في ملف CSS الخاص بك مباشرة: مرر الماوس فوق رمز اللون وستظهر لك أداة انتقاء الألوان

   منتقي الألوان عبر الإنترنت   color picker

إذا لم يكن لديك منتقي ألوان مدمج في المحرر الخاص بك ، يمكنك اللجوء إلى العديد من محددات الألوان عبر الإنترنت:

• HTML Color Codes
• ColorPicker
• و أكثر من ذلك بكثير…



   لوحات الألوان على الانترنت    Online Color Palettes

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

هناك العديد من الأدوات التي تجعل العثور على لوحة الألوان أسهل. وفيما يلي بعض الأمثلة على ذلك: لوحات الألوان المحددة مسبقًا

• Coolors
• Colormind
• Google Color Palette



   مولدات لوحات الألوان    Color Palette Generators

• Coolors
• Kuler   -   حدد قاعدة اللون ، واسحب المقبض بالسهم الصغير وستجد لديك خمسة ألوان تتناسب مع بعضها البعض
• Paletton   -   وحدة تحكم متطورة للعثور على لوحات الألوان
• Colourco.de  -  لوحة ألوان أخرى عملية



   قواعد CSS    

لقد رأيت بالفعل كيف يمكن لقواعد CSS تغيير لون عنصر HTML. دعونا ننظر عن كثب في كيفية بناء قواعد CSS.
نتنيه: :تتكون قاعدة CSS من ثلاثة عناصر

خاصية وقيمه محدد

selector value property

   محددات    CSS selector   

تشير المحددات إلى عناصر HTML التي يتم تطبيق قاعدة CSS عليها.
نتنيه: سنذكر فقط أهم المحددات و اذا اردت الحصول على قائمة أكثر شمولاً ، ابحث في الإنترنت عن : "  CSS  selectors  "

   أكتب محددات   

يستهدف محدد النوع كل العناصر ذات علامة HTML محددة. إذا أردنا معالجة جميع عناصر p ، على سبيل المثال ، سيبدو هذا كما يلي:


  CSS

p {
  ...
}

  HTML

<p>...</p>
<p>...</p>




   محددات الفئه    Class Selectors

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

  CSS

.highlight {
  ...
}




  HTML

<p class="highlight">...</p>
<p >...</p>
<p class="highlight new">...</p>

في HTML ، سيتم تطبيق قاعدة   CSS   على العنصرين   p   الأول والثالث . كما ترون ، يمكن أيضًا أن يحتوي العنصر على فئات متعددة ، مفصولة بمسافة.

   محددات الهوية    ID Selectors

محددات معرف الهويه تشبه إلى حد كبير محددات الفئة. حيث يقوم بتحديد جميع عناصر HTML ذات معرف سمة بقيمة محددة. تتم الإشارة إلى المعرفات بواسطة علامة شباك (#) ، متبوعة بقيمة سمة المعرف.

الفرق المهم بين محددات الفئة هو أن محددات الهوية يجب أن تحدث مرة واحدة فقط لكل صفحة HTML ، في حين يمكن استخدام فئة لأي عدد من العناصر.
في المثال التالي ، يحدد محدد الهوية العنصر الذي يحتوي على سمة id مع القيمة navigation

  CSS

#navigation {
  ...
}

  HTML

<id="navigation"">...</p>
<p >...</p>

   خصائص   CSS    

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

الحالة 1: تشاهد خاصية   CSS   لا تعرفها ..

... ابحث في الإنترنت عنالخاصية. استخدم اسم الخاصية مع CSS كمصطلح البحث الخاص بك. يمكنك تجربتها الآن عن طريق معرفة ما تقوم به مثلا قاعدة CSS التالية:

padding: 5px;

استخدم   padding CSS   كمصطلح البحث الخاص بك.
لا تستقر إلا على نتيجة البحث الأولى ولكن تفتح أول 5 أو أكثر. ثم حدد موقع الويب الذي تريد قراءة التفاصيل. حاول تطبيق قاعدة CSS هذه على عنصر h2 في مشروع محفظتك.

الحالة 2: تريد تغيير شيء ما ولكنك لا تعرف خاصية   CSS ...

... ابحث في الإنترنت عما تريد القيام به و قم بتبديل كلمات البحث الرئيسية . ربما ستحتاج إلى عدة محاولات قبل أن تجد ما كنت تبحث عنه. مثال: لنفترض أنك تريد تغيير حجم النص.
في هذه الحالة استخدم الكلمات الاتيه:   text size CSS   فى البحث مره أخرى ، لا تستقر لنتائج البحث الأولى.

   قيم   CSS    

لقد رأينا بالفعل بعض قيم   CSS  : على سبيل المثال ، القيم السداسية العشرية مثل   #ffffff   أو مواصفات الحجم   مثل 5px  . اعتمادًا على خاصية   CSS   ، يجب عليك أحيانًا استخدام كلمات محددة مثل اليسار أو اليمين لمحاذاة النص ، على سبيل المثال.
واحدة من أكثر قيم CSS استخدامًا هي مواصفات الحجم. لذلك ، سوف ننظر إليهم بمزيد من التفاصيل. غالبًا ما يتم تعريف الحجم بالبكسل ، والذي يتم اختصاره كـ px
p { font-size: 16px; }

الاحتمال الآخر هو الإشارة إلى الأحجام بالنسب المئوية. النسب المئوية هي دائما نسبة إلى عنصر الأصل. في المثال التالي ، إذا كان أصل p يمتد عرض الشاشة بالكامل ، فستكون p 60٪ من هذا العرض
p { width: 60%; }.

وحدة أخرى شعبية للأحجام هي م. em دائمًا ما يتناسب مع حجم الخط. هذا يعني أنه إذا قمت بتغيير حجم الخط ، فسيتم تغيير حجم em. مثال: إذا كان حجم عنصر ما هو 20 بكسل وعرضه 5 م ، فسيكون عرض العنصر 100 بكسل.
p { font-size: 20px; width: 5em; }.

اختيار الفئه في محفظتنا دعنا نقول أننا نريد توسيع العنوان الرئيسي "Web Portfolio modountiy". من الممكن أن يكون ذلك ممكنًا عن طريق تحديد قاعدة CSS للعنصر h1 مثل هذا:
p { font-size: 65px; }.

المشكلة في ذلك هي أنه سيتم توسيع جميع عناصر h1 على موقعنا بالكامل. ولكن إذا كنا نريد فقط توسيع العنوان الأول ، فيجب أن نستخدم محددًا للفئه بشكل أفضل. للقيام بذلك ، نضيف سمة فئة إلى عنصر h1 في HTML. يمكننا تعيين أي قيمة لتلك الفئة ، اخترت عنوان القيمة.
<h1 class="title">Web Portfolio modountiy </h1>

الآن يمكننا استهداف هذا العنوان في CSS مع .title. تبدو قاعدة CSS كما يلي:
.title { font-size: 65px; }.

إذا سارت الأمور على ما يرام ، تبدو الحافظة الآن كما يلي:




هذاالمقال مترجم عن مقال

Marco Jakob     code.makery

نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب

المصادر

code.makery

w3schools

codecademy

نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك