شرح كآمل لخوآص الالوآن في Css ! , وطرق التعامل معها ..

الموضوع في 'قسم تطوير المواقع والمنتديات والسيرفرات' بواسطة нєαɒs нυиτєя, بتاريخ ‏14 أغسطس 2013.

  1. x
    <font color="RoyalBlue">تُقسم الألوان في css الى ألوان خطوط "foreground color" وخلفيات "background-color" ويتم تعريف اللون في كل مهم بـ 4 طرق مختلفه .. وسابقاً بـ html في حالة تلوين كلمات داخل الفقرات كنا نضع وسم جديد وهو بين الكلمات المراد تلوينها كما تشاهد هنا...

    رمز Code:


    يتم تعريف اللون في css بـ 4 طرق مختلفه




    وعندما نريد وضع لون لخلفيه الصفحه كنا نضعها بهذا الشكل داخل الوسم

    رمز Code:




    يتم تعريف اللون في css بـ 4 طرق مختلفه






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

    .. اما داخل css كما تعلمنا يمكننا نطبق الأمر الواحد على كل الفقرات او فقرات محدده فقط ـ أمر اللون سهل جدا وكل ماعليك ان تكتبه فقط بهذا الشكل color راجع الدرس التالي لتتذكر الصيغه العامه لكتابه أكواد css واللون طريقه تعريقه تقسم الى 4 صيغ كما نوهنا بالشكل التالي:

    رمز Code:
    Property Value Description
    color: يحدد هنا اللون بالكتابة عن طريق وضع أسمة مباشرة.
    color: #rrggbb يوضع اللون بالطريقة العادية المتبعه بالأرقام والحروف.
    color: rgb(rrr,ggg,bbb) ضع اللون عن طريق القيم وتحدد من 0 الى 255.
    color: rgb(rrr%,ggg%,bbb%) اللون عن طريق النسبة المئوية.
    1- color keyword وفيها يتم تعريف اللون بأسمه وعدد الالوان المعروفه هم 17 فقط كالتالي :
    aqua, black, blue, fuchsia, gray, green, lime, maroon
    navy, olive, orange, purple, red, silver, teal, white
    and yellow.
    ويكتب هكذا..




    رمز Code:
    p { color: green; }
    كذلك يمكننا ان نجعل الخلفيه شفاشه عن طريق كتابه transparent فهو صالح ايضا.

    2- #rrggbb الطريقه المعتادة لوضع اللون وهى تسمى Hexadecimal سداسي عشري وتبدأ بعلامة هاش (#) وبعد ذلك تكتب القيمه المكونة من 6 ارقام او حروف هكذا :

    رمز Code:
    p { color: #00FF00; }
    وهذه الطريقه ايضا يمكن ان تختصر فبدلا من كتابه 6 أرقام او حروف تختصر فقط الى 3 ارقام كما بالأمثله التاليه :

    رمز Code:
    color: #00FF00; ››› color: #0F0;
    color: #FF0000; ››› color: #F00;
    color: #0000FF; ››› color: #00F;
    لاحظ كيف تم الأختصار ـ وهذه الطريقه توفر عليك الحفظ ـ ولاكنها ايضا رغم ذلك لا تناسب تدرجات الالوان المختلفة.

    3-
    رمز Code:
    rgb(rrr,ggg,bbb)
    وهى تحدد عن طريق القنوات rgb وذلك بوضع قيمه لكل منهم تبدأ من 0 الى 255.

    رمز Code:
    p { color: rgb(0,255,0); }
    rgb(rrr%,ggg%,bbb%)
    وبنفس الصيغه السابقه يمكن ان تحدد القيمه بالنسب المئوية.

    رمز Code:
    p { color: rgb(0%,100%,0%); }
    إذن يمكن القول أن اللون يمكن ان يعرّف بـ4 صيغ مختلفه كلها تؤدي نفس الغرض.

    كما حددنا بالأمر السابق color يبقى لنا تلوين الخلفيات وتكون عن طريق الامر background-color والخواص وطريقه كتابه الاوامر لن تختلف فقط ماتغير هو الأمر والذى من خلاله يمكننا تلون خلفيات الصفحات او الأوسمه بسهوله ..

    رمز Code:
    p { background-color: transparent; }
     

مشاركة هذه الصفحة