الجمعة، 22 يونيو 2012

مادا تعرف عن CSS


سنتناول في حديثنا هذا عن تقنية CSS ما هي وكيفية التعامل معها وأختصارتها

سنتحدث عن :
1-ما معنى تقنية  CSS
2-ما هي مميزات و فوائد تقنية CSS
3-مع أي المتصفحات تتوافق
4-كيفية التعامل معها
5-الأكواد وكيفية أختصارها
6-نصائح مهمه حولها


      أولا : ما معنى تقنية CSS

      هي تقنية أو لغه رائعه يرمز لها CSS و هي إختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية ( صفحات الأنماط الانسيابية ) .



      ثانيا : ما هي مميزات و فوائد تقنية CSS

      من أهم مميزات وفوائد هذه اللغة أنه بإمكانك فصل أكوادها عن مساحة العمل أو صفحات الأنترنت وأيضاً بإستطاعتك عن طريق هذه اللغة توحيد عدة صفحات على نمط واحد .
      وأيضا سهولة التغيير والتعديل سواء كان في محتوى الصفحه أو أكواد اللغه
      وأيظا من فوائدها تقليل كمية أستهلاك Bandwidth لا نها ستغنيك عن الكثير من أكواد لغة الـ HTML


      ثالثاً : مع أي المتصفحات تتوافق

      هذه اللغة تتوافق مع كل المتصفحات بلا شك ، ولكن بعض أكواد اللغه لا تتوافق مع الإصدارات القديمه من المتصفحات ، فمثلا متصفح فايرفوكس معظم أو كل أكواد اللغه تتوافق معه ومثله متصفح كروم
      وللأسف متصفح الإكسبلورا لا يتوفق معه إلا القليل من الأكواد ، ولا أعني بالقليل أن هذه اللغه لا تتوفق معه بل أقصد الأكواد التطويريه مثل الحواف الدائريها والظلال وغيره من الاأكواد الرائعه

      رابعاً : كيفية التعامل معها

      الحديث عن كيفية التعامل معها طويل ، ولكن سأشرحه بإختصار !!

      لو أردنا إضافة أكواد اللغه في صفحات مواقعنا
      بإمكننا إدراجها داخل هذا الكود بين وسم الفتح والإغلاق "<head>"
      رمز PHP:
      <style type="text/css">
      هنا أكواد الـ CSS
      </style> 
      ولو أردنا إدرجها من صفحة أنماط CSS خارجيه ، نستخدم هذا الكود
      رمز PHP:
      <link rel="stylesheet" type="text/css" href="هنا مسار الملف" /> 
      مثل
      رمز PHP:
      <link rel="stylesheet" type="text/css" href="style.css" /> 
      ولا ننسى أنه إذا اردنا تنسيق عدت صفحات على نمط واحد أن نضيف الكود السابق في كل الصفحات




      خامساً : الأكواد وكيفية أختصارها

      لو أرنا تنسيق شكلاً ما أو نصاً ما يجب علينا إتباع التالي :
      نضيف كلاس أو اي دي لهذا الشكل

      • قد يسأل سائل ما هو الكلاس والاي دي وما الفرق بينهما :
      الكلاس والاي دي : هما الأختصار الذي من خلاله يعرف المتصفح أن هذا التنسيق لهذه الفقره

      الفرق بينهما بإختصار الكلاس بإمكانك أستخدامه بعدة مواضع بنفس الصفحه والاي دي لا يمكنك إستخدامه إلا مره واحده .

      • كيفية إضافة كلاس أو أي دي :-
      نستطيع إضافتهما على أي شيئ سواء كان جدول أو صوره أو نص .. على جميع الوسوم تقريباً..

      فلو كان لدينا نص أوصوره أو اي شيء << أقصد بأي شيء محتوى ما بالصفحه
      نستطيع ذالك بإضافة ديف

      مثال على الإضافه في ديف

      رمز PHP:
      <div class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></div> 
      مثال على الإضافه في صوره
      رمز PHP:
      <img  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" src="مسار الصوره"/> 
      مثال على الإضافه في جدول
      رمز PHP:
      <table class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" style="width: 100%">
          <      tr  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">
              <      td  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">&nbsp;</td>
          </      tr>
      </      table> 
      مثال على الإضافه في نص
      رمز PHP:
      <p  class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></p> 
      وبنفس الطريقه السابقه نظيف الـ أي دي ،،


      الأكواد :

      الأكواد تكون على النمط التالي

      أكواد CSS

      رمز PHP:
      .traidnt {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      } 
      بنتج لنا الشكل التالي


      صوره من مساحة العمل



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


      الأن وصلنا لنقطه مهمه ، الا وهي أختصار الاأكواد

      • أختصار الاكواد
      بعيداً عن مواقع إختصار الاكواد دعونا نحاول نحن إختصارها - "لقد شاهدة الكثير من الأعضاء لا يختصر الأكواد وهذا يسبب ثقل بالتصفح بشكل بسيط لكن ستلاحظ فرق إذا كانت الاكواد كثيره "

      لدينا كود خلفيه :

      رمز PHP:
      background: url(image.gif);background-color: #f0f0f0 ;background-repeat: repeat-x;background-position: top left; 
      نختصر هذا الكود بالكود التالي

      رمز PHP:
      background: #f0f0f0 url(example.gif) repeat-x top left; 
      ومثله كود الإطار
      رمز PHP:
      border-color: red;border-width: 1px;border-style: solid; 
      نختصره بـ
      رمز PHP:
      border: 1px solid red; 
      وأيظا كود الخط
      رمز PHP:
      font-family: Arial, Helvetica;font-weight: bold;font-style: italic;font-size: 1em;line-height: 1.5em; 
      نختصره بـ
      رمز PHP:
      font: bold italic 1em/1.5em Arial, Helvetica; 
      أعتقد أن الفكره لم تصل
      دعوني أشرح قليلاً

      لدينا كود التباعد الخارجي

      رمز PHP:
      margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px; 
      بدلا من أن تسخدم
      top = أعلى
      right = يمين
      bottom = أسفل
      left = يسار

      نوحدها تحت الاسم الاساسي فقط

      لو كان لدينا شكل ونريد أن يكون التباعد الخارجي له 10px من كل الجهات نستخدم الكود التالي

      رمز PHP:
      margin:10px; 
      ولو كان لكل جهه مقاس نستخدم الكو التالي
      رمز PHP:
      margin:10px 10px 10px 10px; 
      أعتقد أن الفكره وصلت بشكل بسيط

      الان لو كا لدينا عدة أشكال ولها نمط CSS واحد بدلا من كتابتها كالتالي

      رمز PHP:
      .traidnt {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      }
      .      traidnt1 {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      }
      .      traidnt2 {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      }
      .      traidnt3 {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      } 
      نستطيع كتابتها كالتالي

      رمز PHP:
      .traidnt ,.traidnt1 ,.traidnt2 ,.traidnt3 {
                background:#f0f0f0;
                border: 1px #ccc dotted;
                width:400px;
                color:#555;
                padding:3px;
                margin:auto;
                text-align:center;
      } 



      سادساً : نصائح مهمه حولها

      1- أختصر أكوادك
      2- رتب صفحة الاكواد بحيث يكون كل كود في سطر
      3- أستخدم إختصارات الكلاس والـ اي دي بأسماء مفيده
      4- ضع تعليقات توضح أن الكود يتبع لأي جزء من الصفحه "لو أراد شخص التعديل يجد السهول والفهم السريع للكود" أكتب التعليقات بين /* */
      5- راجع أكوادك قبل أعتماد العمل
      6- لا تستعجل بالكتابه
      7- أكتب أكواد HTML والأساسيات أولا
      8- أستخدم أحد المحرارات للغة الـ css لتساعدك على الاختصار وتصحيح الاكواد
      9- أبداء التنسق بالون الابيض والرمادي ثم توجه إلى تنسيقك الخاص


          إلى هذا الحد أصل إلى إنهاية الموضوع

          أتمنى أن أكون أفدتكم ، وإلى اللقاء في مواضيع قادمه 
           by : D7ooM
            

          0 التعليقات:

          إرسال تعليق

          الاشتراك في: تعليقات الرسالة (Atom)