طھظ‚ظ†ظٹط© CSS - ظ…ط§ ظ‡ظٹ ظˆظƒظٹظپظٹط© ط§ظ„طھط¹ط§ظ…ظ„ ظ…ط¹ظ‡ط§ ظˆط£ط®طھطµط§ط± ط£ظƒظˆط§ط¯ظ‡ط§




سنتناول في حديثنا هذا عن تقنية CSS ما هي وكيفية التعامل معها وأختصارتها

سنتحدث عن :

ما معنى تقنية CSS
ما هي مميزات و فوائد تقنية CSS
مع أي المتصفحات تتوافق
كيفية التعامل معها
الأكواد وكيفية أختصارها
نصائح مهمه حولها




أولا : ما معنى تقنية CSS

هي تقنية أو لغه رائعه يرمز لها CSS و هي إختصار للجملة joomla Cascading Style Sheets والتي معناها باللغة العربية ( صفحات الأنماط الانسيابية ) .




ثانيا : ما هي مميزات و فوائد تقنية CSS

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



ثالثاً : مع أي المتصفحات تتوافق

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



رابعاً : كيفية التعامل معها

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

لو أردنا إضافة أكواد اللغه في صفحات مواقعنا
بإمكننا إدراجها داخل هذا الكود code بين وسم الفتح والإغلاق &quot;<head>&quot;

رمز PHP:
<code style="white-space:nowrap"> <code> <style type="text/css">

هنا أكواد الـ CSS

</style>
</code> </code>

ولو أردنا إدرجها من صفحة أنماط CSS خارجيه ، نستخدم هذا الكود code

رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="هنا مسار الملف" />
</code> </code>

مثل

رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="style.css" />
</code> </code>

ولا ننسى أنه إذا اردنا تنسيق عدت صفحات على نمط واحد أن نضيف الكود code السابق في كل الصفحات





خامساً : الأكواد وكيفية أختصارها

لو أرنا تنسيق شكلاً ما أو نصاً ما يجب علينا إتباع التالي :
نضيف كلاس أو اي دي لهذا الشكل


  • قد يسأل سائل ما هو الكلاس والاي دي وما الفرق بينهما :

الكلاس والاي دي : هما الأختصار الذي من خلاله يعرف المتصفح أن هذا التنسيق لهذه الفقره

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


  • كيفية إضافة كلاس أو أي دي :-

نستطيع إضافتهما على أي شيئ سواء كان جدول أو صوره أو نص .. على جميع الوسوم تقريباً..

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

مثال على الإضافه في ديف

رمز PHP:
<code style="white-space:nowrap"> <code> <div class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></div>
</code> </code>

مثال على الإضافه في صوره

رمز PHP:
<code style="white-space:nowrap"> <code> <img class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" src="مسار الصوره"/>
</code> </code>

مثال على الإضافه في جدول

رمز PHP:
<code style="white-space:nowrap"> <code> <table class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" style="width: 100%">
<tr class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">
<td class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين">&nbsp;</td>
</tr>
</table>
</code> </code>

مثال على الإضافه في نص

رمز PHP:
<code style="white-space:nowrap"> <code> <p class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></p>
</code> </code>

وبنفس الطريقه السابقه نظيف الـ أي دي ،،


الأكواد :

الأكواد تكون على النمط التالي




أكواد CSS

رمز PHP:
<code style="white-space:nowrap"> <code> .dzbatna {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
</code> </code>

بنتج لنا الشكل التالي



صوره من مساحة العمل




اتوقع وصلت الفكره ، لكن لا يغنيك شرح طريقةي البسيط عن متابعة دورات عن هذه اللغه الرائعه


الأن وصلنا لنقطه مهمه ، الا وهي أختصار الاأكواد


  • أختصار الاكواد

بعيداً عن مواقع إختصار الاكواد دعونا نحاول نحن إختصارها - &quot;لقد شاهدة الكثير من الأعضاء لا يختصر الأكواد وهذا يسبب ثقل بالتصفح بشكل بسيط لكن ستلاحظ فرق إذا كانت الاكواد كثيره &quot;

لدينا كود code خلفيه :

رمز PHP:
<code style="white-space:nowrap"> <code> background: url(image.gif);
background-color: #f0f0f0 ;
background-repeat: repeat-x;
background-position: top left;
</code> </code>

نختصر هذا الكود code بالكود code التالي

رمز PHP:
<code style="white-space:nowrap"> <code> background: #f0f0f0 url(example.gif) repeat-x top left;
</code> </code>

ومثله كود code الإطار

رمز PHP:
<code style="white-space:nowrap"> <code> border-color: red;
border-width: 1px;
border-style: solid;
</code> </code>

نختصره بـ

رمز PHP:
<code style="white-space:nowrap"> <code> border: 1px solid red;
</code> </code>

وأيظا كود code الخط

رمز PHP:
<code style="white-space:nowrap"> <code> font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;
</code> </code>

نختصره بـ

رمز PHP:
<code style="white-space:nowrap"> <code> font: bold italic 1em/1.5em Arial, Helvetica;
</code> </code>

أعتقد أن الفكره لم تصل
دعوني أشرح طريقة قليلاً

لدينا كود code التباعد الخارجي

رمز PHP:
<code style="white-space:nowrap"> <code> margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
</code> </code>

بدلا من أن تسخدم
top = أعلى
right = يمين
bottom = أسفل
left = يسار

نوحدها تحت الاسم الاساسي فقط

لو كان لدينا شكل ونريد أن يكون التباعد الخارجي له 10px من كل الجهات نستخدم الكود code التالي

رمز PHP:
<code style="white-space:nowrap"> <code> margin:10px;
</code> </code>

ولو كان لكل جهه مقاس نستخدم الكو التالي

رمز PHP:
<code style="white-space:nowrap"> <code> margin:10px 10px 10px 10px;
</code> </code>

أعتقد أن الفكره وصلت بشكل بسيط

الان لو كا لدينا عدة أشكال ولها نمط CSS واحد بدلا من كتابتها كالتالي

رمز PHP:
<code style="white-space:nowrap"> <code> .dzbatna {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.dzbatna1 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.dzbatna2 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.dzbatna3 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
</code> </code>

نستطيع كتابتها كالتالي

رمز PHP:
<code style="white-space:nowrap"> <code> .dzbatna ,.dzbatna1 ,.dzbatna2 ,.dzbatna3 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
</code> </code>





سادساً : نصائح مهمه حولها

أختصر أكوادك
رتب صفحة الاكواد بحيث يكون كل كود code في سطر
أستخدم إختصارات الكلاس والـ اي دي بأسماء مفيده
ضع تعليقات توضح أن الكود code يتبع لأي جزء من الصفحه &quot;لو أراد شخص التعديل يجد السهول والفهم السريع للكود code&quot; أكتب التعليقات بين /* */
راجع أكوادك قبل أعتماد العمل
لا تستعجل بالكتابه
أكتب أكواد HTML والأساسيات أولا
أستخدم أحد المحرارات للغة الـ css لتساعدك على الاختصار وتصحيح الاكواد
أبداء التنسق بالون الابيض والرمادي ثم توجه إلى تنسيقك الخاص










إن أصبت فبتوفيق منه سبحانه و إن أخطأت فمن نفسي و الشيطان ،،



إلى هذا الحد أصل إلى إنهاء حديثي معكم في هذا الموضوع

أتمنى أن أكون أفدتكم ، وإلى اللقاء في مواضيع قادمه


،، هذا الموضوع جهد شخصي ولا يسمح بنقله إلا بذكر المصدر















©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©