مرجعكم الشامل

مرجعكم الشامل
 
الرئيسيةالتسجيلاليوميةمكتبة الصورس .و .جبحـثالمجموعاتدخول



شاطر | 
 

 css archive - ارشيف سي اس اس، موسوعة css

اذهب الى الأسفل 
كاتب الموضوعرسالة
administrator


avatar

الجنس ذكر
البلد العراق
عدد المساهمات 4923
تاريخ التسجيل 21/03/2011

مُساهمةموضوع: css archive - ارشيف سي اس اس، موسوعة css   الأربعاء 25 سبتمبر 2013, 11:34 pm

ص لهذا الـ tag فيجب أن يقوم بتكرار الخصائص لجميع الـ tags
مثال:
رمز Code:
محمد الحلبي - ترايدنت
في هذه الحالة القديمة كان المصمم يقوم بتكرار الكود في الموقع لكل عنصر معين، جاءت لغة css لتقوم بتوفير الوقت والجهد والعناء سواء في الكتابة أو التعديل فكان الحل مباشرة كالتالي:
رمز Code:
محمد الحلبي - ترايدنت
الحل:
رمز Code:
font{color:#fff;font-size:14px;}
الكود السابق عمل على حل مشكلة تكرار الكود في الموقع، ففي هذه الحالة يقوم بوضع الخصائص لجميع الـ tags باسم font


الصيغة الصحيحة لكتابة كود css


العنصر: وهو يكون عنصر html المراد عمل تغييرات عليه.
الخاصية: وهي نوع التغيير.
القيمة: قيمة التغيير

مثال على كتابة كود :
رمز Code:
p{color:#fff;font-size:14px;}
رمز Code:
p{
color:#fff;
font-size:14px;
}
كما نلاحظ أن في كلا الطريقتين فإن الكود يعمل بدون أي مشكلة، ولكن الذي يحدد عمل الكود هو بعض الرموز وهي كالتالي:
بعد الخاصية المراد تغييرها يجب أن نكتب علامة نقطتين :
وبعد القيمة نقوم بكتابة فاصلة منقوطة كي نحدد نهاية الخاصية ;


طريقة كتابة تعليق في css أي comment

رمز Code:
p{
color:#fff; /* هنا تضع التعليق بدون أي مشكلة */
font-size:14px;
}
كما نلاحظ أن التعليق يقع بين العلامة التالية:
رمز Code:
/* هنا نضع التعليق */


طريقة تحديد عنصر html المراد عمل تنسيقات عليه.

تتم هذه العملية بثلاث طرق
رمز Code:

محمد الحلبي - ترايدنت



الطريقة الأولى:
رمز Code:
p{
color:blue;
font-size:14px;
}
في الطريقة الأولى يقوم بوضع تلك الخصائص لكل الـ tags التي اسمها p

الطريقة الثانية:
رمز Code:
#traidnt{
color:blue;
font-size:14px;
}
في هذه الخاصية قمنا بتحديد عنصر html من خلال الـ id الخاص به

الطريقة الثالثة:
رمز Code:
.halabi{
color:blue;
font-size:14px;
}
في هذه الخاصية قمنا بتحديد عنصر html من خلال الـ class الخاص به

ما الفرق بين id و class ؟



الـ id : عبارة عن مسمى يعطى لعنصر الـ html وهو فريد ولا يجب أن يتكرر في الموقع أبدا، كما أنه لا يمكنك أن تعطي عنصر الـ html إلا id واحد فقط.
رمز Code:



الـ class : عبارة عن مسمى يعطى لعنصر html ويمكن تكراره بدون أي مشاكل، وعند وضع خصائص الـ css للـ class يتم توزيع تلك الخصائص لكل الـ classes التي تحمل نفس المسمى، كما أنه يمكن أن تعطي عنصر الـ html أكثر من class.

رمز Code:


كيف تعمل على استخدام الـ css في الموقع؟
هناك ثلاث طرق لإدخال css

الطريقة الأولى: ورقة نمط خارجية مثالية يتم تطبيق النمط على عدة صفحات في الموقع، كما يمكنك تغيير مظهر ويب بأكمله عن طريق تغيير ملف واحد، يتم ذلك من خلال ربط ورقة الأنماط في الصفحات من خلال tag اسمه يوضع في منطقة الـ head
رمز Code:


الطريقة الثانية: يمكنك استخدام خصائص الـ css من خلال صفحة الـ html بوضع الكود في الـ head من خلال العلامة
الطريقة الثالثة: وهي طريقة تضمين خصائص الـ css من خلال عنصر الـ html مباشرة.
رمز Code:

محمد الحلبي - ترايدنت

نبدأ على بركة الله في الأرشيف ...

1- الخلفيات Backgrounds
رمز Code:
background-attachment:fixed;
background-color:blue;
background-image:url(traidnt.png);
background-position:right top;
background-repeat:repeat-x;
1- background attachment : وهي تستخدم لكيفية وضع الخلفية، أي أن الخلفية تبقى ثابتة في المتصفح، او انها تتحرك مع تحريك سكرول المتصفح.
2- background color : وضع خلفية لون.
3- background image : وضع خلفية صورة.
4- background position : يحدد نقطة انطلاق الصورة الخلفية الخاصية الأولى (right) من اليسار حتى اليمين، والخاصية الثانية (top) من أعلى ثم أسفل.
5- background repeat : لتحديد كيف سيتم تكرار صورة الخلفية ( repeat-x = تكرار أفقي ) ، ( repeat-y = تكرار عمودي ) ، ( repeat = تكرار من كلا الاتجاهين ) ، ( no-repeat = عدم التكرار ).

طريقة كتابة الكود السابق في اختصار:
رمز Code:
background:blue url(traidnt.png) right top fixed no-repeat;
2- النصوص Text
رمز Code:
color:blue;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
text-indent:50px;
1- color : تغيير لون الخط.
2- text align : وضع النص (وسط، يمين، يسار)
3- text decoration : وضع خط أسفل النص، أو خط وسط النص، أو خط أعلى النص، أو ازالة الخط.
4- text transform : جعل النص كله حروف كبيرة، او جعل النص كله حروف صغيرة، او جعل النصوص تبدأ أول حرف من كل كلمة كبير.
5- text indent : وهي ازاحة النص بقيمة معينة.

3- الخطوط Fonts
رمز Code:
font-family:Arial;
font-style:italic;
font-size:18px;
1- font-family : تحديد نوع الخط.
2- font-style : تحديد شكل الخط (مائل، عريض..)
3- font-size : تحديد حجم الخط.

طريقة كتابة الكود باختصار:
رمز Code:
font:italic 18px Arial;
4- الروابط Links
رمز Code:
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
1- a:link : الرابط الافتراضي (لم تسبق زيارته).
2- a:visited : رابط تمت زيارته.
3- a:hover : عند وضع الماوس على الرابط.
4- a:active : رابط محدد (جارٍ الضغط عليه).

5- القوائم Lists

القائمة تتكون من نوعين، النوع الأول وهي نقطية، والنوع الثاني وهي رقمية.
مثال على القوائم (قائمة رقمية) :

  1. ترايدنت
  2. محمد الحلبي
  3. css
مثال على القوائم (قائمة نقطية) :

  • ترايدنت
  • محمد الحلبي
  • css


طريقة كتابة الصيغة الصحيحة لكل قائمة:

قائمة رقمية:
رمز Code:

  1. TRAIDNT

  2. TRAIDNT

  3. TRAIDNT

  4. TRAIDNT

قائمة نقطية:
رمز Code:

  • TRAIDNT

  • TRAIDNT

  • TRAIDNT

  • TRAIDNT

من خلال تقنية css يمكنك استخدام تنسيق html واحد فقط ويمكنك تحديده اما رقمية أو نقطية.
رمز Code:
list-style-type:circle;
list-style-image:url(traidnt.css);
list-style-position:inside;
1- list-style-type : تحديد نوع النمط.
2- list-style-image : وضع صورة للقائمة.
3- list-style-position : تحديد مكان التنقيط (خارج القائمة أو ضمن القائمة).

هناك مشكلة في كود list-style-image وهي أنه لا يعمل الكود السابق على جميع المتصفحات ويحتوى على الكثير من المشاكل، ولحل تلك المشكلة تكون من خلال التالي:
رمز Code:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background: url(sqpurple.gif) right center no-repeat;
padding-right: 14px;
}
في هذه الطريقة نقوم بإزالة التنقيط الافتراضي للقائمة من خلال كود (list-style-type: none;) ومن ثم نضع الصورة التي نريدها لكل عنصر كما بالكود الثاني الخاص بالعنصر (ul li)

كما أننا يمكننا وضع حل آخر، وهو دمج الكودين في كود واحد، وذلك كـ شرط if أي عندما يكون المتصفح يدعم خاصية الصورة فيقوم بذلك عرض الصورة، وإن لم يدعمها فسيقوم وضع التنسيق الافتراضي، وذلك من خلال الكود التالي:
رمز Code:
ul
{
list-style: square url("traidnt-list.gif");
}
6- الجداول Tables
رمز Code:
border: 1px solid black;
border-collapse:collapse;
width:90%;
height:500px;
text-align:right;
vertical-align:bottom;
background-color:green;
color:white;
1- border : نقوم بوضع حدود وذلك لثلاث عناصر من الجدول وهي (الجدول table ، الصف tr ، الخلية td).
2- border-collapse : في الحالة الافتراضية عند انشاء جدول من خلال html يكون للجدول فراغات بين كل خلية والأخرى، من خلال هذه الخاصية واختيار القيمة collapse يمكنك أزالة تلك الفارغات.
3- width : كما يمكنك تحديد العرض للعناصر الثلاثة في الجدول (table, tr, td) من خلال نسبتين، إما بالبيكسل، او بالنسبة المئوية.
4- height : أيضا يمكنك تحديد الارتفاع للعناصر الثلاثة.
5- text-align : وهي لتحديد اتجاه النص (يمين، يسار أو وسط)، وتستخدم بالغالب لـ الخلية td.
6- vertical-align : تعمل على تحديد النص عموديا (أعلى، وسط أو أسفل) الخلية، وبالغالب تستخدم للخلية td.
7- background : كما يمكنك تغيير الخلفية للعناصر الثلاثة في الجدول مرة واحدة من خلال تغييرها لـ table، أو تخصيص خلفية لكل عنصر على حدا.
8- color : تمكنك من تغيير لون النص للعناصر الثلاثة.



7- صندوق النموذج Box Model

ويمكن اعتبار جميع عناصر HTML كمربعات في CSS، يتم استخدام مصطلح "نموذج الصندوق" عندما نتحدث عن التصميم والتخطيط.

نموذج الصندوق CSS هي في جوهرها المربع الذي يلتف حول عناصر HTML، ويتكون من: هوامش والحدود والحشو، والمحتوى الفعلي.

نموذج الصندوق يتيح لنا وضع حد حول العناصر وعناصر الفضاء فيما يتعلق العناصر الأخرى.

الصورة أدناه يوضح نموذج الصندوق:



  • Margin : حجز منطقة خلف الحدود، الـ margin ليس له لون خلفية، فهو منفرد عن الـ box.
  • Border : الحدود التي تدور حول ( الحشو padding و المحتوى content) وهو يكون من ضمن الـ box.
  • Padding: حجز منطقة حول المحتوى ويتم احتسابها من ضمن الـ box، كما أنها تأخذ نفس لون الـ box.
  • Content: محتوى الـ box وهي التي تعرض النصوص والصور والفيديوهات.


بهذا القدر نستطيع معرفة أغلب أكود الـ css ، ولإتقانها يجب التجربة أكثر من مرة وملاحظة التغيرات.

الموضوع بالكامل من كتابتي وتقديري وجهدي، فإن كانت هناك أخطاء فلا تلوموني فأنا بشر.
وسأقوم بكتابة المزيد من الأكواد أيضا في نفس الموضوع، وسأقوم بعمل أرشيف آخر في وقت لاحق لـ
css3.

أفكاركم واقتراحاتكم تهمنا جميعا، فلنعمل معا وسويا من أجل التعليم والتطور بإذن الله تعالى.

وتقبلوا خالص تحياتي وتقديري لكمـ،،،
الصور المصغرة المرفقة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]  [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://shamel.3arabiyate.net
 
css archive - ارشيف سي اس اس، موسوعة css
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» Un aperçu rapide sur l'histoire des Archives en Algérie

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مرجعكم الشامل :: اقســـــــــام الكـــــــــمبيوتـــــــــر والانتـــــــــرنـــــــــت :: منتـــدئ تطــويــر وبرمجـــه المواقـــع والمنـــتديــات :: قسم تصاميم وستايلات النسخه الثالثه والرابعه-
انتقل الى: