Docstoc

كتاب ابدأ CSS

Document Sample
كتاب ابدأ CSS Powered By Docstoc
					              ‫إبدأ‬
             ‫‪CSS‬‬
    ‫كيفيت انعًم بتمُيت تُسيك عُبصر صفحبث انًىالع ‪CSS‬‬




                       ‫‪Linverno‬‬
                         ‫8002‬




‫2‬
                                                                                                  ‫يمديت‬

      ‫٘زا اٌىزبة عضء ِٓ ِغٙٛد ٌخذِخ اإلعالَ ٚاٌّغٍّيٓ. ٌزٌه فٙٛ ِغبٔٝ, يٕزفغ ثٗ ِٓ أساد اإلٔزفبع. ٚغيش‬
                                                              ‫ب‬
      ‫ِؾذد أٚ ِمظٛس ػٍٝ فئخ خبطخ. يّىٕه ايؼً ٔغخٗ ٚ رٛصيؼٗ ٚ ؿجؼٗ ٚاإللزجبط ِٕٗ ثأٜ طٛسح وبٔذ.‬
    ‫ثً ِٓ األفؼً أْ يزُ رٛصيؼٗ ٚ ٔششٖ لذس اإلعزـبػٗ. ٚارّٕٝ ٌىً ِٓ يغزـيغ أْ يمذَ وزت ػٍّيخ ٔبفؼخ أْ‬
                                            ‫ال يزأخش ػٓ ٘زا. فخيشوُ - وّب رؼٍّْٛ – ِٓ رؼٍُ اٌؼٍُ ٚ ػٍّٗ.‬



                                                                            ‫ب‬
                             ‫٘زا اٌىزبة ٌٍّجزذئيٓ ٔٛػً ِب فٝ رـٛيش اٌّٛالغ, اٚ اطؾبة اٌّغزٜٛ اٌّزٛعؾ.‬



                                                                 ‫ب‬
       ‫٘زا اٌىزبة يؾزٜٛ ػٍٝ 51 طفؾخ رمشيجً. ٌمذ ساػيٕب أال يىْٛ ٕ٘بن أٜ صيبداد فٝ اٌششػ رإدٜ اٌٝ فمذ‬
    ‫اٌزشويض أٚ اإلثزؼبد ػٓ ِٛػٛع اٌىزبة. ٌزٌه عبء اٌىزبة ِشوض ٚ شجٗ شبًِ ألعبعيبد اٌزمٕيخ. ٕ٘بن اٌؼذيذ‬
      ‫ِٓ اٌىزت اٌزٝ رضيذ طفؾبرٙب ػٓ 005 طفؾخ. ٌىٓ فٝ اٌؾميمخ يّىٓ ئخزظبس٘ب اٌٝ سثغ ٘زا اٌؼذد. ٌزٌه‬
                                                        ‫ب‬      ‫ب‬
        ‫اثزؼذٔب ػٓ وً ِب ٌيظ ٌٗ داػٝ ٚلذِٕب ػًٍّ خبٌظً ثذْٚ رؼميذاد. عٛف رغذ اْ ٘زا اٌىزبة يزؾذس ػٓ‬
     ‫ويفيخ اٌزؼبًِ ِغ ‪ِٚ .CSS‬غ اإلٔزٙبء ِٓ رٌه اٌىزبة عٛف يىْٛ ٌذيه اٌمذسح ػٍٝ اٌزؼبًِ ِغ ‪ CSS‬ثىبفخ‬
                                                                                     ‫األشىبي اٌّّىٕخ.‬



                         ‫ٔشعٛ ِٓ اهلل أْ يىْٛ ٘زا اٌىزبة ٔفؼبً ٌٕب فٝ اٌذٔيب ٚ األخشح. ٚٔفؼبً ٌغّيغ اٌّغٍّيٓ.‬




‫3‬
                                                                     ‫تبريخ صفحبث انىيب‬
                                                                                               ‫انبدايت‬
                                                                            ‫ب‬
    ‫فٝ ثذايخ ػظش اٌٛيت ( رمشيجُ ِب ثيٓ 0991 ٚ 3991 )، وبٔذ ٌغخ ‪ ِٓ HTML‬اٌٍغبد اٌجغيـخ فٝ اٌزؼٍُ.‬
    ‫ٚوبٔذ رمذَ ؿشق عٍٙخ ٌىزبثخ ثؼغ األشيبء ِضً لـغ إٌظٛص ( ‪ ٚ ) Paragraph‬إٌظٛص اٌّزشؼجخ ٚ‬
                                                                                ‫ب‬
    ‫اٌمٛائُ ٚ اٌؼٕبٚيٓ. ٚايؼً وبٔذ رّىٓ اٌّـٛسيٓ ِٓ ئٔشبء اٌغذاٚي ٚ اإلؿبساد. ٌىٓ رٍه اٌٍغخ ٌُ رىٓ رٙزُ‬
                                                                                                  ‫ا‬
                                                   ‫وضيشُ ثبٌّظٙش اٌخبص ثزٍه اٌؼٕبطش اٌزٝ رمَٛ ثأشبء٘ب.‬

     ‫01 دلبئك. فبٌذخٛي ِٓ‬    ‫فغأح، أطجؾذ لٛح اٌشجىخ اٌؼبٌّيخ ٚاػؾخ ألٜ شخض رؼبًِ ِؼٙب ٌٚٛ ٌّذح‬
       ‫طفؾخ اٌٝ أخشٜ أٚ اٌزٕمً ِٓ ِغزٕذ اٌٝ أخش ٌُ يىٓ يؾزبط اٌٝ أوضش ِٓ ثؼغ إٌمشاد ثبٌّبٚط ػٍٝ‬
       ‫ثؼغ اٌشٚاثؾ . ٚوبْ ِٓ اٌغّيً ٚلزٙب اْ اٌّزظفؾبد اٌخبطخ ثبإلٔزشٔذ رغزـيغ ػشع إٌظٛص ٚ‬
         ‫اٌظٛس عٕجبً اٌٝ عٕت. ٚوبْ وً ِب يؾزبعخ اٜ ِـٛس إلٔشبء طفؾبد ئٔزشٔذ ِغشد ثشٔبِظ ٌزؾشيش‬
                                  ‫إٌظٛص، ٌٚمذ وبٔذ رٍه اٌّؾشاساد ِغبٔيخ، ٚعٍٙخ فٝ اٌزؼبًِ ِؼٙب.‬

         ‫ٚأزششد ِٛالغ اإلٔزشٔذ فٝ وً ِىبْ ٚثىً األشىً. فٕٙبن ِٛالغ شخظيخ ِٚٛالغ ئخجبسيخ ٚ ِٛالغ‬
       ‫اٌغبِؼبد ِٚٛالغ اٌششوبد ٚاٌؼذيذ ِٓ أٔٛاع اٌّٛالغ. ٚوّب رضايذد اػذاد ِٛالغ اإلٔزشٔذ، رضايذ اٌـٍت‬
     ‫ػٍٝ ِىٛٔبد عذيذح فٝ ٌغخ ‪ HTML‬اٌزٝ رمَٛ ثبداء ثؼغ اٌٛظبئف اٌّؾذدح، ٌمذ ثذأد ِـٛسٚا طفؾبد‬
    ‫اإلٔزشٔذ يـبٌجٛا ثّىٛٔبد رّىٕىُٙ ِٓ وزبثخ ٔظٛص ثخـٛؽ عّيىخ ( ‪ٔ ٚ ) Bold‬ظٛص ِبئٍخ. فٝ رٌه‬
         ‫اٌٛلذ، ٌُ رىٓ ‪ِ HTML‬غٙضح ٌزٍجيخ رٍه اٌّـبٌت. ٌُٚ يىٓ ٕ٘بن ٚلزٙب ِب يؼّٓ أْ رظٙش اٌظفؾخ‬
                 ‫ٌٍّغزخذَ وّب ٔغمٙب اٌّـٛس، فمذ وبٔذ رؼشع ػٍٝ ؽغت اٌّزظفؼ اٌزٜ يغزخذِٗ اٌّغزخذَ.‬

                                                                                      ‫ب‬
    ‫ٚفمً ٌىً ِب عجك ِٓ أؽذس ٚ رـٛساد ثذاد ثؼغ اٌّىٛٔبد فٝ اٌظٙٛس ثذاخً ٌغخ ‪ِ HTML‬ضً ػٕظش‬
                                                ‫ب‬
                             ‫>‪ٚ ،<font‬فغأح أطجؾذ ٌغخ ‪ HTML‬أوضش ئ٘زّبًِ ثبٌّظٙش ٚ اٌزٕغيك.‬

      ‫ثؼذ ػذح عٕيٓ، أطجؼ عضء وجيش ِٓ ٌغخ ‪ِ HTML‬ىشط ٌٍّظٙش ٚاٌزٕغيك. ِٓ ؽيش اٌمذسح ػٍٝ رٍٛيٓ‬
       ‫إٌض ٚ اخزيبس ؽغُ ٌٍٕض، ٚ اخزيبس اٌٛاْ ٌٍخٍفيخ . ٚظٙٛس خظبئض ٌٍغذاٚي، ٚاخزيبس ِظٙش ٌٍٕض‬
                                              ‫ب‬
    ‫عٛاء وبْ عّيه أٚ ِبئً أٚ اٜ ِٓ اٌّظب٘ش اٌّؼشٚفخ ؽبٌيً. ٚوّب ٘ٛ ِؼشٚف وٍّب صادد خظبئض اٌشٝء‬
                                                     ‫وٍّب صادد اٌفٛػٝ ٚطؼٛثخ رشويت ٘زا اٌشٝء.‬

      ‫ثاؽزٛاء طفؾخ اٌٛيت ػٍٝ اٌؼذيذ ِٓ اٌؼٕبطش فٝ رشويجٙب، ادٜ رٌه اٌٝ طؼٛثخ ٘يىٍخ رٍه اٌؼٕبطش. أٚ‬
      ‫رشريجٙب فٝ رشريت ِفَٙٛ ٚ ِٕظُ. ٚاطجؾذ ِؾشوبد اٌجؾش ال رجؾش ئال فٝ ػٕٛاْ اٌظفؾخ فمؾ، أٚ فٝ‬
                                                                ‫األلغبَ اٌّؼٕٛٔخ ( ‪ ) Headings‬فمؾ.‬

      ‫اإلفزمبد اٌٝ اٌٙيىٍخ إٌّظّخ يمًٍ فشص اٌذخٛي ػٍٝ اٌظفؾخ. أفزشع أْ ِغزخذَ اػّٝ يغزخذَ ِزظفؼ‬
       ‫ٌمشاءح ِؾزٛيبد اٌظفؾبد، ئرا دخً ػٍٝ طفؾخ راد رٕظيُ ثٕبئٝ عيذ، فغٛف يزّىٓ ِٓ اٌجؾش داخً‬
                                                             ‫ال‬
      ‫اٌظفؾخ ػٓ األلبعُ اٌزٝ يشيذ لشاءرٙب فؼ ً ٚثغٌٙٛخ. اِب ٌٛ وبٔذ اٌظفؾخ غيش ِٕظّخ ثٕبئيخ فٍٓ يزّىٓ‬
                                         ‫اٌّزظفؼ ِٓ اٌؼضٛس ػٍٝ األلغبَ اٌزٝ يشيذ٘ب اٌّغزخذَ ثغٌٙٛخ.‬

    ‫اٌظفؾبد إٌّظّخ ثٕبئيبً أعًٙ فٝ اٌظيبٔخ ٚ اٌزؼذيً ٚ اٌزـٛيش. ئرا وٕذ رجؾش ػٓ اؽذ اٌخـبء فٝ طفؾخ‬
                                                              ‫ال‬      ‫ا‬
               ‫غيش ِٕظّخ، فغٛف رجؾش وضيشً ٚ ؿٛي ُ داخً اٌؼذيذ ِٓ اٌؼٕبطش اٌغيش ِشرجخ ٚ اٌّزىشسح.‬


‫4‬
          ‫ثظفخ ػبِخ، اٌظفؾخ اٌىبٍِخ اٌٙيىٍخ رزـٍت ثؼغ اٌزخـيؾ. ِٚب ٔؾزبط اٌيٗ ثبٌفؼً ٘ٛ ؿشيمخ ٌٙيىٍخ‬
                                 ‫اٌظفؾبد ثـشيمخ طؾيؾخ ٚ فٝ ٔفظ اٌٛلذ رمذيُ اٌظفؾخ فٝ شىً عزاة.‬

                                                                                      ‫ظهىر ‪CSS‬‬
    ‫فٝ ػبَ 5991 ثذا ئرؾبد اٌشجىخ اٌؼبٌّيخ ( ‪ ) World Wide Web Consortium‬اٌجؾش إليغبد ؽً عشيغ‬
       ‫ٌٍّشىٍخ اٌغبثمخ. ٚثؾٍٛي ػبَ 6991، أطجؼ ِزٛاعذ ثيٓ يذيٕب ‪ CSS‬اٚ ( ‪.) Cascading Style Sheet‬‬

    ‫فٝ اٌّمبَ األٚي، رغّؼ ‪ CSS‬ثأشبء طفؾخ ِٕغمخ أوضش ِّب وبٔذ رمذِخ ‪ ،HTML‬ػٍٝ اٌشغُ ِٓ ئِىبٔيبد‬
    ‫‪ HTML‬اٌؼبٌيخ فٝ ِغبي اٌزٕغيك. عبءد ‪ٌ CSS‬زغّؼ ثزؾذيذ أٌٛاْ ٌٍٕظٛص ٚرؾذيذ خٍفيبد ألٜ ػٕظش،‬
        ‫ٚ اٌغّبػ ثأشبء ؽذٚد ٚ ئؿبساد ؽٛي اٜ ػٕظش، ٚ اٌزؾىُ فٝ اٌّغبفخ اٌزٝ ثيٓ اٜ ػٕظش ٚاخش، ٚ‬
                                            ‫ػًّ اٌذيىٛس اٌالصَ ٌٍٕض، ٚ اٌؼذيذ ِٓ اٌّّيضاد األخشٜ .‬

                                                  ‫ب‬
                      ‫ػٍٝ عجيً اٌّضبي، أٜ ػٕٛاْ يٛعذ فٝ اٜ طفؾخ غبٌجً ِب يىزت ثبعزخذاَ اٌؼٕظش 1‪:H‬‬
    ‫>1‪<h1>Welcome in my Page</h‬‬


           ‫ال‬
      ‫أفزشع أه رشيذ ٌٙزا اٌؼٕٛاْ أْ يىْٛ رٚ ٌْٛ أؽّش، ٚيغزخذَ خؾ ِؼيٓ فٝ اٌىزبثخ، ٚ يىْٛ ِبئ ً، ٌٚٗ‬
      ‫خٍفيخ طفشاء، ٌؼًّ ٘زا ثبعزخذاَ ‪ HTML‬فغٛف رؼـش اٌٝ ٚػغ ٘زا اٌؼٕٛاْ ثذاخً عذٚي ٚاعزخذاَ‬
                                 ‫اٌؼذيذ ِٓ اٌؼٕبطش األخشٜ ِضً ‪ٌ ،u ٚ font‬ىٓ ِغ ‪ CSS‬وً ِب رؾزبعٗ ٘ٛ:‬
    ‫{ 1‪h‬‬
      ‫;‪color: red‬‬
      ‫;‪font: italic 2em Times, serif‬‬
      ‫;‪text-decoration: underline‬‬
      ‫;‪background: yellow‬‬
    ‫}‬
                                ‫٘زٖ ٘ٛ وب ِب رؾزبعخ. ثً ٚ يّىٕه ئػبفخ اٌّضيذ ِٓ اٌخظبئض ئْ سغجذ:‬
    ‫;‪h1 {color: red; font: italic 2em Times, serif; text-decoration: underline‬‬
          ‫;‪background: yellow url(titlebg.png) repeat-x‬‬
          ‫};‪border: 1px solid red; margin-bottom: 0; padding: 5px‬‬



    ‫ٌذيه األْ طٛسح فٝ خٍفيخ إٌض ٚ ٘ٝ رزىشس فمؾ ثشىً أفمٝ ( ػٍٝ اٌّؾٛس ‪ٌٚ ،) x‬ذيه ؽذٚد ؽٌٛٗ، رٍه‬
                                         ‫اٌؾذٚد رجؼذ ػٓ إٌض ثـ 5 ثيىغً. ٚثؼغ اٌخظبئض األخشٜ.‬

    ‫أُ٘ ِب يّيض ‪ ٛ٘ CSS‬ئِبوٕيخ اعزخذاَ ِغزٕذ ‪ٚ CSS‬اؽذ ألوضش ِٓ طفؾخ. اٚ اعزخذاَ عضء ِٓ ِغزٕذ ‪CSS‬‬
                                   ‫ٌزـجيمخ ػٍٝ أوضش ِٓ ػٕظش. ٚ ٘ٛ ِب يغًٙ ػٍّيخ اٌزؼذيً ٚاٌظيبٔخ.‬




‫5‬
                                                             HTML ‫ يع‬CSS ‫ارفبق‬
                                                                         Elements ‫انعُبصر‬
     ‫اٌؼٕبطش ٘ٝ أعبط ثٕيخ اٌّغزٕذاد اٌخبطخ ثبٌٛيت اٜ طفؾبد اٌٛيت. ثبٌٕظش اٌٝ عضء ِٓ ٘يىً طفؾخ‬
     .ٝ‫ٚيت ( شىً 1.1 ) ٔغذ ئٔٙب رؾزٜٛ ػٍٝ رشاويت ِٓ اٌؼٕبطش اٌّخزٍفخ, اٌزٝ رٕزظ شىً اٌظفؾخ إٌٙبئ‬
    ‫ ٚغيش٘ب ِٓ اٌؼٕبطش. وً ػٕظش ِٓ رٍه اٌؼٕبطش‬P, font, div, span, u, th ‫ِٓ رٍه اٌؼٕبطش ٕ٘بن‬
                                                                   .ً‫يّضً عضء ِٓ ِظٙش اٌظفؾخ وى‬

                             ‫شكم ( 2 – 61 ): بعض عُبصر صفحت انىيب‬




                                                               HTML ‫ يع‬CSS ‫طرق إرفبق‬
    ،‫ ِجبششح ثذاخً اٌظفؾخ‬CSS ‫ أٚ أٜ ٌغخ رشِيض اخشٜ ػٓ ؿشيك وزبثخ وٛد‬HTML ‫ ِغ‬CSS ‫يّىٕٕب اسفبق‬
                                    .‫ ِغزمً ٚاإلشبسح اٌيٗ ثذاخً اٌظفؾخ‬CSS ‫أٚ ػٓ ؿشيك ئٔشبء ِغزٕذ‬

                                                                        :ٓ‫اٌىٛد اٌزبٌي يّضً اٌـشيمزي‬
    <html>
    <head>
    <title>Eric's World of Waffles</title>
    <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
    <style type="text/css">
    @import url(sheet2.css);
    h1 {color: maroon;}
    body {background: yellow;}
    /* These are my styles! Yay! */
    </style>
    </head>
    <body>
    <h1>Waffles!</h1>
    <p style="color: gray;">The most wonderful of all breakfast foods is
    the wafflea ridged and cratered slab of home-cooked, fluffy goodness
    that makes every child's heart soar with joy. And they're so easy to make!
    Just a simple waffle-maker and some batter, and you're ready for a morning
    of aromatic ecstasy!
    </p>
    </body>
    </html>


6
                          ‫اٌىٛد اٌغبثك ٘ٛ وٛد طفؾخ ‪ .HTML‬يؾزٜٛ ٘زا اٌىٛد ػٍٝ عـش ٘بَ ٌٍغبيخ ٚ٘ٛ‬
    ‫>/ "‪<link rel="stylesheet" type="text/css" href="sheet1.css" media="all‬‬


           ‫٘زا اٌغـش اشبسح اٌٝ ِغزٕذ ‪ CSS‬خبسعٝ. يؾًّ ٘زا اٌّغزٕذ اٌزٕغيك اٌخبص ثؼٕبطش رٍه اٌظفؾخ‬

                                                                           ‫ب‬
                                            ‫ٚيؾزٜٛ ٘زا اٌىٛد ايؼً ػٍٝ ػٕظش ٘بَ ٚ٘ٛ اٌؼٕظش اٌزبٌٝ‬
    ‫>"‪<style type="text/css‬‬
    ‫;)‪@import url(sheet2.css‬‬
    ‫};‪h1 {color: maroon‬‬
    ‫};‪body {background: yellow‬‬
    ‫/* !‪/* These are my styles! Yay‬‬
    ‫>‪</style‬‬


    ‫ٚ٘ٛ ػٕظش يؾزٜٛ ثذاخٍٗ ػٍٝ وٛد ‪ .CSS‬اٜ اْ رٍه اٌظفؾخ رزؼبًِ ِغ ‪ CSS‬ثبٌـشيمزيٓ، اسفبق اٌىٛد‬
                                                      ‫ثذاخً اٌظفؾخ ٚاإلشبسح اٌٝ ِغزٕذ ‪ CSS‬خبسعٝ.‬



                                                                  ‫انًُتمىٌ ‪Selectors‬‬
    ‫ِٓ أفؼً اٌّّيضاد اٌزٝ أرذ ثٙب ‪ ٝ٘ ،CSS‬اٌمذسح ػٍٝ رـجيك ٔفظ اٌـ ‪ٌٍ style‬ؼذيذ ِٓ اٌؼٕبطش فٝ ٚلذ‬
    ‫ٚاؽذ. ػٍٝ عجيً اٌّضبي يّىٕه ثزؼذيً ثغيؾ فٝ عـش ٚاؽذ ِٓ اٌىٛد أْ رغيش ٌْٛ عّيغ اٌؼٕبٚيٓ اٌّٛعٛدح‬
        ‫فٝ اٌظفؾخ أٚ ؽزٝ فٝ ػذح طفؾبد. رٌه يغؼً ِظّّٛا طفؾبد اٌٛيت يشوضْٚ أوضش ػٍٝ اٌزظّيُ‬
                                ‫ٌٚيظ ػٍٝ ؿشيمخ وزبثخ اٌىٛد اٌزٜ يظٙش اٌزظّيُ. فبٌىٛد اطجؼ أِشٖ ٘يٓ.‬



                                                             ‫انمىاعد األسبسيت ‪Basic Rules‬‬
     ‫اٌمٛاػذ ( ‪ ) Rules‬رـٍك ٕ٘ب ػٍٝ وٛد ‪ CSS‬اٌزٜ يـجك ػٍٝ ػٕظش ِب. ٚ٘ٝ ِٓ اٌّّىٓ اْ ٔمٛي ػٍيٙب‬
    ‫لبْٔٛ أٚ ػٙذ، اٚ لذ ٔىزفٝ ثأْ ٔـٍك ػٍيٙب ‪ٚ .Rules‬اٌـ ‪ٌٍ ،Rules‬زٛػيؼ، ٘ٝ ِغّٛػخ ِٓ اٚاِش ‪CSS‬‬
        ‫ِٛػٛػٗ ثيٓ لٛعيٓ ِؼمٛفيٓ } { ٚلجً ثذايخ اٌمٛعيٓ يٛعذ اعُ اٌؼٕظش اٌزٜ عٛف رزـجك ػٍيٗ رٍه‬
                       ‫اٌّغّٛػخ ِٓ األٚاِش. اٜ أٗ ثاخزظبس ِغّٛػخ اٌظفبد اٌزٝ رـجك ػٍٝ ػٕظش ِب.‬

       ‫ثبألخز ثبٌّمذِخ اٌغبثمخ، يّىٕٕب أْ ٔفزشع أْ ٌذيٕب طفؾخ ٚيت ٚٔشيذ أْ يظجؼ ٌْٛ إٌض اٌخبص ثىً‬
                     ‫ػٕظش 2‪ H‬سِبدٜ. ثبعزخذاَ ؿشيمخ ‪ HTML‬اٌمذيّخ يغت ػٍيه وزبثخ شٝء ِضً ٘زا:‬
    ‫>‪<Font color="gray"> ... </Font‬‬

                                   ‫فٝ وً ػٕظش 2‪ H‬فٝ اٌظفؾخ، ٌيظجؼ اٌشىً اٌىبًِ ٌٍؼٕظش وبٌزبٌـٝ:‬
    ‫>2‪<h2><font color="gray">this is H2 text</font></h‬‬




‫7‬
    ‫وّب ٘ٛ ٚاػؼ رظجؼ اٌؼٍّيخ ٍِّخ عذاً ئرا وبْ ٕ٘بن أوضش ِٓ ػٕظش 2‪ H‬فٝ اٌظفؾخ. رخيً طفؾخ ثٙب‬
     ‫خّغخ ػشش ػٕظش 2‪ِ ،H‬برا يزٛعت ػٍيه فؼٍٗ ؽيٕٙب !. ِٚبرا ٌٛ وبٔٛا أوضش ِٓ رٌه!. صُ ِبرا ٌٛ لشسد‬
                                                             ‫ال‬
                                                           ‫رغيش اٌٍْٛ ثؼذ رٌه ِٓ سِبدٜ اٌٝ أخؼش ِض ً!.‬

                                                           ‫ب‬
    ‫عبءد ‪ٌ CSS‬زؾً رٍه اٌّشىٍخ وّب روشٔب عبثمً. فؼٓ ؿشيك وزبثخ وٛد ٚاؽذ يزُ رـجيمخ ػٍٝ عّيغ اٌؼٕبطش‬
                      ‫ب‬
     ‫اٌزٝ ٌٙب ٔفظ األعُ ثؾيش ئرا ِب اسدد رؼذيً اٜ خبطيخ فيّىٕه رؼذيٍٙب ِشح ٚاؽذح ايً وبْ ػذد اٌؼٕبطش.‬
                                                      ‫فمؾ لُ ثىزبثخ ٘زا اٌىٛد ٌزؾٛيً ٌْٛ 2‪ H‬اٌٝ سِبدٜ:‬
    ‫};‪h2 {color: gray‬‬

    ‫٘زا اٌغـش اٌمظيش يزُ رـجيمٗ ػٍٝ وً ِب يغّٝ 2‪ ٌٛٚ .H‬اسدد رغيش اٌٍْٛ ِشح أخشٜ، ٌيظ ػٍيه ئال اْ‬
                                                                   ‫رمَٛ ثزؼذيً ثغيؾ فٝ اعُ اٌٍْٛ:‬
    ‫};‪h2 {color: silver‬‬




                                                                        ‫تركيب انمبعدة ‪Rule Structure‬‬

                           ‫ٌزٛػيؼ اعبعيبد اٌـ ‪ Rules‬ثشٝء ِٓ اٌزفظيً، دػٕب ٔفىه اٌزشويت اٌخبص ثٙب.‬

    ‫ٌىً ‪ Rule‬عضئيٓ أعبييٓ، اٌغضء األٚي ٚ ٘ٛ إٌّزمٝ ( ‪ٚ ) Selector‬اٌغضء اٌضبٔٝ ٘ٛ ِغّٛػخ األٚاِش (‬
    ‫‪ ) Declaration Block‬أٚ يّىٓ رشعّزٙب اٌٝ وزٍخ اٌزظبسيؼ. ِٚغّٛػخ األٚاِش أٚ اٌزظبسيؼ وّب اششٔب‬
       ‫عبثمً ِؾظٛسح ثيٓ لٛعيٓ ِؼمٛفيٓ، ٚ٘ٝ رزىْٛ ِٓ رظشيؼ أٚ أصٕيٓ أٚ أوضش. ٚوً رظشيؼ يزىْٛ ِٓ‬  ‫ب‬
    ‫خبطيخ ٚليّخ ٌزٍه اٌخبطيخ. ٚوً ِغزٕذ ‪ CSS‬يزىْٛ ِٓ ِغّٛػخ ِٓ اٌـ ‪ .Rules‬اٌشىً اٌزبٌٝ لذ يٛػؼ‬
                                                                                 ‫أوضش ِب٘يخ اٌـ ‪.Rule‬‬

                                       ‫شكم ( 2 – 71 ): تركيب انـ ‪rule‬‬

                      ‫‪Selector‬‬          ‫‪Declaration‬‬



                         ‫1‪h‬‬        ‫{‬     ‫;‪color: red‬‬    ‫;‪background: yellow‬‬    ‫}‬        ‫‪Rule‬‬



                                 ‫‪Property‬‬      ‫‪Value‬‬       ‫‪Declaration Block‬‬




    ‫إٌّزمٝ ( ‪ – ) Selector‬عٛف ٔشيش اٌيٗ ثزغّيزٗ اإلٔغٍيضيخ فٝ ِب عٛف يأرٝ – ٚ٘ٛ يظٙش ػٍٝ يغبس اٌـ‬
      ‫‪ ،Rule‬يمَٛ ثزؾذيذ اٌؼٕظش اٌزٜ عٛف رـجك ػٍيٗ رٍه اٌـ ‪ .Rule‬فٝ اٌشىً اٌغبثك، عٛف رـجك رٍه اٌـ‬
                                                                            ‫‪ Rule‬ػٍٝ اٌؼٕظش 1‪.h‬‬




‫8‬
     ‫اٌغبٔت األيّٓ ِٓ اٌـ ‪ Rule‬يؾزٜٛ ػٍٝ وزٍخ اٌزظبسيؼ ( ‪ٚ .) Declaration Block‬عٛف ٔشيش اٌيٙب‬
       ‫‪ ) Declaration‬أٚ أوضش. ٚوً‬      ‫ثزغّيزٙب اإلٔغٍيضيخ فٝ ِب عٛف يأرٝ، ٚ٘ٝ ِىٛٔخ ِٓ رظشيؼ (‬
    ‫‪ِ Declaration‬ىْٛ ِٓ خبطيخ ِٓ خٛاص ‪ٚ ) Property ( CSS‬ليّخ رٍه اٌخبطيخ ( ‪ .) Value‬فٝ‬
    ‫اٌشىً اٌغبثك يؾزٜٛ ‪ Declaration Block‬ػٍٝ أصٕيٓ ‪ .Declaration‬األٚي يؾزٜٛ ػٍٝ خبطيخ ‪color‬‬
    ‫ٚ ليّزٙب ‪ٚ .red‬اٌضبٔٝ يؾزٜٛ ػٍٝ خبطيخ ‪ٚ background‬ليّزٙب ‪ .yellow‬ئراً فغٛف يظجؼ أٜ ػٕظش‬
                                                                ‫1‪ h‬رٚ ٌْٛ اؽّش ٚخٍفيخ طفشاء.‬



                                                                                         ‫انـ ‪Selector‬‬

                                 ‫ب‬      ‫ب‬                                ‫ب‬
    ‫اٌـ ‪ Selector‬غبٌجً ِب يىْٛ ػٕظش ‪ٌ ،HTML‬ىٓ ٌيظ دائًّ. فبؽيبًٔ يؾزٜٛ ٍِف ‪ CSS‬ػٍٝ ‪Style‬‬
                                      ‫رش‬
               ‫ٌؼٕبطش ِٓ ٍِف ‪ٚ .XML‬وّب ٘ٛ ِؼشٚف ئْ ػٕبطش ‪َ XML‬ؼ َف ثٛاعـخ اٌّغزخذَ. ِضً:‬
    ‫} ;‪QUTE { color: gray‬‬
    ‫} ;‪BIB { color: red‬‬
    ‫} ;‪Employee { color: black‬‬

    ‫‪ .HTML‬ثزؼجيش أخش فاْ ‪ CSS‬رخذَ أٜ‬          ‫اٜ اْ ػٕبطش اٌّغزٕذ عٛف رؼبًِ وأٜ ػٕظش ِٓ ػٕبطش‬
                                               ‫ػٕظش فٝ اٌظفؾخ عٛاء وبْ ‪ HTML‬اٚ أٜ ػٕظش أخش.‬



                                                                       ‫انتصريحبث و انكهًبث انًحجىزة‬

    ‫ب‬                                                                                  ‫ب‬
    ‫وّب أششٔب عبثمً، يؾزٜٛ ‪ Declaration Block‬ػٍٝ ‪ Declaration‬أٚ أوضش. ٚاٌـ ‪ Declaration‬دائًّ‬
      ‫ٚاثذا يزىْٛ ِٓ خبطيخ ِزجٛػخ ثٕمـزيٓ سأعيزيٓ ( ‪ [ : ] ) Colon‬صُ اٌميّخ اٌخبطخ ثزٍه اٌخبطيخ صُ‬
    ‫يٕزٙٝ اٌـ ‪ Declaration‬ثفبطٍخ ِٕمٛؿخ ( ‪ .[ ; ] ) Semicolon‬اٌـ ‪ ٚ Colon‬اٌـ ‪ Semicolon‬يّىٓ أْ‬
        ‫ٔزشن ثؼذُ٘ ِغبفخ فبسغخ أٚ ال ٔزشن. ٚأعُ اٌخبطيخ يىزت فٝ شىً وٍّخ ٚاؽذح، ٚليّخ اٌخبطيخ رىزت‬
      ‫وٍّخ ٚاؽذح أٚ لبئّخ ِٓ اٌىٍّبد اٌّفظٌٛخ. ٚاٌخٛاص ٚ ثؼغ اٌميُ رؼزجش ِٓ اٌىٍّبد اٌّؾغٛصح، اٜ أٗ‬
                                             ‫ال يغٛص وزبثخ خٛاص ِٓ رؼشيف اٌّغزخذَ أٚ وزبثخ ليُ غشيجخ.‬
    ‫;‪Brain-size: 2cm‬‬          ‫/* خاصية غري معروفة */‬
    ‫;‪Color: ultraviolet‬‬       ‫/* قيمة غري معروفة */‬

                    ‫فٝ ؽبٌخ اعزخذاَ خبطيخ ٌٙب أوضش ِٓ ليّخ، فيّىٕه وزبثخ وً اٌميُ ثغبٔت ثؼؼٙب وبٌزبٌٝ:‬
    ‫} ;‪P { font: medium Arial‬‬


    ‫وّب رالؽظ اٌخبطيخ ‪ٌٙ font‬ب ليّزيٓ، اٌميّخ األٌٚٝ ٚ٘ٝ ‪ ٝ٘ٚ medium‬رؼجش ػٓ ؽغُ اٌخؾ. ٚاٌميّخ‬
                                                    ‫اٌضبٔيخ ٚ٘ٝ ‪ٛٔ ٝ٘ٚ Arial‬ع اٌخؾ اٌّغزخذَ.‬




‫9‬
                                                                                                ‫انتجًيع‬
                                                                                         ‫ب‬
     ‫سأيٕب ِؼً ِضبي ثغيؾ ٌزـجيك ‪ Style‬ػٍٝ ػٕظش ٚاؽذ. ٌىٓ ِبرا ئرا وٕذ رشيذ رـجيك ٔفظ اٌـ ‪ style‬ػٍٝ‬
                                    ‫أوضش ِٓ ػٕظش؟ فٝ رٍه اٌؾبٌخ الثذ ِٓ اعزخذاَ أوضش ِٓ ‪.selector‬‬



                                                                                      ‫تجًيع انـ ‪Selector‬‬

      ‫ٌٕفزشع اْ ٌذيٕب ػٕظش 2‪ٚ h‬ػٕظش ‪ٔ ٚ p‬شيذ أْ ٔغؼً األصٕيٓ ٌّٛٔٙب سِبدٜ. ثجغبؿخ اٌـشيمخ وبٌزبٌٝ:‬
     ‫} ;‪h2, p { color: gray‬‬

      ‫ٌمذ لّذ ثؼًّ ‪ rule‬عٛف رـجك ػٍٝ اٌؼٕبطش اٌّٛعٛدح فٝ ِٕـمخ اٌـ ‪ٚ ،selector‬رٌه ثىزبثخ اعّبء‬
     ‫اٌؼٕبطش ػٍٝ اٌيغبس ٚاٌفظً ثيُٕٙ ثفبطٍخ ( , )، اٌفبطٍخ رخجش اٌّزظفؼ ثأْ ٕ٘بن أوضش ِٓ ‪Selector‬‬
     ‫عٛف يـجك ػٍيٗ اٌـ ‪ٚ .Rule‬ال يٛعذ ؽذٚد ِؼيٕخ ٌؼذد اٌـؼٕبطش اٌزٝ يّىٓ رـجيك ٔفظ اٌـ ‪ style‬ػٍيٙب،‬
                                                                     ‫يّىٕه أْ رٕشٝء ‪ Rule‬ثٙزا اٌشىً:‬
     ‫} ;‪body, table, th, td, h1, h2, h3, p, pre, strong, em, b, i { color: gray‬‬

      ‫اٌزغّيغ ثٙزٖ اٌـشيمخ يٛفش اٌىضيش ِٓ وً شٝء، اٌٛلذ ٚ اٌّغٙٛد ٚ عٌٙٛخ اٌمشاءح. فّضالً ٌٛ ٌُ يىٓ ٕ٘بن‬
                                                    ‫خبطيخ اٌزغّيغ ٌىبْ شىً اٌىٛد ٌٍـ ‪ Rule‬اٌغبثمخ وبٌزبٌٝ:‬
     ‫} ;‪body { color: gray‬‬
     ‫} ;‪table { color: gray‬‬
     ‫} ;‪th { color: gray‬‬
     ‫} ;‪td { color: gray‬‬
     ‫} ;‪h1 { color: gray‬‬
     ‫} ;‪h2 { color: gray‬‬
     ‫...‬




                                                                                   ‫‪Universal Selector‬‬

     ‫‪ rule‬ػٍٝ وً‬      ‫إٌّزمٝ اٌؼبَ. ٚ٘ٛ يىزت ػٍٝ شىً ( * ). ٚثبعزخذاِٗ فأٔذ رخجش اٌّزظفؼ أْ يـجك اٌـ‬
                                                                        ‫اٌؼٕبطش اٌّٛعٛدح فٝ اٌظفؾخ:‬
     ‫} ;‪* { color: gray‬‬




                                                                        ‫‪Class and ID Selector‬‬
     ‫ثؼذ أْ رؼشفٕب ػٍٝ ويفيخ رغّيغ اٌـ ‪ٔ ،selectors‬شيذ أْ ٔٛػؼ اْ اٌـ ‪ selectors‬اٌزٝ اعزخذِٕب٘ب رؼزجش‬
      ‫ِٓ إٌٛع اٌجغيؾ اٌزٜ يشيش اٌٝ ػٕبطش اٌّغزٕذ اٚ اٌظفؾخ. ٘زا ؿجيؼٝ ٚ ال يٛعذ ثٗ اٜ ِشىٍخ، ٌىٓ فٝ‬
                        ‫ب‬
                       ‫ثؼغ األؽيبْ ٔؾزبط اٌٝ رـجيك ‪ Rules‬ػٍٝ ثؼغ اٌؼٕبطش أوضش رؾذيذاً أٚ رخظيظً.‬

‫01‬
     ‫ثبإلػبفخ اٌٝ اٌؼٕبطش اٌّؼزبدح، يٛعذ ٔٛػيٓ أخشيٓ ِٓ اٌـ ‪ ٚ ،ID ٚ Class :Selectors‬اٌٍزاْ يغّؾبْ‬
     ‫ثزخظيض ‪ style‬ثـشيمخ ِغزمٍخ ػٓ ػٕبطش اٌظفؾخ. فٙبراْ اٌـ ‪ Selectors‬يّىٓ اعزخذاِّٙب ثشىً‬
                                                    ‫ِغزمً أٚ أْ يىٛٔبْ ػٍٝ ػاللخ ثـ ‪ Selector‬اخش.‬

       ‫ػٍٝ عجيً اٌّضبي، افزشع أه رمَٛ ثىزبثخ طفؾخ رؾٜٛ ِؼٍِٛبد ػٓ اٌجٍٛرٛٔيَٛ. رٍه اٌظفؾخ رؾزٜٛ‬
      ‫ػٍٝ رؾزيشاد ِخزٍفخ ػٓ اٌزأِيٓ اٌّـٍٛة فٝ ؽبٌخ اٌزؼبًِ ِغ رٍه اٌّٛاد اٌّشؼخ. ٚرشيذ ٌىً رؾزيش أْ‬
     ‫يظٙش فٝ خؾ عّيه. ثؼغ اٌزؾزيشاد لذ رىْٛ ػّٓ فمشح، ٚاٌجؼغ األخش لذ يىْٛ ػٕظش ِغزمً. ٌزٌه‬
                  ‫ٌٓ رغزـيغ رؼشيف ‪ Rule‬ثبعزخذاَ ‪ selector‬ثغيؾ. افزشع أه لّذ ثىزبثخ رٍه اٌـ ‪:rule‬‬
     ‫} ;‪P { font-weight: bold‬‬

     ‫فٝ رٍه اٌؾبٌخ عٛف رظجؼ وً اٌفمشاد ثخؾ عّيه، عٛاء وبٔذ رؾزٜٛ ػٍٝ رؾزيش أَ ال. ٌزٌه ٔؾزبط اٌٝ‬
                                                       ‫ؿشيمخ رؾذد إٌّـمخ اٌزٝ رؾزٜٛ ػٍٝ رؾزيش فمؾ.‬



                                                                                     ‫‪Class Selectors‬‬

     ‫أفؼً ؿشيمخ ٌؾً اٌّشىً اٌغبثمخ ٘ٝ ثبعزخذاَ ‪ٌ .Class Selectors‬ىٓ لجً أْ رمَٛ ثىزبثخ ‪ٌ rule‬ـ ‪class‬‬
                                        ‫‪ Selector‬يغت أْ رؼغ اٌـ ‪ class‬فٝ اٌؼٕبطش اٌزٝ رشيذ٘ب. وبٌزبٌٝ:‬
     ‫‪<p class="warning">When handling plutonium, care must be taken to avoid‬‬
     ‫>‪the formation of a critical mass.</p‬‬
     ‫‪<p>With plutonium, <span class="warning">the possibility of implosion is‬‬
     ‫‪very real, and must be avoided at all costs</span>. This can be accomplished‬‬
     ‫>‪by keeping the various masses separate.</p‬‬


     ‫وّب رالؽظ اٌؼٕظش اٌغبثك ٘ٛ فمشح أٚ ‪ ،p‬وً ِب فؼٍٕبٖ ٘ٛ ئػبفخ ‪class="warning" ٝ٘ٚ Attribute‬‬
                              ‫ٌٙزا اٌؼٕظش، ٚوزٌه رّذ ئػبفخ رٍه اٌـ ‪ Attribute‬اٌٝ اٌؼٕظش ‪.span‬‬

     ‫وً ِب ٔؾزبعٗ األْ ٘ٛ ؿشيمخ ٌزـجيك ‪ٌٙ Style‬زٖ اٌؼٕبطش اٌزٝ أػيف ٌٙب ‪ .class attribute‬أظش اٌٝ‬
                                                                                   ‫اٌـ ‪ rule‬اٌزبٌيخ:‬
     ‫} ;‪*.warning { font-weight: bold‬‬

                           ‫ال‬
       ‫لّٕب ثىزبثخ * ٚ٘ٝ رؼٕٝ اٌزـجيك ػٍٝ وً اٌؼٕبطش اٌّٛعٛدح فٝ اٌظفؾخ، ٌىٓ ِٙ ً يٛعذ ثؼذ٘ب ٔمـخ صُ‬
     ‫ثؼذ رٌه اعُ اٌـ ‪ class‬اٌزٝ لّٕب ثزؾذيذ٘ب ٚ٘ٝ ‪ warning‬صُ ثؼذ رٌه ثبلٝ اٌـ ‪ Rule‬اٌّؼزبد. أٜ أه رخجش‬
     ‫اٌّزظفؼ ثأْ يمَٛ ثزـجيك رٍه اٌـ ‪ Rule‬ػٍٝ وً اٌؼٕبطش اٌّٛعٛدح فٝ اٌظفؾخ اٌزٝ رؾًّ ‪ Class‬اعّٗ‬
                                                 ‫ال ال‬
                                   ‫‪ .warning‬أٚ يّىٕه اْ رمَٛ ثىزبثخ أعُ اٌؼٕظش ‪ِ p‬ض ً ثذ ً ِٓ * وبٌزبٌٝ:‬
     ‫} ;‪p.warning { font-weight: bold‬‬
     ‫} ;‪span.warning { font-weight: bold‬‬




‫11‬
                                                                                    multiple classes

                                    ‫ب ب‬
     ٝ٘ٚ .‫ اٌّزؼذدح‬Classes ‫ ٚػٍّٕب فبئذرٗ، ٔشيذ فمؾ أْ ٔؼيف شيئً ٘بًِ ٘ٛ اٌـ‬Class ‫ثؼذ أْ رؼبٍِٕب ِغ اٌـ‬
                      :ًّ‫ ثذاخً اٌؼٕظش اٌٛاؽذ. أظش اٌّضبي اٌزبٌٝ صُ ٔى‬class ِٓ ‫رؼٕٝ اِىبٔيخ رؼشيف أوضش‬
     <p class="urgent warning">When handling plutonium, care must be taken to
     avoid the formation of a critical mass.</p>
     <p>With plutonium, <span class="warning">the possibility of implosion is
     very real, and must be avoided at all costs</span>. This can be accomplished
     by keeping the various masses separate.</p>


     ‫، ٚفٝ ٔفظ اٌظفؾخ‬warning ‫ ٚاٌميّخ‬urgent ‫ رؾزٜٛ ػٍٝ ليّزيٓ، اٌميّخ‬Class ‫وّب رشٜ، لّٕب ثزؼشيف‬
                   :‫ األريخ‬rule ‫. ثزـجيك اٌـ‬warning ٝ٘ٚ ‫ ٚاؽذح‬class ٍٗ‫ ِؼشف ثذاخ‬span ‫يٛعذ ػٕظش‬
     .warning {font-weight: bold;}

      ‫ ثخؾ عّيه. ٚثزـجيك اٌـ‬warning ّٝ‫ اٌزٜ يغ‬Class          ‫فغٛف يزُ ئظٙبس وبفخ اٌؼٕبطش اٌزٝ رؾًّ اٌـ‬
                                                                                           :‫ اٌزبٌيخ‬Rule
     .urgent {font-style: italic;}

     rule ‫ ثخؾ ِبئً. ٚثزـجيك اٌـ‬urgent ّٝ‫ اٌزٜ يغ‬Class ‫عٛف يزُ ئظٙبس وبفخ اٌؼٕبطش اٌزٝ رؾًّ اٌـ‬
                                                                                           :‫اٌزبٌيخ‬
     .warning.urgent {background: silver;}

     ٌْٛ ‫ ثخٍفيخ راد‬warning ٚ urgent ّٝ‫ اٌزٝ رغ‬class ‫عٛف يزُ ئظٙبس وبفخ اٌؼٕبطش اٌزٝ رؾًّ اٌـ‬
                   .Rule ‫فؼٝ. اٜ اْ اٌؼٕظش اٌزٜ يؾًّ األصٕيٓ ِؼبً فمؾ ٘ٛ اٌزٜ عٛف يـجك ػٍيٗ ٘زٖ اٌـ‬



                                                                                         ID Selectors

                    ‫ال‬                                               ‫ب‬
     ‫ يغجمٗ ػالِخ‬ID ً ٚ‫. ٌىٓ ٕ٘بن فشٚق عٛ٘شيخ ثيٓ األصٕيٓ. ا‬Class ‫ ِشبثًٙ ٌـ‬ID ‫فٝ ثؼغ اٌؾبالد، يؼزجش‬
                                                                                               :) # (
     *#first-para { font-weight: bold; }

                                      :ID Atrribute ٝ‫ يشيش اٌٝ اٌميّخ اٌّٛعٛدح ف‬ID ْ‫اإلخزالف اٌضبٔٝ، ئ‬
     *#lead-para { font-weight: bold; }
     <p id="lead-para">This paragraph will be bold.</p>
     <p>this paragraph will Not be bold.</p>

                                                            .ٜ‫لذ يجذٚ ئخزالف ػبدٜ ٚؿجيؼٝ ٌىٕٗ را ِغض‬




12
                                                                             ‫اإلختيبر يب بيٍ ‪ ID‬و ‪Class‬‬

      ‫يّىٕه رخظيض ٔفظ ليّخ اٌـ ‪ Class‬ألوضش ِٓ ػٕظش، فىّب سأيٕب فٝ األِضٍخ اٌغبثمخ، اْ ٕ٘بن أوضش ِٓ‬
     ‫ػٕظش يؾًّ ‪ Class‬رغّٝ ‪ .warning‬ػٍٝ اٌغبٔت األخش، فاْ ‪ ID‬يغزخذَ ِشح ٚاؽذح فمؾ ٌىً ػٕظش.‬
                                                      ‫اٜ اْ وً ػٕظش ٌٗ ليّخ ‪ِ ID‬خزٍفخ ػٓ ثبلٝ اٌؼٕبطش.‬



                                                                          ‫‪Attribute Selectors‬‬
     ‫فٝ ؽبٌخ ‪ ID ٚ Class‬فّٙب ػجبسح ػٓ ‪ٌّٙ attributes‬ب ليُ ِؼيٕخ. ٌٍٚؼٍُ – ٚاػزمذ أه رؼٍُ – ئْ اٌىٛد‬
          ‫اٌّغزخذَ فٝ األِضٍخ اٌغبثمخ ٘ٛ وٛد ‪ .HTML‬فٝ ثؼغ ٌغبد اٌزشِيض األخشٜ، لذ ال رغذ ثّٙب رٍه اٌـ‬
     ‫‪attributes‬‬          ‫‪ٌ .) class – ID ( attributes‬ؾً رٍه اٌّشىٍخ، ٕ٘بن ؿشيمخ ثغيـخ ٚ٘ٝ ِؼبٍِخ اٌـ‬
     ‫ء‬                                                             ‫ب‬
     ‫اٌخبطخ ثبٜ ػٕظش وأٔٙب ‪ .Selector‬أيً وبْ اعُ رٍه اٌـ ‪ .attribute‬أٜ ئٕٔب ٔغزـيغ ئخزيبس اٌؼٕظش ثٕب ً‬
                                    ‫ػٍٝ ‪ِٛ attribute‬عٛدح ثٗ. ٕٚ٘بن اسثغ أٔٛاع ِٓ ‪.attribute selectors‬‬

     ‫‪CSS‬‬          ‫ٍِؾٛظخ : يغت اإلشبسح اٌٝ اْ ثؼغ اٌّزظفؾبد ال رذػُ رٍه اٌّيضح. فٙزٖ اٌّيضح ِٛعٛدح فٝ‬
      ‫اإلطذاس اٌضبٔٝ. اٌّزظفؼ ‪ِ internet Explorer‬بلجً اإلطذاس اٌغبة، ال يذػّٛا رٍه اٌّيضح. اِب اٌغبثغ‬
                                                              ‫ب‬
                                           ‫فٙٛ يذػّٙب. ِٚزظفؼ ‪ Safari ٚ Opera‬ايؼً يذػّبْ رٍه اٌّيضح.‬



                                                                          ‫اإلختيبر انبسيط نهـ ‪.attribute‬‬

     ‫ئار وٕذ رشيذ ئخزيبس ػٕظش يؾزٜٛ ػٍٝ ػذح ‪ ،attributes‬ػٓ ؿشيك رٍه اٌـ ‪ ،attributes‬فيّىٕه ؽيٕٙب‬
                                                       ‫ال‬
     ‫ئخزيبسٖ ػٓ ؿشيك ‪ِ .attribute selector‬ض ً، إلخزيبس وً اٌؼٕبطش 1‪ h‬اٌزٝ رؾزٜٛ ػٍٝ ‪attribute‬‬
                                                                                      ‫ب‬
      ‫يغّٝ ‪ class‬أيً وبٔذ ليّخ رٍه اٌـ ‪ٚ attribute‬رؾٛيً ٌْٛ اٌخؾ اٌخبص ثٙزا اٌؼٕظش اٌٝ اٌٍْٛ اٌفؼٝ،‬
                                                                                ‫لُ ثىزبثخ اٌىٛد اٌزبٌٝ:‬
     ‫} ;‪h1[class] { color: silver‬‬

      ‫‪ .attribute‬لذ رىْٛ ليّٙب‬    ‫وّب رالؽظ لّٕب ثاخزيبس اٌـ ‪ٔ attribute‬فغٙب، ٌُ ٔؼغ اٜ ئػزجبس ٌميُ اٌـ‬
                                            ‫ِخزٍفخ أٚ ِزشبثٙخ. ال يُٙ، فٕؾٓ ٔشيذ ئخزيبس٘ب ٘ٝ ٌٚيظ ليّزٙب.‬

                                      ‫يّىٕه أيؼبً اخزيبس أوضش ِٓ ‪ٚ attribute‬رـجيك ٔفظ اٌـ ‪ Rule‬ػٍيُٙ:‬
     ‫} ;‪a[class][href] { color: silver‬‬




‫31‬
                                                                                            ‫ء‬
                                                                     ‫اإلختيبر بُب ً عهى ليًت انـ ‪attribute‬‬
     ‫} ;‪a[href="http://www.css-discuss.org/about.html"] { font-weight: bold‬‬

                     ‫ب‬                                                          ‫ء‬
                    ‫اخزيبس اٌـ ‪ attribute‬ثٕب ً ػٍٝ ليّزٙب. ٚال رٕغٝ أْ رىزت اعُ اٌـ ‪ٚ attribute‬ليّزٙب ِؼً.‬

                                       ‫ال‬
                                      ‫يغت ِالؽظخ اْ ٕ٘بن ثؼغ اٌميُ اٌزٝ رزىْٛ ِٓ أوضش ِٓ وٍّخ. ِض ً:‬
     ‫} ;‪planet [type="barren rocy"] { font-weight: bold‬‬

     ‫‪ Rule‬وٍّخ‬     ‫ليّخ اٌـ ‪ attribute‬رغبٜٚ " ‪ ."barren rocy‬أٜ ئٔٙب رزىْٛ ِٓ وٍّزيٓ. ئرا وزجذ فٝ اٌـ‬
                                                    ‫ٚاؽذح فمؾ ُِٕٙ فاْ اٌـ ‪ ٌٓ rule‬رٕـجك ػٍٝ ٘زا اٌؼٕظش.‬



                                                            ‫اإلختيبر بُبءً عهى جسء يٍ ليًت انـ ‪attribute‬‬

                                                              ‫ال‬
                                      ‫رزيؼ ٌٕب ‪ CSS‬ئِىبٔيخ وزبثخ عضء ِٓ اٌميّخ ثذ ً ِٓ وزبثزٙب وبٍِخ. ِضبي:‬
     ‫,‪<p class="urgent warning">When handling plutonium‬‬                     ‫‪care‬‬   ‫‪must‬‬    ‫‪be‬‬   ‫‪taken‬‬    ‫‪to‬‬
     ‫>‪avoid the formation of critical mass.</p‬‬


     ‫ئرا اسدٔب اخزيبس اٌؼٕبطش اٌزٝ رؾًّ ‪ attribute‬اعّٗ ‪ٚ class‬ليّخ رٍه اٌـ ‪ attribute‬رؾزٜٛ ػٍٝ وٍّخ‬
                                                             ‫‪ .warning‬يّىٕٕب ػًّ ٘زا ثزٍه اٌـشيمخ:‬
     ‫} ;‪P[class~="warning"] {font-weight: bold‬‬


                                         ‫ح‬
      ‫الؽظ ئٕٔب اػفٕب اٌؼالِخ ( ~ ) ثؼذ اعُ اٌـ ‪ِ attribute‬جبشش ً ٚلجً ( = ). فٝ رٍه اٌؾبٌخ عٛف يجؾش‬
      ‫‪ٚ class‬ليّزٙب رؾزٜٛ ػٍٝ ‪ ،warning‬عٛاء وبٔذ اٌميّخ‬        ‫اٌّزظفؼ ػٓ اٌؼٕظش اٌزٜ يؾزٜٛ ػٍٝ‬
                                                     ‫‪ warning‬فمؾ أٚ ‪ِٚ warning‬ؼٙب وٍّبد أخشٜ.‬

                        ‫ٕ٘بن ػالِبد أخشٜ يّىٓ وزبثزٙب ثؼذ اعُ اٌـ ‪ attribute‬رمَٛ ثٛظبئف ِخزٍفخ، ِضبي:‬
     ‫]"‪[foo^="bar‬‬


                                ‫اٜ اخزبس اٜ ػٕظش يؾزٜٛ ػٍٝ ‪ attribute‬اعّٙب ‪ٚ foo‬ليّزٙب رجذأ ثـ ‪.bar‬‬
     ‫]"‪[foo$="bar‬‬


                              ‫اٜ اخزبس اٜ ػٕظش يؾزٜٛ ػٍٝ ‪ attribute‬اعّٙب ‪ٚ foo‬ليّزٙب رٕزٙٝ ثـ ‪.bar‬‬
     ‫]"‪[foo*="bar‬‬


                 ‫اٜ اخزبس اٜ ػٕظش يؾزٜٛ ػٍٝ ‪ attribute‬اعّٙب ‪ٚ foo‬ليّزٙب ثٙب وٍّبد رؾزٜٛ ػٍٝ ‪.bar‬‬
     ‫]"‪[foo|="bar‬‬


                  ‫اٜ اخزبس اٜ ػٕظش يؾزٜٛ ػٍٝ ‪ attribute‬اعّٙب ‪ٚ foo‬ليّزٙب رغبٜٚ ‪ bar‬أٚ رجذأ ثـ ‪.bar‬‬



‫41‬
                                       ‫انميى وانىحداث ( ‪) Values and units‬‬
                                    ‫اٌميُ، ٘ٝ اٌميُ اٌزٝ ربخز٘ب اٌـ ‪ Declarations‬اصٕبء رؼشيفٙب فٝ اٌـ ‪.Rules‬‬
     ‫};‪h1 { color: red‬‬

     ‫فٝ اٌـ ‪ rule‬اٌغبثمخ ٕ٘بن ‪ declaration‬اعّٗ ‪ٚ color‬ليّزٗ ‪ٚ .red‬رغزخذَ ‪ CSS‬أٔٛاع ػذيذح ِٓ اٌميُ،‬
                                                                                  ‫ٔزوش ِٕٙب األرٝ:‬

                                                                                ‫األرلبو ( ‪) Numbers‬‬
     ‫ٕ٘بن ٔٛػبْ ِٓ األسلبَ رغزخذَ وميُ ٌزظبسيؼ ‪ .CSS‬األػذاد اٌظؾيؾخ ( ‪ ٚ ) integers‬األػذاد اٌىغشيخ (‬
                                                                                       ‫‪.)Fractional‬‬

                                                                  ‫انُسبت انًئىيت ( ‪) Percentage‬‬
                                            ‫ح‬
     ‫رّضً إٌغجخ اٌّئٛيخ ثىزبثخ اٌشلُ صُ وزبثخ ػالِخ ( % ) ثؼذٖ ِجبشش ً. ٚ رؼزجش اٌميُ اٌزٝ رأخز ٔغت ِئٛيخ ليُ‬
               ‫ب‬
     ‫ٌٙب ػاللخ ثميُ اخشٜ صبثزخ. ِضالً ٌٛ لٍٕب أْ ػشع اٌغذٚي يّضً 03% ػشع اٌظفؾخ وىً. ايً وبٔذ ليّخ‬
                                                             ‫ػشع اٌظفؾخ فغٛف يأخز اٌغذٚي ِٕٙب 03%.‬

                                                                                      ‫األنىاٌ ( ‪) color‬‬
                                                                     ‫ليُ األٌٛاْ فٝ ‪ CSS‬رّضً ثأوضش ِٓ شىً:‬

                                                      ‫ب‬
            ‫1 - أعّبء األٌٛاْ: ٕ٘بن ثؼغ األٌٛاْ ِؼشفخ ِغجمً ثذاخً ‪ .CSS‬اٜ يىفٝ أْ رىزت اعّٙب فمؾ.‬
            ‫2 - ليّخ ‪ :RGB‬وّب ٘ٛ ِؼشٚف أْ األٌٛاْ رزىْٛ ِٓ خٍؾ صالصخ اٌٛاْ سئيغيخ ّٚ٘ب األؽّش ٚ‬
      ‫األخؼش ٚ األصسق. ٚرخزٍف األٌٛاْ اٌزٝ رٕزظ ِٓ ٘زا افخزالؽ ثاخزالف ٔغجخ وً ٌْٛ ِٓ اٌٍٛاْ‬
     ‫اٌضالصخ فٝ ٘زا اٌخٍيؾ. ٚوً ٌْٛ ِٓ األٌٛاْ اٌضالصخ ٌٗ ليُ ِٓ 0 ؽزٝ 552. اٜ إٔب ِٓ اٌّّىٓ اْ‬
     ‫ٔىزت ليّخ اٌٍْٛ ثٙزا اٌشىً }08 ,521 ,001{. ؽيش 001 ليّخ اٌٍْٛ األؽّش ٚ 521 ليّخ اٌٍْٛ‬
                                                      ‫ب‬
        ‫اٌخؼش ٚ 08 ليّخ اٌٍْٛ األصسق. ٚيّىٓ ايؼً وزبثخ اٌميُ ثـشيمخ إٌغجخ اٌّئٛيخ ؽيش يأخز وً‬
                                                              ‫ٌْٛ ٔغجخ ِؼيٕخ } %53 ,%04 ,%52{.‬
                                                            ‫ب‬
               ‫3 - إٌظبَ اٌغذاعٝ ػشش: ِٚٓ اٌّّىٓ ايؼً وزبثخ ليُ اٌٍْٛ ثبٌٕظبَ اٌغذاعٝ ػششٜ وبٌزبٌٝ‬
                                    ‫00‪ ٝ٘ٚ .#00f‬ؿشيمخ شبئؼخ اإلعزخذاَ ثيٓ ِظظّٝ اٌغشافيه.‬




‫51‬
                                                                                ‫األطىال ( ‪) Length‬‬
     ‫ٕ٘بن ٔٛػيٓ ِٓ ليُ األؿٛاي، أٛاع صبثزخ اٌميُ. ٚأٛاع ٔغجيخ اٌميّخ. ثّؼٕٝ ٌٛ لٍٕب أْ ؽغُ خؾ اٌؼٕٛاْ ٘ٛ‬
     ‫21 ٔمـخ، فٙزٖ ليّخ صبثزخ. اِب ٌٛ لٍٕب اْ ؽغُ خؾ اٌؼٕٛاْ يغبٜٚ ػؼف ؽغُ خؾ اٌفمشح ٔفغٙب، فٙزٖ ليّخ‬
                                                                                                     ‫ٔغجيخ.‬



                                                                                          ‫أٛاع اٌميُ اٌضبثزخ:‬

                                           ‫‪Kind of Value‬‬                   ‫يثبل‬                 ‫َىع انميًت‬
                                           ‫‪Inches‬‬                         ‫‪15in‬‬                      ‫ثٛطخ‬
                                           ‫‪Centimeters‬‬                   ‫‪15cm‬‬                      ‫عٕزيّزش‬
                                           ‫‪Millimeters‬‬                   ‫‪15mm‬‬                      ‫ٍٍِيّزش‬
                                           ‫‪Point‬‬                          ‫‪15pt‬‬                        ‫ٔمـخ‬
                                           ‫‪Picas‬‬                          ‫‪15pc‬‬             ‫يغبٜٚ 21 ٔمـخ‬


                                                                                          ‫أٔٛاع اٌميُ إٌغجيخ‬

     ‫‪Kind of Value‬‬        ‫يثبل‬                                                                ‫َىع انميًت‬
                                        ‫ئرا لّٕب ثزؾذيذ ؽغُ خؾ ٌؼٕظش ِؼيٓ، ٌٚيىٓ 21 ٔمـخ. ٚاسدٔب ػًّ‬
                                       ‫٘بِش ػٍٝ يّيٓ ٘زا اٌؼٕظش ثؾيش يىْٛ ِغبٜٚ ٌؾغُ اٌخؾ. فٕمَٛ‬
     ‫‪em‬‬                   ‫‪1em‬‬          ‫ثىزبثخ اٌزظشيؼ اٌخبص ثبٌٙبِش األيّٓ ٚئػـبؤٖ اٌميّخ ‪ٝ٘ٚ .1em‬‬
                                         ‫رؼٕٝ أْ ؽغُ اٌٙبِش عٛف يىْٛ ٔفظ ؽغُ اٌخؾ. ٌٚٛ رغيش ؽغُ‬
                                                                   ‫ب‬
                                                                   ‫اٌخؾ عٛف يزغيش ؽغُ اٌٙبِش رٍمبئيً‬
     ‫‪ex‬‬                   ‫‪1ex‬‬                                             ‫ٚ٘ٝ رغبٜٚ ٔظف ليّخ اٌـ ‪.em‬‬
     ‫‪pixel‬‬                ‫‪15px‬‬                                                   ‫ٚ٘ٝ ليّخ رشِض ٌٍجيىغً.‬


                                                                                                      ‫‪URL‬‬
                                               ‫ال‬                     ‫ب‬
     ‫اٌشٚاثؾ رؼزجش ِٓ اٌميُ ايؼً اٌزٝ رذػّٙب ‪ .CSS‬فّض ً يّىٕٕب ػًّ ساثؾ ٌظٛسح ٚٚػؼٗ وميّخ ٌزظشيؼ.‬
                                                                                             ‫ِضً:‬
     ‫};)‪body {background: url(http://www.pix.web/picture1.jpg‬‬

                                                                                                 ‫‪inherit‬‬
      ‫٘ٝ ليّخ رىزت وّب ٘ٝ. اٜ ئٔٙب رؼزجش ‪ ( Keyword‬وٍّخ ِفزبؽيخ – أٚ وٍّخ ِؾغٛصح ). ٚ رغؼً ليّخ‬
        ‫اٌزظشيؼ اٌزٜ عٛف يـجك ػٍٝ اٌؼٕظش اٌؾبٌٝ ِغبٚيخ ٌميّخ اٌؼٕظش اٌزٜ يٕؾذس ِٕٗ اٌؼٕظش اٌؾبٌٝ.‬




‫61‬
                                                                Fonts ‫خطىط انكتببت‬
                              .‫ٔغزؼشع فٝ ٘زا اٌمغُ، ثؼغ اٌزظبسيؼ اٌٛ اٌخظبئض اٌخبطخ ثبٌخـٛؽ‬



                                                     ) Font Families ( ‫عبئالث انخطىط‬
                   .ٌٝ‫يغزخذَ ٘زا اٌزظشيؼ ٌزؾذيذ ػبئٍخ ِٓ اٌخـٛؽ عٛف يزُ اعزخذاِٙب فٝ اٌؼٕظش اٌؾب‬
     Body {font-family: sans-serif;}

                                                               ) Font Weight ( ‫ثمم انخط‬
                                             :‫صمً اٌخؾ اٌّغزخذَ فٝ اٌىزبثخ. ٚ٘ٛ يأخز اؽذ اٌميُ اٌزبٌيخ‬
     normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
     800 | 900 | inherit

                                                                                :ٌٝ‫ٚيىزت ثبٌشىً اٌزب‬
     h1 {font-weight: bold;}

                                                                   ) Font Size ( ‫حجى انخط‬
                                                                            :‫ٚ٘ٛ يأخز اؽذ اٌميُ اٌزبٌيخ‬
     xx-small | x-small | small | medium | large | x-large | xx-large | smaller |
     larger | <length> | <percentage> | inherit

     ‫. ٚاٌميّخ‬pt    ً‫< فٙٝ رؼجش ػٓ ؽغُ اٌخؾ ثبعزخذاَ اٌّمبيظ اٌّؼزبدح ِض‬length> ‫ثخظٛص اٌميّخ‬
                                          :ً‫< رؼجش ػٓ ٔغجخ ؽغُ اٌخؾ. ٚيىزت ثٙزا اٌشى‬percentage>
     h1 {font-size: 12pt;}
     h1 {font-size: medium;}
     h1 {font-size: 15%;}

                                                                ) font style ( ‫إستبيم انخط‬
                                                                            :‫ٚ٘ٛ يأخز اؽذ اٌميُ اٌزبٌيخ‬
     italic | oblique | normal | inherit

                                                                                :ٌٝ‫ٚيىزت ثبٌشىً اٌزب‬
     P{font-style: italic;}




17
                        ‫تخطيط انجداول ( ‪) tables Layout‬‬
                    ‫اٌشىً ( 1 – 1 ) يٛػؼ اٌخظبئض اٌىبٍِخ ٌٍغذٚي‬

     ‫شكم ( 1 – 1 ): تخطيط انجداول‬




‫81‬
                                                                                              ‫خبتًت‬
      ‫فٝ ٔٙبيخ اٌخّغخ ػشش طفؾخ اٌغبثمخ ( ِغ ئّ٘بي اٌظفؾبد اٌزمذيّيخ ٚاٌغالف ), اٚد اْ أؤوذ ػٍٝ اْ رٍه‬
          ‫اٌظفؾبد وبفيخ ٌٍغبيخ وٝ رغزخذَ ‪ CSS‬فٝ اٌّٛالغ اٌزٝ رمَٛ ثزـٛيش٘ب. طذلٕٝ أذ ال رؾزبط اٌٝ اْ‬
      ‫رمشاء ِئبد اٌظفؾبد ؽزٝ رزّىٓ ِٓ ‪ .CSS‬وً ِب رشيذٖ ٘ٛ ِؼشفخ اٌـشق اٌزٝ رؼًّ ثٙب ‪ٚ .CSS‬لذ رُ‬
                                                            ‫ب‬
            ‫رٛػيؾٙب فٝ اٌخّغخ ػشش طفؾخ اٌغبثمخ. ٚايؼً رؾزبط اٌٝ اْ رؼشف وبفخ اٌخظبئض اٌزٝ رأرٝ ِغ‬
       ‫‪ٚ .CSS‬اٌزٝ اػزمذ أه ٌٓ رؾزبط اٌيٙب وٍٙب. ٌىٓ يغت ػٍيه ِؼشفخ اٌخظبئض اٌّٛعٛدح سثّب رؾزبط اٌيٙب.‬
                                        ‫ا‬
     ‫اٌظفؾبد اٌغبثمخ ٌُ رمذَ وً رٍه اٌخظبئض ٌىٕٙب لذِذ وّيخ لٍيٍخ عذً. فمذ وبْ اٌزشويض ػٍٝ ويفيخ اٌزؼبًِ‬
     ‫ِغ ‪ .CSS‬اِب اٌخظبئض ٔفغٙب فيّىٕه اٌؾظٛي ػٍيٙب ِٓ اٜ ِشعغ ِؼزّذ ٌٍـ ‪ .CSS‬اٚ ثّٕزٙٝ اٌجغبؿخ ئرا‬
      ‫وبٔذ رغزخذَ ‪ Visual Studio‬اٚ ‪ ,Dreamwaver‬فغٛف رغذ اداح رغّٝ ‪ ( Style Builder‬لذ يخزٍف‬
      ‫اعّٙب ِٓ ثشٔبِظ اٌٝ اخش ) رٍه األداء رغّؼ ٌه ثأشبء ‪ CSS Rule‬دْٚ وزبثخ وٛد, فٙٝ رؼشع ٌه وبفخ‬
         ‫اٌخظبئض اٌّٛعٛدح ٚوً ِب ػٍيه ٘ٛ اخزيبس اٌخبطيخ ٚرؾذيذ ليّخ ٌٙب. ِب اسيذ لٌٛٗ ٘ٛ اْ اٌخظبئض‬
                  ‫يّىٕه اْ رغذ٘ب ثغٌٙٛخ فٝ اٜ ِىبْ, اِب ؿشيمخ اٌزؼبًِ فٙٛ ِب اسدد رٛػيؾٗ فٝ ٚسلٕب ٘زا.‬

     ‫ئرا ؿّؼذ فٝ اٌّضيذ ِٓ اٌّؼٍِٛبد ؽٛي ‪ٚ ,CSS‬ئرا وبٔذ ٌغزه اإلٔغٍيضيخ عيذح – ٚارّٕٝ اْ رىْٛ وزٌه‬
      ‫ٚئال فال رذع ٘زا اٌؼبَ يّش ػٍيه ئال ٚ٘ٝ ثخيش – فغٛف رغذ اٌؼذيذ ِٓ اٌّظبدس اٌغيذح ػٍٝ اإلٔزشٔذ.‬
      ‫ٕ٘بن وبرت يذػٝ ‪ ,Eric Meyer‬ئرا سأيذ اٜ شٝء ِىزٛة ػٍيٗ اعّٗ فال رزشوٗ. عٛاء وزبة اٚ فيذيٛ.‬
        ‫٘زا اٌشعً وبرت ِّزبص ٌٚٗ اعٍٛة ِؾزشَ فٝ اٌششػ. ٚال ػغت اْ رٍه اٌظفؾبد اٌزٝ ثيٓ يذيه ِشزمخ‬
                                                                                        ‫ِٓ وزبة ٌٗ.‬

      ‫اسعٛ ... اسعٛ اْ رىْٛ رٍه اٌظفؾبد ػٛٔبً ٌه فٝ ػٍّه.... وّب اسعٛ اْ يىْٛ ػٍّه رٚ ِغزٜٛ سفيغ‬
                                                            ‫ال يمً ػٓ اٜ ػًّ لبدَ ِٓ اٌغٙخ اٌغشثيخ.‬




                                                ‫تى بحًد اهلل‬
                                               ‫8002 - 8 - 92‬




‫91‬
                                  ‫انًراجع‬
      Eric Meyer, CSS: The Definitive Guide - 3rd Edition, O'Reilly Press, 2006




20

				
DOCUMENT INFO
Shared By:
Stats:
views:148
posted:1/13/2011
language:Arabic
pages:20
Description: كتاب ابدا CSS للبدء بتعلم سي اس اس بطريقة سهلة وللجميع