يحتوي CSS على قواعد النمط التي يفسرها المتصفح ثم يتم تطبيقها على العناصر المناسبة في وثيقتك. تتكون قاعدة النمط من ثلاثة أجزاء:

• محددهي علامة HTML التي سيتم تطبيق النمط عليها. يمكن أن تكون هذه أي علامة، على سبيل المثال،

  أو إلخ.

  ملكيةهو نوع سمة لعلامة HTML. ببساطة، يتم تحويل كافة السمات في HTML إلى خصائص CSS. يمكن أن تكون هذه الألوان والحدود والحشو وما إلى ذلك.

  معنى- تم تعيينه على الخاصية. على سبيل المثال، يمكن أن تكون خاصية اللون باللون الأخضر، #008000، وما إلى ذلك.

  بناء جملة المحددات في CSS هو كما يلي:

  المحدد (الخاصية: القيمة)

  مثال.يمكنك ضبط حدود الجدول مثل هذا:

  الجدول (الحدود: 2 بكسل صلب #FF8C00;)

  هنا بناء جملة المحدد هو: الجدول هو المحدد والحدود هي الخاصية و2px Solid #FF8C00 هي قيمة تلك الخاصية.

  يمكنك تحديد المحددات بطرق مختلفة كما تراه مناسبًا. فيما يلي أنواع المحددات.>

  المحددات القياسية

  هذا هو نفس المحدد الذي رأيته أعلاه. مرة أخرى، مثال آخر لإضفاء اللون على جميع عناوين المستوى الأول:

  H1 (اللون: #8B4513؛)

  محددات عالمية

  بدلًا من تحديد عناصر من نوع معين، يقوم المحدد العام ببساطة بمطابقة اسم أي نوع عنصر:

  * (اللون: #808080؛)

  تعرض هذه القاعدة محتويات كل عنصر في وثيقتنا باللون الرمادي.

  المحددات السليلة أو المحددات المتداخلة

  لنفترض أنك تريد تطبيق قاعدة نمط على عنصر معين فقط عندما يكون داخل عنصر معين، فإن المحددات المتداخلة أو المحددات التابعة ستساعدك في ذلك. كما هو موضح في المثال التالي، سيتم تطبيق قاعدة النمط على العنصر فقط عندما يكون داخل علامة

  .

  Ul em (اللون: #CD5C5C;)

  محددات الصف

  يمكنك تعيين قواعد النمط للعناصر بناءً على سمة الفئة. سيتم تنسيق جميع العناصر التي تحتوي على هذه الفئة وفقًا لقاعدة معينة.

  أزرق (اللون: #0000FF;)

  الطبقة = "الأزرق". يمكنك جعل محدد الفصل أكثر تحديدًا قليلاً. على سبيل المثال:

  H1.أزرق (اللون: #0000FF;)

  مع السمة الطبقة = "الأزرق".

  يمكنك تطبيق محددات فئة متعددة على عنصر واحد. خذ بعين الاعتبار المثال التالي:

  سيتم تنسيق هذه الفقرة مع الفئات مركزو عريض.

  محددات الهوية

  يمكنك تعيين قواعد النمط للعناصر بناءً على سمة المعرف. سيتم تنسيق كافة العناصر التي لها هذا المعرف وفقًا لقاعدة معينة.

  #أزرق (اللون: #0000FF؛)

  تعرض هذه القاعدة المحتوى الموجود في وثيقتنا باللون الأزرق لكل عنصر له السمة معرف = "الأزرق". يمكنك جعل محدد المعرف أكثر تحديدًا. على سبيل المثال:

  H1# أزرق (اللون: #0000FF;)

  تعرض هذه القاعدة المحتوى باللون الأزرق للعناصر فقط

  مع السمة معرف = "الأزرق".

  القوة الحقيقية لمحددات المعرف هي عندما يتم استخدامها كأساس للمحددات التابعة، على سبيل المثال:

  #أزرق h2 (اللون: #0000FF؛)

  في هذا المثال، ستظهر جميع عناوين المستوى الثاني باللون الأزرق عندما تكون ضمن علامات تحتوي على السمة معرف = "الأزرق".

  محددات الطفل

  أنت تعرف بالفعل المحددات السليلة. هناك نوع آخر من المحددات التي تشبه إلى حد كبير المحددات الفرعية ولكن لها وظائف مختلفة، وهي المحددات الفرعية. خذ بعين الاعتبار المثال التالي:

  الجسم > p (اللون: #0000FF;)

  ستعرض هذه القاعدة جميع الفقرات باللون الأزرق إذا كانت فرعًا مباشرًا للعنصر . فقرات أخرى موضوعة داخل عناصر أخرى من الكتابة

  أو

  المحددات المجاورة تسمى عناصر HTML التي تتبع بعضها البعض بالعناصر المتجاورة. خذ بعين الاعتبار المثال التالي: قوي + م (اللون: #0000FF؛) ستعرض هذه القاعدة محتويات العلامة باللون الأزرق إذا جاء بعد العنصر . علامات أخرى ، لا يأتي بعد العلامة ، لن يكون لها أي تأثير على هذه القاعدة. محددات السمات يمكنك أيضًا تطبيق الأنماط على عناصر HTML بسمات محددة. ستطابق قاعدة النمط أدناه جميع عناصر الإدخال التي تحتوي على سمة النوع مع نص القيمة: الإدخال (اللون: #0000FF;) ميزة استخدام محددات السمات هي أن العنصر لا يتغير، ويتم تطبيق اللون فقط على حقول النص المطلوبة. تنطبق القواعد التالية على محدد السمات: p - يحدد جميع عناصر الفقرة ذات السمة lang. p - يحدد جميع عناصر الفقرة التي تحتوي سمة lang على القيمة الدقيقة "ru". p - يحدد كافة عناصر الفقرة التي تحتوي فيها خاصية lang على الكلمة "ru". p - يحدد جميع عناصر الفقرة حيث تحتوي سمة lang على قيم تمثل "ru" بالضبط أو تبدأ بـ "ru". بعض قواعد الأسلوب قد تحتاج إلى تحديد قواعد نمط متعددة لعنصر واحد. يمكنك تعريف هذه القواعد لدمج خصائص متعددة والقيم المقابلة لها في كتلة واحدة، كما هو موضح في المثال التالي: H1 (اللون: #00CED1؛ تباعد الأحرف: .2em؛ تحويل النص: أحرف صغيرة؛ الهامش السفلي: 2em؛ وزن الخط: 700؛) يتم الفصل بين كافة أزواج الخصائص والقيمة بفاصلة منقوطة (;). يمكنك تخزينها على سطر واحد أو عدة أسطر. لقراءة أفضل، احتفظ بها في أسطر منفصلة. لا تقلق بشأن الخصائص المذكورة في الكتلة أعلاه. وسيتم شرح هذه الخصائص في الدروس التالية. محددات التجميع في CSS يمكنك تصميم العديد من المحددات إذا كنت تريد ذلك. ما عليك سوى فصل المحددات بفاصلة، كما هو موضح في المثال التالي: H1، h2، h3 ( اللون: #00CED1؛ تباعد الأحرف: .2em؛ تحويل النص: أحرف صغيرة؛ الهامش السفلي: 2em؛ وزن الخط: 700؛ ) سيتم تطبيق قاعدة النمط هذه على عناصر h1 وh2 وh3. لا يهم ترتيب القائمة عند تجميع المحددات. سيتم تطبيق الإعلانات المقابلة على جميع العناصر الموجودة في المحدد. يمكنك تجميع معرفات المحددات المختلفة معًا كما هو موضح أدناه: #رأس، #محتوى، #تذييل (الموضع: مطلق؛ العرض: 300 بكسل؛ اليسار: 250 بكسل؛) تعد محددات CSS إحدى الميزات الرئيسية للغة CSS. تسمح لك المحددات بالوصول إلى مجموعة من العناصر أو إلى واحد منها فقط. المحددات في CSS تُستخدم المحددات لإخبار المتصفح بالعناصر التي سيتم تطبيق الأنماط الموضحة بين الأقواس المتعرجة. ف( الأنماط... } في هذه الحالة، يكون المحدد هو علامة الفقرة p. ستضيف هذه القاعدة أنماطًا إلى جميع الفقرات الموجودة على صفحة الويب. ما هي أنواع محددات CSS؟ محدد العلامات - الأبسط. وقد ثبت ذلك في مثال. لكتابتها في CSS، تحتاج إلى كتابة اسم العلامة بدون أقواس زاوية. سيتم تطبيق الأنماط على كافة العناصر التي تحمل هذه العلامة. Table() – أنماط كافة الجداول Li () - أنماط لجميع عناصر القائمة A() - الأنماط لجميع الروابط فئة النمط- يمكنك إرفاق فئة نمط بأي عنصر في صفحة الويب. ولو إلى حرف واحد. ثم في ملف CSS يمكنك الوصول إلى هذا العنصر عن طريق كتابة الأنماط الخاصة بك له. للقيام بذلك، تحتاج إلى وضع نقطة وكتابة اسم فئة النمط بعدها. أمثلة: .about() - سيتم تطبيق القواعد على جميع العناصر التي تحتوي على فئة السمة = "about" .down() - سيتم تطبيق القواعد على جميع العناصر التي تحتوي على فئة السمة = "down" .float() - سيتم تطبيق القواعد على جميع العناصر التي تحتوي على فئة السمة = "float" كما ترون، الشيء الرئيسي هو توضيح نقطة ما. يمكن ربط فئة النمط بعدد غير محدود من العناصر. يمكن تعيين عنصر عدة فئات. المعرف- نوع آخر من المحدد. يمكن تعيين معرف واحد لعنصر واحد فقط. لا يمكن أن يحتوي على معرفين، ولا يمكن تسجيل المعرف المرتبط بهذا العنصر في أي مكان آخر. يتم تعيينه مثل هذا: فقرة وهذا هو، تماما مثل فئة، يتم استخدام السمة فقط بطاقة تعريفيتم استخدام أي كلمة كمعنى لها. للوصول إلى عنصر بمعرف عبر CSS، تحتاج إلى كتابة قيمة المعرف ووضع علامة تجزئة أمامه. #أولاً( حجم الخط: 22 بكسل } التفتنا إلى الفقرة مع المعرف = الأول. سيتم تطبيق النمط عليه فقط. بالنسبة للفقرات المتبقية، لن يتغير حجم الخط. فلاد ميرزيفيتش يحدد المعرف (يسمى أيضًا "محدد المعرف") اسمًا فريدًا للعنصر، والذي يستخدم لتغيير نمطه والإشارة إليه من خلال البرامج النصية. بناء جملة استخدام المعرف هو كما يلي. محدد عالمي فلاد ميرزيفيتش في بعض الأحيان تحتاج إلى تعيين نمط واحد لجميع عناصر صفحة الويب في نفس الوقت، على سبيل المثال، تعيين خط أو نمط نص. في هذه الحالة، سيساعدك محدد عالمي يطابق أي عنصر من عناصر صفحة الويب. يتم استخدام رمز النجمة (*) للدلالة على محدد عالمي، وبشكل عام يكون بناء الجملة كما يلي. * (وصف قواعد الأسلوب) محددات السمات فلاد ميرزيفيتش تختلف العديد من العلامات في تأثيرها اعتمادًا على السمات التي تستخدمها. على سبيل المثال، العلامة يمكن إنشاء زر وحقل نصي وعناصر نموذج أخرى فقط عن طريق تغيير قيمة سمة النوع. ومع ذلك، فإن إضافة قواعد النمط إلى محدد INPUT سيؤدي إلى تطبيق النمط في وقت واحد على جميع العناصر التي تم إنشاؤها باستخدام هذه العلامة. للتحكم بمرونة في نمط هذه العناصر، تم إدخال محددات السمات في CSS. محددات الطفل فلاد ميرزيفيتش العنصر الفرعي هو عنصر يقع مباشرة داخل العنصر الأصلي. لفهم العلاقات بين عناصر الوثيقة بشكل أفضل، دعونا نلقي نظرة على رمز صغير (المثال 12.1). مثال 12.1. تداخل العناصر في المستند HTML5 CSS 2.1 IE Cr Op Sa Fx المحددات المجاورة فلاد ميرزيفيتش تسمى عناصر صفحة الويب متجاورة عندما تتبع بعضها البعض مباشرة في رمز المستند. دعونا نلقي نظرة على بعض الأمثلة على علاقات العناصر. لوريم إيبسوم دولوراجلس أميت. في هذا المثال العلامة هو طفل من العلامة لأنه داخل هذه الحاوية. على التوالى يعمل كوالد . محددات السياق فلاد ميرزيفيتش عند إنشاء صفحة ويب، غالبًا ما يتعين عليك دمج بعض العلامات داخل علامات أخرى. لضمان استخدام أنماط هذه العلامات بشكل صحيح، ستساعد المحددات التي تعمل فقط في سياق معين. على سبيل المثال، قم بتعيين نمط العلامة فقط عندما يكون موجودا داخل الحاوية وبهذه الطريقة، يمكنك تعيين النمط لعلامة فردية في نفس الوقت، بالإضافة إلى علامة موجودة داخل علامة أخرى. أوراق الأنماط المتتالية (CSS) هي معيار نمط أعلنه اتحاد W3C. شرط المتتاليةيشير إلى إمكانية دمج أنواع مختلفة من الأنماط وراثة الأنماط عن طريق العلامات الداخلية من العلامات الخارجية. CSS هي لغة تحتوي على مجموعة من الخصائص لتحديد مظهر المستند. تحدد مواصفات CSS الخصائص واللغة الوصفية للتواصل مع عناصر HTML. CSS هو تجريد يتم فيه تعريف مظهر مستند الويب بشكل منفصل عن محتواه. بعض الأنماط غير مدعومة من قبل كافة المتصفحات. ومع ذلك، يمكنك تعيين أي أنماط، لأنه سيتم ببساطة تجاهل الأنماط غير المدعومة. قد تحتاج أيضًا إلى: استنادًا إلى طرق إضافة الأنماط إلى المستند، هناك ثلاثة أنواع من الأنماط. الأنماط الداخلية يتم تعريف الأنماط الداخلية بواسطة السمة أسلوبعلامات محددة. يؤثر النمط الداخلي فقط على العناصر المحددة بواسطة هذه العلامات. تختلف هذه الطريقة قليلًا عن لغة HTML التقليدية. مثال فقرة بنص أزرق نتيجة: فقرة بنص أزرق فقرة بنص أحمر يجب ألا تستخدم الأنماط الداخلية في كثير من الأحيان، حيث يصبح مستند الويب مثقلًا بالأكواد البرمجية ويصعب تغيير مظهره. الأنماط العالمية توجد أنماط CSS العالمية في الحاوية ، يقع بدوره في الحاوية ... . يصف اكتب = "نص/CSS"، كانت مطلوبة مسبقًا للعلامة ......... لون النص رمادي في جميع فقرات صفحة الويب نتيجة: لون النص رمادي في جميع فقرات صفحة الويب لون النص رمادي في جميع فقرات صفحة الويب الأنماط الخارجية (المرتبطة). يتم تعريف الأنماط الخارجية (ذات الصلة) في ملف منفصل بالملحق المغلق. تسمح الأنماط الخارجية لجميع صفحات الموقع بأن تبدو متسقة. للارتباط بملف يصف الأنماط، استخدم العلامة تقع في حاوية ... . يجب أن تحتوي هذه العلامة على سمتين: rel = "ورقة الأنماط"و href، تحديد عنوان ملف الأنماط. مثال ......... ......... ......... ربط الأنماط تتكون قاعدة ربط الأنماط العالمية والخارجية من محددو نمط الإعلان. يحدد المحدد الموجود على الجانب الأيسر من القاعدة العنصر (العناصر) التي تم تعيين القاعدة لها. بعد ذلك، يتم إدراج إعلانات النمط بين قوسين متعرجين، مفصولة بفواصل منقوطة. على سبيل المثال: P ( المسافة البادئة للنص: 30 بكسل؛ حجم الخط: 14 بكسل؛ اللون: #666;) إعلان النمط هو زوج خاصية CSS: قيمة CSS. على سبيل المثال: لون احمر عند توصيل النمط داخليًا، يتم استخدام قاعدة CSS، وهي قيمة السمة أسلوب، يتكون من إعلانات النمط مفصولة بفواصل منقوطة. على سبيل المثال: محددات CSS محدد وصف المزيد من التفاصيل * أي عنصر ه العنصر المحدد بواسطة العلامة E ه#معرف العنصر E بالمعرف "myid" E.myclass العنصر E من فئة "myclass" ه محدد وجود السمة ه سمة محدد المساواة ه محدد السمات مع قائمة القيم محددات السمات ه محدد بادئة السمة ه محدد لاحقة السمة ه محدد السمة الفرعية ه: الرابط العنصر E - الرابط الذي لم يقم المستخدم بزيارته بعد الطبقات الزائفة الديناميكية ه: زار العنصر E - الرابط الذي زاره المستخدم بالفعل الطبقات الزائفة الديناميكية ه: تحوم العنصر E عند المرور فوقه بمؤشر الماوس الطبقات الزائفة الديناميكية ه: نشط العنصر المنشط بواسطة المستخدم E الطبقات الزائفة الديناميكية ه: التركيز العنصر في التركيز الطبقات الزائفة الديناميكية ه: الهدف العنصر E الذي هو هدف الارتباط استهداف الطبقة الزائفة ه: لانج العنصر E مكتوب باللغة المحددة لغة الطبقة الزائفة ه: ممكن العنصر E - عنصر نموذج يمكن الوصول إليه فئات زائفة من الدول ه: معطل العنصر E - عنصر نموذج لا يمكن الوصول إليه فئات زائفة من الدول ه: فحص العنصر E - خانة الاختيار أو زر الاختيار ممكّن فئات زائفة من الدول ه: غير محدد العنصر E - مربع اختيار أو زر اختيار غير محدد فئات زائفة من الدول ه: الجذر العنصر E، جذر الوثيقة الطبقات الزائفة الهيكلية ه:الطفل-(ن) العنصر E، الطفل التاسع للعنصر الأصلي الطبقات الزائفة الهيكلية E:الطفل الأخير(ن) العنصر E، الابن التاسع للعنصر الأصلي، يبدأ العد من النهاية الطبقات الزائفة الهيكلية E:النوع من النوع(ن) العنصر n من النوع E الطبقات الزائفة الهيكلية E:النوع الأخير من النوع(n) العنصر n من النوع E، عد من النهاية الطبقات الزائفة الهيكلية هـ: الطفل الأول العنصر E، الطفل الأول للوالدين الطبقات الزائفة الهيكلية هـ: الطفل الأخير العنصر E، آخر طفل من الوالدين الطبقات الزائفة الهيكلية هـ: النوع الأول العنصر الأول من النوع E الطبقات الزائفة الهيكلية هـ: آخر النوع العنصر الأخير من النوع E الطبقات الزائفة الهيكلية هـ: الطفل الوحيد العنصر الفرعي الوحيد للوالدين الطبقات الزائفة الهيكلية هـ: فقط من النوع العنصر الوحيد للوالد من النوع E الطبقات الزائفة الهيكلية ه: فارغة عنصر E لا يحتوي على أطفال الطبقات الزائفة الهيكلية ه: لا (X) عنصر E لا يطابق المحدد البسيط X فئة زائفة من النفي ه::السطر الأول السطر الأول من العنصر E العناصر الزائفة ه::الحرف الأول الحرف الأول من العنصر E العناصر الزائفة ه::قبل المحتويات قبل العنصر E العناصر الزائفة ه::بعد المحتوى بعد العنصر E العناصر الزائفة ه::اختيار الاختيار في العنصر E العناصر الزائفة إي ف عنصر F الموجود داخل عنصر E ه>و عنصر F الموجود مباشرة داخل عنصر E ه+و العنصر F الذي يلي العنصر E مباشرةً ه~و عنصر F الذي يأتي بعد عنصر E محدد عالمي يطابق المحدد العام أي عنصر في مستند HTML. يتم استخدام رمز النجمة (*) للإشارة إلى محدد عالمي. يتم استخدامه إذا كنت بحاجة إلى تعيين نفس النمط لجميع عناصر صفحة الويب. على سبيل المثال: * (الهامش: 0؛ الحشو: 0؛) في بعض الحالات، قد يتم حذف حرف النجمة (*): *.صفيو .صفيمرادف، *#معرفو #myidمقابل محددات العلامات يمكن أن يكون المحدد أي علامة HTML يتم تحديد قواعد التصميم لها. على سبيل المثال: H1 (اللون: أحمر؛ محاذاة النص: المركز؛) إذا كان لدى العديد من العناصر نمط مشترك، فيمكن إدراج المحددات المقابلة لها في ورقة الأنماط، مفصولة بفواصل. على سبيل المثال: H1، h2، h3، h4 (اللون: أحمر؛ محاذاة النص: المركز؛) محددات الهوية يوفر HTML القدرة على تعيين معرف فريد لأي علامة. يتم تحديد المعرف بواسطة السمة بطاقة تعريف. على سبيل المثال: ... يجب أن تبدأ قيمة المعرف بحرف لاتيني ويمكن أن تحتوي على أحرف (،) وأرقام () وواصلات (-) وشرطات سفلية (_). جميع قيم السمات بطاقة تعريففي وثيقة HTML يجب أن تكون فريدة من نوعها. إذا التقيا بطاقة تعريفبنفس القيم، فسيتم تجاهل هذه المعرفات، ويصبح رمز صفحة الويب غير صالح. في كود CSS، يتم تمثيل محدد المعرف بعلامة التجزئة (#). منذ المعرف بطاقة تعريفينطبق فقط على العناصر الفريدة، وعادةً ما يتم حذف اسم العلامة قبل علامة التجزئة (#): Div#a1 (اللون: أخضر؛) بصورة مماثلة #a1 (اللون: أخضر؛) من المستحسن استخدامه بطاقة تعريفليس لتصميم العنصر، ولكن للوصول إليه من خلال البرامج النصية أو اتباع الرابط. محددات الصف غالبًا ما يتم استخدام محددات الفئة للتصميم. يتم تحديد فئة العلامة بواسطة السمة فصل. على سبيل المثال: ... يجب أن يبدأ اسم الفئة بحرف لاتيني ويمكن أن يحتوي على أحرف (،) وأرقام () وواصلات (-) وشرطات سفلية (_). إذا السمة بطاقة تعريفيستخدم لتحديد فريد، ثم استخدام السمة فصليتم تعيين العلامة لمجموعة واحدة أو أخرى. في كود CSS، يتم تمثيل محدد المعرف بنقطة (.). يمكن تصنيف علامات مختلفة في نفس الفئة. في هذه الحالة، يتم حذف اسم العلامة قبل النقطة (.): I.green (اللون: #008000;) ب.الأحمر (اللون: #f00;).الأزرق (اللون: #00f;) بالنسبة للعلامة، يمكنك تحديد عدة فئات في نفس الوقت عن طريق إدراجها في السمة فصلمن خلال مساحة. في هذه الحالة، يتم تطبيق أنماط كل فئة من الفئات المحددة على العنصر. ... إذا كانت بعض هذه الفئات تحتوي على نفس خصائص النمط، ولكن بقيم مختلفة، فسيتم تطبيق قيم نمط الفئة الموجودة أدناه في كود CSS. محددات السمات هناك العديد من محددات السمات التي يمكنك استخدامها لتصميم علامة بناءً على سماتها. h1 (اللون: #800000;) /* عنصر h1 الذي يحتوي على سمة عنوان */ الإدخال ( الحد: 1 بكسل صلب #sss؛ الحشو: 4 بكسل 6 بكسل؛ العرض: 300 بكسل؛) a (زخرفة النص: لا شيء؛ الحد السفلي: 1 بكسل صلب #06c؛ اللون: #06c;) تمتد (عرض: كتلة مضمنة؛ صورة الخلفية: url("/img/icon_sprite.png");) a، a ( الخلفية: url("pic.gif") أسفل اليسار بدون تكرار؛ العرض: كتلة مضمنة؛ العرض: 32 بكسل؛ ) (العرض: كتلة؛ تعويم: يسار؛ العرض: 280 بكسل؛) يجب ألا تكون هناك مسافة بين اسم العلامة والقوس المربع ([)! المحدد العالمي، والعلامة، والمعرف، والفئة، ومحددات السمات، والفئات الزائفة كلها محددات بسيطة. يمكن ربط المحددات البسيطة بتسلسلات محددة بناءً على علاقات العناصر الموجودة في شجرة مستندات الويب. تسمى هذه الإنشاءات المجمعة. محددات السياق أحد أدوات الدمج الأكثر استخدامًا هو محدد السياق. تحدد محددات السياق أو المحددات التابعة عناصر متعددة، يتم تضمين أحدها داخل عنصر آخر. في محدد السياق، يتم فصل المحددات البسيطة بمسافة. مثال بوشكين أ.س. "طلقة" "عاصفة ثلجية" "دوبروفسكي" غوغول إن.في. "مفتش" "تاراس بولبا" "ارواح ميتة" تولستوي إل.ن. "الحرب و السلام" "انا كارينينا" "القيامة" نتيجة: بوشكين أ.س. "طلقة" "عاصفة ثلجية" "دوبروفسكي" غوغول إن.في. "مفتش" "تاراس بولبا" "ارواح ميتة" تولستوي إل.ن. "الحرب و السلام" "انا كارينينا" "القيامة" محددات الطفل يحدد محدد الطفل عنصرًا موجودًا داخل عنصر آخر نفسه. في المحدد الفرعي، يتم فصل المحددات البسيطة بعلامة أكبر من (>). مثال بوشكين أ.س. "طلقة" "عاصفة ثلجية" "دوبروفسكي" غوغول إن.في. "مفتش" "تاراس بولبا" "ارواح ميتة" تولستوي إل.ن. "الحرب و السلام" "انا كارينينا" "القيامة" نتيجة: بوشكين أ.س. "طلقة" "عاصفة ثلجية" "دوبروفسكي" غوغول إن.في. "مفتش" "تاراس بولبا" "ارواح ميتة" تولستوي إل.ن. "الحرب و السلام" "انا كارينينا" "القيامة" المحددات المجاورة يحدد المحدد المجاور علامة الجمع (+) التي تفصل بين تسلسلين من المحددات البسيطة. العناصر التي تمثلها هذه التسلسلات موجودة في حاوية واحدة والثانية تتبع الأولى مباشرة، ولا يتم فصلها بأي علامات أخرى. مثال علم الانعكاسات نتيجة: علم الانعكاسات المحددات المجاورة يحدد المحدد المجاور حرف التلدة (~) الذي يفصل بين تسلسلين من المحددات البسيطة. العناصر الممثلة بهذه التسلسلات موجودة في نفس الحاوية والثانية تتبع الأولى (وليس بالضرورة بشكل مباشر). مثال علم الانعكاسات "إن جميع أفعال الحياة الواعية واللاواعية، وفقًا لطريقة نشأتها، هي ردود أفعال." هم. سيتشينوف علم المنعكسات هو علاج الأمراض من خلال التحكم في ردود الفعل. يتم استخدامه بنجاح في برامج العلاج المعقدة أو كتقنية فردية. نتيجة: علم الانعكاسات "إن جميع أفعال الحياة الواعية واللاواعية، وفقًا لطريقة نشأتها، هي ردود أفعال." هم. سيتشينوف علم المنعكسات هو علاج الأمراض من خلال التحكم في ردود الفعل. يتم استخدامه بنجاح في برامج العلاج المعقدة أو كتقنية فردية. ". إذن، المحدد هو عنصر يتم تطبيق الإعلان عليه في قاعدة النمط. المصطلحات المستخدمة في وصف قواعد CSS. رسم بياني 1. قاعدة CSS عادية. الصورة 2. مثال لقاعدة CSS. باختصار حول بناء الجملة لكتابة قواعد CSS: إعلان النمط في parvil محاط بأقواس متعرجة - () يتم الفصل بين الخاصية والقيمة في الإعلان بنقطتين - : إعلان واحد (في زوج واحد من الأقواس المتعرجة) يمكن أن يحتوي على أي عدد من الأزواج الملكية: القيمة في نهاية كل زوج الملكية: القيمةضع فاصلة منقوطة - ; بعد الزوجين الأخيرين الملكية: القيمةالفاصلة المنقوطة غير مطلوبة. بناء جملة CSS ليس حساسًا للمسافات البيضاء (المسافات وعلامات التبويب والواصلات). بناء جملة CSS ليس حساسًا لحالة الأحرف. يمكن لأي علامة HTML أن تعمل كمحددات؛ وهناك أيضًا محددات فئة أو محددات معرف. دعونا ننظر إلى كل شيء بالترتيب. محددات العلامات كما هو مكتوب سابقًا، يمكن لأي علامة أن تكون محددًا في قاعدة CSS. لنلقي نظرة على مثال. مرحبًا! العنوان h2! بالمناسبة، يمكنك تعيين إعلان واحد لمجموعة من المحددات. على سبيل المثال، نريد علامات العنوان , و كانت زرقاء ومحاذات لمركز الكتلة. للقيام بذلك، يمكنك إدراج هذه العلامات في المحدد، وفصلها بفاصلة. فيما يلي مثال على الكود: مرحبا ح1! العنوان h2! إدخال النمط هذا يعادل مجموعة القواعد التالية: محددات السليل يمكنك تعيين قواعد نمط للعناصر بناءً على ما إذا كان العنصر متداخلاً داخل عنصر آخر. إذا كانت إحدى العلامات متداخلة داخل علامة أخرى، فإن العلامة المتداخلة تسمى العلامة التابعة لها، وتسمى العلامة التي يتداخل فيها الطفل سلفها. على سبيل المثال، تحتاج إلى تعيين الفقرات داخل الطاولة لون النص الأحمر. لحل هذه المشكلة، يتم ترتيب العناصر الموجودة في المحدد بترتيب متداخل ويتم فصلها بمسافات. أي أن مشكلتنا تحل على النحو التالي: مرحبًا! نص الفقرة في الجدول. نص الفقرة خارج الجدول. جميع العلامات ستعرض كافة الجداول الموجودة في المستند اللون باللون الأحمر. يرجى ملاحظة أن العلامة تقع داخل العلامة يعرض أيضًا النص باللون الأحمر. في الواقع، بدلا من كان من الممكن تحديد علامة ، منذ العلامة يجب أن تحتوي دائمًا على علامة . لمزيد من استكشاف محددات CSS، تحتاج إلى إتقان بعض المصطلحات البسيطة المتعلقة ببنية المستند. شجرة المستندات عبارة عن رسم تخطيطي لإنشاء مستند HTML، يُظهر ترتيب العلامات وتداخلها داخل بعضها البعض. دعونا نعطي مثالا على هذا المخطط: تُظهر شجرة المستندات بوضوح الاتصالات في مستند HTML وترتيب العلامات وتداخلها. يستخدمه المطورون لكتابة أنماط CSS ونصوص JavaScript. فيما يلي مثال للكود المطابق لمخطط شجرة العناصر من الشكل 1. مرحبًا! نص فقرةو الدهنية. البند 1.1 البند 1.2 البند 1.3 البند 2.1 البند 2.2 البند 2.3 لذلك، هناك علاقات بين علامات مستند HTML. ويتم التعبير عنها من خلال تداخل العلامات أو الترتيب الذي تتبع به علامة أخرى. تسمى هذه الروابط روابط القرابة، وتستخدم مصطلحات مثل السلف والسليل، والوالد والطفل، ومصطلحات "عائلية" أخرى للإشارة إلى أنواع مختلفة من علاقات القرابة. الآن دعونا نلقي نظرة على جميع أنواع الاتصالات. الأجداد والأحفاد الأسلاف هي عناصر تحتوي على عناصر أخرى، أي أن العنصر هو سلف لها الجميعالعناصر المتداخلة فيه. الأحفاد هي عناصر متداخلة داخل عنصر آخر. لقد تمت بالفعل مناقشة محددات السليل أعلاه. الآباء والأمهات والأطفال الوالد هو سلف المستوى الأول (السلف المباشر) للعنصر. العنصر الفرعي هو طفل من المستوى الأول. يمكن أن يحتوي العنصر الأصلي على عدد غير محدود من الأطفال. في شجرة العناصر لدينا في العلامة العناصر الفرعية التالية: , , و واحدة اخرى عناصر الأخوة عناصر الأخوة أو الأخت (مهندس الأشقاء - الإخوة والأخوات)، مجموعة من العناصر التي لها أب مشترك. على سبيل المثال، العلامات , , والثانية أخت، لأن لديهم والد مشترك . العناصر المجاورة العناصر المتجاورة هي عناصر شقيقة متجاورة، أي العناصر التي لها أصل مشترك وتقع جنبًا إلى جنب في شجرة العناصر. في مثالنا، ستكون العناصر المتجاورة عبارة عن أزواج: و , و , و الآن دعنا نعود إلى المحددات. محددات الطفل عندما لا نكون مهتمين بجميع السلالات، ولكن فقط بأحفاد المستوى الأول، أي العناصر الفرعية، يتم استخدام محددات الأطفال في CSS. للإشارة إلى أن قاعدة النمط تنطبق فقط على عنصر فرعي، يستخدم المحدد الحرف ">". مرحبًا! نص الفقرة في الجدول. نص فقرة في جدول (في حاوية div). نص الفقرة خارج الجدول. رمز HTML لهذا المثال هو تمامًا نفس رمز المثال للمحدد السليل، فقط قاعدة النمط مختلفة. نتيجة لتطبيق محدد فرعي، نص الفقرة في الجدول في الحاوية لم يعد أحمر، منذ هذه الفقرة العلامة الأصل والعلامة سلف. المحدد المجاور يقوم محدد العنصر المجاور بتحديد عنصر مجاور مباشرة لعنصر محدد آخر. بناء جملة هذا المحدد هو: محدد العنصر السابق، متبوعًا بعلامة "+"، متبوعًا بمحدد العنصر المطلوب تحديده. دعونا ننظر إلى مثال حقيقي. في مقالات كبيرة تحتوي على عدة أقسام معنونة بالعلامات ، فمن المستحسن زيادة الهامش العلوي (خاصية الهامش العلوي). المسافة البادئة بمقدار 20 بكسل ستجعل النص قابلاً للقراءة. ولكن إذا كانت العلامة يأتي بعد ذلك مباشرة ، ويمكن أن يكون هذا في بداية المقالة، المسافة البادئة العلوية فوق العلامة سوف تكون زائدة عن الحاجة. يمكن حل هذه المشكلة باستخدام محدد العناصر المجاورة. إليك كود html مع مثال لكيفية عمل محدد العناصر المجاورة. مرحبًا! العنوان h2 العنوان h2 نص الفقرة يدور حول مغامرات لا تصدق. اسم آخر للمحددات المجاورة: المحددات المجاورة، هنا يمكنك قراءة المزيد عن هذا النوع من المحددات. المحددات ذات الصلة محدد الأخوة يشبه محدد الجوار، ولكنه ينطبق فقط على جميع العناصر المحددة التالية للعنصر المحدد. بناء جملة محدد الأخوة هو محدد العنصر السابق، متبوعًا بعلامة "~" (تيلدا)، متبوعة بمحدد العنصر المطلوب تحديده. مثال على استخدام محدد الأخت. مرحبًا! نص الفقرة رقم 1 يدور حول مغامرات لا تصدق. نص الفقرة رقم 2 يدور حول مغامرات لا تصدق. القسم النصي رقم 1 يدور حول مغامرات مذهلة. نص الفقرة رقم 3 يدور حول مغامرات لا تصدق. من المثال يتضح أنه بعد كان نص العلامة للفقرة رقم 3 باللون الأحمر أيضًا. أي أنه لتعيين أسلوب ما، لا يجب أن تأتي العناصر الشقيقة بعد بعضها البعض. محدد عالمي إذا كان محدد قاعدة CSS يحتوي على الحرف "*"، فإن هذه القاعدة تنطبق على جميع عناصر الصفحة دون استثناء. من الصعب أن نتخيل حالة تكون فيها هذه القاعدة منطقية. ولكن هناك حالة واحدة عندما يريد المطور "صفر" جميع المسافات البادئة الخارجية والداخلية. ثم تحتاج إلى استخدام هذا النمط: * (الهامش: 0؛ الحشو: 0؛) ولكن يمكن استخدام الحرف "*" في المحددات المركبة. Ul * (اللون: أحمر) يقوم هذا الكود بتعيين لون نص أحمر لجميع أحفاد العنصر . الطبقات تعد الفئات في CSS الطريقة الأكثر شيوعًا لتعيين نمط لمجموعة من العناصر. يتم استخدام الفصل عندما تحتاج إلى تعيين أنماط مختلفة لعناصر مستند HTML الذي تم إنشاؤه بواسطة علامة واحدة. بناء جملة الفئة: اسم العلامة في محدد النمط، تتم كتابة العلامة المطلوبة أولاً، ثم تتم الإشارة إلى اسم الفئة من خلال نقطة. يجب أن يبدأ اسم الفئة بحرف لاتيني ويمكن أن يحتوي على أحرف واصلة (-) وشرطة سفلية (_). مثال عند استخدام الفئات: على موقع الويب، يتم إنشاء القوائم العلوية والجانبية والسفلية باستخدام العلامات ، تحتاج هذه القوائم الثلاث إلى إنشاء ثلاثة أنماط مختلفة. في CSS، يتم إنشاء ثلاث فئات: ul.menu-top، ul.menu وul.menu-bottom. في نص مستند HTML، يتم إنشاء قوائم متنوعة بالفئة المحددة في سمة الفئة: فئة = "القائمة أعلى">... فئة = "القائمة">... فئة = "القائمة أسفل">... الفصول هي أداة CSS شائعة الاستخدام. إنها مريحة وتجعل رمز النمط أكثر قابلية للقراءة. يمكنك إنشاء فئة سيتم تطبيقها على أي علامة. يتم استخدام محدد عالمي لهذا الغرض. *.اسم الفئة (الخاصية 1: القيمة؛ الخاصية 2: القيمة؛ ...) يمكن تقصير هذا الإدخال عن طريق إزالة الرمز "*". اسم الفئة (الخاصية 1: القيمة؛ الخاصية 2: القيمة؛ ...) محددات الهوية (المعرفات) المعرفات هي أنواع من المحددات التي تحدد اسمًا فريدًا للعنصر. فريدة تعني حدوثها مرة واحدة في رمز المستند. يمكنك إنشاء نمط باستخدام المعرفات، ولكن الغرض الرئيسي منها هو الوصول إليها باستخدام البرامج النصية. عند وصف معرف، تتم الإشارة إلى رمز التجزئة (#) أولاً، متبوعًا باسم المعرف. #اسم التعريف(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...) تمامًا مثل اسم الفئة، يجب أن يبدأ اسم المعرف بحرف لاتيني ويمكن أن يحتوي على أحرف الواصلة (-) والشرطة السفلية (_). محددات السمات يوجد عدد من العلامات في HTML التي تغير تأثيرها اعتمادًا على السمات. على سبيل المثال، العلامة اعتمادًا على قيمة سمة النوع، يمكنها إنشاء حقل نموذج وزر وعناصر نموذج أخرى. لذا، إذا قمت بتطبيق نمط على محدد الإدخال، فسوف يغير جميع عناصر النموذج التي تم إنشاؤها بواسطة تلك العلامة. للتحكم بدقة في هذه العناصر، يوفر CSS محددات السمات. هناك أنواع مختلفة من محددات السمات. باستخدام محددات السمات، يمكنك تصميم علامة إذا كانت تحتوي على سمة معينة أو إذا كانت سمة علامة معينة لها قيمة معينة. محددات السمات هي موضوع مقال كبير منفصل. ولأغراض هذه المقالة، سنشير فقط إلى وجودها. الطبقات الزائفة موضوع آخر كبير في CSS هو الفئات الزائفة. تشير البادئة "الزائفة" إلى وهم أو زيف. الحقيقة هي أن عناصر مستند HTML تتغير اعتمادًا على تصرفات المستخدم. على سبيل المثال، يتغير الارتباط بناءً على وقت تحريك المؤشر فوقه. باستخدام الفئات الزائفة، يتم إنشاء تأثيرات ديناميكية على الصفحة. بناء جملة الطبقة الزائفة: المحدد: فئة زائفة(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...) يمكنك تطبيق فئات زائفة على معرف أو محددات الفئة (ul.menu:hover (اللون: أخضر)). للمبتدئين، ألاحظ: في حين أن المطور يأتي بأسماء الفئات والمعرفات بنفسه، فإن أسماء الفئات الزائفة في CSS هي كلمات محجوزة. تُنفِّذ الفئة الزائفة ‎:active قاعدة النمط إذا كان العنصر نشطًا. على سبيل المثال، يتم تمرير المؤشر فوق الرابط ويتم النقر عليه. فئة زائفة :hover - يتم تمرير مؤشر الماوس ببساطة فوق عنصر ما، على سبيل المثال رابط. هناك العديد من الفئات الزائفة. يمكن تغطية موضوع الفئات الزائفة بالكامل في مقالة منفصلة. لقد تطرقنا إليها هنا بشكل سطحي فقط. العناصر الزائفة باستخدام العناصر الزائفة، يمكنك إضافة محتوى إضافي إلى محتوى الصفحة غير الموجود في الكود المصدري. يمكنك أيضًا تغيير جزء من عنصر، مثل الحرف الأول في الفقرة. أي قم بإنشاء عنصر html وهمي - الحرف الأول بأسلوب العرض الخاص به. تعد عناصر CSS الزائفة أيضًا موضوعًا واسعًا يتطلب مقالة منفصلة لتغطيته بالكامل. بناء جملة العناصر الزائفة هو نفس بناء جملة الفئات الزائفة: المحدد: عنصر زائف(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...) مقالات ذات صلة مشاكل هواتف الكاتيل الذكية الكاتيل البرامج فيما يلي وصف أكثر تفصيلاً لتنسيقات الترجمة الأكثر شيوعًا حول كيفية تضمين الترجمة والتعليقات التوضيحية باللغة الروسية في اللغات الأخرى ويندوز 10 تعرف على كلمة مرور Wi-Fi على هاتف Android البرامج استعادة هاتف Prestigio من حالة معطوبة كيفية إعادة ضبط Android Prestigio مشاكل البرامج الثابتة أو وامض Sony Xperia البرامج الهاتف لا يشحن: الأسباب والحلول المحتملة الشبكة المحلية البرامج الثابتة لـ zte Blade l2 4 أسئلة محرك أقراص فلاش DIY: اختراق حياتي لصنع حافظة أنيقة لمحرك أقراص USB أسئلة كيف يتم تصنيعه، كيف يعمل، كيف يعمل إنشاء الملحقات الخاصة بك نوصي إنترنت أفضل الطرق والبرامج للتحقق من أداء الكمبيوتر يمكنك الحصول على فكرة عن أداء جهاز الكمبيوتر الخاص بك من خلال الاختبار الشامل. إن تنفيذ هذا الإجراء بشكل دوري يعني في الوقت المحدد... قواعد استخدام الرمز الترويجي الأرباح نسخة الظل ويندوز 10 للمبتدئين وصف التعريفة الذكية الصغيرة من MTS للمبتدئين خدمات MTS: خيارات مدفوعة ومجانية ويندوز إكس بي الهواتف الذكية التي تعمل بنظام Android: كيفية تحرير الذاكرة الداخلية؟ فيديو كيفية إعادة تعبئة خرطوشة HP؟ ويندوز 10 نوكيا التي فقدناها: تاريخ العلامة التجارية الأسطورية للهواتف المحمولة كيفية تقييد الوصول إلى وحدة تحكم WordPress الخاصة بك تقييد Wordpress الوصول إلى الصفحات نغمة رنين، iPhone، iTunes - كيفية الصنع والتثبيت؟ Sony M2 Xperia: مراجعة ومواصفات ومراجعات كم يزن هاتف Sony xperia m المواصفات هواتف الكاتيل الذكية الكاتيل فيما يلي وصف أكثر تفصيلاً لتنسيقات الترجمة الأكثر شيوعًا حول كيفية تضمين الترجمة والتعليقات التوضيحية باللغة الروسية في اللغات الأخرى تعرف على كلمة مرور Wi-Fi على هاتف Android استعادة هاتف Prestigio من حالة معطوبة كيفية إعادة ضبط Android Prestigio البرامج الثابتة أو وامض Sony Xperia الهاتف لا يشحن: الأسباب والحلول المحتملة البرامج الثابتة لـ zte Blade l2 4 محرك أقراص فلاش DIY: اختراق حياتي لصنع حافظة أنيقة لمحرك أقراص USB كيف يتم تصنيعه، كيف يعمل، كيف يعمل إنشاء الملحقات الخاصة بك أفضل الطرق والبرامج للتحقق من أداء الكمبيوتر قواعد استخدام الرمز الترويجي نسخة الظل ويندوز 10 وصف التعريفة الذكية الصغيرة من MTS خدمات MTS: خيارات مدفوعة ومجانية حقوق الطبع والنشر 2024 - الكمبيوتر خطوة بخطوة.