تعد أوراق الأنماط المتتالية جزءا مهما من تطوير الويب ، مما يسمح لك بتعيين مظهر عناصر صفحة الويب. أحد المتطلبات الأكثر شيوعا لمصممي الويب هو إنشاء مخطط كتلة لتمييزه على الصفحة. في هذه المقالة ، سوف ننظر إلى طريقة بسيطة وفعالة لإضافة مخطط تفصيلي إلى كتلة باستخدام كس.
مخطط الكتلة هو إطار يحيط بمحتوى الكتلة ويسمح لك بفصله عن بقية الصفحة. يمكن استخدام الحد لإنشاء تسلسل هرمي مرئي أو للتأكيد على المعلومات المهمة. يسمح لك تصميم السكتة الدماغية بتعيين سمكها ولونها وأسلوبها ومعلمات أخرى.
كس لديها العديد من الخصائص التي تسمح لك لتعيين مخطط كتلة. وأكثرها شيوعا هي عرض الحدود ولون الحدود ونمط الحدود ونصف قطر الحدود. باستخدام هذه الخصائص ، يمكنك تحقيق مجموعة متنوعة من التأثيرات وإنشاء تصميم فريد.
لتعيين مخطط كتلة في كس ، تحتاج إلى تحديد الكتلة التي تريد إضافة المخطط التفصيلي إليها وتطبيق الخصائص المناسبة. من المهم أن تتذكر أنه سيتم تطبيق الحد فقط على الكتلة التي تم تطبيق الأنماط عليها ، وليس على عناصرها الداخلية.
- إنشاء مخطط كتلة في كس: المبادئ الأساسية
- تطبيق مخطط كتلة باستخدام خاصية كس الحدود
- استخدام العناصر الزائفة لإنشاء مخطط كتلة أكثر تعقيدا
- أمثلة على استخدام السكتات الدماغية كتلة في كس لمختلف عناصر هتمل
- سؤال وجواب
إنشاء مخطط كتلة في كس: المبادئ الأساسية
غالبا ما يواجه مطورو الويب مهمة إضافة مخطط تفصيلي إلى العناصر الموجودة على صفحة الويب. السكتة الدماغية يساعد على تسليط الضوء على العناصر وخلق الفرق البصري بينهما. هناك عدة طرق لإضافة السكتات الدماغية إلى كتل في كس ، ولكن دعونا ننظر إلى المبادئ الأساسية.
- إذا كنت بحاجة إلى مخطط أكثر تعقيدا ، فيمكنك استخدام مجموعة من خصائص الحدود وظلال الصندوق. على سبيل المثال:
.بلوك {
- الحدود: 1 بكسل أسود صلب;
مربع الظل: 0 0 10 بكسل الأزرق;
}
يحدد هذا الرمز مخطط أسود سميك 1 بكسل وتأثير الظل الأزرق لعنصر مع فئة" كتلة". يمكنك تغيير قيم الخصائص لتحقيق التأثير المطلوب.
هذه هي المبادئ الأساسية لإنشاء مخطط كتلة في كس. يمكنك الجمع بين وتجربة خصائص وقيم مختلفة لتحقيق التأثير المطلوب للكتلة الخاصة بك.
تطبيق مخطط كتلة باستخدام خاصية كس الحدود
السماكة-يحدد سمك الحدود بوحدات القياس (على سبيل المثال ، وحدات البكسل أو النسب المئوية);
النمط-يحدد نمط الحدود (على سبيل المثال ، صلب ، منقط ، متقطع ، إلخ.);
- الحدود-اللون: [اللون];
- - العناصر:: قبل
- أو
- و
- اضبط الخصائص الضرورية للعناصر الزائفة، مثل
المحتوى
,
المنصب
,
لون الخلفية
أسفل
يبدو مثال على استخدام العناصر الزائفة لإنشاء مخطط كتلة أكثر تعقيدا كما يلي:
في هذا المثال ، يتم إنشاء كتلة مع فئة "كتلة" ، يوجد بداخلها بعض المحتوى النصي. الزائفة
- العناصر:: قبل
- و
:: بعد
- يتم إضافتها إلى الكتلة ووضعها بالنسبة لها تماما.
يتم تعيين الخصائص للعناصر الزائفة
- أعلى
,
- أسفل
- صحيح
- تم تعيينه على قيمة سالبة
هذه الفقرة لها مخطط تفصيلي.