بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته وبعد..
ساحاول توصيل المعلومة للمبتدئين من الاخوان والاخوات، عن السي اس اس [CSS]
وماذا تعني، بدون فلسفة متعبة، أو تحفظ.. بل ببساطة، وسهولة ^_^
وسوف احاول، ان اخاطب الناس (المبتدئين) بما يفهمون
...
السي اس اس [CSS] هي طريقة أو تقنية، او سمها كما تريد.. مشابهة للاتش تس ام ال [HTML]
ولكنها مطورة، وممتعة.. ولكن البعض لم يحاول أو يجرب، فيعتقد أنها صعبة!
فـ كل شيء صعب، اذا لم تحاول، او استصعبته.. والعكس صحيح.
ولمن يحس بالاحباط، واليأس! تذكر السطر التالي:
كل الاختراعات من حولك، كانت الناس في الماضي تقول [شيء مستحيل]
...
المهم..
عندما تقرأ عن السي اس اس، فانك ستقابل جملة أو كلمة تسمى كلاس [class] و [id] ولكن التعمق في بعض الشروحات يعقدها
ويجعلها مملة بعض الشيء، فيخرج المبتدء لم يكتسب سوى [الصداع] أو [اليأس والاحباط] وهذا ما اتمنى أن لا يقابلكم في شروحاتي
...
معنى أو فائدة الكلاس [class] و الآي دي [id]
---
تخيّل انك جالس في مجلس، وأمامك ثلاث أطفال.. (ولدان) و (بنت)
خالد
فيصل
سعاد
وقلت بصوت عالي، وبالعامية:
برااااااااااااا
وأنت تقصد [فيصل] لأنه كان مزعجاً في حضوره!
برأيك..
من سيخرج؟
الأرجح، والصواب: سيخرج الجميع
إذاً..
كان يجب عليك أن تستخدم الاشارة، أو التسمية!
وهذا ما يسمى في تقنية السي اس اس [id]
أي: ان تحدد الشخص المخاطب، او بالأصح (الوسم) فتقول:
فيصل! اخرج من المجلس
div = الشخص
id = الاسم
css= أوامر عديده
كود PHP:
<div id="fisal"> </div>
فيصل في المجلس، والمجلس هو:
كود PHP:
<body> </body>
فتكون النتيجة:
كود PHP:
<body>
<div id="fisal"></div>
</body>
جميل..
الآن تحتاج الى الصوت، وهو:
كود PHP:
<style> </style>
جميل.. وماذا ستقول لفيصل؟
مثلاً: اريد أن أقول له، تقدم الى الأمام 10 بكسل ^_^
1- أنادي فيصل:
كود PHP:
#fisal
2- بصيغة الأمر، وليس الطلب
كود PHP:
{}
كود:
{بداية الصوت
كود:
}نهاية الصوت
اذاً النتيجة:
كود PHP:
<style>
#fisal{}
</style>
ولكنك لم تقل شيء؟ لم تقل تقدم الى الأمام 10 بكسل؟
اذاً سأقولها بعد بداية الصوت، وقبل نهاية الصوت وهي كما اتفقنا:
كود PHP:
{}
الأمر:
كود PHP:
top:10px
جميل.. أصبح الناتج الآن:
كود PHP:
<style>
#fisal{top:10px}
</style>
ولكن فيصل لم ينفذ ما قلته! لماذا؟
لأنك لم تقم بتسكير (فمك) ليعلم أن الأمر انتهى وتسكير الأمر، قبل نهاية الصوت هو:
;
فاصلة منقوطة
ويصبح الناتج:
كود PHP:
<style>
#fisal{top:10px;}
</style>
جميل ^_^
لنفرض أني اريد أن أقول له:
فيصل، تقدم الى الأمام 10 بكسل، وزح الى اليمين 15 بكسل
الأمر سيكون بهذه الطريقة:
كود PHP:
<style>
#fisal{top:10px; right:15px;}
</style>
هل لاحظت الزيادة؟
كود PHP:
right:15px;
فهمنا الآن أن [id] هي أحد أدوات الاشارة، والمربع # هو الاشارة بالاصبع لشخص واحد، او أمر أو مناداة شخص معيّن وغالباً ما تستخدم في [الروابط]
جميل.. أتمنى ان تكون وصلت المعلومة كما أريد، وكما تحبون
ولكن أليس لديكم سؤال أخير! وهو:
ما فائدة class إذاً؟
الاجابة:
الكلاس، إذا أردت أن تقول:
لونوا أو افرشوا المجلس، باللون الأحمر أو الأخضر أو أطفئوا الأنوار
ولكن الأمر يبدأ بنقطة ^_^ وهي . في الكلاسات، بدلاً من # في الآي دي
وسيكون الأمر كما أشرنا في السابق، المجلس هو:
كود PHP:
<body class="magles"> </body>
هذا المجلس.. أما الأمر:
كود PHP:
<style>
.magles{background-color:red;}
</style>
. = أمر جماعي
magles = اسم المجلس أو الأرضية
كود:
{بداية الصوت
background-color = لونوا الأرضية
: = بـ
red = اللون الأحمر
; = انتهى الأمر
كود PHP:
}
انتهى الصوت
وهو أشبه بأن يكون كالتالي:
لائحة، على بوابة حديقة، وفيها أوامر، او شروط عامة، بدون تخصيص شخص، بل تخصيص جنس.. مثل:
1- الرجاء من الشباب التوجه إلى يمين الحديقة.
2- الرجاء توجه العائلات، إلى يسار الحديقة.
ثم
الزي الأحمر للادارة [العناوين]
الزي الأخضر للموضفين [النصوص]
يارب تكون المعلومة وصلت، او جزء منها..
وفي النهاية، هذا ما تعلمته حسب خبرتي البسيطة في هذا المجال..
وسنتطرق الى نقاط أخرى، إذا لاحظنا التفاعل.
فائق احترامي وتقديري لكم جميعاً، وأرجوا ممن لديهم ملاحظة أو تعقيب.. المشاركة، والتصحيح..
وشكراً جزيلاً لمروركم جميعاً وكونوا بخير
موضوع: الدرس الأول: للمبتدئين معنى السي اس اس css