يتم إملاء النمط والتصميم المرئي لموقع الويب بواسطة CSS أو أوراق الأنماط المتتالية. هذه هي المستندات التي تشكل ترميز HTML لصفحة الويب ، مما يوفر لمتصفحات الويب إرشادات حول كيفية عرض الصفحات الناتجة عن ذلك الترميز. يعالج CSS تنسيق الصفحة ، بالإضافة إلى اللون وصور الخلفية والطباعة وأكثر من ذلك بكثير.
إذا نظرت إلى ملف CSS ، سترى أنه مثل أي لغة ترميز أو ترميز ، فإن هذه الملفات لها بنية محددة لها. تتكون كل ورقة أنماط من عدد من قواعد CSS. هذه القواعد ، عندما تؤخذ بالكامل ، هي أنماط الموقع.
أجزاء من قاعدة CSS
تتكون قاعدة CSS من جزأين متميزين - المحدد والإعلان. يحدد المحدد ما يتم تصميمه على الصفحة والإعلان هو كيف يجب أن يكون نصب. فمثلا:
ص {
اللون: # 000؛
}
هذه هي قاعدة CSS. الجزء المحدد هو "p" ، وهو محدد العنصر "للفقرات". لذلك ، سيحدد كل الفقرات في موقع ما وسيزودهم بهذا النمط (ما لم تكن هناك فقرات مستهدفة بواسطة أنماط أكثر تحديدًا في مكان آخر في وثيقة CSS الخاصة بك).
الجزء من القاعدة التي تقول "اللون: # 000 ؛" هو ما يعرف باسم الإعلان. يتكون هذا الإعلان من قطعتين - الملكية والقيمة.
الخاصية هي قطعة "اللون" من هذا الإعلان. انه يملي أي جانب من محدد سيتم تغيير بصريا.
القيمة هي ما سيتم تغيير خاصية CSS المختارة إليه. في مثالنا ، نحن نستخدم القيمة سداسي عشرية من # 000 ، وهو اختصار CSS لـ "أسود".
لذا ، باستخدام قاعدة CSS هذه ، ستعرض الصفحة الخاصة بنا الفقرات باللون الأسود.
أساسيات خصائص CSS
عندما تكتب خصائص CSS ، لا يمكنك ببساطة تكوينها كما تراه مناسبًا. بالنسبة إلى المثيلات ، يُعد "color" خاصية CSS فعلية ، لذا يمكنك استخدامها. هذه الخاصية هي ما يحدد لون النص لعنصر. إذا حاولت استخدام "لون النص" أو "لون الخط" كخصائص CSS ، فسيخفق ذلك لأنها ليست أجزاء فعلية من لغة CSS.
مثال آخر هو "صورة الخلفية" الملكية. تحدد هذه الخاصية صورة يمكن استخدامها في الخلفية ، مثل:
.شعار {
background-image: url (/images/company-logo.png)؛
}
إذا حاولت استخدام "background-picture" أو "background-graphic" كخاصية ، فسوف تفشل لأنها ، مرة أخرى ، هذه ليست خصائص CSS حقيقية.
بعض خصائص CSS
هناك عدد من خصائص CSS التي يمكنك استخدامها لتصميم موقع. بعض الأمثلة هي:
- الحدود (بما في ذلك نمط الحدود ، لون الحدود ، وعرض الحدود)
- الحشو (بما في ذلك الحشو أعلى ، الحشو ، اليمين ، أسفل الحشو ، والحشو اليسار)
- الهوامش (بما فيها الهامش العلوي ، الهامش - الهامش ، الهامش السفلي ، والهامش - اليسار)
- خط العائلة
- حجم الخط
- لون الخلفية
- عرض
- ارتفاع
تعتبر خصائص CSS هذه رائعة لاستخدامها كأمثلة ، لأنها كلها بسيطة للغاية ، وحتى إذا كنت لا تعرف CSS ، يمكنك على الأرجح تخمين ما تقوم به بناءً على أسمائها.
هناك خصائص CSS أخرى ستواجهها أيضًا والتي قد لا تكون واضحة تمامًا كيف تعمل وفقًا لأسمائها:
- تطفو
- واضح
- فيض
- تحويل النص
- Z-مؤشر
عندما تتعمق في تصميم الويب ، سوف تواجه (وتستخدم) كل هذه الخصائص وأكثر!
خصائص تحتاج إلى قيم
في كل مرة تستخدم فيها خاصية ، يجب أن تعطيها قيمة - وبعض الخصائص لا يمكنها قبول سوى قيم معينة.
في المثال الأول من خاصية "اللون" ، نحتاج إلى استخدام قيمة لونية. يمكن أن يكون هذا قيمة سداسي عشرية أو قيمة RGBA أو حتى لون كلمات رئيسية . ومع ذلك ، فإن أيًا من تلك القيم سيعمل ، إذا استخدمت كلمة "قاتمة" مع هذه الخاصية ، فلن تفعل شيئًا لأنه ، كما وصفت هذه الكلمة ، ليست قيمة معروفة في CSS.
يتطلب المثال الثاني من "صورة الخلفية" استخدام مسار صورة لجلب صورة فعلية من ملفات موقعك. هذه هي القيمة / بناء الجملة المطلوبة.
تحتوي جميع خصائص CSS على القيم التي تتوقعها. فمثلا:
- لون الحدود يتوقع قيمة اللون
- حجم الحدود يتوقع قيمة تحجيم ، مثل البكسل أو النسب المئوية
- تتوقع أنماط حدود أحد الأنماط المحفوظة المستخدمة لهذه الخاصية ، مثل "صلب"
إذا انتقلت إلى قائمة خصائص CSS ، فسوف تكتشف أن لكل منها قيمًا محددة سيستخدمها لإنشاء الأنماط المخصصة لها.
حرره جيريمي جيرار