مستخرج CSS
استخراج CSS من ملفات HTML
HTML المدخل
CSS المستخرج
أمثلة على استخراج CSS
استخرج CSS من وسوم <style> والأنماط المضمّنة. مثال:
HTML مع أنماط مضمّنة
HTML المدخل:
CSS المستخرج:
استخدم مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو مستخرج CSS؟
غالبًا ما تحتوي ملفات HTML على CSS مضمّن في وسوم <style> أو سمات style المضمّنة. يحلل مستخرج CSS ملف HTML ويسحب جميع الأنماط إلى ملف CSS واحد. مفيد لنقل الأنماط المضمّنة إلى ملفات أنماط خارجية، وفحص CSS المستخدم في صفحة ما، أو تحويل HTML المحمّل إلى CSS قابل للتعديل. تحدد مواصفات HTML ومواصفات CSS البنية.
تعمل هذه الأداة في المتصفح. الصق HTML أو ارفع ملف .html. تستخرج محتوى كتل <style> والأنماط المضمّنة. لا يُرسل أي شيء إلى الخادم. لتنسيق المخرجات استخدم منسق CSS. لدمج ملفات CSS متعددة استخدم دامج CSS.
كيفية استخدام هذه الأداة
الصق أو ارفع HTML
الصق HTML في المحرر الأيسر أو انقر على رفع لتحميل ملف .html أو .htm. استخدم مثال لتحميل HTML نموذجي مع أنماط مضمّنة.
نسخ أو تنزيل
استخدم نسخ أو تنزيل لحفظ CSS. لتحويل HTML إلى Markdown استخدم HTML إلى Markdown. لـ CSS المضمّن (البريد الإلكتروني) استخدم CSS إلى Inline.
متى يساعد استخراج CSS
عند ترحيل موقع قديم أو تحويل مستند HTML لمرة واحدة إلى مشروع منظم، يكون استخراج CSS هو الخطوة الأولى. غالبًا ما تحتوي قوالب البريد الإلكتروني وصادرات CMS والصفحات المحمّلة على أنماط مضمّنة. توفر هذه الأداة نقطة بداية لإعادة الهيكلة. تُوثّق MDN HTML وMDN CSS المعايير.
لدمج CSS المستخرج مع ملفات أنماط أخرى استخدم دامج CSS. لإضافة بادئات vendor استخدم مضيف بادئات CSS. لتحويل المعالج المسبق استخدم SCSS إلى CSS أو Stylus إلى CSS.
الأسئلة الشائعة
هل بياناتي خاصة؟
نعم. يتم الاستخراج بالكامل في المتصفح. لا يُرسل أي بيانات إلى أي خادم.
هل يستخرج @import أو CSS مرتبط؟
لا. يستخرج فقط محتوى كتل <style> وسمات style المضمّنة. لا يتم جلب ملفات الأنماط الخارجية (@import أو <link>) أو تضمينها.
ماذا عن الأنماط المضمّنة؟
يتم استخراج الأنماط المضمّنة وتغليفها في تعليق للرجوع إليها. تنطبق على عناصر محددة، لذا قد يحتاج المخرج إلى تعديل يدوي عند إعادة الاستخدام.
هل يدعم الأنماط المحددة النطاق؟
يتم استخراج الأنماط المحددة النطاق (مثل Vue scoped، تغليف عروض Angular) كما هي. قد تحتاج سمات النطاق إلى مراعاة عند استخدام CSS في مكان آخر.
هل يمكنني الاستخراج من عنوان URL؟
تعمل هذه الأداة مع HTML الملصق أو المرفوع. لاستخراج من عنوان URL، قم بتنزيل HTML من مكان آخر والصقه هنا.