1. يمكن أن يؤدي الاستخدام الجيد لاختصارات CSS إلى تقليل حجم ملف الصفحة، وزيادة سرعة التنزيل، وجعل التعليمات البرمجية موجزة وسهلة القراءة.
يحب:
شعبة {
الحدود الأعلى: 1px الصلبة #cccccc؛
الحدود اليسرى: 1px الصلبة #cccccc؛
الحدود اليمنى:1px soli #cccccc;
الحد السفلي: 1px صلب #cccccc؛
}
يمكن كتابتها كـ
p{border:1px Solid #cccccc}
مثال آخر:
شعبة {
الهامش العلوي: 10 بكسل؛
الهامش الأيمن: 20 بكسل؛
الهامش السفلي: 30 بكسل؛
الهامش الأيسر: 40 بكسل؛
}
يمكن إعادة كتابتها على النحو التالي:
/*انتبه إلى ترتيب الكتابة من الأعلى واليمين والأسفل واليسار*/
شعبة {الهامش: 10px 20px 30px 40px}
/*لاحظ أن القيم والوحدات لا يمكن أن تحتوي على مسافات، ويتم فصل كل قيمة بمسافة*/
(لمزيد من التفاصيل، يرجى الرجوع إلى: دليل مرجع css2، ملخص لاختصارات CSS الشائعة)
2. يمكنك تعيين سمات فئة متعددة لـ عنصر html في نفس الوقت يحكم (تعريفات فئات متعددة).
عادة نكتبها بالشكل التالي:
في الواقع، يمكننا تحديد قواعد متعددة للعنصر p، مثل:
CSS:
.ا{…}
.ب{….}
HTML:
يتضمن هذا العنصر الأنماط المحددة في كل من a وb
ملحوظة: افصل بين القواعد المتعددة بمسافات.
3. حدد الوحدة بوضوح ما لم تكن القيمة 0
يعد نسيان تحديد الأبعاد مشكلة شائعة بين المبتدئين في CSS. في لغة HTML يمكننا كتابة العرض = "100"، ولكن يجب إعطاء وحدة دقيقة في CSS. على سبيل المثال: width:100px;height:50px;font-size:9pt، باستثناء القيمة 0، لأنها لا تهم أي وحدة. 0 القيم كلها متساوية في الحجم.
ملحوظة: لا تقم بإضافة مسافات بين القيمة والوحدة.
4. حساسية حالة الأحرف في xhtml، تكون أسماء العناصر المحددة بواسطة CSS حساسة لحالة الأحرف، كما أن قيم الفئة والمعرف حساسة لحالة الأحرف في html وxhtml، لذلك، لتجنب الأخطاء، يوصى دائمًا باستخدام الأحرف الصغيرة.
على سبيل المثال، يختلف #aaa عن #AAA في xhtml، ولن يتم الكتابة فوقهما.
إذا تم تعريف #aaa في CSS، فإن استخدام AAA لتطبيقه في عنصر html لن يحصل على النمط المحدد في #aaa.
رمز العينة:
CSS:
#aaa{الحدود:1px صلب #ccc}
HTML:
لا يمكن عرض حافة بكسل واحدة
5. مبدأ الأولوية الأحدث لـ CSS إذا تم تحديد أنماط متعددة لعنصر ما، فستكون الأولوية للمستوى الأحدث، وسيتجاوز النمط الأحدث تعريفات الأنماط الأخرى.
يحب:
CSS:
ع {اللون: أحمر}
.الأزرق {اللون: أزرق}
.أصفر{اللون:أصفر}
HTML:
يظهر هنا باللون الأحمر
يظهر هنا باللون الأزرق
يظهر هنا باللون الأخضر
يظهر هنا باللون الأصفر
يلاحظ:
(1) انتبه لعدة أولويات في الأنماط (تتناقص الأولويات من الأعلى إلى الأسفل):
- إعدادات نمط العنصر
- الإعدادات في منطقة الرأس
- ملفات CSS المشار إليها خارجيًا (2) لا يتم تحديد الأولوية حسب ترتيب الوصول، ولكن حسب ترتيب الإعلان في CSS.
كما في المثال أعلاه، يتم عرضه باللون الأصفر هنا
لأن .yellow يأتي بعد .blue في تعريف CSS.
6. استخدم المحددات الفرعية لتقليل تعريف المعرف والفئة على سبيل المثال:
#يحتوي{..}
#contain_ul{...}
يمكن تغيير
.contail_li{...}
إلى:
#يحتوي{..}
#يحتوي على{...}
.contain ul li{...}
7. لا تضف علامات الاقتباس إلى مسار صورة الخلفية وقم بتغيير الخلفية:url("xxx.gif") إلى الخلفية:url(xxx.gif)
لأن إضافة علامات الاقتباس سوف يسبب أخطاء لبعض المتصفحات.
8. مسار صورة الخلفية مرتبط بمسار صفحة CSS الحالية.
على سبيل المثال:
يوجد هيكل الدليل التالي - الصور
--xxx.gif
--css
--xx.css
--index.html
محتوى الكود
يشير ملف Index.html إلى ملف xx.css.
يجب أن يشير xx.css إلى صورة xxx.gif وطريقة كتابتها هي: الخلفية:url(../images/xxx.gif)
9. استخدم محدد المجموعة لتطبيق نفس النمط على عناصر مختلفة مثل h1، h2، h3 ، div {حجم الخط: 16 بكسل؛ وزن الخط: غامق}
ثم تكون أنماط عناصر h1 وh2 وh3 وdiv كلها بحجم 16 بكسل بخط غامق
10. اكتب نمط الارتباط الصحيح عند استخدام CSS لتحديد الحالات المختلفة للروابط، يجب الانتباه إلى ترتيب الكتابة هو: :رابط: تمت زيارته :hover :active.
إذا لم تكتب بهذا الترتيب، فقد لا تتمكن من تحقيق التأثير الذي تريده. ولكي نتذكر الترتيب نستخرج الحرف الأول من كل كلمة: LVHA، ويمكنك تذكر الترتيب من خلال حفظ الكلمتين LoVe وHate.
11. منع المحتوى من الالتفاف وإجبار المحتوى على الالتفاف في جدول أو طبقة، قد نرغب في عدم التفاف المحتوى أو إجبار المحتوى على الالتفاف. يمكننا تحقيق هذه المتطلبات من خلال بعض سمات CSS.
تعطيل فواصل الأسطر: المسافة البيضاء:nowrap
فاصل الأسطر القسري: التفاف الكلمات: فاصل الكلمات: عادي
12. الفرق بين النسبي والمطلق
مطلق، طريقة الكتابة في CSS هي: الموضع: المطلق؛ يشير إلى الزاوية اليسرى العليا من المتصفح ويتعاون مع TOP وRIGHT وBOTTOM وLEFT (المشار إليها فيما يلي باسم TRBL) لتحديد الموضع لم يتم تعيين TRBL، بشكل افتراضي، نقطة الأصل هي النقطة الأصلية للأصل. إذا تم تعيين TRBL ولم يقم الأصل بتعيين سمة الموضع، فسيتم وضع المطلق الحالي في الزاوية اليسرى العليا من المتصفح كنقطة أصلية، وسيتم تحديد الموضع بواسطة TRBL.
طريقة الكتابة النسبية في CSS هي: الموضع: النسبي؛ وهي تعني الموضع النسبي المطلق، وتشير إلى النقطة الأصلية للأصل باعتبارها النقطة الأصلية ، ويتم وضعه باستخدام TRBL عندما تكون هناك سمات CSS مثل الحشو في الأصل، يتم وضع النقطة الأصلية للمستوى الحالي بالرجوع إلى النقطة الأصلية لمنطقة المحتوى الأصلية.
13. التمييز بين div وspan
div هو عنصر على مستوى الكتلة يمكن أن يحتوي على فقرات وجداول وما إلى ذلك، ويستخدم لوضع محتوى مختلف. بشكل عام، نستخدم div لتخطيط كل كتلة ووضعها في صفحة الويب.
يعد الامتداد عنصرًا مضمنًا ليس له أي معنى عملي، وهو موجود فقط لتطبيق الأنماط. يمكن أن تؤدي إضافة علامة إلى جزء من المحتوى إلى تعيين نمط محتواه عن طريق تحديد نمط على الامتداد.
14. التمييز بين العرض والرؤية
يمكن لكل من العرض: لا شيء والرؤية: مخفي إخفاء عنصر، ولكن الرؤية: مخفي يخفي محتوى العنصر فقط، ولكن لا يزال يتم الاحتفاظ بمساحة الموضع المستخدمة.
العرض: لا شيء يعادل إزالة العنصر من الصفحة، وسيتم أيضًا حذف موضعه الذي يشغله.