CSS How To
كيفية إستخدام لغة CSS
ستتعرف علي طريق كتابة CSS المختلفة وهي في ملف HTML أو في ملف منفصل CSS والطرق الثلاثة CSS External Style - CSS Internal Style - CSS Inline Style.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS How To
كيفية إستخدام لغة CSS
</>
CSS How To
كيفية إستخدام لغة CSS
أوامر لغة CSS تُكتب في ثلاث أماكن بجوار لغة HTML طريقتين داخل ملف HTML وطريقة خارجية في ملف منفصل.
طرق كتابة CSS:
- inline Style تُكتب لغة css بداخل خاصية style لأي عنصر.
- Internal Style تُكتب لغة css في صفحة HTML بداخل عنصر <style > الزي يكُب في عنصر <head>.
- External Style تُكتب لغة css في ملف منفصل تماماً عن ملف HTML وiذا الملف إمتدادة هو css ويتم ربطة بصفحة HTML في <head>عن طريق عنصر <link>.
</>
CSS Inline Style
طريقة Inline Style في لغة CSS
تًكتب طريقة Inline Style بداخل العنصر في ملف HTML وهذة الطريقة تستخدم للسرعة وللتجارب وليست طريقة موصي بها ولكنها تُعد طريقة صحيحة.
- Inline Style تستخدم للتجارب أو لسرعة إنجاز التنسيق.
- Inline Style لا ينصح بها لأن هناك طرق أفضل.
- Inline Style تُكتب بداخل خاصية style بداخل علامة البداية open tag لأي عنصر.
- Inline Style كل عنصر في لغة HTML له خاصية style منفصلة وله تنسيق مختلف.
- Declearation Block تتم الكتابة بداخل خاصية style علي هيئة declearation block الخاصية متبوعة بالقيمة والفاصل بينهم colon فاصلة غير منقوطة color:red.
- style لا يمكن أن تتكرر خاصية style للعنصر فقط واحدة ولكن يمكن أن يتكرر declearation block أكثر من مرة.
- Curly Braces لا تستخدم الأقواس المُجعدة { } مع طريقة Inline Style.
inline style syntax
طريقة كتابة inline style في لغة CSS.
<h1 style="color:red">This is a heading</h1>
multi style attribute
طريقة كتابة أكثر من خاصية style لنفس العنصر تُعد طريقة خاطئة.
<h1 style="color:red" style="background:yellow">This is a heading</h1>
style with declearation block
طريقة كتابة style أكثر من تنسيق لنفس العنصر بلغة css بتكرار كُتلة declearation block.
<h1 style="color:red;background:yellow">This is a heading</h1>
multi style for each element
إستخدام خاصية style لكل عنصر لعمل تنسيق مختلف في لغة CSS.
<h1 style="color:red">This is a heading</h1>
</>
CSS Internal Style
طريقة Internal Style في لغة CSS
تًكتب طريقة Internal Style بداخل عنصر <style> في ملف HTML في منطقة عنصر <head> وهذة الطريقة تُعد طريقة شائعة وسريعة ولكن ليست طريقة موصي بها.
- Internal Style تستخدم للتجارب أو لسرعة إنجاز التنسيق.
- Internal Style لا ينصح بها لأن هناك طرق أفضل.
- Internal Style تُكتب بداخل خاصية عنصر <style> في ملف HTML في منطقة عنصر <head>.
- <style> عنصر style لا يتكرر في صفحة HTML جميع التنسيقات لجميع العناصر تكتب في عنصر style واحد فقط في منطقة عنصر <head>.
- Declearation Block تتم الكتابة بداخل عنصر style علي هيئة declearation block الخاصية متبوعة بالقيمة والفاصل بينهم colon فاصلة غير منقوطة color:red.
- Curly Braces لا تستخدم الأقواس المُجعدة { } مع طريقة Inline Style.
Internal style syntax
تُكتب طريقة Internal style بداخل عنصر head في ملف HTML.
<style>
h1 {
color: red;
}
</style>
multi style
كتابة أكثر من عنصر style بداخل head طريقة خاطئة
<head>
<style>
h1 {
color: red;
}
</style>
<style>
h1 {
background: yellow;
}
</style>
</head>
multi declearation
إضافة أكثر من تأثير وتنسيق لعنصر h1 بداخل عنصر style واحد عن طريبق كتابة أكثر من declearation.
<head>
<style>
h1 {
color: red;
background: yellow;
}
</style>
</head>
</>
CSS External Style
طريقة External Style في لغة CSS
تُكتب طريقة External Style في ملف css منفصل وتُعد هذة أفضل طريقة لأنها لسهولة تعديل أوامر css وأيضاً لأمكانية إستخدام نفس أوامر CSS مع أكثر من صفحة HTML.
- External Style هي أفضل طريقة لأنها تعطي سهولة التعديل ولأستخدام نفس أوامر CSS مع أكثر من ملف HTML.
خطوات ربط ملف CSS بملف HTML:
- أنشئ ملف CSS جديد بجوار ملف HTML وقوم بتسميته أي إسم وليكن style ثم أحفظ الملف بصيغة css ليصبح mystyle.css.
- قم بإضافة عنصر <link> بداخل عنصر <head>
- قم بإضافة خاصية rel بداخل عنصر <link> ثم قم بإضافة القيمة stylesheet بداخل خاصية rel.
- قم بإضافة خاصية href لعنصر <link> وحدد مسار ملف css مع إسم الملف css/mystyle.css.
- قم بتحديد العنصر مباشرة عن طريق css selector سواء كان Tag Name أو Class Name أو ID Name.
- ثم قم بإضافة Declaration أو أكثر بداخل الـ Curly Braces { } ونضع الـ Property والـ Value.
CSS in external file
تكتب أوامر CSS مباشرة بداخل ملف CSS.
h1{color:red}
CSS external style
تكتب أوامر css في ملف منفصل وتحديد مسار ملف css بداخل عنصر link في head.
<head> <link rel="stylesheet" href="/css/mystyle.css"> </head>
كيفية
سمة
نمط أو شكل
مضمن
داخلي
خارجي
قيمة
عنوان
محدد
اسم العلامة
اسم الفئة
اسم معرف الهوية
أقواس متعرجة
اعلان
عنصر Link
خاصية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
