تجربة قوالب

بسم الله , الحمد لله ..

<img src='رابط الصورة'/>

الذي يظهر على الصفحة الصورة فقط وعند الضغط عليها لا يحدث اي شئ.

<a href="رابط الموقع">Mini Soft</a>

الذي يظهر على الصفحة هو عبارة Mini Soft وعند الضغط عليها يتم التحويل الى صفحة تويتر وهذا الكود هام جداً.

<a href='رابط الموقع'><img src='رابط الصورة'/></a>

الذي يظهر على الصفحة الصورة وعند الضغط عليها يتم فتح الموقع.

<a href='رابط الموقع' target='_blank'></a>

عند الضغط على الرابط سوف تبقى الصفحة كما هي ويتم فتح الرابط في صفحة جديدة والكود صالح للعمل سواء على رابط او صورة تحتوي على موقع.

<a href='رابط الموقع' target='_blank' title='نبذة عن الموقع'></a> 

أكواد أخرى شائعة الإستخدام :

<b>Mini Soft</b>

 <i>Mini Soft</i>

<u>Mini Soft</u>

<center>mini soft</center>

السلام عليكم ورحمة الله وبركاته ..

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS
يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك استخدام هذه الخاصية بنجاح.
بالنسبة للمدونات بلوجر فدائماً هنام قاعدة ثابتة وهي , اكواد CSS تبدأ بوسم وتنتهي بوسم كما التالي:

<b:skin><![CDATA[
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
]]></b:skin>

اما في المواقع والمدونات الآخرى وايضاً بلوجر يتم استخدام الآكواد بالشكل التالي:

<style type='text/css'>
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
</style>

ما هي القاعدة الثابتة  في كتابة أكواد CSS ؟ التالي ..

سوف نأخذهم بالتدريج من الشمال لليمين ونشرح اسم كل جزء ملون في هذا الكود

{ نهاية مجموعة الأكواد كما في الكود السابق هذا 

السلام عليكم ورحمة الله وبركاته
درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم
الـ id و الـ class هما المعرفات الاساسية التي توضع داخل وسوم  HTML و XML لتتعرف عليها تقنية الـ CSS ويتاح لك التعديل على كل كبيرة وصغيرة بالموقع من خلفية للموقع واطارت و الوان للخطوط و الوان لكل شئ و خلفيات للصور و تحديد حجم الصور و الخطوط ايضاً وشكلها
باختصار تستطيع ان تقول ان تقنية الـ CSS مسئولة عن كل شئ مرتبط بشكل وتنسيق وتصميم الموقع.

إجابة سؤالنا, ما هو id وما هو class والفرق بينهم، التالي :
id يسمى مُعرف .. class يسمى فئة
id يمكن أن يندرج تحته فئات كثيرة ولا يمكن ان يتكرر اسمه .. class يمكن ان يتكرر اسمه مرات ومرات على عكس id
id يكتب قبله #  .. class يكتب قبله دائماً . نقطة ,, ودعونا نأخذ مثال عملي :

<div id='welcome'>to MiniSoft</div>

  #welcome {

    color: #000000 ;

    font: normal normal 12px Tahoma, Geneva, sans-serif;

  } 

نلاحظ أن id اصبح ( # ) وكتبت بجانبه welcome لأنها مكتوبة بجانب id في صفحة HTML

-class مكتوب في صحفحة HTML

<div class='mini'>soft</div>

-class مكتوب في صفحة CSS

  .mini {
    background-color: #CC0000;
    text-align: center;
  }

نلاحظ أن class اصبح نقطة ( . )  و كتبت بجانبها mini لأنها مكتوبة بجانب class في صفحة HTML

نأخذ مثال آخر على كيفية تكرار الفئة class :

<div class='mini'>ميني سوفت على تويتر</div>
<div class='mini'>ميني سوفت على جوجل كروم</div>
<div class='mini'>ميني سوفت ع الفيس بوك</div>

 كل هذه الوسوم المتشابهه تكتب في صفحة CSS هكذا:

  .mini {
    background-color: #CC0000;
    text-align: center;
  }

.إذاً فهمنا أن الوسم هو الملون و الذي يوجد بداخله كلمات كما رأينا, هذا بعكس المعرف id لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,