التخطي إلى المحتوى
شرح دورة الـ CSS للمبتدئين – الدرس الثالث عشر – ج2

درسنا فى الجزء الاول Class Style

النوع الثانى : خطوات انشاء ID Style:
1-انشاء ال Style  ونعطى له اسم .. وقبل الاسم نضع (# )
       #  اسم ال style  { الخصائص حسب رغبه المبرمج}
EX/ # Minds            { Color: purple ;  font-size:60; font-weight:bold;}
———————————————————————
2-نقوم باستدعاء ال Style  داخل الوسم المراد تطبيق الخواص عليه .. ولكن قبل اسم الStyle  اذكر كلمه Class
<P IDاسم ال style”> Minds Human Capital </P>
<P ID=”Minds”>           Minds Human Capital </p>

التطبيق بالكود :

<html>
<head>
<title>Minds</title>
<style>
 #Minds{ Color: purple ;  font-size:60; font-weight:bold;}
</style>
</head>
<body >
<p ID="Minds">
Human Capital </p>
<p>
Human Capital 
</body>
</html>

النتيجه :

 

============================================================

حالات ذكر ال ID:
1-  [ P# Minds  } Color: purple ;  font-size:60; }]
معنى ذلك ان minds class سيطبق على وسوم P فقط ولكن بشرط ان يذكر اسم الID  داخل وسم P

2-<P ID=”Minds   Fonts”>  Minds Human Capital </p>
للعلم ان: Minds اسم ID و Fonts ايضا اسم ID
معنى الجمله السابقه ان وسم P هذا سيطبق عليه Two ID فى وقت واحد
==============================================================

**ما الفرق بينهم..

==============================================================

**دمخ   Div & Span مع ID & Class Styles :
1-كود وسم DIV مع ID & Class Styles…
الكود :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Minds</title>
<style>
 #Minds{background:grey;font-weight:bold;}
 .list{background:black;font-weight:bold};
</style>
</head>
=======================================================
<body >
<div id="Minds">
<ul type=circle>
<li><a href=http://www.mindshci.com/2013/09/css.html>CSS مقدمه لغه </a>
<li><a href=http://www.mindshci.com/2013/09/css1.html>الدرس الاول</a>
</ul>
</div>
========================================================
<div class="list">
<ul type=circle>
<li><a href=http://www.mindshci.com/2013/11/css_1774.html>CSS الدرس التاسع فى لفه</a>
<li><a href=http://www.mindshci.com/2013/11/css_16.html>CSS الدرس العاشر فى لغه</a>
</ul>
</div>
=========================================================
</body>
</html>

النتيجه ..

2-كود وسم Span مع ID & Class Styles ..
فى جزء اختبر نفسك
===========================================================

الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
 (كن مختلفا .. فالعالم ليس بحاجه لمزيد من النسخ المتكرره)
استخدم 
كود وسم Span مع ID & Class Styles .. واجع كلمه (مختلفا) لونها احمر بID Style  واجعل كلمه(متكرره) لونها اخضر بClass Style .. وارسل لى النتيجه

 

 

 

الآن عزيزى القارئ .. لديك الاساس فى لغه الCSS  لتبرمج كود خاص بك .. وتبدع .. فلتنطلق ..

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares