إرشادات استخدام المنتدى

   
   

الصفحة 1 من 9 1234 ... الأخيرةالأخيرة
عرض النتائج 1 إلى 10 من 86
  1. #1
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    نوافذ الدرس الأول (الجزء الثاني) : مدخل للغة الـ CSS



    ما هي تقنية CSS؟


    CSS هي اختصار لي Cascading Style Sheets.

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


    ما الفرق بين CSS وHTML؟

    تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات.

    حسناً، قد يبدو هذا مربكاً لكن أكملي القراءة وستفهمي ما قرأته قريباً.

    في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل <h1> (حجم الخط) و<p> (الإنتقال لفقرة جديدة).

    مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل <font> الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية.

    كيف ستفيدني CSS؟

    تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

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


    أحبكم آل لها


  2. #2
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي

    القواعد الأساسية لكتابة CSS

    لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:

    باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

    كود:
    <body bgcolor="#FF0000">
    ^ شايفين هذا الكود اللي قلت لكم عنه إنه أصبح قديم

    نأتي الآن للكود الحديث

    كود:
    body {
    background: #FF0000;
    }
    كيف أفعّل لغة الـCSS في صفحتي الجميلة ؟

    1 - ضمن وسوم HTML باستخدام خاصية style :
    كود:
    <html>
          <head>
            <title>Example<title>
          </head>
          <body style="background-color: #FF0000;">
            <p>This is a red page</p>
          </body>
        </html>
    تفصيل الكود :

    مثل ما تعلمنا من قبل ,, ننشئ صفحة HTML
    ونضيف إلى كود الـbody كود اللون style="background-color: #FF0000



    2 - ضمت ملف HTML باستخدام وسم style
    كود:
    <html>
          <head>
            <title>Example<title>
            <style type="text/css">
              body {background-color: #FF0000;}
            </style>
          </head>
          <body>
            <p>This is a red page</p>
          </body>
        </html>
    بيني وبينكم هذي الطريقة التي أصبحت أستخدمها مؤخرًا (بعدما كنت أستخدم الطريقة الثالثة)
    بسبب نسياني الكثير

    تفصيل الطريقة :

    نضع كود الـcss ويطلق عليه style type = text/css ,,,,, ببعد كود العنوان وقبل إغلاق وسم الـhead
    * يجب وضع قيمة الـtype بهذه الطريقة ,, لأن هناك لغة الجافا سكريبت شبيهه بهذا الشيء =)


    3 - ملف خارجي:

    هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS

    الملف الخارجي هو ببساطة ملف نصي يستخدم الـ css، ومثل الملفات الأخرى يمكنك أن تضعيه في مجلدك الذي أنشأتيه في الدرس السابق (هل تتذكرون ؟)
    مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه rai7anah (الذي يحتوي على صفحة الإندكس + مجلد الصور)

    المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
    كود:
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    * من الممكن تحتفظون بالرابط في المفكرة .. مو مجبرين بحفظه =)

    لاحظي كيف أن مسار الملف حددناه باستخدام خاصية href.

    هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:
    هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
    كود:
    <html>
          <head>
            <title>My document</title>
            <link rel="stylesheet" type="text/css" href="style/style.css" />
          </head>
          <body>
    هذه الفكرة يمكنها أن توفر الكثير من الوقت والجهد، إذا أردت مثلاً أن تغيري لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاجين إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريدين خلال ثواني بتغيير سطر واحد في ملف التصميم.



    الواجب :

    طبقي أنواع كتابة الـcss الثلاث ثم ضعي جهدك هنا
    لنتبادل الخبرات ونصحح لبعضنا, ثم اختاري أي واحدة منها لتطبيقها في الدروس القادمة ان شاء الله

    أحبكم آل لها


  3. #3
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    تَسجيل حُضور
    ربي تعبت فارحمني ياربي

  4. #4
    عضو Array الصورة الرمزية جوهرة ابوها
    تاريخ التسجيل
    Jul 2008
    الاقامه
    ح ـيث لا أحد غير قلبي♥
    المشاركات
    62
    التقييم
    13631
    الجنس
    أنثى
    مزاجي
    Amazed

    افتراضي

    سؤال ليش اذا كتبت في البرنامج انقلب ؟؟؟



  5. #5
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    عِدة أسئلة :

    - أكواد الألوان من أينْ أحصلْ عليها ؟

    - لا حَظتُ أمراً في وسم الطريقة الأولى
    <body style="background-color: #FF0000;">
    الغريب أن عندي وضعي له في المُفكرة تم تلوين صفحة الويب بالأحمر رغم أنه وسم غير ذاتي الإغلاق لأنه لا يحتوي على السلاش / في نهايته أي هكذا </ body style> فهل وُسوم الـ css مُختلفة من هذه الناحية !

    - تسمية الستايلات بالجيل الأول والثاني والثالث والرابع وهكذا يعتمد على مراحل تطور الـ css أم ليس لَه علاقة بالأمرْ ؟
    ربي تعبت فارحمني ياربي

  6. #6
    عضو Array الصورة الرمزية جوهرة ابوها
    تاريخ التسجيل
    Jul 2008
    الاقامه
    ح ـيث لا أحد غير قلبي♥
    المشاركات
    62
    التقييم
    13631
    الجنس
    أنثى
    مزاجي
    Amazed

    افتراضي

    الاول..~

    كود HTML:
    <title> جوهرةابوها</title>
    </head>
     <body style="background-color: #b586d1;">
            <p>  استغفرالله</p> 
    </body>



    الثاني..~

    كود HTML:
    <title>جوهرةابوها</title>
        <style type="text/css">
              body {background-color: #4ea387;}
            </style>
          </head>
          <body>
            <p> استغفرالله</p>
    </body>




    الثالث
    حسيت بصعوبه فيه >>>جاري المحاوله



  7. #7
    الحياة حلوة ^________^ Array الصورة الرمزية *همسة*
    تاريخ التسجيل
    Feb 2011
    الاقامه
    في بيتنا :)
    المشاركات
    1,108
    التقييم
    249654
    الجنس
    أنثى
    الدولة
    Morocco
    مزاجي
    Shocked

    افتراضي

    تسجيل حضور لي عودة
    السرقة الموصوفة :)

  8. #8
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    الطريقة الأولى [ للتحميل ]

    الطريقة الثانية [ للتحميل ]

    الطريقة الثالثة [ للتحميل ]

    بَحثتُ عن الأكواد الخاصة بالألوان عن طريق مستر جوجلْ ^^

    مُلاحظة عزيزتي في الطريقة الثالثة

    <link rel="stylesheet" type="text/css" href="style/style.css" /> نكتب الرابط مباشرةً بدونْ كلمة style
    ربي تعبت فارحمني ياربي

  9. #9
    سبحآن الله ~ Array الصورة الرمزية واحة الظمآن
    تاريخ التسجيل
    Aug 2007
    الاقامه
    جده غيييييير ()
    المشاركات
    86
    التقييم
    4760
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Google Chrome
    نوع الجوال
    آيفون iPhone
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Paranoid

    افتراضي

    اقتباس المشاركة الأصلية كتبت بواسطة صائدة الفوائد مشاهدة المشاركة
    عِدة أسئلة :

    - أكواد الألوان من أينْ أحصلْ عليها ؟

    - لا حَظتُ أمراً في وسم الطريقة الأولى
    <body style="background-color: #FF0000;">
    الغريب أن عندي وضعي له في المُفكرة تم تلوين صفحة الويب بالأحمر رغم أنه وسم غير ذاتي الإغلاق لأنه لا يحتوي على السلاش / في نهايته أي هكذا </ body style> فهل وُسوم الـ css مُختلفة من هذه الناحية !

    - تسمية الستايلات بالجيل الأول والثاني والثالث والرابع وهكذا يعتمد على مراحل تطور الـ css أم ليس لَه علاقة بالأمرْ ؟
    سأجيب عن سؤالك الأول :)

    بالنسبة لماذا لا يحتوي على سلاش لأن style لا يعتبر وسم بحد ذاته وإنما يعتبر خاصية من خصائص الـ body مثله مثل أي خاصية

    مثلاً لدينا في وسم img الخاصية alt والخاصية src فالاثنين لا ننهيهم بسلاش إنما نحن نغلق الوسم الذي هو img

    فوسم body الإغلاق الخاص به موجود في أسفل الصفحة وstyle مجرد خاصية لوسم body

    إن شاء الله يكون وضح المقصود :)







  10. #10
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    قِلتُ تَركيزْ مني سابقاً

    فعندما حمصّتُ أقصدُ تمحصتُ أدركتُ الأمر ههههههه
    فكانَ الرد السابق مُحملاً بالتطبيقْ

    واحة الظمآنْ أسعدكِ ربي للمُساعدة ولإحساسكِ العالي بالعطاء
    ربي تعبت فارحمني ياربي

الصفحة 1 من 9 1234 ... الأخيرةالأخيرة

المواضيع المتشابهه

  1. الدرس الثاني (الجزء الثاني): الصورة مالها وما عليها في لغة الـCSS
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 52
    آخر مشاركة: 01-03-2012, 05:00 PM
  2. الدرس الثاني ( الجزء الأول ) : تحميل وتنصيب برنامج الدريم ويفر DreamWeaver CS5
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 111
    آخر مشاركة: 18-02-2012, 09:51 AM
  3. الدرس الأول (الجزء الأول) : نظرة للبرمجة بصفة عامة وللغة الـHTML بصفة خاصة
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 136
    آخر مشاركة: 11-02-2012, 12:10 AM
  4. الدرس الثاني : ...| شرح قوائم برنامج الكلك الجزء الأول ...|
    بواسطة نووووف في منتدى |هندسة الحرف| انتهت
    مشاركات: 57
    آخر مشاركة: 03-11-2010, 10:06 PM
  5. إكسسوارات من الخرز الجزء الثاني
    بواسطة إريام في منتدى للجمال عنوان
    مشاركات: 4
    آخر مشاركة: 13-08-2007, 10:08 PM

مواقع النشر (المفضلة)

مواقع النشر (المفضلة)

تعليمات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  



جميع الحقوق محفوظه©