مادا تعرف عن css - منتدى أمن الإسلام | لا اله الا الله محمد رسول الله | IS-SEC.ORG | Dz-SeC Team |

SoUfiaNoXx · 18/12/2012, 18:18

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

سنتحدث عن :

1-ما معنى تقنية CSS

2-ما هي مميزات و فوائد تقنية CSS
3-مع أي المتصفحات تتوافق
4-كيفية التعامل معها
5-الأكواد وكيفية أختصارها
6-نصائح مهمه حولها

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

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

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

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

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

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

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

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

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

رمز PHP:

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

رمز PHP:

<link rel="stylesheet" type="text/css" href="هنا مسار الملف" />

مثل

رمز PHP:

<link rel="stylesheet" type="text/css" href="style.css" />

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

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

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

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

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

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

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

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

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

مثال على الإضافه في ديف
رمز PHP:

<div class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></div>

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

رمز PHP:

<img class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين" src="مسار الصوره"/>

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

رمز PHP:

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

رمز PHP:

<p class="هنا إختصار الكلاس ويجب أن يكون إنجليزي ويزيد عن حرفين"></p>

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

الأكواد :

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

أكواد CSS
رمز PHP:

.traidnt {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}

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

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

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

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

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

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

لدينا كود خلفيه :
رمز PHP:

background: url(image.gif);background-color: #f0f0f0 ;background-repeat: repeat-x;background-position: top left;

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

رمز PHP:

background: #f0f0f0 url(example.gif) repeat-x top left;

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

رمز PHP:

border-color: red;border-width: 1px;border-style: solid;

نختصره بـ

رمز PHP:

border: 1px solid red;

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

رمز PHP:

font-family: Arial, Helvetica;font-weight: bold;font-style: italic;font-size: 1em;line-height: 1.5em;

نختصره بـ

رمز PHP:

font: bold italic 1em/1.5em Arial, Helvetica;

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

لدينا كود التباعد الخارجي
رمز PHP:

margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;

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

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

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

margin:10px;

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

رمز PHP:

margin:10px 10px 10px 10px;

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

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

.traidnt {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.traidnt1 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.traidnt2 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}
.traidnt3 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}

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

رمز PHP:

.traidnt ,.traidnt1 ,.traidnt2 ,.traidnt3 {
background:#f0f0f0;
border: 1px #ccc dotted;
width:400px;
color:#555;
padding:3px;
margin:auto;
text-align:center;
}

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

1- أختصر أكوادك
2- رتب صفحة الاكواد بحيث يكون كل كود في سطر
3- أستخدم إختصارات الكلاس والـ اي دي بأسماء مفيده
4- ضع تعليقات توضح أن الكود يتبع لأي جزء من الصفحه "لو أراد شخص التعديل يجد السهول والفهم السريع للكود" أكتب التعليقات بين /* */
5- راجع أكوادك قبل أعتماد العمل
6- لا تستعجل بالكتابه
7- أكتب أكواد HTML والأساسيات أولا
8- أستخدم أحد المحرارات للغة الـ css لتساعدك على الاختصار وتصحيح الاكواد
9- أبداء التنسق بالون الابيض والرمادي ثم توجه إلى تنسيقك الخاص

إلى هذا الحد أصل إلى إنهاية الموضوع

muslim-dz · 05/02/2013, 00:24

baraka allaho fik

hamza killer · 21/06/2014, 19:28

شرح قمة ومفيد بوركت

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كيف تعرف الجزائري من بين مليار انسان	hak4	[ منتدى انشغلاتنا اليوميه . . . ]	23	03/07/2014 19:29
تعرف على pc-bsd [نظام تشغيل]	ADMINISTRATOR	[ منتدى اخبــــار الشبكـــة]	0	03/07/2011 14:20
Time.is: تعرف على الوقت حول العالم	ADMINISTRATOR	[ منتدى اخبــــار الشبكـــة]	0	23/02/2011 10:21
كيف تعرف من يحبك	DR.X	[ منتدى الحوار العام -{ is\|sec Organization }-]	1	20/08/2010 02:24

حالياً الأعضاء النشيطين الذين يشاهدون هذا الموضوع : 1 (0 عضو و 1 ضيف)

(أظهر الكل) الأعضاء الذين قاموا بمشاهدة هذا الموضوع : 10
134-dz , drogba , hamza killer , khaldoune , muslim-dz , S1LV3rS3rf3r , sH3LL , SoUfiaNoXx , tahdony , ZAKI YACINE