يعد تصميم صفحة ويب باستخدام كس أحد الجوانب الرئيسية لتطوير الويب. المغلق (أوراق الأنماط المتتالية) يسمح لك لخلق تصميم جذاب وحديث لمواقع الويب. ومع ذلك ، قد تبدو قراءة وفهم كس صعبة للمبتدئين. في هذه المقالة ، سوف ننظر في المبادئ والقواعد الأساسية التي سوف تساعدك على فهم كس وجعل الأنماط الخاصة بك أكثر فعالية وأسهل للحفاظ عليها.
أولا وقبل كل شيء ، تجدر الإشارة إلى أن كس يقوم على مبادئ تتالي والميراث. تتالي يسمح الأنماط ليتم تطبيقها على عناصر صفحة ويب ، والميراث يسمح خصائص ليتم تمريرها من العنصر الأصل إلى العناصر الفرعية. عند قراءة رمز كس ، من المهم أن نتذكر أن النمط المعلن الأخير له أولوية أعلى من السابق.
من المهم أيضا أن تكون قادرا على اختيار المحددات المناسبة لعناصر التصميم. محددات في كس تسمح لك لتحديد عناصر محددة أو مجموعات من العناصر لتطبيق الأنماط. هناك أنواع مختلفة من المحددات ، مثل المحددات حسب نوع العنصر ، والمحددات حسب الفئة ، والمحددات حسب المعرف. لتحديد المحدد المطلوب ، تحتاج إلى فهم بنية المستند والتسلسل الهرمي للعناصر.
- المحددات والأولويات
- خصائص كس الأساسية
- المتتالية والميراث
- وحدات القياس والقيم
- نموذج تحديد المواقع والكتلة
- تصميم استجابة واستفسارات وسائل الإعلام
- الحيل وأفضل الممارسات
- 1. استخدم اختصارات الخصائص
- 2. استخدم المعالجات المسبقة
- 3. استخدم التعليقات
- 4. استخدام مكتبات كس
- 5. تحقق من التوافق عبر المتصفح
- 6. كن متسقا في تسمية الفئات
- 7. استخدام وحدات القياس النسبية
- 8. تجنب محددات التعشيش
- 9. استخدام قوائم منمنمة
- 10. استخدم الجداول للبيانات المجدولة
- سؤال وجواب
المحددات والأولويات
في كس ، يتم استخدام المحددات لتحديد عناصر الصفحة. تتيح لك المحددات تعيين أنماط لعناصر ومعرفات وفئات مختلفة.
هناك عدة أنواع أساسية من المحددات:
- تحديد جميع الفقرات في الصفحة.
- يختار العنصر مع معرف "رأس".
- يختار جميع العناصر مع فئة "النص الأحمر".
عند كتابة أنماط كس ، يمكنك الجمع بين محددات مختلفة باستخدامها بالتتابع. على سبيل المثال:
- تحديد جميع رؤوس المستوى الأول;
- يختار العناصر مع فئة "الرأس" ;
- تحديد كافة عناصر القائمة التي هي داخل عناصر المجاهدين.
بالإضافة إلى محددات ، هناك مفهوم الأولوية في كس. عندما يتم تطبيق أنماط متعددة ذات قواعد مختلفة على عنصر ما ، ينشأ تعارض. في هذه الحالة ، تنطبق قواعد الأولوية التالية:
- الأنماط المضمنة هي أنماط محددة مباشرة داخل علامات هتمل;
- المعرفات هي أنماط محددة من خلال محددات المعرف;
- الفئات هي أنماط محددة من خلال محددات الفئة;
- أنواع العناصر هي أنماط محددة من خلال محددات نوع العنصر.
.
...
الأساسية
خصائص المغلق المغلق (أوراق الأنماط المتتالية) يوفر القدرة على تعيين أنماط وتصميم لصفحات الويب. باستخدام كس ، يمكنك تغيير اللون والخط والحجم والموقع من العناصر على الصفحة ، وخلق تصميم فريد من نوعه.
تسمح لك خصائص كس الأساسية بتعيين نمط النص والخلفية والحدود والهوامش والمعلمات الأخرى لعناصر هتمل. يتيح لك استخدام هذه الخصائص إنشاء صفحات ويب جميلة وعملية.
- خاصية النص (عائلة الخط ، حجم الخط ، وزن الخط)
- الخط الأسرة: يحدد الخط من النص ، على سبيل المثال أريال ، تايمز نيو رومان ، فيردانا;
- حجم الخط: يحدد حجم الخط ، على سبيل المثال 12 بكسل ، 1.2 م;
- الخط الوزن: يحدد محتوى الدهون من الخط ، على سبيل المثال ، عادي ، جريئة.
- خاصية الخلفية (لون الخلفية)
- لون الخلفية: يحدد لون خلفية العنصر ، على سبيل المثال #ففف (أبيض) ، #ففف 0000 (أحمر).
- الممتلكات الحدودية
- الحدود: يحدد نمط وسمك ولون حدود العنصر ، على سبيل المثال 1 بكسل صلب #000000 (أسود).
- خاصية الهامش (الهامش ، الحشو)
- الهامش: يحدد الهوامش الخارجية للعنصر ، ويحدد المسافة بين العناصر في الصفحة;
- الحشو: يحدد الحشو الداخلي لعنصر ما ، مما يخلق مساحة حول المحتوى.
- خاصية المحاذاة (محاذاة النص)
- محاذاة النص: يضبط المحاذاة الأفقية للنص ، على سبيل المثال اليسار (اليسار) ، الوسط (الوسط) ، اليمين (اليمين).
خصائص كس أعلاه هي مجرد قائمة صغيرة من تلك الرئيسية الموجودة في كس. ومع ذلك ، فإنها تسمح لك بإنشاء مجموعة متنوعة من الأنماط وعناصر التصميم على الصفحة. هذا هو مجرد بداية الانغماس في عالم كس ، ومع الخبرة يمكنك توسيع قائمة الخصائص المستخدمة لتحقيق النتيجة المرجوة.
المتتالية والميراث
واحدة من السمات الرئيسية من كس هو المتتالية ، والذي يسمح لك لتطبيق أنماط متعددة لعنصر واحد وتحديد أولوياتها.
يعني التسلسل أنه إذا حددت قواعد متعددة نمطا لنفس العنصر ، فإن المتصفح يطبق أحدث قاعدة. يمكنك أيضا تحديد أولويات القواعد باستخدام خصوصية المحددات واستخدام كلمات رئيسية خاصة مثل !من المهم تحديد الأولوية القصوى للأسلوب.
سيكون للأنماط المحددة في محدد أكثر تحديدا أولوية أعلى من الأنماط المحددة في محدد أقل تحديدا. على سبيل المثال ، نمط محدد لعنصر مع فئة.رأس ، سيكون لها أولوية أعلى من النمط المحدد للعنصر مع العلامة