اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'المقروئية'.

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

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

نوع المحتوى


التصنيفات

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

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

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

التصنيفات

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

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

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

  1. في هذا الجزء من سلسلة تعلّم CSS، سنطّلع على أمثلة أكثر عن تنسيق الخطوط، ثم نطبّق ما تعلّمناه على ورقة أنماطنا. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. (هذا الدرس) التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. تنسيق الخطوط هناك عدّة خواصّ يمكن استخدامها في CSS لتنسيق النّصوص، منها الخاصّة المُختصرة font التي يمكنك استخدامها لتعيين عدّة خواصّ مرّة واحدة، مثلاً: عريض، مائل أو بحروف كبيرة مُصغّرة (small capitals) الحجم ارتفاع السّطر اسم عائلة الخط (typeface) مثال p { font: italic 75%/125% "Comic Sans MS", cursive; } تُعيّن هذه القاعدة عدّة خواصّ متعلّقة بالخطّ، جاعلةً كل الفقرات بخطّ مائل. يُعيّن حجم الخطّ إلى ما يساوي ثلاثة أرباع حجم الخطّ في العنصر الأب لكلّ فقرة، ثمّ يُعيّن ارتفاع الخطّ إلى 125% (أكبر قليلًا من العاديّ). تعيّن عائلة الخطّ إلى Comic Sans MS، فإنّ لم يكن متوفّرًا سيستخدم المتصفّح الخطّ المبدئيّ من نوع "الكتابة اليدويّة (cursive)" المُعيّن في إعداداته. تؤدّي هذه القاعدة ضمنيًّا إلى إزالة الخطوط العريضة والحروف الكبيرة المُصغّرة إن كانت مُعيّنة من قبل على الأهداف. عائلات الخطوط لا يمكن توقّع الخطوط الّتي ستكون على جهاز المستخدم الّذي يقرأ مستندك، لذا يُنصح دائمًا بإسناد قائمة من البدائل بترتيب أفضليّتها. أنهِ هذه القائمة بواحد من الخطوط المبدئية: serif (المُذيّل) أو sans-serif (غير المُذيّل) أو cursive (اليدويّ) أو fantasy (الخيالي) أو monospace (ثابت العرض). إن لم يدعم الخطّ كل الميّزات في المستند، فبإمكان المتصفّح استخدام خطّ بديل، فمثلاً: قد يحتوي المُستند حروفًا خاصّة غير موجودة في الخطّ المُعيّن، وعندها سيبحث المتصفّح عن خطّ بديل فيه هذه الحروف. لتعيين اسم الخطّ بصورة منفصلة عن بقيّة الخواصّ، استخدم الخاصّة font-family. أحجام الخطوط بإمكان المتصفّحات تجاوز الأحجام المبدئيّة للخطوط أو تغيير حجم الخطّ أثناء قراءة المستخدم للصفحة، لذا يُفضّل استخدام أحجام نسبيّة حيث أمكن. باستطاعتك مثلًا استخدام قيم مُعيّنة مسبقًا للخطوط مثل small و medium و large؛ أو قيم منسوبة إلى حجم خطّ العنصر الأب مثل smaller و larger و 150% و 1.5em. الوحدة em تساوي عرض الحرف "m" إذا كُتب باستخدام حجم خطّ العنصر الأب؛ وهذا يعني أن 1.5em تساوي حجم خطّ العنصر الأب مضروبًا بواحد ونصف. يمكن أيضًا عند الضرورة استخدام قيمة ثابتة مثل 14px (أي 14 بكسلًا) على الشّاشة أو 14pt (أي 14 نقطةً) للطّابعة؛ على أنّ هذه القيم غير ملائمة للأشخاص الذين يعانون من ضعف البصر لأنها لا تسمح لهم بزيادة حجم الخطّ؛ لذا يُفضّل استخدام قيمة مُعيّنة مسبقًا مثل medium على العناصر الرئيسيّة ثمّ قيم نسبيّة على أبناءها. لتعيين حجم الخطّ بصورة منفصلة عن بقيّة الخواص، استخدم الخاصّة font-size. ارتفاع الخط يُعيّن ارتفاع الخطّ المسافة الشّاقوليّة بين السّطور، وقد تكون زيادته محبّذة في المستندات ذات الفقرات الطّويلة الّتي تمتدّ على عدّة سطور، خصوصًا إن كان حجم الخطّ صغيرًا. لتعيين ارتفاع الخطّ بصورة منفصلة عن بقيّة الخواص، استخدم الخاصّة line-height. تنسيقات خاصة يمكن استخدام الخاصّة المنفردة text-decoration لتعيين تنسيقات أخرى على النّص مثل تسطيره underline أوحجبه بخطّ يتوسّطه line-through (هكذا)، أو مسح كل التنسيقات الخاصّة باستخدام none. خواص أخرى لجعل الخطّ مائلًا فقط: استخدم: ‎font-style: italic;‎ لجعل الخطّ عريضًا فقط استخدم: ‎font-style: bold;‎ لتصغير الحروف الكبيرة باللاتنينية استخدم: ‎font-variant: small-caps;‎ لإزالة أيّ من الخواصّ السابقة على انفراد، استخدام normal أو inherit كقيمة. تفاصيل أكثر يمكن تعيين تنسيقات النّصوص بطرق عديدة. مثلًا: بعض الخواصّ المذكورة آنفًا لها قيم أخرى. حاول تجنّب استخدام الخواصّ المختصرة في أوراق الأنماط المُعقّدة لأنّها قد تؤثّر على خواصّ منفردة أخرى لم تكن بالحُسبان. للاطّلاع على كامل تفاصيل الخطوط في CSS، راجع صفحة الخطوط في معيار CSS، وللاطّلاع على كامل تفاصيل تنسيقات النّصوص راجع صفحة النّصوص. إن لم ترغب بالاعتماد على الخطوط المُثبّتة على جهاز المستخدم، يمكن استخدام خطوط الويب بالخاصّة ‎@font-face‎، إلّا أنّها غير مدعومة في جميع المتصفّحات. تمرين: تعيين الخطوط حرّر ملفّ CSS الذي تتدرّب عليه. أضف القاعدة التّالية لتغيير الخط في كامل المستند، من المنطقيّ إضافة هذه القاعدة في رأس الملفّ، لكنّ ذلك لا يؤثّر على النّتيجة. body { font: 16px "Comic Sans MS", cursive; } أضف تعليقًا يشرح القاعدة، وأضف مسافات فارغة بما تراه مناسبًا. احفظ الملفّ وحدّث الصّفحة لمشاهدة النّتيجة. إن كان الخطّ Comic Sans MS مُثبّتًا على جهازك، أو خطّ يدويّ آخر لا يدعم ميلان الحروف، سيختار متصفّحك خطًّا آخر للنّصوص المائلة في السّطر الأوّل: اذهب إلى قائمة المتصفّح واختر: عرض > حجم الخطّ > تكبير (أو ما يشابهه)، على الرّغم من أنك حدّدت حجم الخطّ بـ16 بكسلًا، فإنّ المستخدم باستطاعته تغييره. تمرين اجعل الحروف الأولى من كلّ كلمة في المستند أكبر مرّتين من الحجم المبدئيّ للخطوط المُذيّلة في المتصفّح: شاهد الحل أضفّ التّصريح التّالي إلى قاعدة strong: font: 200% serif; إن كنت تستخدم تصاريح منفصلة للخاصّتين font-size وfont-family فإنّ الخاصّة font-style على الفقرة الأولى تبقى سارية المفعول. ما التالي؟ استخدمنا أسماء الألوان القياسيّة لتعيين لون بعض الحروف والكلمات في مستندنا، سنتعلّم في الدّرس التالي التعامل مع الألوان بقيّة أسماء الألوان القياسيّة وكيف نستعمل ألوانًا أخرى. ترجمة -وبتصرف- للمقال Text Styles من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.
×
×
  • أضف...