التخطي إلى المحتوى
شرح دورة الـ CSS للمبتدئين – الدرس الثالث عشر – ج1
مفاهيم اساسيه متنوعه فى لغه CSS :
الفرق بين وسومين ال Div و الSpan :
* وسم الDiv : فهو مشهور فى لغه HTML انه يميز كلمه من بين مجموعه من الكلمات بالاضافه انه ينزل سطرقبل وبعد الكلمه المراد تطبيق هذا الوسم عليها
* وسم الSpan وظيفته انه يميز كلمه معينه من بين مجموعه من الكلمات وهو فى لغه CSS
سنلاحظ الفرق بالكود …

كود ال span
<html>
<head>
<title>Minds</title>

<style>
p{color:red;}
span{color:green;}
</style>

</head>
<body >


Human <span> capital </span> minds

</body>
</html>

النتيجه

كود ال Div

<html>
<head>
<title>Minds</title>

<style>
p{color:red;}
div{color:green;}
</style>

</head>
<body >


Human
<div>
 capital </div>



minds 
</body>
</html>

النتيجه

============================================================
طريقه انشاء Style على حسب رغبه المبرمج:-
المشكله : سنفترض  { ;p{color : red .. معنى ذلك انه سيتم تطبيق هذه الخاصيه على كل وسمP موجود فى الكود
الحل : انشاء Style معين يضم خصائص معينه .. عند ذكره داخل الوسم يتم تطبيق الخصائص
النوع الاول : خطوات انشاء Class Style:

1-انشاء ال Style  ونعطى له اسم .. وقبل الاسم نضع ( . )

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

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

<html>
<head>
<title>Minds</title>

<style>
 .Minds{ Color: purple ;  font-size:60; font-weight:bold;}
</style>

</head>
<body >


Human Capital 



Human Capital 
</body>
</html>

النتيجه:

وظيفه الClass ؟
التحكم واسع المدى فى كل وسم
==========================================================
حالات ذكر ال Class:

1- [  * . Minds  } Color: purple ;  font-size:60; } ]
 معنى ذلك ان minds class  سيتم تطبيقها على جميع الوسوم التى فى الصفحه
 
2-  [ PMinds  } Color: purple ;  font-size:60; }]
معنى ذلك ان minds class سيطبق على وسوم P فقط ولكن بشرط ان يذكر اسم ال class  داخل وسم P
 
3-<P Class=”Minds   Fonts”>  Minds Human Capital </p>
للعلم ان: Minds اسم Class و Fonts ايضا اسم class
معنى الجمله السابقه ان وسم P هذا سيطبق عليه Two Classes فى وقت واحد
=========================================================
الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
انشأ كود خاص بك .. ولكن استخدم فيه ال Class + تجربه جميع حالات الClass
تابعوا الجزء الثانى ..

عن الكاتب

التعليقات

أضف تعليقاً

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

Shares