في هذا الدرس 4تصفّح المواضيع
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
CSS Inline Style طريقة Inline Style في لغة CSS
تُكتب Inline Style في سمة style بعلامة البداية للعنصر. هي طريقة صحيحة ومفيدة لبعض التنسيقات الخاصة بعنصر واحد أو المتولدة برمجيًا، لكن تكرارها في صفحات كثيرة يصعّب الصيانة مقارنة بقواعد مشتركة.
- لا تكرر سمة style في العنصر نفسه.
- اكتب تصريحات مثل
color: red; background: yellow;داخل قيمة السمة، وافصل بين الخاصية والقيمة بالنقطتين : وبين التصريحات بـ ;. - لا تكتب محددًا أو أقواس { } داخل قيمة style.
- لا يحتاج كل عنصر إلى سمة style؛ يمكن أن يأتي تنسيقه من قواعد داخلية أو خارجية أو من الوراثة.
inline style syntax
طريقة كتابة inline style في لغة CSS.
multi style attribute
طريقة كتابة أكثر من خاصية style لنفس العنصر تُعد طريقة خاطئة.
Style with multiple declarations
نكتب تصريحين داخل سمة style واحدة، ويفصل بينهما ;، فيصبح النص أحمر والخلفية صفراء.
multi style for each element
إستخدام خاصية style لكل عنصر لعمل تنسيق مختلف في لغة CSS.
CSS Internal Style
طريقة Internal Style في لغة CSS
CSS Internal Style طريقة Internal Style في لغة CSS
تُكتب Internal Style داخل عنصر <style> في <head>. تناسب تنسيق صفحة محددة؛ ويكون الملف الخارجي مناسبًا عندما تريد مشاركة القواعد بين صفحات كثيرة.
- يمكن وجود أكثر من عنصر <style> في المستند؛ ليست هذه طريقة خاطئة.
- تحتوي العناصر على قواعد ذات محددات وكتل تصريحات بين { }، مثل
h1 { color: red; }. - عند تنافس قواعد على الخاصية نفسها تحسم قواعد التتالي النتيجة؛ وعند تساوي الأهمية والطبقة وخصوصية المحدد تؤثر قاعدة ظهرت لاحقًا.
- داخل كل كتلة تفصل : بين الخاصية والقيمة و ; بين التصريحات.
Internal style syntax
تُكتب طريقة Internal style بداخل عنصر head في ملف HTML.
Multiple style elements
وجود عنصري style داخل head صحيح. في هذا المثال يضيف الأول اللون الأحمر ويضيف الثاني الخلفية الصفراء إلى h1، فتظهر الخاصيتان معًا.
<head>
<style>
h1 {
color: red;
}
</style>
<style>
h1 {
background: yellow;
}
</style>
</head>multi declearation
إضافة أكثر من تأثير وتنسيق لعنصر h1 بداخل عنصر style واحد عن طريبق كتابة أكثر من declearation.
CSS External Style
طريقة External Style في لغة CSS
CSS External Style طريقة External Style في لغة CSS
تُكتب CSS الخارجية في ملف منفصل عن HTML. تناسب مشاركة القواعد بين صفحات متعددة وتسهّل صيانتها؛ اختيارها يعتمد على حاجة الصفحة.
خطوات الربط في هذا المثال:
- أنشئ مجلد css داخل الجذر العام للموقع، وضع فيه الملف mystyle.css. إذا وضعت الملف بجوار HTML بدلًا من ذلك، غيّر href ليتوافق مع موضعه الفعلي.
- أضف عنصر <link> داخل <head>.
- أضف السمة
rel="stylesheet". - استخدم
href="/css/mystyle.css"كما في المثال؛ الشرطة الأولى تجعل المسار يبدأ من جذر الموقع. - اكتب المحدد المطلوب في ملف CSS، مثل اسم العنصر أو محدد class أو id.
- أضف التصريحات داخل { }، مع : بين الخاصية والقيمة و ; بين التصريحات.
CSS in external file
تكتب أوامر CSS مباشرة بداخل ملف CSS.
h1{color:red}CSS external style
تكتب أوامر css في ملف منفصل وتحديد مسار ملف css بداخل عنصر link في head.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات16
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 How To كيفية
- للمراجعة
- 02 Attribute سمة
- للمراجعة
- 03 Style نمط أو شكل
- للمراجعة
- 04 Inline مضمن
- للمراجعة
- 05 Internal داخلي
- للمراجعة
- 06 External خارجي
- للمراجعة
- 07 Value قيمة
- للمراجعة
- 08 Head عنوان
- للمراجعة
- 09 Selector محدد
- للمراجعة
- 10 Tag Name اسم العلامة
- للمراجعة
- 11 Class Name اسم الفئة
- للمراجعة
- 12 ID Name اسم معرف الهوية
- للمراجعة
- 13 Curly Braces أقواس متعرجة
- للمراجعة
- 14 Declaration اعلان
- للمراجعة
- 15 Link Element عنصر Link
- للمراجعة
- 16 Property خاصية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
- 03 Rel Rel
- Relation
- للمراجعة
- 04 Href Href
- Hypertext Reference
- مرجع النص التشعبي<p><a href="https://www.closetag.com/tutorial/html/html-links">المزيد عن Href</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.