» استايلات وقوالب » css archive - ارشيف سي اس اس، موسوعة css

الأربعاء، نوفمبر 28، 2012
5:09 م
استايلات وقوالب

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

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



في البداية فكرة الموضوع سهلة وبسيطة جدا

وهي أن نقوم بعمل أرشيف للـ css ، سي اس اس

الهدف من الموضوع أن نعمل أرشيف مع فائدة عمل كل كود، وطرق كتابة كل كود،،،

بدايةً سنشرح القليل عند الـ سي اس اس بشكل أساسي


ما هي لغة css ؟

css هي اختصار لـ Cascading Style Sheets والتي تعني [ صفحة الأنماط الانسيابية ]
أساليب تحديد كيفية عرض عناصر HTML
عملت على تخفيف أكواد html ليتم استبدالها بأكواد بسيطة وتشمل عدة عناصر.


بعض الحلول التي جاءت بها لغة css !

عندما كان مصمموا الويب قديما يستخدمون بعض اكواد html في الموقع واستخدام tag معين ووضع خصائص لهذا الـ tag فيجب أن يقوم بتكرار الخصائص لجميع الـ tags
مثال:


رمز Code:
 
 <font color="#fff" size="3">Tatweerweb</font>
 في هذه الحالة القديمة كان المصمم يقوم بتكرار الكود في الموقع لكل عنصر معين، جاءت لغة css لتقوم بتوفير الوقت والجهد والعناء سواء في الكتابة أو التعديل فكان الحل مباشرة كالتالي:

رمز Code:
 
 <font>Tatweerweb</font>

الحل:

رمز 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:
 
<p id="traidnt" class="halabi">Tatweerweb</p>


الطريقة الأولى:
رمز Code:
 
p{
    color:blue;
    font-size:14px;
}

في الطريقة الأولى يقوم بوضع تلك الخصائص لكل الـ tags التي اسمها p

الطريقة الثانية:
رمز Code:
 
#tatweerweb{
    color:blue;
    font-size:14px;
}

في هذه الخاصية قمنا بتحديد عنصر html من خلال الـ id الخاص به

الطريقة الثالثة:
رمز Code:
 .halabi{
    color:blue;
    font-size:14px;
}

في هذه الخاصية قمنا بتحديد عنصر html من خلال الـ class الخاص به

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

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

الـ class : عبارة عن مسمى يعطى لعنصر html ويمكن تكراره بدون أي مشاكل، وعند وضع خصائص الـ css للـ class يتم توزيع تلك الخصائص لكل الـ classes التي تحمل نفس المسمى، كما أنه يمكن أن تعطي عنصر الـ html أكثر من class.
رمز Code:
 
<p class="Tatweerwb halabi"></p>
<span class="Tatweerwb"></span>
 
 
كيف تعمل على استخدام الـ css في الموقع؟
هناك ثلاث طرق لإدخال css

الطريقة الأولى: ورقة نمط خارجية مثالية يتم تطبيق النمط على عدة صفحات في الموقع، كما يمكنك تغيير مظهر ويب بأكمله عن طريق تغيير ملف واحد، يتم ذلك من خلال ربط ورقة الأنماط في الصفحات من خلال tag اسمه <link> يوضع في منطقة الـ head
رمز Code:
 
<head>
<link rel="stylesheet" type="text/css" href="traidnt.css" />
</head>
 

الطريقة الثانية: يمكنك استخدام خصائص الـ css من خلال صفحة الـ html بوضع الكود في الـ head من خلال العلامة <style>
رمز Code:
 
 <head>
<style type="text/css">
.traidnt {color:sienna;}
p {margin-left:20px;}
body {background-color:gray;}
</style>
</head>

الطريقة الثالثة: وهي طريقة تضمين خصائص الـ css من خلال عنصر الـ html مباشرة.
رمز Code:
 
<p style="color:#06F;">Tatweerweb</p>
 
 

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

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(tatweer.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. tatweerweb
  2. tatweerweb
  3. css
مثال على القوائم (قائمة نقطية) :
  • tatweerweb
  • tatweerweb
  • css


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

قائمة رقمية:
رمز Code:
 
<ol>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
</ol>
 

قائمة نقطية:
رمز Code:
 
 <ul>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
    <li>Tatweerweb</li>
</ul>
 
 

من خلال تقنية 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.

أفكاركم واقتراحاتكم تهمنا جميعا، فلنعمل معا وسويا من أجل التعليم والتطور بإذن الله تعالى.
اتمنى اكون وفقت فى شرح هذا الدرس بطريقة مبسطه ، فان اصبت فمن الله وان أخطأت فمن نفسي والشيطان .
وانتظروني مع المفاجئات القادمه باذن الله راح تعجب
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

شارك أصدقاءك

لا توجد تعليقات على موضوع " css archive - ارشيف سي اس اس، موسوعة css "

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .