؟ CSS كيف تعول تقنية

Document Sample
؟ CSS كيف تعول تقنية Powered By Docstoc
					                                                         ‫كيف تعول تقنية‪ CSS‬؟‬
     ‫فٟ ٘زا اٌذسط عررعٍُ و١ف ذمَٛ تإٔشاء ٍِف اٌرظّ١ُ األٚي، عررعٍُ أعاع١اخ ‪ِٚ CSS‬ا ٟ٘ اٌٛعَٛ‬
                                                      ‫اٌالصِح ٌرغرخذَ ‪ CSS‬فٟ ٚث١مح.‪HTML‬‬

    ‫اٌىث١ش ِٓ خظائض ‪ CSS‬ذشثٗ ذٍه اٌّغرخذِح فٟ‪ٌ ، HTML‬زٌه إرا ذعٍّد ‪ٚ HTML‬اعرخذاِرٙا‬
   ‫إلٔشاء اٌرظاِ١ُ فأٔد فٟ اٌغاٌة عررّىٓ ِٓ ذعٍُ ‪ CSS‬تغٌٙٛح، ٌٍٕمٟ ٔظشج عٍٝ ٘زا اٌّثاي األعاعٟ.‬

                                                         ‫القواعد األساسية لكتابة‪CSS‬‬
                                                  ‫ٌٕمً إٔٔا ٔش٠ذ اٌٍْٛ األحّش ٌ١ىْٛ خٍف١ح ٌٍظفحح:‬

                                              ‫تاعرخذاَ ‪ّ٠HTML‬ىٕٕا أْ ٕٔدض رٌه تٙزٖ اٌطش٠مح:‬

                                                               ‫>"0000‪<body bgcolor="#FF‬‬


                                             ‫ِع ‪ّ٠CSS‬ىٓ ذحم١ك ٔفظ إٌر١دح تىراتح ٘زٖ األٚاِش:‬

                                                   ‫};0000‪body {background-color: #FF‬‬


                                                         ‫ا‬
   ‫وّا ذالحظ، أٚاِش ‪ CSS‬ذرشاتٗ وث١شً ِع‪ٚ ، HTML‬اٌّثاي أعالٖ ٠ٛضح ٌه األعٍٛب األعاعٟ ٌىراتح‬
                                                                                   ‫:‪CSS‬‬




                                               ‫ٌىٓ أ٠ٓ ٔضع أٚاِش‪ CSS‬؟ ٘زا ٘ٛ ِا عٕرعٍّٗ ا٢ْ.‬

                                                     ‫تفعيل ‪ CSS‬في صفحة‪HTML‬‬
‫ٕ٘ان ثالز طشق ٠ّىٓ أْ ذغرخذِٙا ٌرفع١ً ‪ CSS‬فٟ طفحح‪٘ ، HTML‬زٖ اٌطشق ِششٚحح أدٔاٖ، ٚٔحٓ‬
                     ‫ٕٔظح تأْ ذشوض ٚذغرخذَ اٌطش٠مح اٌثاٌثح، ٟٚ٘ أْ ذضع ‪ CSS‬فٟ ٍِف ِٕفظً.‬
                                                 ‫الطريقة 1: ضون وسوم ‪ HTML‬باستخدام خاصية‪style‬‬

    ‫إحذٜ اٌطشق ٌرفع١ً ‪ CSS‬فٟ ‪ ٟ٘ HTML‬تاعرخذاَ خاط١ح ‪ٌٕ ،style‬أخز ِثاالً عٍٝ أعاط اٌّثاي‬
           ‫أعالٖ اٌزٞ أسدٔا ف١ٗ اعرخذاَ اٌٍْٛ األحّش وٍخف١ح ٌٍظفحح، ٠ّىٓ ذطث١ك ٘زا األِش تٙزا اٌشىً‬
                                                                             ‫>‪<html‬‬
                                                                             ‫>‪<head‬‬
                                                              ‫>‪<title>Example<title‬‬
                                                                            ‫>‪</head‬‬
                                          ‫>";0000‪<body style="background-color: #FF‬‬
                                                          ‫>‪<p>This is a red page</p‬‬
                                                                            ‫>‪</body‬‬
                                                                            ‫>‪</html‬‬

                                                    ‫الطريقة 2: ضوت هلف ‪ HTML‬باستخدام وسن‪style‬‬

                 ‫٘زٖ طش٠مح ِخرٍفح تأٔٙا ذغرخذَ ٚعُ >‪٘ٚ ،<style‬زا ِثاي ٌى١ف١ح ذطث١ك ٘زٖ اٌطش٠مح:‬
                                                                                ‫>‪<html‬‬
                                                                                ‫>‪<head‬‬
                                                                 ‫>‪<title>Example<title‬‬
                                                               ‫>"‪<style type="text/css‬‬
                                                     ‫};0000‪body {background-color: #FF‬‬
                                                                              ‫>‪</style‬‬
                                                                               ‫>‪</head‬‬
                                                                                ‫>‪<body‬‬
                                                             ‫>‪<p>This is a red page</p‬‬
                                                                               ‫>‪</body‬‬
                                                                               ‫>‪</html‬‬

                                                                              ‫الطريقة 3: هلف خارجي‬

‫‪ ، CSS‬خالي ٘زا اٌذسط‬‫٘زٖ ٟ٘ اٌطش٠مح األفضً، ٟٚ٘ أْ ذمَٛ تٛضع ساتط ٌٍّف خاسخٟ ٠حٛٞ أٚاِش‬
                                                 ‫عٕمَٛ تاعرخذاَ ٘زٖ اٌطش٠مح ٌدّ١ع األِثٍح.‬

‫اٌٍّف اٌخاسخٟ ٘ٛ تثغاطح ٍِف ٔظٟ ٠غرخذَ اٌالحمح ‪ِٚ ،.css‬ثً اٌٍّفاخ األخشٜ ٠ّىٕه أْ ذضعٗ فٟ‬
                                                           ‫ِضٚد ِٛلعه أٚ عٍٝ اٌمشص اٌظٍة.‬

                                                                                        ‫ال‬
  ‫ِث ً، ٌٕمً أْ ٍِف اٌرظّ١ُ ٌذ٠ه اعّٗ ‪ِٛ ٛ٘ٚstyle.css‬خٛد فٟ ِدٍذ اعّٗ ‪٘ ،style‬زٖ اٌحاٌح ٠ّىٓ‬
                                                           ‫ذٛض١حٙا أوثش ِٓ خالي ٘زا اٌشعُ‬




  ‫اٌُّٙ ٕ٘ا ٘ٛ إٔشاء ساتط ت١ٓ ٍِف ‪ٍِٚ HTML‬ف اٌرظّ١ُ)‪ِ ، (style.css‬ثً ٘زا اٌشاتط ٠ّىٓ إٔشاءٖ‬
                                                           ‫ِٓ خالي عطش ٚاحذ فٟ:‪HTML‬‬
         ‫>/ "‪<link rel="stylesheet" type="text/css" href="style/style.css‬‬

                                        ‫.‪href‬‬   ‫الحظ و١ف أْ ِغاس اٌٍّف حذدٔاٖ تاعرخذاَ خاط١ح‬

   ‫٘زا األِش ٠دة أْ ٠ٛضع فٟ لغُ سأط اٌظفحح، أٞ ت١ٓ ٚعّٟ >‪</head> ٚ<head‬وّا فٟ اٌّثاي‬
                                                                              ‫ا٢ذٟ:‬
                                                                   ‫>‪<html‬‬
                                                                   ‫>‪<head‬‬
                                               ‫>‪<title>My document</title‬‬
         ‫>/ "‪<link rel="stylesheet" type="text/css" href="style/style.css‬‬
                                                                  ‫>‪</head‬‬
                                                                   ‫>‪<body‬‬
                                                                      ‫...‬

 ‫٘زا اٌشاتط ٠خثش اٌّرظفح تأْ عٍ١ٗ اعرخذاَ اٌرظّ١ُ ِٓ ٍِف ‪ CSS‬عٕذِا ٠مَٛ تعشع ٍِف.‪HTML‬‬
   ‫اٌدّ١ً ٕ٘ا أٔه ذغرط١ع ستط اٌعذ٠ذ ِٓ ٍِفاخ ‪ HTML‬تٍّف ذظّ١ُ ٚاحذ، تّعٕٝ آخش ٠ّىٓ ٌٍّف‬
                                ‫ذظّ١ُ ٚاحذ أْ ٠غرخذَ ٌٍرحىُ ترظّ١ُ اٌعذ٠ذ ِٓ ٍِفاخ.‪HTML‬‬




                            ‫ال‬
‫٘زٖ اٌفىشج ٠ّىٕٙا أْ ذٛفش عٍ١ه اٌىث١ش ِٓ اٌٛلد ٚاٌدٙذ، إرا أسدخ ِث ً أْ ذغ١ش ٌْٛ خٍف١ح ِٛلع ٠حٛٞ‬
                                                                                 ‫ف‬
‫001 طفحح ٍِف اٌرظّ١ُ ٠ّىٕٗ أْ ٠ٛفش عٍ١ه اٌٛلد فال ذحراج إٌٝ ذعذ٠ً 001 ٍِف تٕفغه، تاعرخذاَ‬
                         ‫‪ّ٠CSS‬ىٓ ذغ١١ش ِا ذش٠ذ خالي ثٛأٟ ترغ١١ش عطش ٚاحذ فٟ ٍِف اٌرظّ١ُ.‬

                                                                 ‫ٌٕرذسب عٍٝ ِا ذعٍّٕاٖ حرٝ ا٢ْ.‬

                                                                               ‫جرب بنفسك‬
‫لُ ترشغ١ً تشٔاِح اٌّفىشج )‪ (Notepad‬أٚ أٞ ِحشس ٔظٟ، ٚلُ تإٔشاء ٍِف١ٓ، أحذّ٘ا ‪ٚHTML‬ا٢خش‬
                                                      ‫‪ٚCSS‬ضع ف١ّٙا ٘زٖ اٌّحرٛ٠اخ:‬
                                                                                 ‫‪default.htm‬‬
                                                                                       ‫>‪<html‬‬
                                                                     <head>
                                                 <title>My document</title>
                 <link rel="stylesheet" type="text/css" href="style.css" />
                                                                    </head>
                                                                     <body>
                                               <h1>My first stylesheet</h1>
                                                                    </body>
                                                                    </html>

                                                                                       style.css
                                                                              body {
                                                          background-color: #FF0000;
                                                                                   }

    .‫ا٢ْ لُ تٛضع اٌٍّف١ٓ فٟ ٔفظ اٌّدٍذ، ذزوش أْ ذحفظ اٌٍّف١ٓ تاعرخذاَ اٌالحمح اٌظح١حح ٌىً ٍِف‬

!‫ فٟ ِرظفحه ٚأظش إٌٝ اٌظفحح ٟٚ٘ ذحٛٞ اٌٍْٛ األحّش وخٍف١ح، ذٙأ١ٕا‬default.htm ‫لُ تفرح ٍِف‬
                                                           !‫ٌمذ لّد تإٔشاء ٍِف اٌرظّ١ُ األٚي‬


                                                                         ............................

                                                                                          :‫للمزيد‬

                                                          http://karim.hostrator.com/