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

ص لهذا الـ 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;

رمز 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;

رمز 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

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

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

قائمة رقمية:

رمز Code:

1. TRAIDNT


2. TRAIDNT


3. TRAIDNT


4. TRAIDNT

رمز Code:

• TRAIDNT


• TRAIDNT


• TRAIDNT


• TRAIDNT

رمز 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");
}

رمز 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، ويتكون من: هوامش والحدود والحشو، والمحتوى الفعلي.

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

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

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

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

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

وتقبلوا خالص تحياتي وتقديري لكمـ،،،

الصور المصغرة المرفقة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]  [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]