دورة HTML - الدرس الرابع ( HTML - CSS ستايل )
CSS (Cascading Style Sheets)
لغة CSS وهي اللغة التي تستخدم من أجل واجهة صفحات HTML
ادخل اكواد CSS في صفحات HTML :
CSS دخلت مجال التنفيذ مع HTML 4 الاصدار الرابع لتوفير وسيلة أفضل من أجل الستايل الخاص بصفحات HTML
نستطيع اضافة اكواد CSS الى صفحة HTML بطرق عدة :
- اولا داخل عناصر HTML (داخل الوسم )
- كود داخلي ( internal) - باستخدام الوسم <style> في عنصر <head>
- ملف خارجي (external) - عن طريق ملف CSS خارجي
الطريقة الأفضل و المستخدمة في معظم المواقع هي ربط صفحات الHTML لملف CSS خارجي
و مع ذلك ، في هذا الدرس سنشرح طريقة ادخال اكواد الCSS داخل الوسوم من أجل فهم أكثر لغة CSS و تسهيل الأمثلة ،
و هي أيضا سهلة من أجل اضافة الاكواد و تجريبها بنفسك على كل وسم .
و سنتعلم كل شيء عن CSS في دورة خاصة باذن الله .
طريقة ادخل الاكواد في الوسوم :
كود الCSS داخل الوسم يطبق فقط على عنصر واحد و هو العنصر الذي وضعنا الكود داخله
لادخال الكود بهذه الطريقة كل ماعلينا فعله هو وضع اكواد CSS بهذه الطريقة
style="هنا توضع الاكواد" كمثال :
<p style="color:blue;margin-left:20px;">هنا فقرة .</p>
|
HTML ستايل - لون الخلفية :
لون الخلفية الذي يوضع بطريقة الوسم هو لون خلفية خاص بكل عنصر كمثال :
في المثال السابق قمنا بختيار ألوان خلفية لكل عنصر الأصفر ل <body> , الأحمر للعنوان و الأخضر للنص
ستايل HTML - اللون و الخط و الحجم :
في هذا المثال قمنا باختيار نوع الخط و لونه و حجمه بالنسبة لكل عنصر
HTML ستايل - محاذات النص :
نستطيع محاذاة النص عن طريق الكود :
| <h1 style="text-align:center;">dzlearning</h1> |
في هذا المثال قمنا بوضع النص في منتصف الصفحة اذا اردنا وضعه في اليمين نستبدل center ب right و هكذا
طريقة الكود الداخلي ( interal style sheet ) :
هذا النوع يستخدم لما نريد تطبيق نوع من الستايل على كل انواع العناوين مثلا او كل النصوص و هكذا كمثال :
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dzlearning</title> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> <body > <p >مرحبا بكم في موقع تعلم.</p> </body> </html> |
في هذا المثال الذي قمنا به ستظهر كل النصوص التي في الصفحة باللون الأزرق .
الستايل عبر ملف خارجي :
يستخدم الملف الخارجي لما يكون نفس الستايل الخاص بنا نريد أن نطبقه على كثر من الصفحات و ليس فقط صفحة واحدة
فنضع ملف CSS واحد و نربطه بكل الصفحات حتى لا نعيد كتابته في كل صفحة على حدى
نستخدمه الملف عبر وسم <link> كما في المثال التالي :
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
انتهى هادا الدرس نتمنى أن يكون سهل و مفيد ان شاء الله ..
لا تنسونا من صالح دعائكم
تعليقات
إرسال تعليق