بلوجر سوفت: CSS3

‏إظهار الرسائل ذات التسميات CSS3. إظهار كافة الرسائل

ليل المدينة

و عن عبدالله بن عمر بن الخطاب أن عمر لقي أبا موسى الأشعري رضي الله عنه، فقال له: يا أبا موسى، أيسرك أنَّ عملك الذي كان مع رسول الله صلى الله عليه وسلم خَلَص لك، وأنك خرجت من عملك كفافاً، خيره بشره، وشره بخيره كفافاً، لا لك، ولا عليك؟ قال: لا يا أمير المؤمنين. والله قدمت البصرة وإن الجفاء فيهم لفاشٍ، فعلَّمتهم القرآن والسنّة، وغزوت بهم في سبيل الله، وإني لأرجو بذلك فضله. قال عمر رضي الله عنه: لكن وددتُ أني خرجت من عملي خيره بشره، وشره بخيره كفافاً، لا علي ولا لي، وخَلَص لي عملي مع رسول الله صلى الله عليه وسلم المخلص. كذا في منتخب الكنز . حديث ابن عباس في خوف عمر عند موته

منذ ذلك الحين كان قد تم التسلل على طول نحو ربما

كان أولاد يعقوب دائماً يغتاظون من حب أبيهم ليوسف و إيثاره له ، و لذلك ، قام الإخوة جميعهم بالتآمر فيما بينهم لقتل يوسف و إلقائه في أرض بعيدة، و لتنفيذ المؤامرة هذه ، قرروا أن يطلبوا من أبيهم اخذ يوسف في رحلة ، أحس يعقوب بشيء من الخوف و المؤامرة على يوسف ، فقال لأولاده بأنه يخشى أن يأكله ذئب و إخوته في غفلة من أمرهم ، إلا أنهم ردوا على والدهم بجواب مقنع جاء في الآية الكريمة (لئن اكله الذئب و نحن عصبة إنا إذا لخاسرون ) ، و بعد ذلك أخذوه و ذهبوا به و أجمعوا على إلقائه في البئر عاد بعد ذلك إخوة يوسف في المساء إلى والدهم مدعين أن الذئب قد أكل يوسف ، و قد جاءوا بدم كاذب على قميصه ليقنعوا والدهم بذلك ، أحس يعقوب بمؤامرتهم لكنه صبر لذلك و احتسب كانت البئر التي ألقي فيها يوسف قليلة الماء ، و مرت بتلك البئر قافلة فأرسلوا واردهم ليحضر لهم دلواً من الماء ، و ما إن أدلاه تعلق به يوسف ، فاستبشر به الرجل و اتفق هو و جماعته بأن يأخذوا يوسف و يتخذوه عبدا و غلاماً يبيعونه بمصر ، أسرت القافلة يوسف و خبؤوه إلى أن وصلوا إلى مصر فعرضوه للبيع و باعوه بثمن بخس و زهيد و قد جاء وصف ذلك كله في سورة يوسف بالآيات التالية إِذْ قَالَ يُوسُفُ لِأَبِيهِ يَا أَبَتِ إِنِّي رَأَيْتُ أَحَدَ عَشَرَ كَوْكَبًا وَالشَّمْسَ وَالْقَمَرَ رَأَيْتُهُمْ لِي سَاجِدِينَ (4) قَالَ يَا بُنَيَّ لَا تَقْصُصْ رُؤْيَاكَ عَلَىٰ إِخْوَتِكَ فَيَكِيدُوا لَكَ كَيْدًا ۖ إِنَّ الشَّيْطَانَ لِلْإِنْسَانِ عَدُوٌّ مُبِينٌ (5)

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

خانة كود Html

[code type="HTML"]<!doctype html> <html lang="ar"> <head> <meta charset="utf-8"> <title>Sample Page</title> </head> <body> <h1>اكواد قصيرة</h1> <p>اكواد قصيرة لتسهيل العرض.</p> </body> </html>[/code]

خانة كود Css

[code type="CSS"].blog-header h1 {color:green} .blog-header h1 a {color:green} .post-title { font:normal normal 20px/1.4 "Open Sans",Sans-Serif; margin:0 0 .5em; text-shadow:none; color:#5686D6; } .post-title a, .post-title a:focus, .post-title a:hover, .post-title a:active { color:#5686D6; text-decoration:none; }[/code]

خانة كود JavaScript

[code type="JavaScript"](function() { var html5 = { abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video } .split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })();[/code]

خانة كود JQuery

[code type="JQuery"]$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); });[/code] الحمد لله رب العالمين

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

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة 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 ؟ التالي ..

#outer-wrapper {padding: 3px;}

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

# المعرف الذي يوضع في صفحات html والذي يسمى id ويمكن ان يكون مكانه فئة وهي النقطة التي تسمى class , ويمكن استخدام كل شئ في صفحة html من روابط و معرفات وفئات

outer-wrapper يسمى في الكود Selector او المُحدد ولا يشترط ان يكون outer-wrapper, بل المقصود الموضع نفسه في الكود

} بداية كتابة الكود

padding هي من ضمن الخصائص التي تتحكم في تصميم الموقع او المدونة , وليس المقصود هنا padding بل المقصود المكان نفسه في الكود وينتهي دائماً ب نقطتين فوق بعضهم هكذا :

3px هذا المكان في الكود يُسمى value او القيمة المعطاه للخاصية المحددة

; الفاصلة المنقوطة تكون فاصل بين كل كود والاخر مثال الكود هذا

#outer-wrapper {padding: 3px; margin: 0px;}

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

وبهذا نكون قد اطلعنا على اساس وضع اكواد هذه التقنية الجميلة

اترككم في رعاية الله إلى درساً جديد من دروس الدورة

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

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

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