4.7 KiB
| title | localeTitle |
|---|---|
| CSS Syntax and Selectors | CSS المختار والقواعد |
CSS المختار والقواعد
عندما نتحدث عن صيغة CSS ، نتحدث عن كيفية وضع الأشياء. توجد قواعد حول أين تذهب ، حيث يمكنك كتابة CSS باستمرار ويمكن أن يفسرها أحد البرامج (مثل المتصفح) ويطبقها على الصفحة بشكل صحيح.
هناك طريقتان رئيسيتان لكتابة CSS.
مضمنة المغلق
تفاصيل محددة على خصوصية CSS : CSS الخدع
تطبق CSS مضمنة التصميم على عنصر واحد وأطفاله ، حتى يتم اكتشاف نمط آخر يتجاوز الأول.
لتطبيق CSS المضمّن ، أضف سمة "النمط" إلى عنصر HTML ترغب في تعديله. داخل علامات اقتباس ، قم بتضمين قائمة مفصولة بفواصل منقوطة من أزواج المفاتيح / القيم (كل منها مفصولة بنقطتين) تشير إلى أنماط لتعيينها.
إليك مثال على CSS المضمّن. سيكون للكلمات "One" و "Two" لون خلفية باللون الأصفر ولون النص باللون الأحمر. تحتوي كلمة "ثلاثة" على نمط جديد يتجاوز الأول ، وسيكون له لون خلفية باللون الأخضر ونص اللون السماوي. في المثال ، نحن نطبق الأنماط على علامات <div> ، ولكن يمكنك تطبيق نمط على أي عنصر HTML.
`
CSS داخلي
بينما تعد كتابة نمط مضمَّن طريقة سريعة لتغيير عنصر واحد ، فهناك طريقة أكثر فاعلية لتطبيق نفس النمط على العديد من عناصر الصفحة في وقت واحد.
تحتوي CSS الداخلية على الأنماط المحددة في علامة <style> ، وهي مدمجة في العلامة <head> .
في ما يلي مثال له تأثير مماثل لمثال "مضمنة" أعلاه ، باستثناء أنه تم استخراج CSS إلى منطقته الخاصة. ستتطابق الكلمتان "One" و "Two" مع محدد div ويكون النص الأحمر على خلفية صفراء. تتطابق الكلمتان "Three" و "Four" مع محدد div أيضًا ، ولكنهما يتطابقان أيضًا مع محدد .nested_div الذي ينطبق على أي عنصر HTML يشير إلى هذه الفئة. يتجاوز هذا المحدد المحدد الأول ، وينتهي ظهرا في الظهور كنص أزرق سماوي على خلفية خضراء.
`
تعتبر المحددات المبينة أعلاه بسيطة للغاية ، ولكنها قد تكون معقدة للغاية. على سبيل المثال ، من الممكن تطبيق الأنماط فقط على العناصر المتداخلة ؛ وهذا هو ، العنصر الذي هو طفل لعنصر آخر.
في ما يلي مثال على تحديدنا للنمط الذي يجب تطبيقه فقط على عناصر div التي تمثل طفلًا مباشرًا لعناصر div الأخرى. والنتيجة هي أن "Two" و "Three" سيظهران كنص أحمر على خلفية صفراء ، لكن "One" و "Four" سيظلان غير متأثران (وعلى الأرجح نص أسود على خلفية بيضاء).
`
CSS خارجي
يحتوي كل التصميم على مستند خاص به مرتبط في العلامة <head> . امتداد الملف المرتبط هو .css