--- title: CSS Syntax and Selectors localeTitle: CSS المختار والقواعد --- ## CSS المختار والقواعد عندما نتحدث عن صيغة CSS ، نتحدث عن كيفية وضع الأشياء. توجد قواعد حول أين تذهب ، حيث يمكنك كتابة CSS باستمرار ويمكن أن يفسرها أحد البرامج (مثل المتصفح) ويطبقها على الصفحة بشكل صحيح. هناك طريقتان رئيسيتان لكتابة CSS. ### مضمنة المغلق تفاصيل محددة على خصوصية [CSS](https://css-tricks.com/specifics-on-css-specificity/) : [CSS الخدع](https://css-tricks.com/specifics-on-css-specificity/) تطبق CSS مضمنة التصميم على عنصر واحد وأطفاله ، حتى يتم اكتشاف نمط آخر يتجاوز الأول. لتطبيق CSS المضمّن ، أضف سمة "النمط" إلى عنصر HTML ترغب في تعديله. داخل علامات اقتباس ، قم بتضمين قائمة مفصولة بفواصل منقوطة من أزواج المفاتيح / القيم (كل منها مفصولة بنقطتين) تشير إلى أنماط لتعيينها. إليك مثال على CSS المضمّن. سيكون للكلمات "One" و "Two" لون خلفية باللون الأصفر ولون النص باللون الأحمر. تحتوي كلمة "ثلاثة" على نمط جديد يتجاوز الأول ، وسيكون له لون خلفية باللون الأخضر ونص اللون السماوي. في المثال ، نحن نطبق الأنماط على علامات `
` ، ولكن يمكنك تطبيق نمط على أي عنصر HTML. `
One
Two
Three
` ### CSS داخلي بينما تعد كتابة نمط مضمَّن طريقة سريعة لتغيير عنصر واحد ، فهناك طريقة أكثر فاعلية لتطبيق نفس النمط على العديد من عناصر الصفحة في وقت واحد. تحتوي CSS الداخلية على الأنماط المحددة في علامة `
One
Two
Three
Four
` تعتبر المحددات المبينة أعلاه بسيطة للغاية ، ولكنها قد تكون معقدة للغاية. على سبيل المثال ، من الممكن تطبيق الأنماط فقط على العناصر المتداخلة ؛ وهذا هو ، العنصر الذي هو طفل لعنصر آخر. في ما يلي مثال على تحديدنا للنمط الذي يجب تطبيقه فقط على عناصر `div` التي تمثل طفلًا مباشرًا لعناصر `div` الأخرى. والنتيجة هي أن "Two" و "Three" سيظهران كنص أحمر على خلفية صفراء ، لكن "One" و "Four" سيظلان غير متأثران (وعلى الأرجح نص أسود على خلفية بيضاء). `
One
Two
Three
Four
` ### CSS خارجي يحتوي كل التصميم على مستند خاص به مرتبط في العلامة `` . امتداد الملف المرتبط هو `.css` #### معلومات اكثر: * [CSS Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) @ MDN * [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) @ MDN * [CSS المختارات المرجعية](https://www.w3schools.com/cssref/css_selectors.asp) * [خصوصية مختارات CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)