‏إظهار الرسائل ذات التسميات دروس في لغة css. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات دروس في لغة css. إظهار كافة الرسائل

دروس css:تجميع العناصر باستخدام span وdiv



السلام عليكم و رحمة الله تعالى وبركاته نرحب بكم من جديد في مدونتا ونتمنى ان تقضوا معنا امتع الاوقات
لعنصران <span> و<div> يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.
في هذ االدرس، سنلقي نظرة عن قريب على استخدام <span> و<div> لأنهما العنصران الأكثر أهمية عندما
مزيد من المعلومات »
المزيد

دروس css:المطابقة والتجميع للعناصر class وid



السلام عليكم و رحمة الله تعالى وبركاته نرحب بكم من جديد في مدونتا ونتمنى ان تقضوا معنا امتع الاوقات
في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات class والمعرفات id لتحديد خصائص معينة لعناصر مختارة.
كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في
مزيد من المعلومات »
المزيد

دروس css: تنسيق الروايط التشعبية باستخدام لغة css


السلام عليكم و رحمة الله تعالى وبركاته نرحب بكم من جديد في مدونتا ونتمنى ان تقضوا معنا امتع الاوقات
يمكنك أن تطبق ما تعلمته  في الدروس السابقة على الروبط (مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ) الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق
مزيد من المعلومات »
المزيد

دروس css:تنسيق النصوص باستخدام css



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

دروس css: كيفية تفعيل الخطوط باستخدام css


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

دروس css:كيفية تفعيل الألوان والخلفيات لموقعك


السلام عليكم و رحمة الله تعالى وبركاته نرحب بكم من جديد في مدونتا ونتمنى ان تقضوا معنا امتع الاوقات
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
مزيد من المعلومات »
المزيد

دروس css: كيف تعمل تقنية CSS؟



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

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

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

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

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
استخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
<body bgcolor="#FF0000">


 مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر
body {background-color: #FF0000;}

تفعيل CSS في صفحة HTML

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

الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

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



 






<html>
  <head>
    <title>Example<title>
  </head>
  <body style="background-color: #FF0000;">
    <p>This is a red page</p>
  </body>
</html>











 





 





 



 



 



 



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

هذه طريقة مختلفة بأنها تستخدم وسم <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>















 



 



 



 



 



 



 



الطريقة 3: ملف خارجي

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

الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.

المهم هنا هو إنشاء رابط بين ملف 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.







واتمنى ان اكون قد استطعت ان اقدم الشرح بطريقه سهله وبسيطه ومفهومه .. واى استفسار انا موجود ..    



























المزيد





















        

      











468x60 Ads



j







تابعنا على الفيسبوك










Slider(Do not Edit Here!)












Ads 468x60px










Social Icons










المتابعون
























المحترف



5









Featured Posts










إجمالي مرات مشاهدة الصفحة












Template information










برامج الحماية










برامج












أرشيف المدونة الإلكترونية



















Movie Category 5










Movie Category 4











5









Site translated into any language



4







نموذج الاتصال









الاسم





بريد إلكتروني
*





رسالة
*





























المتواجدين











يتم التشغيل بواسطة Blogger.







بحث هذه المدونة الإلكترونية


































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











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











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






























 type='text/javascript'/>