الأنماط المتتالية (CSS) لجميع ما لديها من منطقيةلا تسمح البساطة فقط بإنشاء حل تصميم فعال ، ولكن أيضًا لتزويد العناصر بإجراءات حقيقية ، ومحاكاة تنفيذ الكود الحقيقي.
أي علامة HTML مرئية -منطقة مستطيلة ذات هيكل ومحتوى محدد. يحتوي العنصر على إشارة إلى الإحداثيات ، والأحجام ، والمسافات البادئة ، والألوان ، والخط ، ونمطه ، وما إلى ذلك. يحدد إطار عنصر CSS المنطقة التي يشغلها ، حيث يقع من حدوده إلى الداخل من خلال العرض المشار إليه في الوصف.
تركيب الوصف
يتم تعيين منطقة وضع العنصر بواسطة الإحداثياتبالنسبة إلى الركن الأيسر العلوي من الصفحة (يسار ، أعلى) ، أفقيًا ورأسيًا (عرض ، ارتفاع). يتم تنفيذ جميع عمليات التصميم والرسوم المتحركة للعنصر في أزواج: "property: value".
يتم تنفيذ الوصف مباشرة في كود الصفحة ، على نمط الإدراج أو في ملف منفصل ، مع الإشارة إليه برابط LINK. بناء الجملة:
#name {الخاصية: القيمة؛ الملكية: القيمة ؛ الملكية: القيمة ؛ ...}
أو
.name {property: value؛ الملكية: القيمة ؛ الملكية: القيمة ؛ ...}
يمكن أن يكون الاسم أيضًا p ، body ، html ، table ، td ... ، أي اسم علامة ترميز HTML. يُسمح بتضمين وصف النمط مباشرة على العنصر.
قبل اتخاذ الخيارات الخاصة بكأنماط الكتابة ، لا يضر أن ترى كيف يتم ذلك على المواقع الشعبية ، أو حفظ كود الصفحة أو الضغط على Ctrl-U لعرضه مباشرة في المتصفح.
المعلمات الأساسية
يتم تقديم إطار CSS الفعلي للعنصرالنمط (نمط الحدود) ، اللون (لون الحدود) ، العرض (عرض الحدود). يمكن وصف كل شيء بخاصية واحدة - الحدود. من الممكن وصف كل حد من حدود الإطار بشكل مستقل (حد أعلى ، حد سفلي ، حد يسار ، حد يمين).
يتم وصف إطار CSS وفقًا للقواعد العامة لأوراق الأنماط المتتالية:
الحدود: 3 بكسل ؛
لون الحدود: أحمر ؛
نمط الحدود: منقطة صلبة مزدوجة متقطعة.
يحدد هذا الوصف عرض الحد إلى 3 بكسل ، واللون إلى اللون الأحمر ، ونمط الجانب: الجانب العلوي مزدوج ، والجانب الأيمن متقطع ، والجزء السفلي متصل ، والجانب الأيسر منقّط.
عرض الحدود: 1 بكسل 2 بكسل 4 بكسل 8 بكسل ؛
لون الحدود: أزرق ؛
نمط الحدود: منقط.
هنا ، أبعاد كل جانب هي أيضًا بشكل تسلسلي ، بدءًا من الأعلى باتجاه عقارب الساعة ، واللون أزرق ، والنمط منقّط.
لون الحدود: أزرق أحمر أخضر أسود ؛
يشير هذا الوصف إلى لون كل جانب على حدة. يمكن أن تتضمن خاصية الحدود عدة معاملات في وقت واحد ، ويمكن تقريب زوايا الحد:
الحدود: صلبة خضراء 1 بكسل ؛
نصف قطر الحدود: 0px 4px 8px 12px؛
-moz-border-radius: 0px 4px 8px 12px ؛
-webkit-border-radius: 0px 4px 8px 12px؛
كيفية جعل الحدود في CSS تعتمدراحة الزائر ، نظرًا لأن تأثير النمط هذا يُستخدم عادةً لأغراض فنية: عندما يكون من المهم إظهار مكان أو حجم منطقة ما بالضبط على الصفحة.
سمك الإطار والغرض منه
عند اختيار سمك الإطار ، يمكنك استخدام px ، pt ،em ... لكن ضع في اعتبارك أنه دائمًا داخل منطقة العنصر. من الصعب افتراض أن حدود CSS لها غرض تصميمي ، ولكن من وجهة نظر فنية ، من الملائم جدًا استخدامها لإبراز عناصر الصفحة.
إذا تم قفل الإطار في الفصل الرئيسي ، إذنمفقود ، ثم بتحديده في: hover pseudo-class ، يمكنك إظهار عنصر الصفحة للزائر عندما يكون مؤشر الماوس عليه ، على سبيل المثال ، حدد عنصر قائمة. تحتاج أحيانًا إلى تحديد شيء ما عن طريق النقر فوق الصورة ، أو سحب شيء ما وإفلاته في مكان ما. من الملائم جدًا استخدام حد منقط هنا بدلاً من تغيير خلفية عنصر أو محتواه.
تحتاج بعض التطبيقات إلى تسليط الضوءمنطقة الصفحة أو اختيار العناصر لمزيد من المعالجة. في هذه الحالة ، في لحظة النقر ، يمكنك إنشاء div بإطار ، وحتى يقوم الزائر بتحرير زر الماوس ، قم بتغيير حجمه ، وعرض نتيجة التحديد بشكل مرئي.
ما وراء المتوخى
دروس CSS ممتعة للغاية ، من المهم أيضًا دراسة أكواد صفحات المواقع الشعبية. ومع ذلك ، يجب أن يكون مورده فريدًا ، ويجب أن يكون له هويته الخاصة.
لا تعطي حدود CSS المتوفرة في بناء الجملةمثل هذا التنوع كمبادرة خاصة بهم. يعد Impromptu بداية رائعة ، ولا شيء يمنع المطور من تكوين إطار العمل الخاص به. علاوة على ذلك ، مع كل إنجازات تقنيات الإنترنت وإمكانيات المعايير الحالية ، هناك العديد من الأفكار الواعدة القائمة على عيوب حقيقية في البنية الحالية ، والتي (بحكم التعريف) كانت دائمًا رسمية بشكل صارم.
على وجه الخصوص ، إذا قمت بالفعل بإنشاء إطار عمل لهؤلاء أوعناصر أخرى ، يبدو أنه من المستحسن القيام بذلك بطريقة شاملة. من خلال وضع علامات على جوانب وزوايا المنطقة ، يمكنك الحصول على تأثيرات مذهلة. ومن خلال تعيين معالجات مناسبة ، يمكنك إنشاء عناصر صفحة ديناميكية عن طريق تغيير الموضع والشكل والمحتوى.
