حدد Window > CSS Properties.
تاريخ آخر تحديث
17 نوفمبر 2022
- دليل مستخدم Illustrator
- التعرف على Illustrator
- مقدمة عن Illustrator
- مساحة العمل
- أساسيات مساحة العمل
- إنشاء المستندات
- تعلّم أسرع في لوحة Discover في Illustrator
- تسريع مهام سير العمل باستخدام شريط المهام السياقي
- شريط الأدوات
- اختصارات لوحة المفاتيح الافتراضية
- تخصيص اختصارات لوحة المفاتيح
- مقدمة حول اللوحات الفنية
- إدارة اللوحات الفنية
- تخصيص مساحة العمل
- اللوحة Properties
- تعيين التفضيلات
- مساحة العمل Touch
- دعم Microsoft Surface Dial في Illustrator
- التراجع عن عمليات التحرير وإدارة محفوظات التصميم
- Rotate view
- المساطر والشبكات والأدلة
- إمكانية الوصول في Illustrator
- عرض الأعمال الفنية
- استخدام Touch Bar مع Illustrator
- الملفات والقوالب
- الأدوات في Illustrator
- لمحة عامة عن الأدوات
- تحديد الأدوات
- أدوات التصفح
- أدوات الطلاء
- أدوات النص
- أدوات الرسم
- أدوات التعديل
- تقنية الذكاء الاصطناعي التوليدي (غير متوفرة في البر الرئيسي للصين)
- الإجراءات السريعة
- Illustrator على iPad
- مقدمة حول Illustrator على iPad
- مساحة العمل
- Documents
- تحديد الكائنات وترتيبها
- الرسم
- الكتابة
- العمل باستخدام الصور
- اللون
- المستندات السحابية
- الأساسيات
- استكشاف الأخطاء وإصلاحها
- إضافة المحتوى وتحريره
- الرسم
- أساسيات الرسم
- تحرير المسارات
- إنشاء عمل فني عالي الدقة
- الرسم باستخدام الأداة Pen أو Curvature أو Pencil
- رسم الخطوط والأشكال البسيطة
- رسم شبكات مستطيلة وقطبية
- رسم التوهجات وتحريرها
- تعقب الصور
- تبسيط المسار
- أدوات الترميز ومجموعات الرموز
- ضبط مقاطع المسار
- تصميم زهرة في 5 خطوات سهلة
- إنشاء شبكة المنظور وتحريرها
- رسم الكائنات وتعديلها على شبكة المنظور
- استخدم الكائنات كرموز للاستخدام المتكرر
- رسم مسارات محاذاة البكسل لعمليات سير عمل الويب
- القياس
- الكائنات ثلاثية الأبعاد والمواد
- اللون
- الرسم
- تحديد الكائنات وترتيبها
- تحديد الكائنات
- الطبقات
- تجميع الكائنات وتوسيعها وإلغاء تجميعها
- نقل الكائنات ومحاذاتها وتوزيعها
- محاذاة الكائنات وترتيبها وتحريكها على مسار
- محاذاة الكائنات مع الحرف الرسومي
- محاذاة الكائنات مع الحروف الرسومية اليابانية
- تكديس الكائنات
- إقفال الكائنات وإخفائها وحذفها
- نسخ الكائنات وتكرارها
- تدوير الكائنات وعكسها
- تشابك الكائنات
- إنشاء نماذج فنية واقعية
- إعادة تشكيل الكائنات
- اقتصاص الصور
- تحويل الكائنات
- تجميع الكائنات
- قص الكائنات واقتطاعها وتقسيمها
- أداة Puppet Warp
- تحديد حجم الكائنات، وقصها، وتشويهها
- مزج الكائنات
- إعادة التشكيل باستخدام المظاريف
- إعادة تشكيل الكائنات باستخدام التأثيرات
- إنشاء أشكال جديدة باستخدام أداتي Shaper وShape Builder
- التعامل مع Live Corners
- تدفقات عمل تغيير الشكل المحسنة مع دعم اللمس
- تحرير أقنعة القطع
- الأشكال المباشرة
- إنشاء أشكال باستخدام الأداة Shape Builder
- التحرير العمومي
- Type
- إضافة النص والعمل على كائنات الكتابة
- Reflow Viewer
- إنشاء قوائم ذات تعداد نقطي ورقمي
- إدارة منطقة النص
- الخطوط والطباعة
- تحويل النص داخل الصور إلى نص قابل للتحرير
- إضافة التنسيق الأساسي إلى النص
- إضافة التنسيق المتقدم إلى النص
- استيراد نص وتصديره
- تنسيق الفقرات
- الحروف الخاصة
- إنشاء كتابة على مسار
- أنماط الفقرات والحروف
- علامات التبويب
- إضافة الخطوط المفقودة من Adobe Fonts
- الكتابة بالعربية والعبرية
- الخطوط | الأسئلة المتداولة وتلميحات استكشاف الأخطاء وإصلاحها
- التصميمات الطباعية الإبداعية
- تغيير حجم الكتابة وتدويرها
- المسافات بين الأسطر والحروف
- الوصل وفواصل الأسطر
- التدقيق الإملائي وقواميس اللغة
- تنسيق الحروف الآسيوية
- أدوات التأليف للبرامج النصية الآسيوية
- إنشاء التصميمات النصية باستخدام كائنات المزج
- إنشاء ملصق نصي باستخدام تعقب الصورة
- إنشاء تأثيرات خاصة
- رسومات الويب
- الرسم
- الاستيراد، والتصدير، والحفظ
- Import
- Creative Cloud Libraries في Illustrator
- الحفظ والتصدير
- الطباعة
- الإعداد للطباعة
- الطباعة
- تشغيل المهام تلقائيًا
- استكشاف الأخطاء وإصلاحها
- المشكلات التي تم إصلاحها
- المشكلات المعروفة
- مشكلات الأعطال
- استعادة الملفات بعد التعطل
- الوضع الآمن
- مشكلات الملفات
- تنسيقات الملفات المعتمدة
- مشكلات برنامج تشغيل جهاز وحدة معالجة الرسومات
- مشكلات أجهزة Wacom
- مشكلات ملفات DLL
- مشكلات الذاكرة
- مشكلات ملفات التفضيلات
- مشكلات الخطوط
- مشكلات الطابعة
- مشاركة تقرير الأعطال مع Adobe
- تحسين أداء Illustrator
- المشكلات التي تم إصلاحها
تعرف على كيفية اختيار تصدير تعليمات CSS البرمجية للكائنات الفردية، أو المخطط بالكامل المصمم في Illustrator.
يمكنك إنشاء التصميم لصفحة HTML في Illustrator. وهذا مفيد كدليل مرئي جيد لمطور الويب الذي يمكنه بعد ذلك ترميز المخطط والأنماط والكائنات إلى صفحة في محرر HTML. ومع ذلك، فإن محاكاة المظهر والموضع الدقيقين للمكونات والكائنات هي عملية مملة ومستغرقة للكثير من الوقت.
باستخدام Illustrator، عند إنشاء مخطط لصفحة HTML، يمكنك أيضًا إنشاء تعليمات CSS البرمجية الأساسية واستخراجها، وهي التي تحدد مظهر المكونات والكائنات على الصفحة. يتيح CSS التحكم بمظهر النصوص والكائنات (بشكل يشبه أنماط الأحرف والرسوم).
عرض تعليمات CSS البرمجية واستخراجها
لوحة CSS Properties تتيح للمستخدمين القيام بالآتي:
- عرض تعليمات CSS البرمجية للكائنات المحددة ونسخها.
- نسخ عنصر واحد أو أكثر، أو جميع عناصر Illustrator المحددة لملف CSS.
- تصدير الصور النقطية المستخدمة.
- إنشاء تعليمات CSS برمجية خاصة بالمتصفح.
A. تحذير، في حالة تعذر تحويل بعض الأنماط إلى تعليمات CSS البرمجية B. مربع الحوار CSS Export Options C. تصدير Selected CSS إلى ملف D. نسخ Selected Style إلى الحافظة E. Generate CSS F. قائمة لوحة CSS Properties G. الأنماط المستخدمة في الكائنات المحددة H. تعليمات CSS البرمجية
لعرض واستخراج تعليمات CSS البرمجية، اتبع الخطوات الموضحة:
-
ملاحظة:
تأكد من أن الكائنات في مستند Illustrator الخاص بك مسمّاة في لوحة Layer.
-
لعرض تعليمات CSS البرمجية المنشأة:
لكائن واحد:
حدد كائنًا. تعليمات CSS البرمجية للكائن معروض في لوحة CSS Properties.
لكائنات متعددة:
اضغط باستمرار على Shift، وحدد كائنات متعددة ثم حدد Generate CSS في لوحة CSS Properties.
لجميع الكائنات:
اضغط على Ctrl/Cmd + A لتحديد جميع الكائنات، ثم حدد Generate CSS في لوحة CSS Properties.
-
للحصول على رمز CSS الذي تم إنشاؤه، قم بأحد الإجراءات التالية:
لنسخ التعليمات البرمجية المحددة:
- حدد تعليمات برمجية محددة ثم حدد Copy Selected Style لنسخه إلى الحافظة.
- حدد قائمة لوحة CSS Properties ثم حدد Export Selected CSS لتصدير ملف.
لنسخ جميع التعليمات البرمجية:
- لا تقم بأي تحديد في تعليمات CSS البرمجية وحدد Copy Selected Style لنسخها إلى الحافظة.
- حدد قائمة لوحة CSS Properties ثم حدد Export All لتصدير ملف.
-
أثناء حفظ تعليمات CSS البرمجية في ملف، اختر من بين الخيارات الواردة في حوار CSS Export Options.
خيارات تصدير CSS
خيارات تصدير CSS
عينة تعليمات CSS البرمجية
مستطيل مطبّق عليه تدرج لوني (جميع المتصفحات)
.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}
مستطيل مع التدرج اللوني المطبّق (المتصفحات المستندة إلى مجموعة أدوات الويب فقط)
.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}
الكائنات المتعددة
.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}
الموضوعات ذات الصلة
هل لديك سؤال أو فكرة؟
إذا كان لديك سؤال أو لديك فكرة لمشاركتها، فأقبل وشارك في مجتمع Adobe Illustrator. نحن نحب أن نسمع منك.
