منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



أهلا وسهلا بك في مؤسسة فينكس تكنالوجي ®
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


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

شاطر|


بيانات كاتب الموضوع
الدرس الثاني عشر: التصميم (CSS) للغة HTML
كاتب الموضوعرسالة
المعلومات
الكاتب:
اللقب:

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: الدرس الثاني عشر: التصميم (CSS) للغة HTML الدرس الثاني عشر: التصميم (CSS)    للغة HTML Empty16/11/2014, 17:27

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




الدرس الثاني عشر: التصميم (CSS)
أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟

بالتأكيد، لكن كيف؟

لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في درس CSS. لذلك اعتبر هذا الدرس مجرد فاتحة شهية.
هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).
كما رأيت الدرس السابع، يمكن إضافة CSS من خلال خاصية، فمثلاً يمكنك أن تضع نوع الخط وحجمه:
مثال 1:

الكود:

   <p style="font-size:20px;">This is typed in size 20</p>
   <p style="font-family:courier;">This is typed in Courier</p>
   <p style="font-size:20px; font-family:courier;">This is typed in Courier size 20</p>
   


سيظهر بهذا الشكل في متصفحك
This is typed in size 20
This is typed in Courier
This is typed in Courier size 20
في المثال أعلاه اسخدمنا خاصية
الكود:
style
لتحديد نوع الخط الذي نريد استخدامه من خلال أمر
الكود:
font-family
) وحددنا حجم الخط من خلال أمر
الكود:
font-size
)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.

يبدو أن هذا يحتاج إلى الكثير من العمل؟

إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصية
الكود:
style
لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:
مثال 2:

الكود:

   <html>

     <head>
     <title>My first CSS page</title>   

     <style type="text/css">
        h1 {font-size: 30px; font-family: arial;}
        h2 {font-size: 15px; font-family: courier;}
        p {font-size: 8px; font-family: "times new roman";}
     </style>

     </head>

     <body>
     <h1>My first CSS page</h1>
     <h2>Welcome to my first CSS page</h2>
     <p>Here you can see how CSS works </p>
     </body>

   </html>
   



  • عرض المثال

في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل الصفحة، لفعل ذلك عليك فقط أن تضع الوسم
الكود:
<style type="text/css">
الذي يخبر المتصفح بأنك تستخدم CSS.
في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية ستستخدم خطاً من نوع Courier بحجم 15 بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roman" بحجم 8 بكسل.
هناك خيار آخر يتمثل في كتابة CSS في ملف منفصل، لأنك تستطيع من خلال ملف منفصل أن تتحكم بتصميم صفحات عدة مرة واحدة، هذا أسلوب ذكي إذا أردت أن تغير حجم الخط ونوعه في موقع كبير يحوي مئات أو آلاف الصفحات، لكننا لن نشرح ذلك الآن، يمكنك أن تتعلم هذا في درس CSS.

ماذا يمكن أن أفعل أيضاً في CSS؟

يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها::

الكود:

   <p style="color:green;">Green text</p>

   <h1 style="background-color: blue;">Heading on blue background</h1>

   <body style="background-image: url('http://www.html.net/logo.png');">
   


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

هل CSS مجرد ألوان وخطوط؟

بجانب التصميم وتفاصيله مثل الألوان والخطوط، يمكنها أن تتحكم بتنسيق الصفحة وطريقة عرض البيانات فيها (الهوامش، المحاذاة، العرض والطول ... إلخ)، بتنظيم مخلف العناصر باستخدام CSS، يمكنك أن تصمم صفحتك بأسلوب أنيق دقيق.
مثال 3:

الكود:

   <p style="padding:25px;border:1px solid red;">I love CSS</p>
   


سيظهر بهذا الشكل في متصفحك
I love CSS
بستخدام أمر
الكود:
float
يمكن للعنصر أن يوضع إلى يسار أو يمين الصفحة في المثال التالي سنعرض هذا المبدأ:
مثال 4:

الكود:

   <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore
      magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
      quis nostrud exerci tation ullamcorper suscipit
      lobortis nisl ut aliquip ex ea commodo consequat...</p>
   


سيظهر بهذا الشكل في متصفحك
الدرس الثاني عشر: التصميم (CSS)    للغة HTML Bill
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.
باستخدام الأمر
الكود:
position
، يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:
مثال 5:
Bill Gatesstyle="position:absolute;bottom:50px;right:10px;" />


  • عرض مثال

في المثال الصور وضعت على بعد 50 بكسل من الأسفل و10 بكسل من يمين المتصفح، لكن يمكنك أن تضعها بالضبط حيث تشاء، جرب، ستجد أن الأمر سهل ومثير.

جميل، لكن هل هي سهلة؟

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















 الموضوع الأصلي : الدرس الثاني عشر: التصميم (CSS) للغة HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: الدرس الثاني عشر: التصميم (CSS) للغة HTML الدرس الثاني عشر: التصميم (CSS)    للغة HTML Empty28/11/2014, 16:14

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




جزاك الله كل خيرا علي الموضوع















 الموضوع الأصلي : الدرس الثاني عشر: التصميم (CSS) للغة HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




الدرس الثاني عشر: التصميم (CSS) للغة HTML

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» الدرس الثاني: ما هي HTML؟
» الدرس الثاني عشر: الجلسات (Sessions) بى اتش بى
» الدرس الثاني: كتابة اول برنامج بلغة جافا
» الدرس الأول: لنبدأ HTML
» الدرس العاشر: الجداول HTML



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام