الألوان
لون النص
والأن وصلنا إلى موضوع له أهميته أيضا على صفحات الأنترنت ألا وهو الألوان، وكالعادة فأول شيء سنبدأ به وهو التعرف على الخاصية التي ستمكننا من تلوين نصوصنا وهي color وإن كنتم تتدكرون فقد تحدثنا عنها في فقرة سابقة.
الدرس السابق: تعلم HTML و CSS: تنسق النص
الدرس التالي: تعلم HTML و CSS: تصميم الموقع
ولتحديد لون النص فإننا إما نكتبه مباشرة بالإنجليزية كما ستلاحظون في المثال التالي:
الدرس السابق: تعلم HTML و CSS: تنسق النص
الدرس التالي: تعلم HTML و CSS: تصميم الموقع
ولتحديد لون النص فإننا إما نكتبه مباشرة بالإنجليزية كما ستلاحظون في المثال التالي:
h1 {
color: green;
}
وهناك طريقة ثانية وهي عن طريق كتابة اللون بنظام عد ستة عشري hexadecimal
في هذه الطريقة يكون إسم اللون عبارة عن مجموعة من الأرقام من 1 إلى 6 والحروف اللاتنية من A إلى F وعددها ستة وتكون مسبوقة بعلامة دييز(#) متلا اللون الأزرق الفاتح يكتب على الشكل التالي 15#a8ec
وتعمل هذه الأرقام والحروف مثنى مثنى، فالرقمين أو الحرفين الأولين يدلان على كمية معينة من اللون الأحمر والذين يليانهما يدلان على كمية من اللون الأخضر والأخيرين يدلان على كمية من اللون الأزرق وبدمجهما يكون اللون الذي يمثلونه.
وإليكم المتال لتفهموا أكثر كيفية إستعمال الألوان بهده الطريقة:
h1 {
color: #a8ec15
}
للحصول على أسماء الألوان بهذه الصيغة يمكن إيجادهما في بعض البرامج مثل الPhotoshop أوGimp وغيرها من البرامج لذلك فيكفي تحديد اللون الذي تريده ونسخ إسمه.
تحديد الألوان بطريقة RGB
هذه الطريقة أيضا يكون فيها تحديد اللون عن طريق مزج ثلاثة ألوان فيما بينها وهي الأحمر والأخضر والأزرق وباللغة الإنجليزية فهي Red, Green, Blue وبإختصار RGB ويكتب إسم اللون كالتالي: (rgb(57, 143, 238 حيت تشير الأرقام إلى كمية الألوان الثلاثة.
أما كيفية إستعمالها في كود الcssفهو كالتالي:
h1 {
color: rgb(57, 143, 238);
}
وبما أن تحديد الألوان صعب بهذه الطريقة إلا أنه هناك أداة تسهل ذلك، وهي متوفرة في العديد من برامج الرسم البسيطة كبرنامج paint مثلا المتوفر في الوندوز حيت يكفي فتح هذا البرنامج ومن القائمة colours نختار modifier les colour حينها ستظهر نافدة ونبحت عن اللون الذي نريده وبعد ذلك نأخذ قيم الأرقام التي تعطي هذا اللون.
لون الخلفية:
من أجل إختيار لون الخلفية نستعمل الخاصية background-color وهي تستعمل بنفس الطريقة التي تستعمل بها الخاصية color ونكتب اللون إما بطريقة hexedimal أو RGB وإليكم الكود التالي لتفهمو أكثر:
Body {
Background: green;
}
هنا كما تلاحظون عندما تقومون بتجربة هذا الكود يكون لون الخلفية أخضر بالكامل، وهذا لأننا طبقنا هذه الخاصية على الوسم body. ما أريد أن أبينه هو أن هذه الخاصية يمكن تطبيقها على أي عنصر من عناصر الصفحة سواء العناوين أو الفقرات وغيرها.
الوراثة inheritance
تخيلو لو أننا كتبنا الكود الأول على الشكل التالي:
Body {
Background: green;
Color: white;
}
طبعا ستجدون أن جميع الفقرات والعناوين الموجودة في الصفحة ستكتب باللون الأبيض، وهذا ما نسميه بالإرث
(بالإنجليزية: inheritance) أي أن الخاصية التي نعطيعها لأي وسم من أوسمة الصفحة فجميع الأوسمة التي توجد داخل هذا الوسم تتخد هذه الخاصية أو بمعنى أخر ترثها.
وبالطبع فنحن لسنا مجبرين أن تكون جميع العناوين والفقرات باللون الأبيض ولكي تجعل العناوين باللون الذي تريده ماعليك سوى كتابة الكود التالي كمثال:
H2 {
Color: black;
}
ويحدت الإرث إن لم نحدد مسبقا أي خاصية للوسم الذي يأخد خاصية الوسم الذي يوجد داخله كما يجب أن تعرفو أيضا أن ظاهرة الإرث هذه لا تحدث في خاصية اللون فقط وإنما في جميع الخصائص كشكل الخط وحجمه إلى غير ذلك من الخصائص.
وهناك اخرى تحتاج إلى التوضيح وهي أن البعض قد يعتقد أن لون خلفية الصفحة هو الذي يتغير وحده وهذا خطأ فنحن نستطيع تغيير خلفية أي عنصر من عناصر الصفحة سواء العناوين أو الفقرات أو حتى جملة أو كلمة واحدة فيكفي تحديدها عن طريق الCSS وإعطائها أي خاصية نريد.
صورة الخلفية:
كما رأيتم فإن تغيير لون الخلفية يمكننا من وضع أي لون نريده، لكننا لسنا مجبرين بالإكتفاء بتغيير الألوان فقط فيمكننا أيضا أن نضع صورة معينة على شكل خلفية وذلك عن طريق خاصية background-image حيث نحدد الوسم الذي نريد أن نضع صورة ما كخلفية له، ونكتب فيه هذه الخاصية ثم عنوان الصورة. وإليكم الكود التالي لتفهمو أكثر:
Body {
Background-image: url ("images/fond.png");
}
كما قلما بالنسبة للون الخلفية فأي عنصر يمكن أن نغير خلفيته فقط وحده فنفس الشيء بالنسبة لصورة الخلفية.
بعض الإعدادات لصورة الخلفية:
هناك الكتير من الإعدادات التي يمكن أن نطبقها على صورة الخلفية وبها يمكننا أن نحدد الطريقة التي ستتصرف بها صورة الخلفية وأول هذه الإعدادات هي :
تثبيت الخلفية: وبها يمكننا تتبيت صورة الخلفية ومنعها من التحرك رغم تحريك الصفحة والنص هو الذي سيتحرك وينزلق فوق الخلفية ويمكن فعل هذا عن طريق الخاصية background-attachement حيت نكتب أمامها القيمة fixed ويكون الكود كالتالي:
Body {
Background-image: url ("images/fond.png");
Background-attachement: fixed;
}
هناك قيمة أخرى يمكن أن تتخدها الخاصية background-attachement وهي scroll وهي عكس القيمة الأولى fixed وهي التي يحددها المتصفح تلقائيا إن لم تحدد الإعداد الأول.
تكرار الخلفية: قد تلاحظون أن صورة الخلفية قد تتكرر كثيرا بشكل أفقي وعمودي، وهذا قد لا يكون جميلا بالنسبة إليك. وهنا يأتي دور الخاصية background-repeat وهي يمكن أن تتخد أربعة قيم مختلفة لكل واحدة دور محدد وهي كالتالي:
no-repeat: بإستعمال هذه القيمة ستون هناك صورة واحدة ولن تتكر ابدا.
repeat-x: بهذه القيمة ستتكرر القيمة أفقيا فقط.
repeat-y: بهذه الخاصية ستتكرر الصورة عموديا فقط.
repeat: هذه هي القيمة التي يستعملها المتصفح تلقائيا إن لم تستعمل أي قيمة أخرى أي أن الصورة سوف تتكرر عموديا وأفقيا.
أما بالنسبة لكيفية كتابتها في الكود فهو كما في المثال التالي:
Body {
Background-image: url ("images/fond.png");
Background-repeat: no-repeat;
}
وضعية الخلفية: وهذه الخاصية تمكننا من تحديد المكان الذي ستوضع فيه الصورة كالأسفل أو الأعلى أو على اليمين أو اليسار وهذه الخاصية تستعمل فقط عندما لا تتكرر الصورة أي عند إستعمال الخاصية background-repeat:no-repeat;.
وهذه الخاصية هي background-position ونستعمل معها إحدى القيم التالية:
top: هذه القيمة ستجعل الصورة تتموضع في الأعلى.
bottom: الصورة ستتموضع في الأسفل.
left: الصورة ستتموضع على اليسار.
center: الصورة ستتموضع في الوسط.
right: الصورة ستتموضع على اليمين.
والكود يكتب كما في المثال التالي:
Body {
Background-image: url ("images/fond.png");
Background-position: right;
}
وقد ترغب في جعل الصورة تتموضع في الأسفل على اليمين لذلك فلا مشكل في إستعمال الكود التالي الذي يجمع بين القيمتين أسفل bottom ويمين right:
Body {
Background-image: url ("images/fond.png");
Background-position: bottom right;
}
لكن هذه القيم قد لا تكون دقيقة بما يكفي فالبعض منا قد يرغب في وضع صورته على بعد 20px عن اليسار و10px عن الأعلى وهذا أيضا ممكن فيكفي أن نكتب الكود التالي وانتهى الأمر:
Body {
Background-image: url ("images/fond.png");
Background-position: 20px 10px;
}
أظن أن هذه الطريقة أكثر دقة من الأولى وهي التي تستعمل غالبا.
قد تحتاجون في بعض الأحيان إلى استعمال الكثير من الخصائص فمتلا لو أردنا أن نضع صورة في موقعنا وأن تكون تابثة وأن لا تتكرر وأن توضع في أعلى اليسار فأظن أنكم ستحتاجون لكود طويل متل هذا:
Body {
Background-image: url ("images/fond.png");
Background-position: bottom right;
Background-repeat: no-repeat;
Background-attachement: fixed;
}
كما تلا حظون فالكود فيه الكتير من التكرار وبهذا فهو طويل نوعا ما ولكي نختصره فإنه لا مشكلة في كتابته على الشكل التالي:
Body {
Background: url ("images/fond.png") bottom right no-repeat fixed;
}
في هذا الكود ستلاحظون أننا كتبنا فقط الخاصية backgrond وأمامها جميع القيم التي نريد إستعمالها وبهذه الطريقة نستطيع إختصار الأمور كما يجب أن نعرف أن الترتيب هنا لا يهم حيث يمكننا أن نبدأ بأي قيمة نريد.
أما إذا كنا نريد إدراج صورتين في الصفحة فذلك ممكن والكود الذي سنحتاجه لذلك فهو:
Body {
Background: url ("images/fond.png") bottom right no-repeat fixed,
url ("images/fond1.png") fixed;
}
في هذا الكود استعملنا صورتين حيت كتبنا رابط الصورة الأولى تم القيم التي سنطبقها عليها تم فاصلة لنفصل بينهما بعدها نكتب رابط الصورة الثانية وبعدها كذالك القيم التي سنطبقها عليها.
وقبل أن ننهي هذه الفقرة الخاصة بصورة الخلفية يجب أن نعرف أن صورة الخلفية يمكن أن نطبقها على أي جزء من الموقع وليس على جسم الصفحة body فقط كما رأينا في الأمثلة السابقة وإنما يمكننا أن نطبقها على جميع عناصر الصفحة من عناوين وفقرات و حتى بعض الكلمات فقط من النص إلى غيرها من العناصر إذن ماعليكم سوى أن تتمرنو جيدا وتقومو بالتطبيق فبهذه الطريقة فقط يمكنكم أن تتعلمو... التطبيق تم التطبيق.
الشفافية:
توفر لنا الCSS3 الكثير من المزايا الرائعة والتي من بينها هذه الميزة التي هي الشفافية وهي تمكننا من جعل أي عنصر من عناصر الصفحة شفافا والخاصية التي تمكننا من ذلك هي خاصية opacity وطريقة إستعمالها فهو سهل جدا فيكفي أن نكتب الخاصية في الكود وأمامها نكتب القيمة التي نريد وهنا يجب أن نعرف أن القيم التي تتخدها هذه الخاصية فهي محصورة بين 0 و 1 أي يمكننا أن نعطيها فقط قيما مثل 0.4 أو 0.5 أو0.6 أو 0.7 والقيمة 1 فهي تعني أن العنصر لن يكون شفافا والقيمة 0 تعني أن العنصر سيكون شفافا جدا إلى درجة أنه لن يكون ظاهرا وإليكم الكود التالي لكي تفهمو أكثر:
P {
bckground-color: black;
color: white;
opacity: 0.3;
}
في هذا المتال ستلاحظون أننا جعلنا خلفية النص سوداء ولون الكتابة أبيض وجعلنا الشفافية بقيمة 0.3 أي أن خلفية النص ستكون شفافة بنسة 30 في المئة أي أننا نستطيع أن نرى ما خلفها، فلو كانت هناك صورة مثلا في الخلفية فسنستطيع أن نراها من خلال خلفية النص التي جعلناها شفافة.
في هذا المتال ستلاحظون أننا جعلنا خلفية النص سوداء ولون الكتابة أبيض وجعلنا الشفافية بقيمة 0.3 أي أن خلفية النص ستكون شفافة بنسة 30 في المئة أي أننا نستطيع أن نرى ما خلفها، فلو كانت هناك صورة مثلا في الخلفية فسنستطيع أن نراها من خلال خلفية النص التي جعلناها شفافة.
الإطارات
الأن سنتعرف واحدة أخرى من خصائص ال CSS وهي خاصية تمكننا من إضافة إطارات على صفحاتنا، وهي خاصية border ولإضافة إطار حول أي عنصر من عناصر يكفي أن تضيفوا كودا شبيها بالتالي والذي يؤطر العناوين الرئيسية
الأن سنتعرف واحدة أخرى من خصائص ال CSS وهي خاصية تمكننا من إضافة إطارات على صفحاتنا، وهي خاصية border ولإضافة إطار حول أي عنصر من عناصر يكفي أن تضيفوا كودا شبيها بالتالي والذي يؤطر العناوين الرئيسية
h1:h1 {
border: 3px blue dashed;
}
}
كما تلاحظون الكود يتوفر على ثلاثة إعدادات أولها 3px وهي تحدد لنا عرض الإطار ثم blue وتعني أزرق يعني لون الإطار هنا أزرق وأخيرا dashed والتي تحدد نوع الإطار وهنا سيون الإطار عبارة عن خط متقطع، مع العلم أن هناك أنواع أخرى من الإطارات وهي كالتالي:
- solid: تعطينا خط عادي
- dotted: خط منقط
- double: خط مزدوج
- groove: خط مقعر
- ridge: خط محدب
- inset: ثلاثي الأبعاد
- outset: ثلاثي الأبعاد بشكل معاكس
إطارات مدورة
هناك خاصية أخرى تمكننا من جعل حواف الإطارات مدورة عوض زوايا قائمة والكود يكون كالتالي:
p {
border-radius: 10px;
}
الكود واضح، الزوايا ستكون مدورة بنسبة 10px.لكن هنا جميع الزويا ستصبح مدورة بنفس النسبة، ماذا لو أردنا نسبة مختلفة لكل زاوية؟ هنا الكود التالي سيفي بالغرض:
p {
border-radius: 10px 5px 10px 5px;
}
النسبة الأولى للزاوية أعلى اليسار والثانية للزاوية أعلى اليمين والثالثة للزاوية أسفل اليمين والرابعة للزاوية أسفل اليسار.الظلال
الظلال هي من الخصائص الحديثة في لغة CSS وهي تمكننا من إظهار الظلال على عناصر صفحاتنا ولإضافتها نستعمل الخاصية box-shadow وإليكم الكود التالي كمثال:
p {
box-shadow: 5px 5px 2px black;
}
هناك الكثير من خصائص CSS و HTML التي يمكنكم اكتشافها بالبحث عبر الأنترنت وهي سهلة التعلم سيلزمكم فقط التطبيق والتجريب من أجل تعلمها فهناك الكثير من المواقع لتعلم لغتي HTML و CSS من بينها:
موقع لتعلم لغة HTML و CSS باللغة العربية.
موقع لتعلم HTML و CSS بالإنجليزية.
الدرس السابق: تعلم HTML و CSS: تنسق النص
الدرس التالي: تعلم HTML و CSS: تصميم الموقع
شكراً جزيلاً على هذا المجهود.
ردحذف