المحتوى عن 'after'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 1 نتيجة

  1. css 101

    سنشرح في هذا الدرس من سلسلة تعلم CSS كيف نستخدم CSS لإضافة محتوى إلى المستند عند عرضه. سنتدّرب على ذلك بإضافة بعض الجمل وصورة في ورقة الأنماط الّتي نعمل عليها. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. (هذا الدرس) تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. المحتوى يُعتبر فصل المحتوى عن تنسيقه إحدى أهم مزايا استخدام CSS، ومع ذلك قد نُضطر أحيانًا إلى إضافة بعض المحتوى إلى الصّفحة من خلال ورقة الأنماط، وليس في المستند ذاته. قد يكون المحتوى المُضاف في CSS نصًّا أو صورة، ويمكن اللجوء إلى هذه التقنيّة عندما يكون المحتوى مرتبطًا بشدّة بهيكل المستند. تفاصيل أكثر قد يؤدّي تحديد المحتوى في ورقة الأنماط إلى نتائج غير مرغوبة، فمثلًا قد يكون لديك نسخ مختلفة اللغات من المستند ذاته تتشارك ورقة الأنماط ذاتها، فإذا كان جزء من المستند مُترجمًا، فستحتاج إلى تحديد هذه الأجزاء من ورقة الأنماط في ملفّات مختلفة وترتّبها بحيث ترتبط كل نسخة من المستند بالملفّ الموافق. يمكن تجنّب هذه المشكلات باستخدام هذه التقنية لإضافة محتوىً لا يختلف بين اللغات والثقافات، كالرموز والصّور. لاحظ أنّ المحتوى المُضاف من خلال CSS لا يُصبح جزءًا من الـ DOM. المحتوى النصي يمكن إدخال محتوى نصّيّ إلى الصّفحة من خلال CSS بعد عنصر مُعيّن أو بعده، ولإنجاز ذلك أضف ‎::after‎ أو ‎::before‎ إلى المُحدِّد، واستخدم الخاصّة content ضمن القاعدة واجعل قيمتها المحتوى المطلوب إضافته. مثال A text where I need to <span class="ref">something</span> .ref::before { font-weight: bold; color: navy; content: "Reference: "; } النتيجة: تفاصيل أكثر تكون مجموعة المحارف لورقة الأنماط هي UTF-8 ما لم يحدّد غيرها، ولاستخدام مجموعة محارف أخرى يمكن ذكر ذلك في <link> أو في ورقة الأنماط ذاتها، أو بوسائل أخرى. كذلك يمكن تحديد محارف بعينها باستخدام تقنية محرف‎ الهروب (escape character) وهو \، فمثلًا تعني مجموعة الحروف ‎\265B‎ رمز الملكة في الشّطرنج (♛) للطّرف الأسود. الصور لإضافة صورة قبل أو بعد عنصر مُعيّن، يمكن استخدام رابط الصّورة كقيمة للخاصّة content. مثال هذه القاعدة تضيف مسافة ثمّ أيقونة بعد كل رابط من الصّنف glossary: a.glossary:after {content: " " url("../images/glossary-icon.gif");} لإضافة صورة كخلفية لعنصر، استخدم رابطها كقيمة للخاصّة background، وهي خاصّة مختصرة تعيّن لون الخلفيّة والصّورة وكيفيّة تكرارها وتفاصيل أحرى. مثال تعيّن القاعدة التالية خلفيّة العنصر باستخدام رابط لملفّ صورة، حيث يستهدف المُحدّد مُعرّف العنصر، وتحدّد القيمة no-repeat من تكرار الصّورة بحيث لا تظهر إلا مرّة واحدة: #sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} تفاصيل أكثر لمعلومات أكثر عن الخواص المنفردة الّتي تتعلّق بالخلفيّة، وخيارات أخرى لتحديد صور الخلفيّة، راجع صفحة background. تمرين: إضافة صورة خلفية الصّورة التالية هي مربّع أبيض فيه سطر أزرق في قسمه السّفليّ: نزّل الصّورة إلى المجلّد ذاته الذي يحوي ملف CSS الّذي تتدرّب عليه. (انقر على الصورة بزرّ الفأرة الأيمن، ستشاهد قائمة فيها خيار لحفظ الصورة). عدّل ملفّ CSS مُضيفًا لقاعدة التّالية إلى body، والّتي تعيّن الخلفيّة لكامل الصّفحة: background: url("Blue-rule.png"); القيمة repeat هي القيمة المبدئيّة، فلا حاجة لتعيينها. تتكر الصّورة شاقوليًّا وأفقيًّا، معطية تأثيرًا مشابها لورق الكتابة المُسطَّر: تمرين احفظ الصّورة التالية: وأضف قاعدة واحدة تجعل الصّورة تظهر في بداية كلّ سطر: شاهد الحل أضف هذه القاعدة إلى ورقة الأنماط: p:before{ content: url("yellow-pin.png"); } ما التالي؟ من الطّرق الشائعة التي تضيف فيها ورقة الأنماط المُحتوى إلى الصفحة هي إضافة علامة إلى العناصر في القوائم، سنتعلّم كيفبية تنسيق القوائم في الدّرس القادم. ترجمة -وبتصرف- للمقال Content من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.