بسم الله الرحمن الرحيم
مواضيع سابقة
[ الدرس الأول ] كيفية عمل استايل لصفحتك بواسطة Css
صفحتنا العادية بلغة Html تكون غالبا بهذا الشكل
كود بلغة HTML:
<Html> <Head>رأس الصفحة
</Head> <Body> محتوى الموضوع نادى دروسكم
</Body> </Html>
هذا المحتوى العادى للصفحة باستخدام لغة Html
طبعا فوائد استخدام لغة Css كما تكلمنا عنها فى المقدمة هى توفير استايل يتحكم فى صفحات موقعك
و التصميم كاملا
الآن سوف نرى الصفحة و لكن بلغة Css
كود بلغة HTML:
<Html> <Head> <style type="text/css"> P { color:blue; text-align:right; }
</style> </Head> <Body> <P> اهلا بكم فى نادى دروسكم
</P> <P> زورونا على الرابط التالى
Www.Drooscom.Com </P> </Body> </Html>
سوف تظهر لنا الصفحة بهذا الشكل شوف المثال
Css.Lesson.1.Ex.1.html
سوف نشرح الآن فائدة كل كود و كيف نتحكم بالاستايل اولا
كود بلغة HTML:
<style type="text/css">
هذا يوصف نوع الاستايل المستخدم و هو استايل Css
يجب وضع الكود التالى فى وسم الهيدر
<Head>هنا</Head>
ثم
P
هو الوسم الذى سنستخدمه لتنسيق التصميم
مثلا اى شىء نريده ان يكون بنفس تنسيق الاستايل نستخدم الوسم
<P>هنا محتوى الكلمات</P>
كود بلغة HTML:
{ color:blue; text-align:right; }
تابع الأقواس الاستايل يجب ان يكون داخل هذه الأقواس
{ هنا }
نأتى للاوامر
كود بلغة HTML:
color:blue;
معناها ان اللون سوف يكون أزرق
ثم اذا اردت وضع امر آخر بعد هذا تقوم بوضع مسافة و تكتب الامر الثانى
كود بلغة HTML:
text-align:right;
و معناها محاذاه النص سوف تكون الى اليمين تابع المثال السابق
ليصبح الكود بهذا الشكل
كود بلغة HTML:
{ color:blue; text-align:right; }
طبعا يمكن كتابة الكثير من الاوامر داخل الاستايل
هنا ميزة Css
اننى يمكننى تغيير الاستايل نفسه بدون التعديل على صفحة Html
كالتالى
يمكننى مثلا تغيير اللون و المحاذاة من الاستايل نفسه
P { color:red; text-align:center; }
هنا اخترت اللون ليكون احمر و المحاذاة وسط
تابع المثال لترى كيف تغيرت الصفحة
Css.Lesson.1.Ex.2.html
الآن عرفنا مكان وضع كود الاستايل و عرفنا بعض المعلومات عن الاكواد و Css
لاحقا ان شاء الله سوف نتناول كيفية عمل استايل فى ملف مستقل بعيدا عن الصفحة
و الكثير و المزيد من الاوامر
اتمنى من الله يكون الدرس عجبكوا و سامحونى لو فى اى خطأ او تقصير