طريقة الإستخدام :

• قم بتحميل التطبيق من هذه الصفحة
• اضف الكود التالي في ترويسه صفحة Html الخاصه بك :

  	<link rel="stylesheet" href="YourPath/animated-menu.css"/>
   
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
  <script src="YourPath/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="YourPath/animated-menu.js" type="text/javascript"></script>

  لا تنسى تغيير مسار الملفات لما يناسب موقعك .. في الكود أعلاه يتم إستدعاء مكتبة jQuery من على جوجل كود .. إذا أردت يمكنك حفظة ورفعه على موقعك و تغيير المسار الخاص به

• في جسم الصفحة Body .. أضف القائمة الخاصه بك ..

  	<ul>
  	<li><a href="#">الرئيسية</a>
  	<li><a href="#">عني</a></li>
  	<li><a href="#">عن المدونة</a></li>
  	<li><a href="#">راسلني</a></li>
  </ul>

• يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu

حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery ..  فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j("li").mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j("li").mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//By Mo3aser.com
 		m=document.getElementById('buttons');
		sa=m.getElementsByTagName('li');
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j(sa).mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j(sa).mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :

<ul id="buttons">
	<li><a href="#">الرئيسية</a>
	<li><a href="#">عني</a></li>
	<li><a href="#">عن المدونة</a></li>
	<li><a href="#">راسلني</a></li>
</ul>

هذا كل شئ .. لا تنسى أن تشاركنا برابط موقعك إذا أستخدمت فيه التطبيق ^_^

فكرة و تطبيق لصنع ساعة بإستخدام CSS و Javascript أعجبتني الفكرة و طريقة التنفيذ فاردت مشاركتكم بها …

لمشاهدة مثال تجريبي

للاطلاع على الفكرة و طريقة الاستخدام

بالطبع يمكنك تجاهل هذا الأمر فليس الهدف هو تجاوز إختبار CSS ولكن الهدف هو ظهور الموقع على كل المستعرضات بشكل سليم ولكن إن كنت أحد المهوسين برؤية الشريط الأخضر في صفحة فحص CSS و رؤية كلمة Congratulations! No Error Found و في نفس الوقت تريد استخدام هذه الخواص فإليك الطريقة :

أولا سنقوم بتجميع كافة الخواص الغير قياسية و كتابتها في ملف CSS منفصل و لنسميه مثلاً invalid.css وليكن على سبيل المثال بالشكل التالي ( الخواص بالأسفل لجعل الحواف دائرية وهي خاصه فقط بفايرفوكس و سفاري و هي خواص غير قياسية ) :

.class-name{
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
}

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

<script type="text/javascript"><!--
document.write('<link rel="stylesheet" type="text/css" media="screen" href="Your-path/invalid.css" />');
--></script>

الأن عند فحص الصفحات سيتخطى الفاحص ملف invalid.css و لن يقوم بفحصه .. و سترى Congratulations! No Error Found !

لوحة مفاتيح تم بنائها بالكامل باستخدام CSS فقط دون استخدام اي صور او جداول .. الفكرة  و طريقة التطبيق أعجبتاني كثيراً ..  اطلع على الكود المصدري للصفحة لتفهم الفكرة ..

سأستخدم هذا النموذج كتطبيق للشرح :

حسناً .. لديك الان نموذج شبيه بالنموذج السابق عليك الان تقطيعه الى 8 أجزاء … الصورة التالية توضح أسلوب التقطيع ..

الان لدينا 8 صور سنقوم بحفظهم بأسماء مفهومة و واضحة ليسهل علينا استخدامهم لاحقاُ وليكن بالشكل التالي :

هناك أساليب أخرى لحفظ الصور مثل جمع كل الصور في صورة واحدة و استخدام خواص css لتعين كل جزء من الصورة لكلاس معين .. هذا الدرس للأخ كتوم يشرح الفكرة ..

تخطيط HTML :

<!-- Box >> Start -->
<div class="box">
 
	<!-- Box Header >> Start -->
	<div class="box-header">
		<div class="box-header-right"></div>
		<div class="box-header-left"></div>
	<!-- Box Header >> End -->
	</div>
 
	<!-- Box Body >> Start -->
	<div class="box-body">
		<div class="box-body-right">
		<div class="box-body-left">
			المحتويات
		</div>
		</div>
	<!-- Box Body >> End -->
	</div>
 
	<!-- Box Footer >> Start -->
	<div class="box-footer">
		<div class="box-footer-right"></div>
		<div class="box-footer-left"></div>
	<!-- Box Footer >> End -->
	</div>
 
<!-- Box >> End -->
</div>

شرح التخطيط :
1- Box: وهو div حاوي و وظيفته الاساسية هو تحديد عرض الصندوق كاملاً ومحاذاته وغيرها من الصفات التي نريد تطبيقها على الصندوق ككل .
2- Box-Header : وهو رأس الصندوق و الذي سيحتوي على 2 div أحدهما للصورة على اليمين وهو box-header-right و الأخر للصورة على اليسار وهو box-header-left وفي نفس الوقت سيكون مسؤول عن عرض الخلفية المتمددة بين الصورتين .
3- Box-Body : وهو جسم الصندوق و الذي سيحتوي على محتويات الصندوق ويكون محاط من الجانبين بعمودين وسنقوم بعملهما من خلال 2 div متداخلين هما box-body-right و box-body-left على الترتيب كما انه هو المسؤل عن تغير لون خلفية المحتويات .
4- Box-Footer : و هو ذيل الصندوق و تركيبه مثل تركيب Box-Header .

تخطيط CSS :

/*  ------------------------------------------
    1-Box
    ------------------------------------------   */
.box{
	width:600px;
	margin:0 auto;
	background-color:#FFF;
}
 
/*  ------------------------------------------
    2-Box Header
    ------------------------------------------   */
.box-header{
	background:url(images/header-bg.gif) repeat-x top;
	height:61px;
}
	.box-header-right{
		background:url(images/header-right.gif) no-repeat top right;
		height:61px;
		width:203px;
		float:right;
	}
	.box-header-left{
		background:url(images/header-left.gif) no-repeat top left;
		height:61px;
		width:46px;
		float:left;
	}
 
/*  ------------------------------------------
    3-Box Body
    ------------------------------------------   */
.box-body{
	background-color:#FFF;
	text-align:justify;
 
}
	.box-body-right{
		background:transparent url(images/body-right.gif) repeat-y right;
	}
	.box-body-left{
		background:transparent url(images/body-left.gif) repeat-y left;
		padding:20px;	
	}
 
/*  ------------------------------------------
    4-Box Footer
    ------------------------------------------   */
.box-footer{
	background:url(images/footer-bg.gif) repeat-x bottom;
 
	height:49px;
}
	.box-footer-right{
		background:url(images/footer-right.gif) no-repeat bottom right;
		height:49px;
		width:49px;
		float:right;
	}
	.box-footer-left{
		background:url(images/footer-left.gif) no-repeat bottom left;
		height:49px;
		width:49px;
		float:left;
	}

الأكواد بسيطة ولا تحتاج لشرح مفصل ولكن لاحظ .. في الكلاسين box-body-left و box-body-right يجب أن تكون خلفيتهما شفافة transparent حتى يطبق لون الخلفية المعين في الكلاس box-body يمكنك أيضا الاستغناء عن كتابتها صراحة لأن الخلفية الافتراضي للكلاسات تكون شفافه .. لذلك يمكنك كتابتها بالشكل التالي

.box-body-right{
	background:url(images/body-right.gif) repeat-y right;
}
.box-body-left{
	background:url(images/body-left.gif) repeat-y left;
	padding:20px;
}

هناك الكثير من الأفكار التي يمكن تطبيقها على الهيكل مثل الغاء box-body ونقل خواصها الى box-body-right و box-body-left .. كما يمكنك اختصار اكواد CSS عن طريق جمع الاكواد المتكررة ومنحهم لأكثر من كلاس باستخدام طريقة Grouping .

هذا التطبيق يعمل بشكل سليم على المتصفحات الكبيرة .

images-wrapper (526)
معاينة

الحمد لله الذي تتم بنعمته الصالحات

CSS Browser Selector
تطبيق صغير الحجم لا يتعدي الكيلو بايت مبني باستخدام جافا سكريبت .. التطبيق يتيح تخصيص اكواد CSS لتظهر بشكل مختلف على مستعرض دون الأخر أو على نظام تشغيل دون الأخر .

أسماء المستعرضات المدعومه وكود استخدام كل منها :

• ie - Internet Explorer (جميع الاصدارات )
• ie8 - Internet Explorer 8.x
• ie7 - Internet Explorer 7.x
• ie6 - Internet Explorer 6.x
• ie5 - Internet Explorer 5.x
• gecko - Mozilla, Firefox (جميع الاصدارات), Camino
• ff2 - Firefox 2
• ff3 - Firefox 3
• opera - Opera (جميع الاصدارات)
• opera8 - Opera 8.x
• opera9 - Opera 9.x
• konqueror - Konqueror
• webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
• chrome - Google Chrome

اسماء نظم التشغيل وكود استخدام كل منها :

• win - Microsoft Windows
• linux - Linux
• mac - Mac OS

طريقة الاستخدام :
أولا : قم بتضمين ملف الجافا سكريبت في ترويسة الصفحة عن طريق الكود التالي :

<script src="css_browser_selector.js" type="text/javascript"></script>

ثانيا : قم بكتابة أكواد CSS الخاصه مسبوقة بكود المستعرض ( و نظام التشغيل ان اردت ) مثال :

.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}

لمزيد من المعلومات
لتحميل التطبيق

Rendur
اداة توفر مربع ادخال قابل للتحريك وتغير الحجم .. قم بكتابة أكوادك وسيتم تطبيقها مباشرة ، ما يميز هذا المحرر هو ان تطبيق الاكواد سيكون في الصفحة كاملة وهذا ما يعطيك فرصة اكبر للمعاينة .

Real-time
صفحة الاداة مقسمه الى جزئين قم بكتابة اكوادك في الجزء العلوي من الصفحة وسيتم تطبيقها مباشرة في الجزء السفلي .

TryIt Editor
هذه الاداة هي المستخدمة في موقع w3cschools .. ما يعيب هذه الاداه صغر المساحة الخاصة بتطبيق الأكواد كما أن الأكواد لا يتم تطبيقها فور كتابتها ولكن عليك الضغط على زر ” Edit the text and click me ” ليتم تطبيقها .

اذا كان لديك اداة يمكنني استخدامها لعرض الأمثلة فلا تبخل علينا بالمساعدة

في الصورة السابقة تم تخصيص طريقه عرض صفحة معينة لتظهر بشكل مختلف على كل متصفح باستخدام conditional-css

لتجربة ذلك بنفسك .

طريفة التركيب :

conditional-css متوافر للاستخدام عن طريق php و c و C# … ساقتصر هنا على طريقة استخدام بواسطه php .

لاستخدام conditional-css عن طريق php ستحتاج الى دعم خادم موقعك الى php4 او php5 .

• قم بتنزيل نسخة conditional-css من صفحة التحميل .
• بعد فك الضغط عن المجلد قم بوضع الملف c-css.php الموجود داخل مجلد php مع ملفات css الخاصة بصفحتك .
• قم باستيراد ملف c-css.php في ملف css المراد استخدام التطبيق فيه عن طريق @import بالشكل التالي

   @import "yourpath/c-css.php";

طريفة الاستخدام :

يتم تخصيص اكواد CSS عن طريق وضع شرط if قبل الخاصية التي نريد تخصيصها لمستعرض معين .. بالشكل التالي :

a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
}

اسماء المحركات و المستعرضات :

• Gecko : للمستعرضات المبنية على محرك Gecko مثل Firefox
• Webkit : للمستعرضات المبنية على محرك Webkit مثل Safari
• Opera : للمستعرض Opera
• IE : للمستعرض Internet Explorer
• IEMac : لمستعرض Internet Explorer على نظام التشغيل Mac
• Konq : للمستعرض Konqueror

مستعرضات الجوالات و المنصات الأخرى :

• SafMob : لـلمستعرض Safari على iPhone / iPod Touch
• IEmob: للمستعرض Internet Explorer على الهواتف الجواله .
• PSP : لمنصه Playstation
• NetF : Net Front

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

• lt : الاصدارات الاقدم من الاصدار المحدد في الشرط
• lte : الاصدار المدرج في الشرط او ما يسبقه
• eq : الاصدار المدرج في الشرط
• gte : الاصدار المدرج في الشرط او الاصدارات الاحدث
• gt : الاصدارات الاحدث من الاصدار المدرج في الشرط

لمزيد من المعلومات عن طريقة الاستخدام .

لا يوجد ما يميز ID عن Class في CSS من حيث الاستخدام فما يمكنك القيام به باحدهما يمكنك القيام به بالاخر وتبقى لك الحرية في استخدام اي منهما تبعاً لرؤيتك و تقديرك اي منهما سيكون مناسب لعنصرك أكثر .

نظرة على Classes
- يمكن استخدام نفس class لاكثر من عنصر في الصفحة الواحده .
- يمكن استخدام اكثر من class للعنصر الواحد .

استخدام Classes
عند تعريف class في CSS يجب ان يسبق اسم الكلاس نقطة ( . ) بالشكل التالي :
( تذكر لا تبدأ اسم الكلاس برقم )

.paragraph{
	color:#FF0000;
	font-weight:bold;
}
.center{
	text-align:center;
}

في المثال السابق قمنا بتعريف كلاسين الاول اسميناه paragraph و الثاني center
الان علينا تحديد العناصر التي نرغب في تطبيق الكلاس عليها :

<p class="paragraph">
هذه فقرة ...
</p>
 
<p class="paragraph">
هذه فقرة أخرى ... !
</p>

في المثال السابق سيقوم المستعرض بتطبيق الخواص التي تم تحديدها في الكلاس paragraph على الفقرتين ( وعلي اي عناصر اخرى تم تحديد الكلاس paragraph لها ) اي ستظهر الفقرتين بخط عريض ولون أزرق .

حسنا .. ماذا اذا اردت ان اطبق اكثر من كلاس على عنصر واحد .. ؟
لتطبيق ذلك عليك كتابة اسماء الكلاسات مع ترك فراغ بين الاسماء بالشكل التالي :

<p class="paragraph center">
هذه فقرة ...
</p>

في المثال السابق سيتم تطبيق الخواص المحدده في الكلاسين paragraph و center اي ستعرض الفقرة بخط عريض ولون ازرق ومحاذاة الفقرة سيكون في الوسط .

نظرة على ID
- لكل عنصر id واحد .
- تحتوي الصفحة الواحدة على عنصر وحيد يحمل ID فريد ( خاص به ) .

يمكننا ان نشبة ID بالارقم التسلسلية للمنتجات و الكروت مسبقة الدفع ( كروت شحن الجوالات و الانترنت وغيرها ) .. فلكل منها رقم فريد خاص بها لا يمكن أن يتكرر .

استخدام ID’s :
عند تعريف ID في css علينا وضع ( # ) قبل اسم ID :
( تذكر لا تبدأ اسم ID برقم )

#paragraph1{
	color:#0000FF;
	font-weight:bold;
}

الان علينا ان نحدد ما هو العنصر الوحيد الذي نريد تطبيق هذه الخواص عليه :

<p id="paragraph1">
هذه فقرة ...
</p>

استخدام اسماء ID’s في الروابط :
تتميز ID بامكانية استخدامها في الروابط حيث سيؤدي الرابط الى العنصر الذي يحمل ID الذي استخدمناه في الرابط :

<a href="#paragraph1">الانتقال الى الفقرة</a>

يجب وضع # قبل اسم ID المراد الانتقال اليه في الرابط .
بالضغط على ” الانتقال الى الفقرة ” سينتقل المستعرض الى الفقرة التي تحمل ID باسم paragraph1 . وستلاحظ تغير مسار الصفحة في شريط العنوان في المستعرض باضافة #paragraph1 الى مسار الصفحة الحالية :
http://www.yourpath.com/example.html#paragraph1

يمكن للعنصر الواحد ان يحتوي على id و class معا

<p id="item1" class="paragraph">
هذه فقرة أخرى ... !
</p>

تخصيص class او ID لعنصر معين :
يمكنك تخصيص Class او ID لعنصر معين لا يتم تطبيق خواصهما الا على هذا العنصر فقط ويتم ذلك عن طريق وضع اسم العنصر قبل اسم Cass او ID … دعني اوضح بمثال :

اكواد css

.example{
	font-family:Arial;
	font-size:12pt;
	font-weight:bold;
}
p.example{
	color:#FF0000;
}
h1.example{
	color:#0000FF;
}

اكواد html

<h1 class="example">هذا عنوان ..</h1>
 
<p class="example">
هذه فقرة ...
</p>

لنشرح المثال …
اولا عرفت class باسم example بخط عريض من نوع Arial و حجم 12pt ثم بعد ذلك حددت بان اي فقرة تحمل كلاس example تعرض بلون أحمر و حددت بان اي عنوان يحمل الكلاس example يعرض بلون ازرق.. مع الاحتفاظ بخواص الكلاس example الخاصة بالخط لكل من الفقرة و العنوان .

انتهى الدرس ..
تذكر التطبيق افضل وسيلة للتعلم .
الى اللقاء في الدرس القادم .

ماهي CSS ؟
CSS هي اختصار لـ Cascading Style Sheet و هي ما تعرف بالعربية بصفحات الأنماط الانسيابيه .. وهي المسؤله عن التحكم في كيفية ظهور و عرض عناصر صفحات الويب حيث يمكننا من خلالها التحكم في الخلفيات و الوان الخطوط وتحديد نوع الخط المستخدم وحجمه وتنسيقه و المسافة بين السطور و عرض و ارتفاع العناصر ….. و الكثير من الخصائص التي سنتناولها في دروس لاحقه باذن الله .

ما هي مميزات CSS ؟

• فصل المحتوى عن التصميم .
• توفير الكثير من الوقت عند تصميم و تعديل الصفحات .
• اتاحة الكثير من الخواص التي يمكن استخدامها في تنسيق العناصر.
• تقليل حجم الصفحات .
• التقليل من الوقت اللازم لظهور الصفحات .

ماذا احتاج لكتابة CSS ؟

اولا : ستحتاج محرر نصوص لكتابة أكوادك … هناك الكثير من البرامج التي يمكنك استخدامها مثل NotePad++ , topstyle , coda وغيرها من البرامج .
هذه الروابط قد تفيدك في اختيار المحرر الذي يناسبك :
CSS Editors Reviewed
CssEditors
Cascading Style Sheets Editors

ثانيا ستحتاج مستعرض ويب لمعاينة ما ستقوم بكتابته . الخيارات متعددة ولكن أنصحك باستخدام فايرفوكس حيث ان دعمه لمعايير CSS كبير كما ان هناك عدد من الاضافات التي يمكن تركيبها عليه ستفيدك اثناء معاينة الصفحات كاضافة FireBug
انصحك ايضا بعدم استخدام IE في بداية تعلمك ل CSS حيث انه فقير بعض الشئ في التعامل مع بعض خصائص css ويتعامل مع البعض الاخر بطريقة مختلفة عن بقية المتصفحات .

كيف أطبق CSS على الصفحات ؟
هناك ثلاث طرق لتطبيق خواص CSS على الصفحات ..
External Stylesheet :
وهي افضل طريقة لتطبيق سمات CSS على أكثر من صفحة ، حيث يتم كتابة اكواد CSS في ملف خارجي يحمل الامتداد css و يتم تضمينه في الملف عن طريق كتابه هذا السطر في الترويسه Head للصفحة المراد تضمين الملف فيها .
مثال :

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

او

<style type="text/css">@import url("css/style.css");</style>

حيث css/style.css هو مسار ملف CSS المراد تضمينه في الصفحة .

Internal Stylesheet
وتستخدم هذه الطريقة عند الرغبة في تطبيق مجموعه من السمات على صفحة واحده فقط و يتم ذلك عن طريق تضمين خواص CSS في الترويسه كالتالي :

<head>
	<style type="text/css">
		الأنماط المراد تطبيقها على الصفحة
	</style>
</head>

Inline Styles
و تستخدم هذه الطريقة عند الرغبة في تطبيق خواص CSS على عنصر ما و تستخدم هذه الطريقة كالتالي :

<p style="color:#0000FF;">محتوى العنصر</p>

أولوية تطبيق خواص CSS ?
اذا تعددت نفس الخواص المطبقة على عنصر ما .. فأولوية استخدام الخواص من قبل المستعرض ستكون بالشكل التالي ..

1. Inline Styles ( خواص css للعنصر )
2. Internal Stylesheet (خواص css الداخلية للملف )
3. External Stylesheet ملف css الخارجي
4. القيمة الافتراضية للخواص في المستعرض .

هيكلية كتابة أكواد CSS

selector { property: value }

selector : يمكنني تعريفه بانه مؤشر او دليل للعنصر الذي اريد ان اطبق عليه خواص CSS هذا المؤشر قد يشير صراحة للعنصر عن طريق كتابه اسمه مثال :

p{
	font-family:Tahoma;
	padding: 8px ;
	text-align:center;
}

بالطريقة السابقة سيتم تطبيق خواص css الى كافه الفقرات ولكن ماذا اذا اردت ان أخصص فقرة معينه بخواص خاصه بها ..حسنا هنا سنلجأ لاستخدام class او id وهنا سيشير selector الى اسم class او id للعنصر لمزيد من التوضيح لنأخذ هذه الامثله .
مثال لاستخدام class :

.paragraph1{
	padding: 10px ;
	color:#FF0000;
}

لنأتي الان لتعريف الفقرة التي نريد ان نطبق هذه الخواص عليها بالشكل التالي :

 
<p class="paragraph1">محتوى العنصر</p>

مثال على استخدام id :

#paragraph2{
	padding: 15px ;
	color:#ccc;
}

لنأتي الان لتعريف الفقرة التي نريد ان نطبق هذه الخواص عليها بالشكل التالي :

<p id="paragraph2">محتوى العنصر</p>

هل لا حظت الفرق في طريقة تعريف class و id في css ؟ … نعم يسبق اسم id رمز (#) اما class فيسبقها نقطه ( . ) … سنعرف الفرق بين class و id و متى نستخدم اي منهما في درس قادم ان شاء الله .

property : وهي اسم الخاصية التي نريد تطبيقها على العنصر .
value : وهي القيمة التي يتم اسنادها الى الخاصية property .

ملاحظات :

• تكتب الخواص بين اقواس معقوفة }{
• يتم الفصل بين property و value بواسطة نقطين ( : )
• عند الرغبة في وضع أكثر من property للعنصر يجب ان يتم الفصل بينهم عن طريق وضع فاصلة منقوطة (;) بعد القيمة
• عند استخدام قيمة مكونة من اكثر من شطر يجب ان توضع بين علامتي تنصيص كالتالي :

   p  {
  	font-family: "Times New Roman"
  }

• عند استخدام اكثر من قيمة لخاصية واحدة يجب ان نفصل بين كل منهم بفاصله (,) كالتالي :

   p  {
  	font-family:Arial, Helvetica, sans-serif
  }

• عند استخدام احدى الخواص و التي تاخذ قيمة عددية يجب الا تترك مسافة بين العدد و الوحدة المستخدمة (px , pt ,% ….) مثال .

   p {
  	margin-right: 5px; 	/* صياغه صحيحه */
  	margin-top: 10  px; /* صياغه خاطئة */
  }

منح اكثر من عنصر نفس الخواص ( Grouping ) :
عند الرغبة في منح أكثر من عنصر نفس الخواص يتم الفصل بينهم بفاصله ( , ) مثال :

h1 , h2 , #name1 , .name2 {
	color:#FF0000;
}

النعليقات في CSS :
تستخدم التعليقات لشرح اكوادك او لتذكيرك بشئ ما عند العودة للتعديل عليها .. التعليقات سيتم تجاهلها من قبل المستعرض .. تبدأ التعليقات في css بـ ” /* ” و تنتهي بـ ” */ ”
مثال :

/* هذا تعليق */
p {
	color:#FF0000;	/* اللون المستخدم للنصوص هو الاحمر  */
}
/* هذا 
تعليق
اخر
 */

انتهت المقدمة … مقدمة دسمه اليس كذلك ؟
الى اللقاء في الدرس القادم .