CSS إلى أنماط Inline
توليد مقتطفات أنماط inline من قواعد CSS
CSS المدخل
مقتطفات الأنماط Inline
أمثلة CSS إلى Inline
حوّل قواعد CSS إلى مقتطفات style مضمّنة للبريد الإلكتروني أو HTML. مثال:
أنماط العنوان والزر
CSS المدخل:
مخرج المقتطفات المضمّنة:
استخدم مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو CSS إلى أنماط Inline؟
الأنماط المضمّنة هي سمات style على عناصر HTML. تتطلب عملاء البريد الإلكتروني وبعض أنظمة CMS وأطر معينة أنماطًا مضمّنة لأنها تزيل أوراق الأنماط الخارجية أو تتجاهلها. تحوّل هذه الأداة قواعد CSS إلى مقتطفات style="..." مضمّنة يمكنك لصقها في HTML. تحدد مواصفات W3C CSS التنسيق المصدر.
تعمل التحويل بالكامل في المتصفح. لا يُرسل أي شيء إلى الخادم. المخرج جاهز للـ HTML. للتضمين الكامل لـ HTML البريد الإلكتروني (مطابقة المحددات للعناصر)، استخدم أداة مخصصة مثل Juice أو ما شابه. تولّد هذه الأداة مقتطفات أنماط من قواعد CSS.
كيفية استخدام هذه الأداة
الصق أو ارفع CSS
انسخ CSS والصقه في المحرر الأيسر. يمكنك أيضًا النقر على رفع لتحميل ملف .css. يحمّل زر مثال بيانات نموذجية. سيظهر خطأ لـ CSS غير الصالح.
راجع المقتطفات المضمّنة
تعرض اللوحة اليمنى مقتطفات الأنماط لكل قاعدة. كل مقتطف هو سلسلة <code>style="..."</code> يمكنك إضافتها إلى عناصر HTML. يتم سرد المحددات حتى تعرف أي عنصر يحصل على أي أنماط.
كيف يعمل التحويل
تحلل الأداة قواعد CSS وتحوّل كل كتلة تصريح إلى سلسلة style="الخاصية: القيمة; ...". يتم سرد المحددات حتى تعرف أي مقتطف ينطبق على أي عنصر. يتبع المخرج بناء جملة سمة style في HTML. للتضمين الكامل HTML+CSS (مطابقة المحددات للعناصر تلقائيًا)، تُوثّق أدوات مثل Juice أو Can I Email دعم عملاء البريد.
متى يساعد CSS إلى Inline
HTML البريد الإلكتروني هو حالة الاستخدام الأكثر شيوعًا. يزيل Gmail وOutlook وكثير من العملاء وسوم <style> وأوراق الأنماط الخارجية. الأنماط المضمّنة هي الطريقة الأكثر موثوقية لتصميم البريد الإلكتروني. يوفر تحويل CSS هنا مقتطفات لإضافتها إلى <td> و<div> وعناصر أخرى.
تتطلب الأدوات المضمّنة ومكونات الويب أو الأنظمة التي لا تقبل <style> العام أنماطًا مضمّنة. يوفر التحويل هنا نقطة بداية. لاستخراج CSS من HTML استخدم مستخرج CSS. لدمج ملفات CSS متعددة استخدم دامج CSS.
الأسئلة الشائعة
هل يضمّن في HTML الكامل؟
تولّد هذه الأداة مقتطفات أنماط من قواعد CSS. لا تحلل HTML ولا تطبق الأنماط على العناصر. للتحويل الكامل (HTML + CSS إلى HTML مع أنماط مضمّنة)، استخدم أداة مثل Juice أو ما شابه.
هل بياناتي خاصة؟
نعم. يعمل التحويل بالكامل في المتصفح. لا يُرسل أي بيانات إلى أي خادم.
ماذا عن الفئات الزائفة؟
لا يمكن تضمين الفئات الزائفة مثل :hover و::before. تدعم الأنماط المضمّنة الخصائص الثابتة فقط. استخدمها للأنماط الأساسية؛ قد يدعم عملاء البريد <style> محدودًا لـ hover.
ماذا عن استعلامات الوسائط؟
لا يمكن تضمين استعلامات الوسائط. الأنماط المضمّنة هي لكل عنصر على حدة. للبريد الإلكتروني المتجاوب، استخدم نهجًا هجينًا: أنماط أساسية مضمّنة و<style> لاستعلامات الوسائط حيث مدعومة.
النوعية والوراثة؟
الأنماط المضمّنة لها نوعية عالية. عند لصق مقتطف في عنصر، يتجاوز معظم الأنماط الأخرى. الترتيب مهم عند انطباق قواعد متعددة على نفس العنصر.
الأدوات ذات الصلة
لمواصفات CSS، انظر W3C CSS. MDN CSS هو المرجع. تُوثّق Can I Email دعم عملاء البريد لـ CSS.