CSS هي لغة كمبيوتر تستخدم للتعبير عن أنماط الملفات مثل HTML (تطبيق للغة التوصيف المعممة القياسية) أو XML (مجموعة فرعية من لغة التوصيف المعممة القياسية).

لا تستطيع CSS تعديل صفحات الويب بشكل ثابت فحسب، بل يمكنها أيضًا التعاون مع لغات البرمجة النصية المختلفة لتنسيق العناصر المختلفة لصفحات الويب ديناميكيًا.

يمكن لـ CSS إجراء تحكم دقيق على مستوى البكسل في تخطيط مواضع العناصر في صفحات الويب، ويدعم جميع أحجام الخطوط وأنماطها تقريبًا، ولديه القدرة على تحرير كائنات صفحة الويب وأنماط النماذج. للحصول على دراسة متعمقة، يرجى البحث عن "الفيديو التعليمي لموقع الويب الصيني php CSS" على Baidu والتعلم عبر الإنترنت مجانًا.

1. السمات المشتركة

الاسم: الاسم، يمكن تكراره، يمكن أن يكون هو نفسه؛ اسم الفئة: يمكن تكراره، أو يمكن أن يكون له عدة معرفات، مثل

العنوان: عنوان يمكن إضافته في العلامة، مثل ;/

2. علاقة العلامة

العلاقة السليلة: العلاقة بين الوالدين والطفل (بما في ذلك العلاقة)؛

العلاقة الأخوية: علاقة الأب نفسه؛

3.أوراق الأنماط المتتالية CSS

تعليقات CSS: /محتوى التعليق مكتوب هنا ليراه المبرمج، ولن يتم عرضه على الصفحة/;

القواعد النحوية لـ CSS: يجب إدخال جميع الرموز باستخدام طريقة الإدخال باللغة الإنجليزية، بأحرف صغيرة، ويجب كتابة السمات بين قوسين متعرجين. يجب أن تنتهي كل عبارة سمة بفاصلة منقوطة، ويجب أن تحتوي قيمة السمة على وحدة بكسل (تنسيق بكسل)؛ : السمة: قيمة السمة؛

4. كيفية تقديم CSS

مقدمة مضمنة: طريقة الإدخال لإضافة الأنماط في العلامات؛ التنسيق: المحتوى; وhtml الهيكل غير منفصل؛ نطاق التأثير موجود فقط في المقدمة المضمنة: أضف إلى رأس صفحة الويب؛ قابلية صيانة الكود ضعيفة نسبيًا، ولا يوجد فصل بين كود CSS وبنية HTML، ونطاق التأثير يقتصر على الصفحة الحالية فقط؛

مقدمة عن الرابط الخارجي: أنشئ ملف xx.css خارج صفحة الويب، واستخدم في رأس صفحة الويب؛ الكود قابل للصيانة إلى حد كبير. كود CSS منفصل تمامًا عن بنية HTML، مما يؤثر على جميع صفحات الويب التي تقدم ملفات CSS على موقع الويب بأكمله؛

5. بناء جملة CSS الأساسي:

التنسيق الهيكلي: محدد {attribute: قيمة السمة؛ السمة: قيمة السمة؛...}؛ مثال: p{background:red;color:gray;size:20px;};Selector: أداة لتحديد عناصر الصفحة؛

الأقواس: تتم كتابة محتوى النمط داخل الأقواس؛

6. محدد

المحدد الأساسي:

محدد عالمي: يستخدم لتهيئة النمط الافتراضي لصفحة الويب، المكتوب في بداية ورقة الأنماط؛ التنسيق: *{padding:0;margin:0;}; {اللون: أخضر}؛ محدد الفئة: اختر لتحديد نمط محدد الفئة؛ اسم الفئة {خلفية: وردي؛}؛ أنماط المحتوى للعديد من الكتل هي نفسها، ثم فقط أعطها نفس النمط؛

محدد المعرف: معرف فريد، لا يمكن تكراره؛ التنسيق: #id name{backgound-image:url(1.jpg);} ملاحظة: تم تعريف اسم المعرف في العلامة id="one"; ، كم مرة عندما يكون نمط المحتوى لكل كتلة هو نفسه، يجب أن تكون أسماء المعرفات للعديد من الكتل مختلفة؛؛

الفرق بين المعرف والفئة: انتبه إلى النقطة السابقة - يجب أن يكون المعرف قادرًا على تحديد عقدة DOM بشكل فريد. إذا كنت تستخدم محدد المعرف في جميع أنحاء المقالة، حتى لو كان نمطا عقدة DOM متماثلين تمامًا، فيجب عليك كتابة نمط العقدة مرتين إذا كنت تريد الحفاظ عليه لاحقًا، فيجب عليك الحفاظ على الكود في كلا المكانين! ! ! يزيد بشكل كبير من تكاليف الصيانة؛

محدد الفئة الزائفة: مبدأ LoVe HAte المتسلسل، يمكنك القفز فوقه، لكن لا يمكن تغيير الترتيب، وهي حالة الارتباط (رابط)، وحالة الزيارة (تمت الزيارة)، والحالة النشطة (التمرير)، وحالة النقر (نشط)؛

فئة رسم النقاط: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} النمط عند الحصول على التركيز a:focus{}; ملاحظة: يمكن إضافة سمات النص وألوان الخلفية والصور إلى السمات؛ a{} وa:link{} يحققان نفس التأثير في فئة القائمة: li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};ملاحظة: يمكن إضافة سمات السلسلة النصية ولون الخلفية والصور إلى السمات؛

محدد مركب:

محدد المجموعة (محدد الاتحاد، محدد متعدد): يستخدم لإضافة نفس النمط إلى عناصر متعددة، على سبيل المثال: .one، #one، a،span{color:red;font-size:14px;} يعني الفئة الأولى، #one؛ والعلامة والعلامة الممتدة لها سمات مشتركة؛ محدد السليل: إضافة سمات إلى عناصر الفئة الفرعية؛ مثال: .one a{text-decoration:none;} يعني المحتوى الذي تم تعديله بواسطة علامة سليل الفئة الأولى بدون تسطير؛ محدد العناصر الفرعية (محدد محدد): إضافة سمات إلى العنصر الفرعي المحدد، على سبيل المثال: #one>p{color:red;}; يعني إضافة المحتوى الموجود على العلامة p لابن خاصية محدد المعرف؛

محدد العناصر المجاورة:

1. يضيف محددان شقيقان متجاوران سمات إلى أنفسهم، ولكنهم يضيفون سمات فقط إلى الأخ التالي؛ .one+p{background:red;}; 2.one~p{background:green} يعني أنه كذلك لإضافة سمات إلى جميع عناصر علامة p بعد المحدد الواحد، بشرط أن يكون لديهم فئة أصل؛

محدد السمات:

1. أضف سمات إلى العناصر ذات السمات img[id]{background:red;} أضف سمات إلى العناصر ذات المعرف؛

إضافة سمات إلى العناصر ذات قيم السمات المحددة: img[src="b.jpg"]{background:red;}إضافة سمات إلى العناصر باستخدام b.jpg;

3. أضف سمات إلى العناصر التي تبدأ بالحرف المحدد: img[src^="b"]{background:red;} أضف سمات إلى جميع العناصر التي تبدأ بالحرف b؛ 4. يحتوي المحدد على قيمة السمة المحددة في النهاية : img[src$="b"]{background:red;} أضف سمات إلى جميع العناصر التي تنتهي بـ b 5. يحتوي المحدد على عناصر تحتوي على قيمة السمة المحددة: img[src*="b" ]{background:red ;} إضافة سمات إلى جميع العناصر التي تحتوي على b;

7. إدراج العناصر (تصنيف طرق العرض)

عناصر الكتلة: تستخدم في التنضيد وتشمل الهياكل النموذجية: p، p، li، h1، dt؛

يتم عرض العنصر على خط خاص به (بغض النظر عن العرض) ويمكن ضبط الارتفاع؛

عندما يتم تداخل عنصر على مستوى الكتلة، إذا لم يتم تعيين عرض العنصر الفرعي، فسيكون عرض العنصر الفرعي هو عرض العنصر الأصلي؛

العناصر المضمنة: تستخدم لإضافة الأنماط؛span، a، الخط، قوي؛ ملاحظة: لا تعطي الهوامش العلوية والسفلية والحشو للعناصر المضمنة );

يتم عرض العناصر على سطر واحد؛

لا يمكن ضبط العرض والارتفاع مباشرة؛

عناصر الكتلة المضمنة: الصورة، الإدخال؛

يتم عرض العناصر على سطر واحد؛

يمكن ضبط العرض والارتفاع؛

علاقة التحويل: تحتوي العناصر المضمنة على عناصر كتلة، ويمكن أن تحتوي عناصر الكتلة على عناصر مضمنة؛

العرض: مضمن يحول العناصر إلى عناصر مضمنة العرض: كتلة مضمنة تحول العناصر إلى عناصر كتلة مضمنة

العرض: كتلة تحويل العنصر إلى عنصر كتلة

8.خصائص CSS

الخصائص المتعلقة بالخط:

حجم الخط: حجم الخط، عدد البكسل، بكسل؛ وزن الخط: سمك الخط، غامق (700-900)، عادي، يمكنك الكتابة بنمط الخط 100-900؛ : الخط، مايكروسوفت YaHei، HeiTi؛

تسلسل السمات: الخط: نمط الخط، وزن الخط، حجم الخط/ارتفاع الخط، عائلة الخط؛ ملاحظة: يجب أن يتضمن تسلسل سمة الخط حجم الخط وعائلة الخط (يمكن حذف السمات الأخرى حجم الخط والخط)؛ - لا يمكن تغيير ترتيب الأسرة؛

نص:

اللون: اللون؛ المسافة البادئة للنص: المسافة البادئة [الوحدة هي em]؛ زخرفة النص: سطر النص [تسطير، خط علوي، يتوسطه خط، لا يوجد تباعد بين الكلمات]؛ المسافة؛ محاذاة النص: محاذاة أفقية [افتراضي لليسار، للوسط، لليمين]؛

ارتفاع الخط: ارتفاع السطر، ارتفاع السطر حيث يوجد النص [عندما يكون ارتفاع السطر مساويًا لارتفاع العنصر، يكون النص في المنتصف رأسيًا]؛

الحجم: هو حجم عنصر الكتلة ولا يمكن ضبط العرض والارتفاع للعناصر المضمنة.

العرض: العرض؛

الارتفاع: الارتفاع؛

سمات القائمة ul وli: يمكن إضافة نوع نمط القائمة إلى ul ولكن لا يلزم إضافته إلى li؛

list-style-type:none؛ إزالة الرموز والمربعات والدوائر والدوائر الصلبة على القرص لا تحتاج إلى كتابتها بعد إضافة الصور list-style-type:none;list-style-image:url(1.jpg) حدود الصورة: 1 بكسل باللون الأحمر الثابت؛ قم بتعيين حد لـ ul ككل

نمط القائمة: موضع الصورة في الخارج: في الداخل، في الخارج

خلفية:

لون الخلفية - لون الخلفية - صورة الخلفية ملاحظة: عند ضبط صورة الخلفية، تأكد من ضبط عرض الخلفية وارتفاعها؛ تكرار - (القيمة الافتراضية) |. x |.(تبليط أفقي) تكرار-y (تبليط عمودي) موقف الخلفية: تعيين القيمة المحددة: يسار|.أسفل|.cneter; الرقم، القيمة الأولى تمثل الاتجاه الأفقي، والقيمة الثانية تمثل الاتجاه الرأسي، واضبط تنسيق إعداد صورة الخلفية الأمامية على صورة الخلفية؛ لتعيين ما إذا كانت الخلفية ثابتة مرفق الخلفية: التمرير (القيمة الافتراضية) ثابت (؛ الصورة ثابتة)؛

الكتابة المشتركة للسمات: لا يوجد حد للكمية أو الطلب: الخلفية:url("") red no-peat 30px 40px;

ارتفاع الخط: نموذج الصندوق: يستخدم لتخطيط صفحة الويب، ويجب ضبط العرض

خصائص حدود الصندوق: المكونات:

عرض الحدود وارتفاعها: عرض الحدود: 1 بكسل؛ لون الحدود: لون الحدود: أحمر؛ نمط الحدود: نمط الحدود: خط متصل صلب/خط منقط/خط منقط متقطع/لا شيء؛ ملاحظة: لا توجد قيود على الترتيب عند كتابة السمات معًا، ولا يلزم كتابة لون الحدود، ولا يلزم كتابة عرض الحدود. طرق كتابة منفصلة: حدود الحدود: حشو الهامش الداخلي: اضبط المسافة بين المحتوى وحدود الصندوق

الهامش: ضبط المسافة بين الصناديق

ع {العرض: 300 بكسل؛ الارتفاع: 200 بكسل؛ الحد العلوي: 1 بكسل أحمر خالص؛ الحد الأيسر: 1 بكسل أحمر خالص؛ الحد الأيمن: 1 بكسل أحمر خالص؛ الحد السفلي: 1 بكسل أحمر خالص؛}

لتعيين الخصائص بشكل فردي:

لون الحدود العلوي: أحمر؛ نمط الحدود العلوي: صلب؛ عرض الحدود العلوي: 1 بكسل؛

حجم الصندوق:

حيث يؤثر حجم الصندوق: يقع المربع الموروث ضمن نطاق عرض المربع الأصلي، ولن تؤثر قيمة الحشو على حجم الصندوق. حساب حجم الصندوق: العرض = عرض المحتوى + الحدود اليسرى واليمنى + الحشو الأيسر والأيمن

يمكن أن تؤثر الحدود على حجم الصندوق ويمكن أن تؤثر الحشوة على حجم الصندوق.

في المستقبل، عند تنفيذ تخطيط مربع الصفحة، إذا تم تعيين الهوامش الداخلية للمربع، فيجب طرح القيمة المقابلة من عرض المحتوى أو ارتفاعه.

الهامش: ضبط المسافة بين الصناديق

توسيط المربع: سمة الكتابة المشتركة:

يتم توسيط المربع الموجود أسفل التدفق القياسي: الهامش: 0px تلقائي؛ يتم توسيط المربع الموجود: أولاً، خذ نصف المربع الأصلي، ثم ارجع إلى نصف عرضه: 10px، أعلى، يمين، أسفل، يسار، 10pxMargin: 10px، 20px، أعلى، أسفل، 10px، يسار ويمين، 20pxMargin: 10px 20px 30px 10px أعلى، 20px يسار ويمين، 30px أسفل

الهامش: 10px 20px 30px 40px أعلى اليمين أسفل اليسار

يلاحظ:

سمة الكتابة المشتركة:

الحشو: 10 بكسل؛ المسافة بين الأعلى واليمين والأسفل واليسار هي 10 بكسل الحشو: 10 بكسل 20 بكسل؛

الحشو: 10 بكسل 20 بكسل 30 بكسل 40 بكسل؛

عند عرض مربعين عموديا، تخضع الهوامش للقيمة القصوى المحددة (الحالة الأولى لدمج الهوامش) عند عرض مربعين أفقيا، تتداخل الهوامش وتنهار الهوامش (مشكلة صعبة) لحل الخطوة:

الحشو: اضبط المسافة بين المحتوى وحدود الصندوق

قم بتعيين حد للمربع الأصل

تعيين الفائض: مخفي للمربع الأصلي؛

هوامش واضحة:

الطريقة الأولى: *{الحشوة: 0؛ الهامش: 0؛}

الطريقة الثانية: النص،ul،li،p،h1،h2،h3،h4،h5،h6،dl،dt،dd،p،span{margin:0px;padding:0px;}

9. ثلاث خصائص رئيسية لـ CSS

الميراث:

قابل للتوريث: اللون، محاذاة النص، المسافة البادئة للنص، حجم الخط، وزن الخط، عائلة الخط غير قابل للتوريث: زخرفة النص، الحدود، العرض، الهامش، التعويم، الحشو فرضية حدوث الميراث هي بين العلامات التي تنتمي إلى علاقة متداخلة، يمكن توريث لون النص؛ يمكن توريث السمات المتعلقة بالنص؛

الميزات الخاصة:

لا يمكن وراثة لون النص الموجود في العنصر الأصلي (متتاليًا)

التداخل: يشير التداخل إلى تغطية الأنماط

إن الطبيعة المتتالية للأنماط ليس لها علاقة بالترتيب الذي يتم استدعاء الأنماط به، ولكنها مرتبطة بالترتيب الذي يتم به تعريف الأنماط.

فرضية حدوث التتالي: صراع الأسلوب

أولوية:

الوزن: المقدمة المضمنة (1000) > المعرف (100) > الفئة (10) > التسمية (1) > عام (0) أضف الأوزان.

الأوزان هي نفسها، والأنماط التالية سوف تعمل

10. مذكرات المعرفة التكميلية

كتابة تحسين النموذج: اسم المستخدم:رمز قائمة التنسيق: نمط القائمة: لا يوجد دمج النموذج: border-collapse:collapse (Set دمج حدود الجدول، ينطبق على الجداول) Bfc تجاوز "سياق التنسيق":

مرئي: القيمة الافتراضية. لن يتم قطع المحتوى وسيتم عرضه خارج مربع العنصر مخفيًا: سيتم قطع المحتوى وسيكون المحتوى المتبقي غير مرئي عندما تتغير الصورة، سيغير العنصر الأصلي موضعه أيضًا يمكن للعنصر الأصلي أن يجعل العنصر الأصلي يغير موضعه، ويظل موضع العنصر دون تغيير التمرير: سيتم قطع المحتوى، لكن المتصفح سيعرض أشرطة التمرير لعرض المحتوى المتبقي

تلقائي: إذا تم اقتطاع المحتوى، فسيعرض المتصفح أشرطة التمرير لعرض بقية المحتوى

11. التدفق القياسي: يتم عرض عناصر مستوى الكتلة في سطر واحد؛ وضع عرض التدفق القياسي: وضع العرض الافتراضي للعناصر

12. العائمة: تُستخدم العائمة لحل مشكلة التفاف النص والصور المستخدمة لإنشاء أشرطة التنقل وتخطيطات صفحات الويب

الاستخدام: تعويم: يسار | يمين الميزات: تطفو ما تريد

العناصر التي تم تعيينها ليتم تعويمها لا تشغل موضعها الأصلي (خارج البرنامج النصي)، مما يسمح بعرض عناصر مستوى الكتلة كعناصر عائمة على سطر واحد ويمكن تحويلها إلى عناصر كتلة مضمّنة.

أثناء عملية تحويل الوضع، استخدم العرض إذا استطعت.

تعويم واضح:

التعريف: مسح العائمة لا يعني حذف العائمة؛ يشير مسح العائمة إلى تأثير مسح العائمة. انتبه إلى توقيت الاستخدام: عندما يتم تعيين العنصر الفرعي على أنه عائم وليس للعنصر الأصلي ارتفاع، سيتم الخلط بين تخطيط الصفحة. ؛ في هذه الحالة، قم بمسح العوامة.

مسح الطريقة العائمة: [x] ملاحظة: قم بإضافة عنصر كتلة فارغ (

13. تحديد المواقع: الاتجاه: يسار، يمين، أعلى، أسفل (يرجى الانتقال إلى قناة CSS التعليمية لموقع php الصيني للحصول على التفاصيل)

تحديد المواقع الثابتة: تحديد المواقع الثابتة هو طريقة عرض التدفق القياسي للعناصر. الموضع: ثابت هو الموضع الافتراضي.

الموضع المطلق: الموضع بالنسبة للعنصر الأصلي أو العنصر الأصل للعنصر المحدد، في حالة عدم وجود العنصر الأصلي وعنصر السلف، سيتم العثور على الطبقة المحتوية الأصلية ولا تشغل الموضع السابق: مطلق؛

عند تعيين الموضع المطلق لعنصر واحد، يتم تعيين الموضع بناءً على الزاوية اليسرى العليا من المتصفح (النص الأساسي). عندما تكون المربعات متداخلة، إذا لم يقم المربع الأصلي بتعيين الموضع، فإن المربع الفرعي يعين الموضع بناءً على الزاوية اليسرى العليا من المتصفح. عندما يتم تداخل المربعات، إذا تم وضع المربع الأصلي، فسيتم وضع المربع الفرعي بناءً على الزاوية اليسرى العليا من المربع الأصلي. يتم تعيين الموضع المطلق للمربع، ولا يشغل المربع أي موضع (خارج البرنامج النصي). بعد تعيين الموضع المطلق للعنصر المضمن، يتم تحويل العنصر إلى عنصر كتلة مضمن.

ملاحظة: بعد تعيين العنصر على الموضع المطلق، يمكن تعيين موضع العنصر بشكل تعسفي من خلال اسم الاتجاه المحدد.

الموضع النسبي: بالنسبة إلى الموضع الأصلي للعنصر، سيشغل الموضع السابق: نسبي؛

بعد تعيين العنصر على الموضع النسبي، فإنه يشغل الموضع الأصلي. لا يمكن تعيين الموضع النسبي كمرجع.

يجب أن يكون الطفل في نفس موضع الأصل (يتم تعيين العنصر الفرعي على الموضع المطلق، ويتم تعيين العنصر الأصل على الموضع النسبي)

الموضع الثابت: بالنسبة للموضع الثابت بأكمله، لا يشغل الموضع الثابت (خارج التسمية)؛ تحويل العناصر المضمنة إلى موضع عناصر الكتلة المضمنة: ثابت

قضايا التسلسل الهرمي:

لن تكون هناك مشاكل هرمية إلا عند تعيين الموضع. هناك تموضع نسبي ومطلق ومواضع أخرى بين العناصر الشقيقة التي تكون بنية مستند HTML الخاصة بها في الخلف والتي تكون في الطبقة الخارجية (المستوى الأعلى).

مؤشر Z: قم بتعيين المستوى، والقيمة عبارة عن رقم، طالما أن هناك تحديد موضع، فسيتم استخدام إعداد تحديد الموضع.

14. CSS Elf Rabbit: حدد المستندات الشفافة

تحتوي نقطة النظام الإحداثي في ​​المتصفح على الاتجاه الصحيح باعتباره الاتجاه الإيجابي، والاتجاه الموجود أسفل النقطة هو اتجاه موجب لكائن CSS وهو طريقة لمعالجة صورة الخلفية لصفحة الويب؛

استخدام العفاريت

عند استخدام fw، يجب عليك فتح خريطة الكائنات في الوضع المفتوح. عند استخدام خريطة الكائنات كصورة خلفية، غالبًا ما يتم استخدامها جنبًا إلى جنب مع موضع الخلفية لقياس إحداثيات العناصر في خريطة الكائنات محدد.

أو استخدم الحرف المختصر: k

15. رؤية CSS

الفائض: مخفي إخفاء عرض الجزء الزائد: لا شيء إخفاء العنصر العرض المباشر: كتلة عرض العنصر (يتوافق بشكل أفضل مع js) الرؤية: مخفي إخفاء عرض العنصر: لا شيء إخفاء العنصر ولا يشغل الموضع

الرؤية: إخفاء العنصر واحتلال موضعه الأصلي

16. توسيط الصور والنصوص

يحتوي كل عنصر من عناصر inlne-block على محاذاة رأسية افتراضية: خط الأساس

المحاذاة العمودية: المحاذاة العمودية الوسطى والكتلة المضمنة متطابقتان بشكل أفضل؛

17. تجنب التدفق غير القياسي

في عملية تخطيط صفحة الويب، استخدم التدفق القياسي إذا استطعت. لا يمكن للتدفق القياسي حل الوضع العائم.

استخدم الهامش الأيسر/الهامش الأيمن واضبط القيمة على تلقائي لدفع الصندوق تلقائيًا إلى الجانبين الخارجيين.

18. مواصفات إدراج الملصق

يمكن أن تحتوي علامة p على أي علامة ضمن الدفق القياسي. لا يمكن أن تحتوي علامة p على علامة p وعلامة العنوان وملاحظة عنوان علامة القائمة يمكن أن تحتوي على علامات أخرى

يجب ألا تحتوي العناصر المضمنة على علامات أخرى

19. ملخص تحديد العرض والارتفاع

بعد التعويم، يمكن للعنصر ضبط العرض والارتفاع. بعد تحديد الموضع المطلق، يمكن للعنصر ضبط العرض والارتفاع.

بعد تحديد موضع ثابت، يمكن للعنصر ضبط العرض والارتفاع

20. الترقية إلى CSS3

CSS3 وCSS2: CSS قوي والكود موجز

محدد الفئة الزائفة:

العنصر الفرعي الأول: الطفل الأول أفضل عنصر: الطفل الأخير العنصر الفرعي n: nth-child (n)؛ 2ن+1))

العنصر ذو الأرقام الزوجية: nth-child(even); أو (nth-child(2n))

ظل النص: ظل النص: أفقي، رأسي، ظل ظل مربع: ظل مربع: أفقي، رأسي، ظل

الخلفية: الخلفية