تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إضافة الألوان والخلفية


الصفحة السابقة

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

  • كيفية تغيير لون النص ؛
  • كيفية وضع لون أو صورة خلفية ؛
  • كيفية إضافة الظلال.
  • كيف نتحكم في مستويات شفافية الالوان

CSS لم تنته من مفاجأتنا

لون النص


دعنا ننتقل إلى موضوع شاسع ألا و هو اللون.

أنت تعرف بالفعل الخاصية التي تسمح لك بتغيير لون النص: هي color سنهتم بالطرق المختلفة للإشارة إلى اللون ، لأن هناك العديد منها.

الاشارة إلى اسم اللون

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

يوضح لك الشكل التالي الألوان الستة عشر التي يمكنك استخدامها بمجرد كتابة أسمائهم.

css color

يمكنك تعلمهم عن ظهر قلب إذا لم يكن لديك ما تفعل ، بالإضافة إلى أنه سيجعلك تراجع لغتك الإنجليزية.

لتمرير جميع العناين الى البني ، يمكنك أن تكتب كالتالي:


h1
{
    color: maroon;
}    

ستجد النتيجة في الشكل التالي.

css color
استعمال الكتابة الأرقام السداسية العشرية (HEXADECIMAL)

ستة عشر لونًا ، لا يزال محدودًا بعض الشيء عندما نعلم أن معظم الشاشات يمكنها عرض ستة عشر مليونًا . من ناحية أخرى ، لاحظ ، إذا كان من الضروري إعطاء اسم لكل من الألوان الستة عشر مليون ...

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

اسم اللون السداسي العشري ، يبدومثل هذا: # FF5A28. ببساطة ، إنها مزيج من الحروف والأرقام التي تشير إلى اللون. يجب علينا أن يبدأ دائمًا بكتابة علامة الأرقام (#) ، متبوعة بستة أحرف أو أرقام من 0 إلى 9 ومن A إلى F. تعمل هذه الأحرف أو الأرقام بحرفين. يشير الأولان إلى كمية من اللون الأحمر ، الثانيان هي كمية من اللون الأخضر والآخران على كمية من اللون الأزرق. عن طريق خلط هذه الكميات (التي هي مكونات اللون الأحمر والأخضر والأزرق) ، يمكننا الحصول على اللون الذي نريده.

وبالتالي ، 000000# يتوافق مع اللون الأسود و # FFFFFFF إلى اللون الأبيض. لكن الآن ، لا تسألني ما هي التركيبة التي تنتج "لون الغروب" اللون البرتقالي ، ليست لديا أي فكرة عنها.

تعرض بعض برامج الرسم ، مثل Photoshop و Gimp و Paint.NET ، ألوانًا بالسداسي عشري. يمكنك بسهولة نسخ ولصق الشفرة السداسية عشرية للون في ملف CSS الخاص بك. على سبيل المثال ، إليك كيفية تطبيق اللون الأبيض السداسي عشري على الفقرات:


p
{
    color: #FFFFFF;
}       

لاحظ أن هناك علامة مختصرة: يمكن للمرء أن يكتب لونًا بثلاثة أحرف فقط. على سبيل المثال: # FA3 تعادل كتابة # FFAA33.

طريقة RGB

ماذا يعني RGB؟ باللغة الإنجليزية ، يتم كتابة RED-GREEN-BLUE باللون الأحمر والأخضر والأزرق ، والمختصرة باسم "RGB". كما هو الحال مع الترميز السداسي العشري ، لاختيار لون ، يجب تحديد كمية من اللون الأحمر والأخضر والأزرق.

لا تزال هذه القصة الملتوية بكميات الأحمر والأخضر والأزرق؟

نعم ولكن هنا سترى أنه أكثر ملاءمة وبفضل برنامج رسم بسيط مثل Paint ، يمكنك العثور على اللون الذي تريده. إليك الإجراء المتبع:

  1. قم بتشغيل برنامج paint من القائمة Démarrer.
  2. انتقل إلى القسم Modify colors، كما هو مبين في الشكل التالي.
  3. يفتح نافذة. في المربع الذي يظهر على اليمين ، حرك المنزلق لتحديد اللون الذي يثير اهتمامك. افترض أنك تتوق لكتابة عناوين <h1> بالوردي (دعنا نفترض فقط). حدد اللون في النافذة ، كما في الشكل التالي.
  4. ارفع الكميات المقابلة من الأحمر والأخضر والأزرق ، والمشار إليها في أسفل يمين النافذة (هنا 240-96-204). انسخ هذه القيم بهذا الترتيب في ملف CSS ، كما في الكود أدناه.

p
{
    color: rgb(240,96,204);
}           
css color css color

كما ترى في المثال ، لاستخدام طريقة RGB ، يجب عليك الكتابة rgb(Rouge, Vert, Bleu)عن طريق استبدال "الأحمر والأخضر والأزرق" بالأرقام المقابلة. للحصول على معلومات ، هذه الكميات دائما بين 0 و 255.

وهذه مكافأة لك ...

أنصحك بكتابة "Color Picker" على Google وستجد العديد من الأدوات والمواقع التي تساعدك على اختيار اللون.

على سبيل المثال ، يمكن لـ http://www.colorpicker.com العثور على القيمة السداسية العشرية للون بسهولة بالغة:

css color

انها بسيطة ، لكنها تقوم بهذه المهمة!

يمكنك أيضًا العثور على ملحقات المستعرض التي تتيح لك "البحث" عن أي لون تريده على موقع الويب:

لون الخلفية


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

انظر إلى ملف CSS هذا بعناية فائقة:


body
{
    background-color: black; /* خلفية الصفحة سوداء */
    color: white; /* النص سيكون باللون الابيض */
}             

هنا نرى نتيجة هذا الكود:

css color
لكنك طلبت أن يكون نص العلامة <body>مكتوبًا باللون الأبيض ، وجميع الفقرات <p>والعناوين <h1>أخذت هذا اللون.كيف يتم ذلك؟

أردت أن أغتنم هذه الفرصة لأتحدث إليكم عنها. وتسمى هذه الظاهرة الميراث . أؤكد لك على الفور ، لا أحد ميت.

المغلق والميراث

في CSS ، إذا قمت بتطبيق نمط على علامة ما ، فستتخذ جميع العلامات الداخلية نفس النمط.

انها في الواقع بسيطة للفهم وبديهية. تحتوي العلامة <body>، كما تعلمون ، من بين أشياء أخرى ، علامات الفقرة <p>والعنوان <h1>. إذا قمت بتطبيق لون خلفية سوداء ولون نص أبيض على العلامة <body>، فسيكون لكل عناويني وفقراتي خلفية سوداء ونص أبيض ... هذا ما نسميه الميراث: يقال أن العلامات الموجودة داخل علامة أخرى "ترث" من خصائصها.
هذا هو المكان الذي يأتي منه اسم "CSS" ، مما يعني " Cascading Style Sheets" ، أي " أوراق الأنماط المتتالية ". يتم توارث خصائص CSS في تتالي: إذا أعطيت نمطًا لعنصر ، فسيكون لكل العناصر الفرعية نفس النمط.
هذا يعني أن كل نص صفحتي على الويب سيُكتب بالضرورة باللون الأبيض؟
لا ، ليس بالضرورة. إذا قلت لاحقًا أنك تريد أن تكون العناوين باللون الأحمر ، فسيكون لهذا النمط أولوية وسيكون عناوينك حمراء. من ناحية أخرى ، إذا لم تشر إلى أي شيء خاص (كما فعلنا سابقًا) ، فسترى عناوينك باللون الأبيض. أنها لا تعمل فقط في الالوان ، اسمعني جيدا. سيتم توريث جميع خصائص CSS: على سبيل المثال ، يمكنك المطالبة بخط عريض في العلامة <body>وستكون جميع عناوينك وفقراتها بالخط العريض.
مثال في الميراث مع العلامة<MARK>

نميل إلى الاعتقاد بأنه لا يمكننا تغيير إلا لون خلفية الصفحة. هذا غير صحيح: يمكنك تغيير خلفية أي عنصر: عناوينك ، فقراتك ، بعض الكلمات ... في هذه الحالة ، سوف تظهر مظللة (كما لو كان لدينا علامة عليها).

هل تتذكر ، على سبيل المثال ، العلامة<mark>التي تبرز بعض الكلمات؟ سنستخدمها مرة أخرى هنا:

<h1>هذا موقعي الاول</h1> 
<p>!مرحبا بك في موقعي الخاص </p>
<p> في هذه الآونة هذا الموقع <mark>فارغ تقريبا</mark>. انتظر قليلا من فضلك!</p>        

css color

افتراضيًا ، يتم عرض النص على خلفية صفراء. يمكنك تغيير هذا السلوك في CSS:


body
{
    background-color: black;
    color: white;
}

mark
{
    
    background-color: red;
    color: black;
}           
على نص العلامة <mark>، هو لون الخلفية الحمراء التي تنطبق. في الواقع ، حتى لو كان الجزء السفلي من الصفحة باللون الأسود ، فإن خاصية CSS هي العنصر الأكثر دقة الذي له الأولوية (الشكل التالي).
css color

ينطبق نفس المبدأ على جميع علامات HTML وخصائص CSS! إذا قلت:

  • فقراتي لها حجم 1.2 em
  • <strong>يبلغ حجم النصوص المهمة الخاصة بي em 1.4
... قد تعتقد أن هناك صراعا. النص المهم هو جزء من فقرة ، ما الحجم الذي سيتم إعطائه له؟ 1.2 em أوem 1.4 ؟ تقرر CSS أن المطلوب الأكثر دقة هو والذي يسود: بما أنه <strong>يتوافق مع عنصر أكثر دقة من الفقرات ، سيتم كتابة النص في 1.4 م.
صور الخلفية

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

تطبيق صورة خلفية

الخاصية للإشارة إلى صورة خلفية هي background-image. كقيمة ، يجب علينا وضع اسم ملف الصورة url("image_name.png").مثلا :


body
{
    background-image: url("snow.png");
}             

الذي يعطينا النتيجة التالية :

css color

بالطبع ، ليست الخلفية في PNG بالضرورة ، بل يمكن أن تكون أيضًا بتنسيق JPEG أو GIF. العنوان الذي يشير إلى المكان الذي توجد فيه صورة الخلفية يمكن ان يكتب في URL مطلقا ( http://…) أو نسبيًا ( fond.png).

كن حذرًا عند كتابة عنوان نسبي في ملف CSS يجب الإشارة إلى عنوان الصورة بالنسبة للملف .css وليس بالنسبة للملف .html لتبسيط الأشياء ، أنصحك بوضع صورة الخلفية في نفس المجلد مثل الملف .cssأو في مجلد فرعي
الخيارات المتاحة لصورة الخلفية

يمكن أن تستكمل الخاصية background-image التي رأيناها للتو بعدة خصائص أخرى تجعل من الممكن تغيير سلوك صورة الخلفية.

BACKGROUND-ATTACHMENT: تعيين الخلفية

تستخدم خاصية background-attachment "لإصلاح" الخلفية. التأثير مثير للاهتمام لأننا نرى النص "يسحب" في الأسفل.تتوفر قيمتان:

  • fixed: تظل صورة الخلفية ثابتة ؛
  • scroll: صورة الخلفية تتحرك مع النص (تلقائي).

body
{
    background-image: url("snow.png");
    background-attachment: fixed; /* الصورة تبقى ثابتة */
}                
تكرار الخلفيةBACKGROUND-REPEAT:

بشكل تلقائي ، صورة الخلفية تظهر في شكل فسيفسائي

css color

. يمكنك تغيير ذلك باستخدام الخاصية background-repeat:

  • no-repeat: لن يتكرر الجزء السفلي. ستكون الصورة فريدة على الصفحة.
  • repeat-x: سيتم تكرار الخلفية فقط على السطر الأول ، أفقياً.
  • repeat-y: سيتم تكرار الخلفية فقط في العمود الأول ، عموديًا.
  • repeat: سيتم تكرار الخلفية في تبليط (تلقائي).

مثال على الاستخدام:


body
{
    background-image: url("sun.png");
    background-repeat: no-repeat;
}                   
BACKGROUND-POSITION: الموقف السفلي

يمكنك الإشارة إلى أين يجب أن تكون صورة الخلفية مع background-position. هذه الخاصية مثيرة للاهتمام فقط إذا تم دمجها مع background-repeat: no-repeat;(خلفية لا تكرر نفسها).

يجب عليك إعطاء background-positionقيمتين بالبكسل للإشارة إلى موضع الخلفية بالنسبة إلى الزاوية العلوية اليسرى من الصفحة (أو الفقرة ، إذا قمت بتطبيق الخلفية على فقرة). لذلك ، إذا كتبت:


background-position: 30px 50px;                   

... ستكون خلفيتك 30 بكسل من اليسار و 50 بكسل من الأعلى. من الممكن أيضًا استخدام هذه القيم باللغة الإنجليزية:

  • top:في الأعلى ؛
  • bottom: في الأسفل ؛
  • left: على اليسار ؛
  • center: الوسط.
  • right: على اليمين.

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


background-position: top right;                   

لذلك ، إذا كنت أرغب في عرض شمس في صورة الخلفية (الشكل التالي) ، في نسخة واحدة ( no-repeat) ، تكون دائمًا مرئية ( fixed) ووضعها في أعلى اليمين ( top right) ، سأكتب هذا:


body
{
    background-image: url("sun.png");
    background-attachment: fixed; /* الخلفية تبقى ثابتة */
    background-repeat: no-repeat; /* الخلفية لا تتكرر */
    background-position: top left; /* الخلفية توضع في الأعلى على اليمين */
}                       
css color
الجمع بين الخصائص

إذا كنت تستخدم الكثير من خصائص لتنسيق الخلفية (كما هو الحال في المثال هذا الأخير)، يمكنك استخدام نوع من "super-property" تسمى backgroundقيمتها يمكن الجمع بين العديد من الخصائص التي شوهدت في السابق: background-image، background-repeat، background-attachmentو background-position.

لذلك يمكننا ببساطة الكتابة:


body
{
    background: url("sun.png") fixed no-repeat top right;
}                           

هذا هو أول "super-property" أظهره لك ، سيكون هناك آخرون. يجب معرفة أن :

  • ترتيب القيم لا يهم. يمكنك الجمع بين القيم في أي ترتيب.
  • ليس لديك لوضع جميع القيم. لذلك ، إذا كنت لا ترغب في الكتابة fixed، يمكنك إزالته دون أي مشكلة.
عدة صور الخلفية

منذ CSS3 ، من الممكن إعطاء عدة صور خلفية لعنصر. لذلك ، يكفي فصل التصريحات بفاصلة ، مثل هذا:


body
{
    background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}                             

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

css color

ما يجب الانتباه اليه هو أن صور الخلفية المتعددة تعمل على جميع المتصفحات باستثناء الإصدارات القديمة من Internet Explorer ، والتي تتعرف فقط على هذه الميزة من الإصدار 9 (IE9).

آخر شيء قبل الانتهاء من صور الخلفية: في كل هذه الأمثلة ، قمت بتطبيق خلفية على الصفحة بأكملها ( body). ولكن هذا لا ينبغي أن يجعلك تنسى أنه يمكنك تطبيق خلفية على أي عنصر (عنوان ، فقرة ، بعض كلمات فقرة ، وما إلى ذلك). أنصحك بمحاولة تطبيق خلفية على عناوينك أو فقراتك. إذا كان لديك القليل من الذوق (على عكسي!) بالتأكيد سوف تعطي نظرة جيدة جدًا على صفحة الويب الخاصة بك.

اللون الشفاف TRANSPARENCY


يتيح لنا CSS أن نلعب بسهولة مع مستويات شفافية العناصر! لذلك ، سوف نستخدم ميزات : CSS3 الخاصية opacity و الترميز RGBa.

الشفافية OPACITY

الخاصية opacity، بسيطة للغاية ، تسمح للإشارة إلى مستوى التعتيم (هو عكس الشفافية).

  • بقيمة 1 ، سيكون العنصر غير شفاف تمامًا: هذا هو السلوك الافتراضي.
  • بقيمة 0 ، سيكون العنصر شفافًا تمامًا.

يجب أن نختار قيمة بين 0 و 1. وبالتالي ، بقيمة 0.6 ، سيكون عنصرك معتمًا إلى 60٪ ... وسنرى من خلاله

إليك كيفية استخدامه:


p
{
    opacity: 0.6;
}    

فيما يلي مثال يتيح لنا تقدير الشفافية. ستجد النتيجة في الشكل التالي.


body
{
    background: url('neige.png');
}

p
{
    background-color: black;
    color: white;
    opacity: 0.3;
}    

css color

ما يجب ان تنتبه اليه أن الشفافية تعمل على جميع المتصفحات الحديثة ، بما في ذلك Internet Explorer من IE9.

إذا قمت بتطبيق الخاصية opacityعلى عنصر من الصفحة ، فسوف يصبح كل محتوى هذا العنصر شفافًا (حتى الصور ، الكتل الأخرى بداخلها ، وما إلى ذلك). إذا كنت تريد فقط جعل لون الخلفية شفافًا ، فاستخدم ترميز RGBa بدلاً من ذلك.

تدوين RGBA

يقدم لنا CSS3 طريقة أخرى لوضع الشفافية: ترميز RGBa. هذا هو في الواقع ترميز RGB الذي رأيناه سابقًا ، ولكن مع قيمة رابعة: مستوى الشفافية (وتسمى "قناة ألفا"). بالطريقة نفسها كما كان من قبل ، بقيمة 1 ، تكون الخلفية معتمة تمامًا. بقيمة أقل من 1 ، تكون شفافة.


p
{
    background-color: rgba(255, 0, 0, 0.5); /* خلفية حمراء نصف شفافة */
}    

انها بسيطة كما تلاحظ. يمكنك تحقيق نفس التأثير تمامًا كما هو الحال مع opacityاللعب مع ترميز RGBa ، جرب!

يعرف هذا الترميز بجميع المتصفحات الحديثة ، بما في ذلك Internet Explorer IE9. بالنسبة للمتصفحات القديمة ، يوصى بالإشارة إلى تدوين RGB القياسي بالإضافة إلى RGBa. بالنسبة لهذه المتصفحات ، لن تكون الخلفية شفافة ، ولكن سيكون هناك لون خلفية على الأقل.


{
    background-color: rgb(255,0,0); /* للمتصفحات القديمة */
    background-color: rgba(255,0,0,0.5); /* للمتصفحات الحديثة */
}    

الخلاصة


  • نقوم بتغيير لون النص مع الخاصية color، ولون الخلفية مع background-color.
  • يمكنك تحديد لون عن طريق كتابة اسمه باللغة الإنجليزية( black على سبيل المثال) ، في شكل سداسي عشري ( #FFC8D3) أو بترميز RGB ( rgb(250,25,118)).
  • يمكنك إضافة صورة خلفية مع background-image. يمكنك اختيار إصلاح صورة الخلفية وعرضها بالفسيفساء أم لا ، وحتى وضعها في المكان الذي تريده على الصفحة.
  • يمكن جعل جزء من الصفحة شفافًا مع الخاصية opacityأو مع ترميز RGBa (مطابق لترميز RGB ، مع وجود قيمة رابعة تشير إلى مستوى الشفافية).