في الجزء السابق قمنا بإنشاء ونشر أول موقع إلكتروني لنا. أعترف ، أن موقع الويب يحتوي على محتوى قليل جدًا ولا يبدو جذابًا بشكل خاص. نريد تغيير هذا الآن. في هذا الجزء سوف تتعلم كيف يمكننا استخدام 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 ، يجب أن تحتوي سمة href على مسار الملف الصحيح. لدينا main.css واحد فقط وهو في مجلد الجذر الخاص بنا. من خلال البادئة / يمكننا الوصول إلى المجلد الجذر من أي مكان ، حتى لو كان ملف HTML الخاص بنا في مجلد فرعي. وبالتالي ، يمكن دائمًا تحميل ملف CSS الخاص بنا بـ href = "/main.css". تعرف على المزيد حول هذا الموضوع في الجزء 1 ضمن عناوين URL النسبية والمطلقة.
الألوان
حتى هذه المرحلة ، لا يزال ملف 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;
}.
إذا سارت الأمور على ما يرام ، تبدو الحافظة الآن كما يلي:
هذاالمقال مترجم عن مقال
نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب
المصادر
نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك