Accéder au contenu principal

الدرس css 3

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

الدرس 3: الألوان والخلفيات

في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص فيcss 

لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
 
 h1 {
  color: #ff0000;
 }
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color


خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.
 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
فراشة
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif").

تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.
القيمةالوصفمثال
Background-repeat: repeat-xالصورة ستتكرر أفقياًشاهد المثال
background-repeat: repeat-yالصورة ستتكرر عمودياًشاهد المثال
background-repeat: repeatالصورة ستتكرر أفقياً وعمودياًشاهد المثال
background-repeat: no-repeatلن تتكرر بأي شكلشاهد المثال
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
القيمةالوصفمثال
Background-attachment: scrollالصورة ستتحرك مع الصفحةشاهد المثال
Background-attachment: fixedالصورة ستبقى ثابتةشاهد المثال
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.


الجدول أدناه يوضح بالمزيد من الأمثلة
القيمةالوصفمثال
background-position: 2cm 2cmهذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشةشاهد المثال
background-position: 50% 25%هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشةشاهد المثال
background-position: top rightهذه الصورة وضعت في أعلى يمين الصفحةشاهد المثال
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.
باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:
 
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:
 
 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
background-color | background-image | background-repeat | background-attachment | background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال:
 
 background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll و
Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Basic PHP Syntax

Basic PHP Syntax   A PHP script can be placed anywhere in the document.   A PHP script starts with <?php and ends with ?> : <?php // PHP code goes here ?>   The default file extension for PHP files is ".php".   A PHP file normally contains HTML tags, and some PHP scripting code.   Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function "echo" to output the text "Hello World!" on a web page:
Enregistrer un commentaire
Lire la suite

Bootstrap Icons CSS

Bootstrap Icons   To use the Bootstrap glyphicons , add the following line inside the <head > section of your HTML page :   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >   visite link
1 commentaire
Lire la suite

طريقة الحصول على بطاقة ماستركارد Mastercard افتراضية مجانا

طريقة الحصول على بطاقة ماستركارد   Mastercard افتراضية مجانا كيفية الحصول على بطاقة ائتمان "ماستر كارد"  Mastercard VCC الكترونية بالمجان تشتغل 100 % قابلة للشحن بعدت طرق , اسهل طريقة للحصول على بطاقة الكترونية بدون اي شروط , يمكن استعمالعا على المواقع التي تطلب التاكيد ببطاقة بنكية للاستفادة من الخدمات المجانية مثل VPS جوجل , VPS امازون و العديد من المواقع التي تقدم خدمات مقابل التاكيد بالبنوك الالكترونية طريقة الحصول على بطاقة ماستركارد Mastercard افتراضية مجانا اليوم سوف نقدم لكم طريقة الحصول على بطاقة افتراضية ماستر كارد  Mastercard مجانية VCC , بها ارقام الحساب مع تاريخ نهاية الصلاحية و ثلاثة ارقام سرية  , كل هذه البيانات التي تطلبها منك المواقع لتفعيل اي حساب تريد تجربته بالمجان مثل موقع امزون الذي يوفر VPS لمدة سنة كاملة مجانا . العرض من طرف ياندكس الروسي Yandex هو متعدد الخدمات مثل جوجل , يحتوي على محرك بحث , بريد الكتروني و الذي يهمنا في هده التدوينة هو Money Yandex المصرف او البنك الالكتروني , حيث يمكنك من خلاله الحصول على بطاقة افتراضية بمجرد ال...
Enregistrer un commentaire
Lire la suite