Learn CSS

Document Sample
Learn CSS Powered By Docstoc
					‫ﺗﻢ ﺗﺤﻤﻴﻞ اﻟﻤﻠﻒ ﻣﻦ ﻣﻮﻗﻊ‬
    ‫اﻟﺒﻮﺻﻠﺔ اﻟﺘﻘﻨﻴﺔ‬
   ‫‪www.boosla.com‬‬
                                           ‫تقنية‪CSS‬‬




                                             ‫شـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــرح ماهيــة الـ‪CSS‬‬

                                             ‫تطبيق ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــات الـ‪CSS‬‬

                                             ‫حلىل تقينة تقدمها الـ‪CSS‬‬

                                             ‫ال‪ CSS‬والع ـ ـ ـ ـ ـ ــامل العربي‬
‫فريق العمل بعرب سوفتوير ‪arabsoftware.net‬‬     ‫أمهية الـ‪ CSS‬للعامل العربي‬
‫‪mzaila@arabsoftware.net‬‬       ‫حممد زكي‬
                                                                                                        ‫2‬

                                                                                                ‫هلدهج‬
     ‫كد خى تريسج هغج ال‪ html‬هخنًّ هغج هتريسج يّاكؾ اإلٌخرٌح ّكد نختح ُذٍ اهوغج هخنًّ ذبتخج هفلػ هخختر‬
     ‫تأً ُذا ُّ اهسزء اهـؤّ ّ ُذا اهيخً اهظفحج ّ ُذا ال ‪ُّ header‬ذٍ ‪ُّ paragraph‬ذا اهسزء تبهغ‬
      ‫األُيٖج فٕ ؿبهى أظتح نوَ ٖخـػص إهٓ ظفحبح اهوغج اهرئٖشٖج فَٖ ُٕ ‪ّ ، html‬هنً نـبدث اهـوى خى إذتبح‬
                                               ‫إٌٌب تحبسج هويزٖد يً اهخٖبراح اهخٕ خّشؾ يً ؿيل ُذٍ اهوغج .‬


                                                                                 ‫حمول لخضهين ‪W3C‬‬
       ‫اهترايز اهغخيج يذل (اٌخرٌح إنشتوّرر) ّ ترٌبيز (ٌخشنٖة) كديح هٌب هٖس فلػ حوّل اهخظفح تل ّ‬
                                                                        ‫ال‬
     ‫أغبفح هٌب خٖبراح سدٖدث يذ ً إغبفج اهّشى >‪ّ <font‬هيب هَ يً أُيٖج فٕ ؿبهى ال ‪ّ html‬هنً يؾ اهخػّر‬
       ‫اهشرٖؾ أظتحح اهحبسج يوحج هوخػّٖر ّ أظتحح هغج ‪ html‬أنذر ظـّتج فٕ تٌبء خػتٖلبح كّٖج فٕ ؿبهى‬
     ‫اإلٌخرٌح هذهم كبيح يٌؼيج ‪ W3C‬تّغؾ حل كّٔ ّ كّٔ فٕ ُذا اهيسبل ُّّ اهتريسج تّاشػج ‪ CSS‬أّ‬
                                                                         ‫‪.Cascading Style Sheets‬‬


                                                                                 ‫حمول لمخضهين ‪Css‬‬
        ‫كديح هغج ‪ css‬حوّل ؿؼٖيج هيتريز ظفحبح اإلٌخرٌح حٖد أً ُذٍ اهوغج شِوح خٌشٖق اهظفحبح‬
        ‫تـدث ػرق ّتـدث ّشبئل ّفرخِب ُذٍ اهوغج ؿوٓ اهيظيى ّ اهيتريز فٖينً ذهم تّاشػج إدرار اهخٌشٖق ؿوٓ‬
         ‫سيٖؾ اهظفحبح دفـج ّاحدث أّ ؿوٓ يشخّْ اهظفحج اهّاحدث أّ حخٓ ؿوٓ يشخّْ اهّشى اهّاحد ُّذا يً‬
           ‫أنذر اهحوّل اهخٕ ّفرح يشبحج خخزٌٖٖج هويّكؾ ّ أغبفح شرؿج ؿبهٖج فٕ اهخٌفٖذ ّ خّفٖر نتٖر هوٌلل .‬


                                                                         ‫أكثر هو وسيمج في ىبخج واحد‬
     ‫ّتشػَٖ‬      ‫ٖينً ّغؾ ّذٖلج اهخٌشٖق تأنذر يً ػرٖلج حٖد ٖينً ّغـِب فٕ ّشى ؿبدٔ تػرٖلج ؿبدٖج‬
      ‫فٕ يٌػلج ال >‪ُّ <head‬ذا ؿوٓ يشخّْ‬          ‫ّٖينً ذهم تخحرٖر يوف أل ‪ CSS‬ذى رتػِب يؾ اهظفحج‬
        ‫اهظفحج تأنيوِب حخٓ ٌِبٖج اهظفحج ّ ٖينً اشخخداى اهخٌشٖق اهّاحد هيئبح أّ حخٓ يالًٖٖ اهظفحبح ّذهم‬
         ‫ترتػ اهخٌشٖق يؾ ُذٍ اهظفحبح يؾ يوف خٌشٖلبح خبرسٕ ّ ٖينً إدارث ُذا اهخظيٖى يً خبرر اهظفحج‬
                    ‫تبهنبيل ّ اهخـدٖل ؿوٓ يوف اهخٌشٖق ٖضبُد أذرٍ ؿوٓ سيٖؾ اهظفحبح اهيرختػج يؾ ُذا اهيوف.‬


                                                                                             ‫الخركية‬
                                                                                        ‫اهشٖبق اهّاحد‬
              ‫اهشٖبق هوتريسج فٕ ‪ css‬ال ٖخخوف إذا نبً ؿوٓ يشخّْ اهيّكؾ أّ اهظفحج أّ اهّشى فبهشٖبق ُّ‬
         ‫};اهلٖيج:اهّظف{اهّشى‬
                                                   ‫اهّشى ؿتبرث ؿً اشى اهّشى فٕ هغج ‪ html‬يذبل >‪<p‬‬
                                               ‫اهّظف ؿتبرث ؿً ظفج خشخخدى داخل اهّشى يذبل ‪color‬‬
                                                           ‫اهلٖيج ُٕ اهلٖيج اهخٕ خـػٓ هوظفج يذل ‪red‬‬
                                                                                                 ‫يذبل‬



‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                                     ‫3‬

                                                                                  ‫“كود ‪CSS‬‬
         ‫‪p‬‬
         ‫{‬
         ‫;‪color: black‬‬
         ‫‪font-family: arial‬‬
         ‫}‬


     ‫فٕ ُذا اهيذبل شٖخى إغبفج خٌشٖلبح سدٖدث هوّشى >‪ُّ <p‬ذٍ اهخٌشٖلبح ؿتبرث ؿً سـل اهوًّ ُّ األشّد‬
                                                                                ‫ّ ٌّؽ اهخػ ُّ ‪. Arial‬‬


                                                                          ‫خىسيق واحد لعدث وسون ..‬
                              ‫فٕ ُذا اهيذبل شٌرْ نٖف ٖينً أً ٌسـل خٌشٖق ّاحد هيسيّؿج يً اهّشّى‬

                                                                                  ‫“كود ‪CSS‬‬
         ‫6‪h1,h2,h3,h4,h5,h‬‬
         ‫{‬
         ‫‪color: green‬‬
         ‫}‬
      ‫فٕ ُذا اهيذبل خى سـل خٌشٖق سيٖؾ اهّشّى يً 1‪ ّ h‬إهٓ 6‪ h‬تٌشق اهوًّ اهّاحد ُّّ اهوًّ األخغر.‬


                                                                                  ‫اسخخدان األضىبف‬
      ‫هـل يً أسيل يب فٕ ُذٍ اهوغج ُّ إينبٌٖج اشخخداى األظٌبف ُّذٍ األظٌبف أخبحح هويظيى ّ اهيتريز‬
     ‫يً خٌشٖق اهـضراح يً األٌشبق هوّشى اهّاحد ُّذا ٖسـل إينبٌٖج االشخخداى اهيخـدد هوّشّى حٖد أً ٖينً أً‬
       ‫ٖنًّ اهّشى >‪ <p‬يلبل أّ ٖنًّ ؿٌّاً ٌط أّ ٖنًّ ؿٌّاً اهيّكؾ، فال ٖينً أً ٖنًّ فٕ سيٖؾ األحّال‬
     ‫ُذا اهّشى تٌفس اهٌشق، فأخبحح هٌب هغج ‪ css‬يً فٕ خٖبراح األظٌبف يً االشخخداى اهيخـدد ّحٖد أً ٖنًّ‬
                                                                          ‫ُذا االشخخداى يٌبشة فٕ ينبٌَ.‬
                                                                                              ‫يذبل‬

                                                                                  ‫“كود ‪CSS‬‬
         ‫}‪p.right {text-align: right‬‬
         ‫}‪p.center {text-align: center‬‬
                                            ‫فٕ اهيذبل اهشبتق ُّ ؿتبرث ؿً ٌشلًٖ يخخوفًٖٖ هوّشى >‪<p‬‬
                                                                            ‫هل‬
      ‫حٖد أً اشى اهظٌف ّشى األّل ُّ ‪ )text-align(ّ right‬خـٌٕ اخسبٍ اهٌط ّ أً اهلٖيج ُٕ اهٖيًٖ.‬




‫‪http://arabsoftware.net‬‬                                                                          ‫عرب سوفتوير‬
                                                                                                       ‫4‬
     ‫ّاشى اهظٌف هلّشى اهذبٌٕ ُّ ‪ّٖ center‬شخخدى ُذا الظٌف ( ‪ )text-align‬ظفج ينبً ّسّد اهٌط‬
                                                                                 ‫ّأً اهلٖيج ُٕ اهيٌخظف.‬
                                                                                          ‫كيف خعهل‬
     ‫هلد ذنرح شبتلبً تّشبئل إغبفج األٌشبق إهٓ اهظفحج ّشٌخـرف اًٗ تضنل يفظل حّل ّغؾ األٌشبق ّ‬
                                                                       ‫رتػِب ّ خضغٖوِب فٕ ظفحج ‪. html‬‬


                                                          ‫الطريلج األولى الرتط هع همف خبرجي‬
      ‫ٖخى اشخخداى اهرتػ يؾ يوف خبرسٕ ؿٌد اشخخداى اهٌشق هـدث ظفحبح فِذٍ أشِل ػرٖلج ؿوٓ اإلػالق‬
      ‫ُّٕ خغٖر خٌشٖق ظفحبح اهيّكؾ تنبيوِب فلػ تخغٖٖر يوف األٌشبق، ّٖسة ؿوٓ اهيظيى أّ اهيتريز أً ٖلّى‬
               ‫ب‬
              ‫ترتػ ُذٍ اهظفحج تظفحج األٌشبق نٕ ٖخى خػتٖق األٌشبق ؿوِٖب ّ إال هً ٖخى خػتٖق األٌشبق ٌِبئًٖ.‬


                                                                                      ‫كيف يخن الرتط‬

                                                                      ‫“كود ‪CSS + Html‬‬
         ‫>‪<head‬‬
         ‫>/ "‪<link rel="stylesheet" type="text/css" href="mystyle.css‬‬
         ‫>‪</head‬‬
     ‫>‪ّ <head‬تبشخخداى اهّسى >‪<link‬‬         ‫نيب ٖؼِر فٕ اهيلػؾ اهتريسٕ اهشبتق ٖخى اهرتػ فٕ يٌػلج ال‬
       ‫ٌُّبم ظفبح هِذا اهّشى أُيِب ُٕ اهظفبح اهيذنّرث فٕ اهلػؾ اهتريسٕ حٖد أً ُذا اهيلػؾ ٖرتػ ظفحج‬
     ‫ظفحج اهّٖة‬    ‫ّٖة تبهيوف ‪ّ mystyle.css‬تذهم ٖلّى اهيخظفح تلراءث ُذا اهيوف أّالً ذى ٖلّى تديسِب يؾ‬
                                                                                                 ‫ح‬
                                                            ‫اهخٕ ّرد فٕ اهٌِبٖج أٌشبكَا يً يوف األٌشبق.‬
                                                                                 ‫هل‬
     ‫ّٖينً يظيى أّ اهيتريز يً نخبتج يوف األٌشبق فٕ أٔ يحرر نويبح دًّ أٔ يضبنل هـل األنذر‬
     ‫شرؿج ُّ ترٌبيز ‪ Notepad‬أيب اهيفغل هدٔ ُّ ‪ Macromedia Dreamweaver‬أّ ‪Microsoft‬‬
     ‫‪ّ Office SharePoint Designer‬هنً اهسزء اإلستبرٔ ُّ أً يوف األٌشبق ٖسة أً ٖنًّ هَ ايخداد‬
                    ‫ّاحد فلػ ُّّ ‪ّ .css‬أً يوف األٌشبق اهخبرسٕ ٖسة أً ال ٖحخّٔ ؿوٓ أٔ ّشّى ‪.html‬‬


                                                                        ‫لكي ال يلع الهترهج في الخطأ‬

                                                                                   ‫“كود ‪CSS‬‬
         ‫}‪hr {color: red‬‬
         ‫}‪p {margin-left: 20px‬‬
         ‫})"‪body {background-image: url("images/back40.gif‬‬
     ‫فٕ اهيلػؾ اهتريسٕ اهشبتق ؿتبرث ؿً ٌشق اهشػر األفق ُّّ تبهوًّ األحير ّ ٌشق اهّشى >‪ُّّ <p‬‬
            ‫االتخـبد 02 تنشل ؿً اهسبٌة األٖشر ّ ٌشق اهظفحج تضنل ؿبى ُّّ إغبفج ظّرث نخوفٖج هوظفحج.‬




‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                                           ‫5‬
     ‫ٖسة ؿدى خرم يشبفج تًٖ اهلٖى اهيخـددث يذل ‪ 20px‬حٖد ٖسة ؿدى نخبتخِب ‪ 20 px‬فئً ذهم كد ال ٖـيل‬
                                                                                     ‫ؿوٓ تـع اهيخظفحبح .‬


                                                                    ‫الطريلج الثبىيج األىسبق الداخميج‬
     ‫ٖينً اشخخداى اهخٌشٖق اهداخوٕ هوظفحج فٕ حبل أً اهيتريز ٖحة أً ٖـػٕ ظفبح خبظج تِذٍ اهظفحج‬
            ‫ّكد ينٌح هٌب اهوغج يً ذهم حٖد ٖخى ذهم تبشخخداى اهّشى >‪ <style‬اهيشخخدى فٕ يٌػلج ال>‪<head‬‬
                                                                                                    ‫يذبل‬

                                                                         ‫“كود ‪CSS + html‬‬
           ‫>‪<head‬‬
           ‫>"‪<style type="text/css‬‬
           ‫}‪hr {color: green‬‬
           ‫}‪p {margin-left: 20px‬‬
           ‫})"‪body {background-image: url("images/back40.gif‬‬
           ‫>‪</style‬‬
           ‫>‪</head‬‬
      ‫فٕ ُذا اهيلػؾ اهتريسٕ خى ّغؾ اهخٌشٖق فٕ داخل يٌػلج ال>‪ّ <head‬خى إؿبدث خٌشٖق اهخػ األفلٕ‬
     ‫ّسـوَ تبهوًّ األخغر ّإزاحج اهفلراح 02 تنشل هوٖشبر ّ ّغؾ اهظّرث نخوفٖج هوظفحج ّٖظتح ُذا ضنل‬
                                               ‫اهّشّى اهٌِبئٕ فٕ ُذٍ اهظفحج فلػ ّهٖس تبكٕ ظفحبح اهيّكؾ.‬
                                         ‫هويـرفج اهيخظفحبح اهلدٖيج ال خخـرف ؿوٓ اهّشى >‪. <style‬‬


                                                                ‫الطريلج الثبلثج األىسبق داخل الوسن‬
      ‫‪ )attribute‬داخل اهّشى اهيراد‬    ‫الشخخداى اهخٌشٖق هوّشى اهّاحد فلػ ٖينً ذهم تّاشػج ّغؾ (اهظفج‬
                                                                                          ‫خػتٖق اهخٌشٖق ؿوَٖ‬

                                                                         ‫“كود ‪CSS + html‬‬
           ‫>"‪<p style="color: red; margin-left: 20px‬‬
           ‫‪This is a paragraph‬‬
           ‫>‪</p‬‬
      ‫فٕ اهيلػؾ اهتريسٕ اهشبتق خى داخل اهّشى >‪ّ <p‬غؾ ظفج اهّشى ُّٕ ؿتبرث ؿً سـل اهفلرث تبهوًّ‬
                                                                 ‫األحير ّاإلزاحج 02 تنشل ؿً ٖشبر اهضبضج.‬
                                                                                           ‫عدث خىسيلبح‬
     ‫‪css‬‬      ‫كد ٖلّى اهيتريز أّ اهيظيى تّغؾ ؿدث خٌشٖلبح هوّشى اهّاحد ُّذا ٖؤدٔ إهٓ خداخل ّهنً هغج‬
            ‫خّكـح ُذا اهـيل ّخلّى خولبئٖبً تّغؾ ُذٍ األٌشبق اهيخـددث فٕ خٖبر ّاحد فبهغٖر ينرر شٖخى خذتٖخَ أيب‬
                                                                          ‫اهينرر فٖخى أخذ اهٌشق األخٖر يٌَ .‬



‫‪http://arabsoftware.net‬‬                                                                                ‫عرب سوفتوير‬
                                                                                                       6
                                                                                                ‫يذبل‬

                                                                                   CSS ‫“كود‬
     h3
          {
          color: red;
          text-align: left;
          font-size: 8pt
          }
     h3
          {
          text-align: right;
          font-size: 20pt
          }


                                                 <h3> ‫ُذٍ ُٕ خالظج اهيوف اهتريسٕ اهشبتق هخٌشٖق اهّشى‬

                                                        <h3> ‫ق الىهبئي لموسن‬‫“الخىسي‬
          color: red;
          text-align: right;
          font-size: 20pt


                                                                                ‫شيء هو الخفضيل‬
              ‫شخنًّ اهسّهج اهخبهٖج ُٕ هخفظٖل اهحدٖد ؿً ظفبح اهوغج ّاشخخدايبح ُذٍ اهظفبح ٌّخبئز اهلٖى‬
                                                                     ‫الخعبهل هع خمفيج الىص والضفحج‬

                                                                       CSS + html ‫“كود‬
          <html>
          <head>
          <style type="text/css">
          body {background-color: yellow}
          h1 {background-color: #00ff00}
          h2 {background-color: transparent}
          p {background-color: rgb(250,0,255)}
          </style>



http://arabsoftware.net                                                                           ‫عرب سوفتوير‬
                                                                                                      7

         </head>
         <body>
         <h1>This is header 1</h1>
         <h2>This is header 2</h2>
         <p>This is a paragraph</p>
         </body>
         </html>


                                                                                            ‫ىبخج الخىفيذ‬
                                                                             This is header 1

         This is header 2
                                                                         This is a paragraph




     ‫ فٕ يسبل اهظّر ّ اهخوفٖبح ُّ إينبٌٖج ؿدى خنرار اهظّرث اهخوفٖج‬css ‫أيب يً أرّؽ يب خينٌٌب تَ هغج‬
                                                              ٕ‫ُّذا ٖخى فٕ اخسبًُٖ االخسبٍ األفلٕ ّاهرأش‬

                                                                                  CSS ‫“كود‬
         <style type="text/css">
         Body.V
         {
         background-image:
         url('bgdesert.jpg');
         background-repeat: repeat-y
         body.H
         {
         background-image:
         url('bgdesert.jpg');
         background-repeat: repeat-x }
         body.N
         background-image:
         url('smiley.gif');
         background-repeat:




http://arabsoftware.net                                                                           ‫عرب سوفتوير‬
                                                                                                        ‫8‬

         ‫;‪no-repeat‬‬
         ‫:‪background-position‬‬
          ‫} ;‪center‬‬
     ‫‪ٖ body.V‬لّى‬          ‫يلػؾ تريسٕ ٖؼِر نٖفٖج خنرار اهظّرث فٕ اهخوفٖج ؿوٓ خػ أفلٕ فلػ فبهخظٌٖف‬
       ‫‪ٖ body.H‬لّى تخنرار اهخظٌٖف ؿوٓ اهخػ األفلٕ ّ‬       ‫تخنرار اهظّرث ؿوٓ اهخػ اهرأشٕ فلػ ّ اهخظٌٖف‬
                                          ‫ب‬
                                         ‫اهخظٌٖف ‪ٖ body.N‬لّى تخذتٖح اهظّرث تدًّ إينبٌٖج اهخنرار ٌِبئًٖ.‬
                                                                                 ‫اهخـبيل يؾ اهٌظّط‬
                     ‫ب‬
                    ‫خخـبيل هغج ‪ css‬يؾ اهٌظّط تئينبٌٖبح سدٖدث ّكّٖج هى خنً هغج ‪ html‬خلّى تَ شبتلً.‬
       ‫يٌـبً هوخنرار كد خى ّغؾ ػرق خوًّٖ اهٌظّط فٕ ؿدث أيذوج شبتلج هذهم ٌُب شأخحدد ؿً أيّر سدٖدث‬

                                                                                    ‫“كود ‪CSS‬‬
         ‫>‪<style type="text/css‬‬
         ‫}‪h1 {letter-spacing: -3px‬‬
         ‫}‪h4 {letter-spacing: 0.5cm‬‬
         ‫>/‪<style‬‬
     ‫فٕ اهيلػؾ اهتريسٕ اهشبتق ٖخى ّغؾ يشبفبح اهختبؿد تًٖ حرّف اهنويج اهّاحدث ُّذٍ اهػرٖلج سدٖدث فٕ‬
                                                           ‫هغج ‪ ّ CSS‬خّفر ػرق ؿرع هوٌظّط سيٖوج.‬
      ‫ّأٖغب يً اهيٖزاح اهرائـج اهخٕ خينٌٌب يٌِب هغج ‪ ُٕ css‬إينبٌٖج ّغؾ اهخػّػ فٕ اهٌط ّاهػرٖلج‬
      ‫تبشخخداى اهّشى >‪ّ <u‬هنً اهّٖى فٕ ‪ٌُ css‬بم ػرق‬          ‫اهخلوٖدٖج اهلدٖيج ُٕ ّغؾ اهٌط فٕ أشفل اهنويج‬
                                                                                   ‫ؿدٖدث هّغؾ اهخػّػ .‬

                                                                                    ‫“كود ‪CSS‬‬
         ‫>"‪<style type="text/css‬‬
         ‫}‪h1 {text-decoration: overline‬‬
         ‫}‪h2 {text-decoration: line-through‬‬
         ‫}‪h3 {text-decoration: underline‬‬
         ‫}‪a {text-decoration: none‬‬
         ‫>‪</style‬‬
         ‫ٖخى ّغؾ اهخػ تبشخخداى ‪ّ text-decoration‬اهلٖى ُٕ ‪ overline‬خـٌٕ خػ فٕ أؿوٓ اهنويج ّ‬
     ‫‪ّline-through‬خـٌٕ ٌط فٕ أؿوٓ اهنويج ّ ‪ّ underline‬خـٌٕ خػ أشفل اهنويج ّ ‪ّ none‬خـٌٕ ؿدى‬
                                                                                            ‫ّغؾ أٔ خػ.‬
                                         ‫ب‬
           ‫أيب تبهٌشتج هوخـبيل يؾ ٌّؿٖج اهخػ اهذٔ ٖنخة فَٖ فلد خى يشتلً ّغؾ اهنٖفٖج ّيً تبة ؿدى خنرار‬
                                                                     ‫ب‬
                                                                    ‫اهضٕء شّف أنخفٕ تيب خى ضرحَ يشتلً.‬




‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                                        ‫9‬
                                                                                    ‫خٌشٖق اإلػبراح.‬
      ‫هغج األٌشبق خّفر هٌب ػرق رائـج هوخـبيل يؾ إػبراح اهسداّل أّ حخٓ إػبراح هوٌظّط ّخيٖزُب ؿً‬
      ‫غٖرُب، ّ ٖينً تتـع االحخراف هويتريز أّ اهيظيى تِذا اهيسبل أً ٖخٌبّل اهخـبيل يؾ اهٌظّط ّاهسداّل‬
           ‫ّاهـٌبظر اهيخخوفج تػرق رائـج تل خنًّ أحٖبٌبً أفغل يً خظيٖيبح اهظّر فٕ ترايز يـبهسج اهظّر‬
                                                                                                 ‫اهيخخوفج.‬
       ‫‪ ّ border‬شٖنًّ تـد اهيلػؾ اهتريسٕ‬       ‫فٕ اهيلػؾ اهتريسٕ اهخبهٕ شأذنر اهلٖى اهخٕ خأخذُب اهظفج‬
                                                   ‫خّغٖح نٖفٖج اهؼِّر ُذٍ اإلػبراح فٕ يخظفح اإلٌخرٌح.‬

                                                                                    ‫“كود ‪CSS‬‬
          ‫>"‪<style type="text/css‬‬
          ‫}‪p.dotted {border-style: dotted‬‬
          ‫}‪p.dashed {border-style: dashed‬‬
          ‫}‪p.solid {border-style: solid‬‬
          ‫}‪p.double {border-style: double‬‬
          ‫}‪p.groove {border-style: groove‬‬
          ‫}‪p.ridge {border-style: ridge‬‬
          ‫}‪p.inset {border-style: inset‬‬
          ‫}‪p.outset {border-style: outset‬‬
          ‫>‪</style‬‬
       ‫فٕ اهيلػؾ اهتريسٕ اهشبتق ّٖغح ؿدث ػرق هخّظٖف اإلػبراح (اهلٖى تبهوًّ األحير). ّاهيالحؼ أً‬
                      ‫اهخـبيل ٖخى يؾ اهّشى >‪ <p‬أٔ اهفلرث ّهٖس اهخـبيل يؾ سدّل ّاهظّرث اهخبهٖج ُٕ اهخٌفٖذ.‬




     ‫احخرافٖج‬   ‫أيب أسيل يب رأٖح يً هغج األٌشبق ُّ ػرق اهيـبهسج اهٌظٖج فٕ ّغؾ اهٌط داخل إػبراح‬
                                                     ‫ّتدًّ اشخخداى اهظّر اهيظييج ؿوٓ ترايز اهيـبهسج .‬



‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                                       ‫01‬


               ‫اهيلػؾ اهتريسٕ اهخبهٕ شٖنًّ هظفحج ‪ html‬نبيوج ّ شٖنًّ ٌبخز اهخٌفٖذ تـد اهظفحج يتبضرث‬

                                                                       ‫“كود ‪CSS + html‬‬
          ‫>‪<html‬‬
          ‫>‪<head‬‬
          ‫>"‪<style type="text/css‬‬
          ‫‪p‬‬
          ‫{‬
          ‫;‪border-style: solid‬‬
          ‫‪border-top-width: 15px‬‬
          ‫}‬
          ‫>‪</style‬‬
          ‫>‪</head‬‬


          ‫>‪<body‬‬
          ‫‪<p><b>Note:</b> The "border-top-width" property does not work if it is‬‬
     ‫>‪used alone. Use the "border-style" property to set the borders first.</p‬‬
          ‫>‪</body‬‬


          ‫>‪</html‬‬


       ‫>‪ <p‬أ فلرث ٌظٖج ّهنً ٖتدّ أً‬      ‫اهيلػؾ اهتريسٕ تشٖػ سداً ّغبٖج فٕ اهشِّهج هوخـبيل يؾ اهّشى‬
                               ‫هل‬
      ‫ٌخٖسخَ هى خنًّ شِوج ؿوٓ اإلػالق تل نبٌح احخرافٖج سداً . أيب ٌبخز اهخٌفٖذ يلػؾ اهتريسٕ اهشبتق شٖنًّ.‬




     ‫ّٖينً ؿيل اهيئبح يً اهخظيٖيبح اهرائـج ّ اهتشٖػج ّ اهسيٖوج ّ األُى يً ذهم ُّ أٌِب خفٖفج اهّزً‬
                                                                                  ‫خبهٖج يً اهظّر اهذلٖوج.‬


      ‫تبهٌشتج هوختبؿد تًٖ اهنويبح ّ اهحرّف فٕ تريسج األٌشبق كد خـبيوٌب يـِب فٕ ّكح شبتق يً ُذا اهتحد‬
                                  ‫ّ هنً ال يبٌؾ يً ّغؾ ضٕء يً اهخفظٖل ؿً حبالح اهختبؿد ٌؼراً ألُيٖخِب.‬




‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                                       ‫11‬



                                                                                  ‫“كود ‪CSS‬‬
         ‫>"‪<style type="text/css‬‬
         ‫;‪p.leftmargin {margin-left: 2cm‬‬
         ‫;‪p.rightmargin {margin-right: 8cm‬‬
         ‫;‪p.topmargin {margin-top: 5cm‬‬
         ‫;‪p.bottommargin {margin-bottom: 2cm‬‬
         ‫‪p.margin {margin: 2cm 4cm 3cm 4cm‬‬
         ‫}‬
         ‫>‪</style‬‬
                                                                         ‫فٕ اهيلػؾ اهتريسٕ اهشبتق‬
      ‫ٖؼِر فٕ اهظٌف ‪ leftmargin‬إتـبد اهٌط ؿً سِج اهٖشبر تيلدار 2 شى حٖد أً فٕ ُذٍ اهيٌػلج‬
                                 ‫(تـٖد ؿً اإلػبر اهٖشبر هويخظفح ة2شى) هً ٖنًّ ٌُبم أٔ ٌظّط خذنر.‬
                           ‫أيب اهظٌف ‪ٖ rightmargin‬ؼِر ختبؿد اهٌط ؿً اهسِج اهٖيٌٓ تيلدار 8 شى.‬
         ‫أيب اهظٌف ‪ topmargin‬فٖؼِر ختبؿد اهٌط 5 شى ؿً اهٌط اهذٔ ٖنًّ فٕ أؿالٍ أّ ؿً إػبر‬
                                                                                               ‫اهيخظفح.‬
                  ‫أيب اهظٌف ‪ bottommargin‬فٖؼِر ختبؿد اهٌط ؿً اهٌط اهذٔ ٖلػؾ أشفوَ ة 2شى.‬
                                  ‫أيب اهظٌف ‪ margin‬فِّ ٖؼِر نٖفٖج ختبؿد اهٌط ؿً نل االخسبُبح.‬


                                                                         ‫اهخـبيل يؾ اهلّائى اهيٌؼيج.‬
     ‫نيب أذُوح اهيظييًٖ ّاهيتريسًٖ فٕ اهخـبيل يؾ اهٌظّط أٖغب خذُوٌب هغج ‪ css‬فٕ اهخـبيل يؾ اهلّائى‬
                                                                                                ‫اهيٌؼيج.‬

                                                                    ‫“كود ‪CSS + html‬‬
         ‫>"‪<style type="text/css‬‬
         ‫‪ul‬‬
         ‫{‬
         ‫)'‪list-style: square inside url('arrow.gif‬‬
         ‫}‬
         ‫>‪</style‬‬
       ‫>‪ّ <ul‬تِذا اهخـبيل ٖينً سـل ريز‬      ‫يلػؾ تريسٕ ٖؼِر ػرٖلج اهخـبيل يؾ ّشى اهلبئيج اهيٌؼيج‬
                          ‫اهلبئيج ؿتبرث ؿً ظّرث خبرسٖج ّ ُذٍ اهخلٌٖج غٖر يشخخديج إػالكبً فٕ هغج ‪. html‬‬




‫‪http://arabsoftware.net‬‬                                                                           ‫عرب سوفتوير‬
                                                                                                         ‫21‬




                                                                                           ‫كوث المغج‬
                                             ‫ب‬
      ‫حخٓ ُذٍ اهوحؼج هى أخحدد ؿً اهلّث اهيػولج تِذٍ اهوغج ّأٖغً اإلغبفبح اهرائـج اهخٕ ّفرخِب ؿوٌٖب ُذٍ‬
      ‫اهوغج، هغج األٌشبق ُّٕ هغج رائـج أخرسخِب هٌب يٌؼيج ‪ W3C‬اهرائدث فٕ خلٌٖبح اهّٖة ّ ُٕ ٌخبر يً هغج‬
     ‫‪ Xhtml‬اهلّٖج اهخٌفٖذ ّ اهظبريج اهلّاًٌٖ ّأٖغب هغج ‪ xml‬اهوغج اهخٕ هِب اهفغل فٕ خػّٖر ؿبهى غٖر يخٌبُٕ‬
       ‫‪ java script‬اهوغج اهخٕ سـوح يً اهيشخخدى ّاهيتريز ّ‬        ‫يً ترايز اهّٖة اهيخخوفج ّاهوغج اهـتلرٖج هغج‬
             ‫اهيظيى فٕ حولج ّاحدث. هذهم ٌضبُد أً هغج ‪ ُٕ css‬كرٖتج يً خرنٖة هغج ‪ّ C‬هغج ‪. Java script‬‬
     ‫يً اهيـرّف ؿً هغج ‪ xml‬خدخوِب تضؤًّ هغج ‪ّ html‬إينبٌٖج خـدٖل ّخغٖر ّ إؿبدث ُٖنوج ّخػّٖر هذهم‬
     ‫‪ّ html‬اًٗ خدخوح هغج ‪ّ xml‬هغج ‪ css‬فٕ إؿبدث‬           ‫نبً يً اهشِل أً ٖخى خػّٖر خػتٖلبح يخخوفج يً هغج‬
       ‫ُٖنوج هوّشى اهذبتح اهظوة فٕ ‪ّ html‬إغبفج إينبٌٖبح سدٖدث سـوح اهيتريز ٖشخغٌٕ ؿً ؿضراح اهترايز‬
                                                              ‫يذل اهفالص أّ غٖرٍ يً ترايز يـبهسج اهظّر.‬


                                                                         ‫فيً اإلينبٌٖبح سدٖدث ؿوٓ ‪. html‬‬
                                                                                         ‫إخفبء اهٌط!!‬
                          ‫سـوح هٌب هغج األٌشبق إينبٌٖج إخفبء اهٌط ّذهم ٖؼِر فٕ اهيلػؾ اهتريسٕ اهخبهٕ‬

                                                                       ‫“كود ‪CSS + html‬‬
         ‫>"‪<style type="text/css‬‬
         ‫}‪p {display: inline‬‬
         ‫}‪div {display: none‬‬
         ‫>‪</style‬‬
         ‫حٖد أً اهّشى >‪ <p‬شٖؼِر فٕ ظفحج اهّٖة أيب اهّشى >‪ <div‬فشّف ٖخى إخفبءُب ؿً اهيخظفح.‬


                                                                                 ‫ظّرث فٕ يٌخظف اهٌط!!‬
                               ‫ب‬
       ‫ٌُب ٖخى ّغؾ ّشٖوج هسـل اهظّر خؼِر فٕ يٌخظف اهٌظّط ّأٌب ضخظًٖ أؿوى اهيضبنل اهخٕ خّاسَ‬
     ‫اهيظيى ّاهيتريز تضأً يّغّؽ اهظّر فيً اهيـرّف تأً اهظّرث خٌزل ؿً يشخّْ اهنالى أّ خسـل اهنالى‬
        ‫ٌٖزل ؿً يشخّاُب ّؿبدث فٕ يّاكؾ اهسرائد أّ اإلختبرٖج خنًّ تحبسج هسـل اهظّرث فٕ يٌخظف اهنالى .‬

                                                                                     ‫“كود ‪CSS‬‬
         ‫>"‪<style type="text/css‬‬
         ‫‪img‬‬
         ‫{‬
         ‫‪float:right‬‬



‫‪http://arabsoftware.net‬‬                                                                              ‫عرب سوفتوير‬
                                                                                                          ‫31‬

         ‫}‬
                                ‫اهيلػؾ اهتريسٕ ٖؼِر سـل اهظّرث داخل اهٌط تبهسبٌة األٖيً يً اهٌط.‬


                                                                                   ‫اهحرف األّل تحسى نتٖر‬
          ‫ٖينً هٌب يً سـل اهحرف األّل ٖؼِر تحسى أنتر يً تبكٕ اهٌط ُّذٍ اهّشٖوج يشخخديج فٕ اهوغج‬
             ‫اإلٌسوٖزٖج هوخيٖٖز تًٖ اهفلراح ّأظتح تـع اهيظييًٖ اهـرة اهّٖى يً إدخبل ُذٍ اهّشٖوج فٕ اهيّاكؾ‬
      ‫اهـرتٖج هوخيٖز تًٖ اهفلراح ّهنً كد ٖنًّ تئغبفج يؤذراح غٖر خنتٖر اهخػ ّيً اهيـرّف أً خنتٖر اهحرف‬
      ‫‪ CSS‬ؿبهسح هٌب‬          ‫األّل فٕ اهٌط شّف ٖؼِر خأذٖرٍ ؿوٓ نبيل اهشػر اهذٔ ٖلؾ فَٖ ُذا اهٌط ّ هنً‬
                                                                                                   ‫اهيضنوج.‬

                                                                        ‫“كود ‪CSS + html‬‬
         ‫>"‪<style type="text/css‬‬
         ‫‪span‬‬
         ‫{‬
         ‫;‪float:left‬‬
         ‫;‪width:0.7em‬‬
         ‫;%004:‪font-size‬‬
         ‫;‪font-family:algerian,courier‬‬
         ‫;%08:‪line-height‬‬
         ‫}‬
         ‫>‪</style‬‬
              ‫اهيلػؾ اهتريسٕ ٖؼِر ػرٖلج سـل اهحرف األّل نتٖر ّال ٖؤذر ؿوٓ تبكٕ اهشػر اهذٔ ٖلؾ فَٖ.‬




                            ‫ظّرث هوحرف األّل اهينتر دًّ اهخأذٖر ؿوٓ تبكٕ اهٌط‬




                                                                                            ‫كبئيج أفلٖج‬
      ‫خحرٖرُب تدًّ ترٌبيز اهفالص‬      ‫يذل ُذٍ اهلبئيج تحبسج ؿبدث هترٌبيز فالص هخحرٖرُب ّهنً اهّٖى ٖينً‬
                                                                                        ‫ذهم يؾ هغج األٌشبق‬

                                                                                     ‫“كود ‪CSS‬‬
         ‫>"‪<style type="text/css‬‬



‫‪http://arabsoftware.net‬‬                                                                              ‫عرب سوفتوير‬
                                                                                                       ‫41‬

         ‫‪ul‬‬
         ‫{‬
         ‫;‪float:left‬‬
         ‫;%001:‪width‬‬
         ‫;0:‪padding‬‬
         ‫;0:‪margin‬‬
         ‫;‪list-style-type:none‬‬
         ‫}‬
         ‫‪a‬‬
         ‫{‬
         ‫;‪float:left‬‬
         ‫;‪width:6em‬‬
         ‫;‪text-decoration:none‬‬
         ‫;‪color:white‬‬
         ‫;‪background-color:black‬‬
         ‫;‪padding:0.2em 0.6em‬‬
         ‫;‪border-right:1px solid white‬‬
         ‫}‬
         ‫}0033‪a:hover {background-color:#ff‬‬
         ‫}‪li {display:inline‬‬
         ‫>‪</style‬‬


                                           ‫يلػؾ تريسٕ ٖؼِر ػرٖلج ؿيل اهلبئيج األفلٖج تضنل احخرافٕ.‬
         ‫فنرث ؿيل ُذٍ اهلبئيج ُٕ إٌضبء كبئيج يٌؼيج ّهنً تدل يً أً ٖخى ّغؾ اهخٖبراح تضنل رأشٕ ٖخى‬
     ‫ّغـِب تضنل أفلٕ ذى سـل إغبفج ظفبح هوّشى >‪ ُّٕ <a‬سـوَ تبهسبٌة األٖشر فٕ يرتؾ تيشبحج 6شى ّ‬
             ‫رفؾ اهشػر اهذٔ تأشفل اهٌط يؾ خػ تبهوًّ األتٖع ّخوفٖج تبهوًّ األشّد ّخػ تًٖ اهيرتـبح تبهوًّ‬
                     ‫األتٖع أيب ؿٌد خيرٖر اهيبّس ؿوٓ اهيرتؾ ‪ a:hover‬فشّف ٖخى خغٖر اهخوفٖج هوًّ األحير.‬


                                                              ‫ظّرث خؼِر نٖفٖج ؿرع اهلبئيج اهسبٌتٖج‬


       ‫فيً أُى اهٌلبػ اهخٕ ٖحة أً أخذُب تـًٖ االؿختبر ُٕ أً ُذٍ اهلبئيج ال خشخخدى اهسداّل ّال خشخخدى‬
                                                                                ‫ا‬
              ‫اهظّر ّأٌَ يً اهشِل سدً اإلغبفج ؿوٓ ُذٍ اهلبئيج رّاتػ سدٖدث ُّٕ هٖشح ٌخبر ترٌبيز نبهفالص.‬




‫‪http://arabsoftware.net‬‬                                                                           ‫عرب سوفتوير‬
                                                                                                           ‫51‬
                                                                                       ‫خغٖر ضنل اهيبّس‬
                                                                                            ‫ب‬
          ‫أٖغً كّث سدٖدث هوغج اهرائـج ُّٕ اهخأذٖر ؿوٓ ضنل اهيبّس ّيً اهيـرّف تأً خغٖر ضنل اهيبّس‬
        ‫تحبسج هترايز يـلدث يذل يبنرّيٖدٖب داٖرنخّر اهترٌبيز اهرائد تخظيٖى اهّٖة تّاشػج خلٌٖبح نبهفالص ّأً‬
     ‫اهخـدٖل ؿوٓ ضنل اهيبّس فٕ اهداٖرنخّر تحبسج هيـرفج هٖس تشٖػج توغج اهتريسج ‪ّ Lingo‬رغى اإلينبٌٖبح‬
        ‫اهلّٖج اهخٕ هيشخِب فٕ اهخظيٖى تّاشػج اهداٖرنخّر ّ اهخٖبراح اهرائـج ّ اإلينبٌٖبح اهلّٖج اهخٕ خلديِب هغج‬
       ‫‪ Lingo‬إال إٌَ ٖتلٓ ضٕء ٖسـل هغج ‪ css‬خأخذ اهخلدٖر اهنبيل ُّّ أً ُذٍ اهوغج ال خحخبر هحسى نتٖر ّال‬
           ‫خأخذ يشبحج خخزٌٖٖج نتٖرث ّال خأخذ ّكح فٕ اهخٌفٖذ ُذا يب ٖفخلدٍ اهخظيٖى تّاشػج يبنرّيٖدٖب داٖنخّر‬



                                                                                       ‫“كود ‪CSS‬‬
         ‫>/ ‪<span style="cursor:auto">Auto</span><br‬‬
         ‫>/ ‪<span style="cursor:crosshair">Crosshair</span><br‬‬
         ‫>/ ‪<span style="cursor:default">Default</span><br‬‬
         ‫>/ ‪<span style="cursor:pointer">Pointer</span><br‬‬
         ‫>/ ‪<span style="cursor:move">Move</span><br‬‬
         ‫>/ ‪<span style="cursor:e-resize">e-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:ne-resize">ne-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:nw-resize">nw-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:n-resize">n-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:se-resize">se-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:sw-resize">sw-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:s-resize">s-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:w-resize">w-resize</span><br‬‬
         ‫>/ ‪<span style="cursor:text">text</span><br‬‬
         ‫>/ ‪<span style="cursor:wait">wait</span><br‬‬
         ‫>‪<span style="cursor:help">help</span‬‬
       ‫يلػؾ تريسٕ هوـدٖد يً األضنبل اهخٕ خلديِب ‪ّ css‬هيضبُدث األضنبل ٖينً ذهم يً ٌلل اهيلػؾ ؿوٓ‬
      ‫‪ّ body‬حفؼ‬         ‫ترٌبيز يحرر هوّٖة يذل ال (‪ )Notepad‬أّ أ يحرر ّّغؾ ُذا اهيلػؾ فٕ اهسزء‬
                       ‫اهظفحج تبيخداد ‪ّ .html‬يضبُدث األضنبل اهيخخوفج هويبّس ؿٌد خيرٖر اهيبّس ؿوٓ اهٌط.‬


                                                                                      ‫اهنخبتج فّق اهظّر‬
          ‫كد تِرخٌٕ ُذٍ اهخلٌٖج اهرائـج ُّٕ فـال خّفر اهّكح ّاهسِد اهنتٖر فأظتح اهنخبتج فّق اهظّرث أير‬
                                                         ‫تشٖػ ّاهيلػؾ اهتريسٕ اهخبهٕ هظفحج نبيوج تبل ‪html‬‬




‫‪http://arabsoftware.net‬‬                                                                                 ‫عرب سوفتوير‬
                                                                                                    16

                                                                 CSS + html ‫“كود‬
         <html>
         <head>
         <style type="text/css">
         img.x
         {
         position:absolute;
         left:0px;
         top:0px;
         z-index:-1
         }
         </style>
         </head>


         <body>
         <h1>This is a Heading</h1>
         <img class="x" src="bulbon.gif" width="100" height="180">
         <p>Default z-index is 0. Z-index -1 has lower priority.</p>
         </body>


         </html>
        ٕ‫< ّخى إغبفج ظّرث هوظفحج ّٖؼِر ذهم ف‬img>      ‫فٕ اهيلػؾ اهشبتق خى ّغؾ ٌشق سدٖد هوّشى‬
                                                                     .‫اهشػر األحير يً يخً اهظفحج‬
                                                                             ِّ‫أيب ٌبخز اهخٌفٖذ ف‬




                                   ‫اهنخبتج فّق اهظّرث يتبضرث‬
                                                         .‫ اهنذٖر يً اإلينبٌٖبح‬css‫ّيبزال فٕ ال‬




http://arabsoftware.net                                                                        ‫عرب سوفتوير‬
                                                                                                          ‫71‬

                                                       ‫العبلن العرتي و لغج األىسبق‪CSS‬‬
          ‫ب‬
         ‫‪ّ ، css‬نأً ُذٍ اهوغج الخـٌٕ اهيظيى أّ اهيتريز اهـرتٕ ضٖئً،‬        ‫ا‬
                                                                       ‫اهـبهى اهـرتٕ كد غٖة يخـيدً هغج‬
      ‫تبشخذٌبء اهتريسٖبح اهسبُزث يذل يٌخدٖبح ‪ ُٕ php‬اهخٕ خشخخدى خلٌٖبح ال ‪ّ css‬ختلٓ ُذٍ اهتريسٖبح هى‬
                               ‫ب‬                                                        ‫ب‬
     ‫خظٌؾ ؿرتًٖ أّ حخٓ خػّر ؿرتٖب، تـع اهيّاكؾ اهـرتٖج ػّرح ٌفشِب تريسًٖ ّأخذح تئدخبل خلٌٖبح ال‪css‬‬
      ‫فٕ ظفحبخِب ّأٌب ضخظٖبً أرْ اهيّاكؾ اهخٕ خأخذ تخلٌٖج ‪ css‬أسيل نذٖراً يً يّاكؾ يوٖئج تبهظّر اهيخحرنج‬
           ‫ال‬
        ‫ّاهفالضبح اهخٕ أرُلح اهيظيى ّأرُلح شٖرفر اإلشخغبفج ّأخٖراً أرُلح اهيخظفح اهذٔ سوس ػّٖ ً فٕ‬
                                                                                    ‫اٌخؼبر خحيٖل اهظفحج.‬


                                      ‫خنيً أُيٖج ال‪ css‬فٕ كّخِب ّ دكخِب ّإينبٌٖبخِب اهيخـددث اهيسبالح.‬
                                                                                       ‫ب‬
     ‫اٌب ضخظًٖ فغوح ُذٍ اهوغج هشِّهج اهخـدٖل ؿوِٖب حٖد خـدٖل هًّ ؿٌّاً اهيلبل اهذٔ ٖنًّ فٕ ؿضراح‬
                                    ‫اهظفحبح ٖخى تّشػَ اهخـدٖل ؿوٓ يوف ّاحد تل اهخـدٖل ؿوٓ نويج ّاحدث.‬
     ‫>"‪ <p color="red‬خأخذ ّكح‬           ‫ّأٖغبً شرؿج خٌفٖذ اهوغج، فئً اهخٌشٖلبح اهيغيٌج داخل اهّشى يذل‬
      ‫أػّل فٕ اهخٌفٖذ يً أٌشبق ‪ّ . css‬نذهم اهخخفٖف يً ّزً اهظفحج فئً اهخٌشٖق تبل ‪ٖ css‬خفف يً ّزً‬
                                                              ‫اهظفحج سيٖؾ اهظفبح اهيخغيٌج داخل اهّشى.‬


      ‫كد ٖنًّ شتة اإلُيبل اهـرتٕ هِذٍ اهوغج ٌبتؾ يً ظـّتج اهتداٖج، أّ أً اهيظييًٖ اهـرة ّ اهيتريسًٖ‬
      ‫يذل ‪ FrontPage‬دًّ اهدخّل هوتريسج يً‬           ‫اهـرة ٖفغوًّ خٌشق اهيّكؾ تّاشػج اهتريسٖبح اهسبُزث‬
     ‫اهداخل ّهنً احخراف هغج األٌشبق ال ٖحخبر ّكخبً ػّٖالً ّشٖنخضف اهيتريز ّاهيظيى اهـرتٕ تأٌَ ٖغؾ خلٌٖبح‬
                                                                      ‫رائـج فٕ يّكـَ تبشخخداى ُذٍ األٌشبق.‬


     ‫‪css‬‬       ‫تبهتحد فٕ يّكؾ سّسل فٕ اهوغج اهـرتٖج ؿً نويج‬      ‫ٖينً يـرفج اإلُيبل اهـرتٕ هِذٍ اهوغج‬
                                                     ‫ّشخنًّ اهيفبسأث كوج اهيّاكؾ اهخٕ خخحدد ؿً ُذٍ اهوغج .‬
                                                                               ‫ب‬
        ‫ّكد ؿبٌٖح ضخظًٖ فٕ خـوى ُذٍ اهوغج يً اإلٌخرٌح حخٓ ّسدح تـع اهنخة اهغٖر ؿرتٖج يخحدذج ؿً‬
                                                                               ‫ُذٍ اهوغج تخّشؾ ّدكج نتٖرث.‬
     ‫ّخأخٕ ٌخبئز سّسل غٖر يتضرث هوـبهى اهـرتٕ حّل أنذر ؿضرث هغبح فٕ اهخحدد ؿً هغج األٌشبق ّٖينً‬
           ‫يضبُدث ذهم ؿوٓ اهراتػ اهخبهٕ ‪http://www.google.com/trends?q=css&ctab=2&sa=N‬‬


                                                                                     ‫هغج األٌشبق ؿرتٖبً‬
                                                 ‫شٌخحدد ؿً هغج األٌشبق داخل فغبء اإلٌخرٌح اهـرتٕ.‬
                                     ‫ا‬
     ‫أيب يدٌّج شردال يدٌّخٕ اهيفغوج خحدذح ؿً هغج األٌشبق نذٖرً ّدؿح اهيتريسًٖ اهـرة الشخخدايِب‬
                                                    ‫ّّغحح يبُٖج ُذٍ اهوغج ّٖينً يضبُدث ذهم ؿوٓ اهراتػ‬
      ‫42 يبرس هـبى‬     ‫‪ّ ،http://www.serdal.com/index.php?s=css‬فٕ يّغّؽ هيدٌّج شردال فٕ‬
      ‫تبشخخداى ‪ّ css‬يّكؾ تدًّ اشخخداى ‪ css‬فٕ ُذا‬         ‫6002 ّغح اهشٖد ؿتداهلل اهيِٖرٔ اهفرق تًٖ يّكؾ‬
                             ‫اهراتػ 2-‪/http://www.serdal.com/archives/2006/03/24/ws-quiz‬‬




‫‪http://arabsoftware.net‬‬                                                                              ‫عرب سوفتوير‬
                                                                                                        ‫81‬
     ‫3002‬      ‫ّأٖغب يّكؾ اهيّشّؿج اهـرتٖج هى خٌشٓ ُذٍ اهوغج فلد ّغـح ؿٌِب يـوّيبح دكٖلج يٌذ اهـبى‬
        ‫ّإً نبٌح ُذٍ اهيـوّيبح خأشٖشٖج ّهى خذُة تبهيتريز ّاهيظيى إهٓ ػرق ّغؾ ظفحبح دٌٖبيٖنٖج أّ يب‬
                                            ‫خ‬
       ‫ٖـرف اهّٖى ة ‪ Dhtml‬تّاشػج ُذٍ اهوغج ّهنً اهيّشّؿج ال ُالى ؿوٓ ذهم ّهنً ُٕ فـال تحبسج هخػّٖر‬
                                                                                            ‫ي‬
                                                                               ‫كشيِب اه ُؤشس شٌج 3002.‬
                                                               ‫ب‬
     ‫أيب يّكؾ اهدنخّر ٌح نبً رائـً فٕ خفظٖل ُذٍ اهوغج حٖد ّغؾ درّس خأشٖشٖج ؿٌِب ّحخٓ ّظل إهٓ‬
                                                   ‫ػرق خٌفٖذ خلٌٖبح كّٖج ّأٖغبً شرد األفنبر تػرٖلج سيٖوج.‬


      ‫االٌشٖبتٖج ّهنً يبزال اهيتريز ّاهيظيى‬   ‫أٌب ضخظٖبً يـسة تيب كٖل فٕ ُذٍ اهيّاكؾ ؿً هغج األٌشبق‬
     ‫اهـرتٕ تحبسج هويزٖد يً اهيـرفج ؿً ُذٍ اهوغج ّأٖغب هيـرفج اهػرق اهشوٖيج الشخخدايِب فٕ يّكـَ حشة يب‬
                                                                                            ‫ب‬
     ‫ٖراٍ يٌبشتً هيّكـَ، ّأٖغب اهيتريز ّاهيظيى اهـرتٕ ؿوَٖ أً ٖنًّ أنذر كّث فٕ ػوة اهيـرفج ؿً ُذٍ اهوغج‬
                     ‫اهخٕ شخنًّ خديج هَ ّهويخظفح اهذٔ ٖضبُد يب تريسَ ّهوشٖرفر اهذٔ ٖحيل ُذٍ اهظفحبح.‬


      ‫ّختلٓ ُذٍ اهوغج يبزاهح تحبسج هويزٖد يً اهـبهى اهـرتٕ ّٖينً يضبُدث اهيّاكؾ اهـرتٖج اهخٕ خحدذح ؿً‬
                                                            ‫ُذٍ اهوغج تّاشػج يّكؾ سّسل ؿوٓ اهراتػ اهخبهٕ‬
          ‫-‪http://www.google.com/search?lr=lang_ar&cr=&q=css&hl=en&ie=UTF‬‬
                                                                                         ‫8-‪8&oe=UTF‬‬




‫‪http://arabsoftware.net‬‬                                                                            ‫عرب سوفتوير‬
                                                                                             19
                                                                           ‫اهيراسؾ اهـرتٖج‬
                                                                     ‫يدٌّج شردال‬    
                                                                      ‫اهدنخّر ٌح‬    
                                                                   ‫يّكؾ اهيضبغة‬     
                                                                      ٔ‫يّكؾ رداد‬    
                                                            ‫يّكؾ اهيّشّؿج اهـرتٖج‬   


                                                                          ‫اهيراسؾ األسٌتٖج‬
                                   Dhtml and Css for the World Wide Web ‫نخبة‬        
                                          Designing With Web Standards ‫نخبة‬         
                                            /http://www.w3.org/Style/CSS ‫يّكؾ‬       
                                               http://www.w3schools.com ‫يّكؾ‬        
                                   http://www.w3.org/TR/1998/REC-CSS2-‫يّكؾ‬          
                                                    19980512/about.html#q4




       ٕ‫ُذا اهخلرٖر يً إؿداد : يحيد زن‬
        mzaila@arabsoftware.net

       ‫فريق عمل مىقع عرب سىفتىير‬




http://arabsoftware.net                                                                 ‫عرب سوفتوير‬
                                                                                     ‫02‬




                          ‫سيٖؾ حلّق اهػتؾ ّاهٌضر يحفّؼج هيّكؾ ؿرة شّفخّٖر‬
       ‫ّال ٖشيح ألٔ ضخط اهٌلل أّ االكختبس يً ُذا اهيلبل دًّ نخبتج اهيظدر أّ اهرسّؽ إهٓ‬
                                         ‫إدارث ؿرة شّفخّٖر‬


                                                   ‫‪http://arabsoftware.net‬‬




‫‪http://arabsoftware.net‬‬                                                            ‫عرب سوفتوير‬

				
DOCUMENT INFO
Shared By:
Tags:
Stats:
views:8
posted:6/24/2012
language:Arabic
pages:21
Description: Arabic Book To Learn CSS ...