أجهزة الكمبيوتر شبابيك إنترنت

محددات CSS. أنواع المحددات. محدد CSS العام حيث يمكنك تطبيقه

محدد
محدد عالمي

يبدو مخطط كود CSS كما يلي:

المحدد (خاصية CSS: القيمة ؛ خاصية CSS: القيمة ؛ ... إلخ)

في المحدد العام ، تعمل علامة النجمة * كمحدد:

* (خاصية CSS: القيمة ؛ خاصية CSS: القيمة ؛ ... إلخ)

محدد عالمي، يؤثر على جميع علامات مستند HTML في آنٍ واحد.

على سبيل المثال ، يمكنك إزالة كل المساحة المتروكة والحشو من كل العلامات في مستند HTML:

* (الهامش: 0 ؛ المساحة المتروكة: 0 ؛)

لنفترض أن لدينا مستند HTML يحتوي على الكود التالي:

صفحة سنو ليوبارد

سنو ليوبارد

بالطريقة الآتية .

دعنا نستخدم المحدد العام لجعل لون الخط لجميع العلامات أخضر ، واسم الخط arial ، ونمط الخط مائل.

صفحة سنو ليوبارد

سنو ليوبارد

نمر الثلج (irbis ، ak leopard) هو حيوان ثديي كبير السن من الحيوانات المفترسة. تعيش في سلاسل الجبال في أفغانستان وبورما وبوتان والهند وكازاخستان وقيرغيزستان والصين ومنغوليا ونيبال وباكستان وروسيا وطاجيكستان وأوزبكستان. تتميز القزحية بجسم رفيع وطويل ومرن وأرجل قصيرة نسبيًا ورأس صغير وذيل طويل جدًا. يبلغ طول نمر الثلج وذيله 200-230 سم ، ويصل وزنه إلى 55 كجم. لون الفراء رمادي فاتح ، دخاني مع بقع داكنة على شكل حلقة أو صلبة.

يصطاد نمر الثلج بشكل رئيسي الماعز والكباش الجبلية ؛ كما توجد الخنازير البرية والدراج وحتى الغوفر في نظامه الغذائي. بسبب عدم إمكانية الوصول إلى موائل الأنواع ، لا يزال نمور الثلج غير مفهومة جيدًا. ومع ذلك ، وبحسب تقديرات تقريبية ، يتفاوت عددهم في المنطقة بنحو 10 آلاف فرد. اعتبارًا من عام 2013 ، يُحظر صيد نمور الثلج بشكل عام.

ستبدو الصفحة في المتصفح بهذا الشكل.

يمكنك أيضًا تجربة الحشو ، وجعله 0 أولاً ثم 15 بكسل ، وإضافته إلى كود CSS.

  • المهمة التي يتم تنفيذها هي اختيار جميع العناصر. بشكل عام ، الجميع.
  • التعيين - رمز النجمة - *.
  • مثال على الاستخدام:

إعادة تعيين المسافات البادئة لجميع العناصر بشكل افتراضي

تعرف على المزيد حول المحدد العام

تم تقديمه في CSS منذ الإصدار 2. يتطابق مع أي عنصر في. لذلك ، يتم تطبيق الأنماط المحددة للمحدد العام على جميع العناصر مرة واحدة. لهذا السبب ، أنصحك باستخدامها بحذر شديد - فقد تتسبب في مشكلة عند وراثة الأنماط. أو بالأحرى ، سلوك غير متوقع (لمبرمج عديم الخبرة). سننظر في هذه النقطة بمزيد من التفصيل في قسم الميراث.

ميزة أخرى للمحدد العام هي أنه عند استخدامه مع محدد آخر (على سبيل المثال ، فئة أو معرف أو محدد سمة) كجزء من محدد بسيط ، يمكن تخطيه مع الإفلات من العقاب. هذا مماثل تقريبًا لقول ببساطة "الجمل ذات السنام الواحد" بدلاً من "كل الجمل ذات السنام الواحد". المعنى لم يتغير.

مثال:

*. Error (color: red؛) .error (color: red؛) / * هاتان القاعدتان متساويتان. تم تخطي المحدد العام في الحالة الثانية * /

منطقة التطبيق

في الواقع ، من الأنسب استخدام محدد عام ، كما في المثال الأول ، لإعادة تعيين القيم الأولية للأنماط المعتمدة على المتصفح (على وجه الخصوص ، المسافة البادئة).

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

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

مرحبا أعزائي قراء موقع المدونة. سنواصل اليوم ملء موادنا بالمواد والبدء في الحديث عن شيء أساسي مثل المحددات في لغة CSS.

هناك سبعة أنواع منها - العلامة ، والفئة ، والمعرف ، والعامة ، والسمات ، وكذلك الفئات الزائفة والعناصر الزائفة. قليلا كثيرا ، أليس كذلك؟ حسنًا ، لا شيء ، سنقوم بتحليلهم جميعًا ببطء ، ومع ذلك ، باستخدام أمثلة مفصلة.

في المنشورات السابقة ، درسنا بالفعل وتعرفنا أيضًا على وحدات الأحجام ، مثل تعلمنا عن مبادئ الوراثة في CSS. حسنًا ، اليوم ، كما قلت ، نفتح فصلًا جادًا للغاية في دراسة لغة ترميز النمط.

علامة CSS ومحددات الفئة

قبل دراسة قواعد النمط ، سوف تحتاج إلى معرفة كيف وبأية مبادئ تحدد تلك الملصقات التي من خلالها سيفهم المتصفح أي عناصر من كود Html يحتاجون إلى تطبيقها. هناك محددات مختلفة. أبسط ، من وجهة نظر الفهم ، استخدم أسماء العلامات التي يجب تطبيق قواعد CSS المكتوبة بعدها.

سيستخدم هذا المثال اللون الأحمر للون والرمادي لتعبئة الخلفية لجميع علامات الفقرة P. يمكن أن تحتوي أي قاعدة CSS على عدة محددات في وقت واحد. كيف يجب قراءتها في هذه الحالة؟ دائما من اليمين إلى اليسار، بمعنى آخر. ابدأ من أقرب قوس افتتاح مجعد.

في المثال أعلاه ، يعرض السطر الأول محدد علامة (عنصر) يخبر لون الخط باللون الأحمر لجميع Divs.

محتوى حاوية عادية Div

في السطر الثاني ، نرى مثالاً على محدد معقد ، حيث لدينا عنصر جديد مثل فئة (فئة)... يشرع في الجودة. كقيمة للفئة ، يمكننا استخدام اسم عشوائي باستخدام الرموز ،،، [_] ، [-].

ولكن إلى جانب الفئة ، يتم استخدام المعرف أيضًا في لغة ترميز النمط. ما هو الفرق بين Class و Id؟ يجب أن تكون قيمة هذا الأخير فريدة من نوعها ، منذ ذلك الحين المعرف معرف فريدلعلامة Html واسمها (القيمة) يمكن استخدامها مرة واحدة فقط في الكود.

وقيمة الفئة ليست فريدة ويمكن استخدامها لأي عدد من العناصر في الكود. أولئك. يمكن أن يكون للعلامات المختلفة (Div ، P ، H1 ، إلخ) نفس القيمة لسمة الفئة الخاصة بهم:

كيف يتم استخدامه في محددات CSS؟ اتضح أن اسمه مكتوب منقط للأمام.

لذلك ، عندما نرى شيئًا يبدأ بنقطة في كود CSS ، نفهم على الفور أننا نتحدث عن فصل دراسي. إذا أخذنا في الاعتبار المثال الموضح في لقطة الشاشة ، الآن في جميع عناصر كود Html ، حيث ستتم كتابة "class" بالقيمة "Blue" ، فسيتم تلوين النص باللون الأزرق.

لكن هذا لن يحدث على الإطلاق لأننا اخترنا اسم الفئة "أزرق". يمكنك تسميته بأي شيء تريده (حتى "xyz") ، ويتم تعيين اللون الموجود في مثالنا تمامًا كما تم تعيينه للمُحدد مع هذه الفئة. أتمنى أن يكون هذا واضحا؟ دعنا نغير اسم (قيمة) الفصل في المثال:

فقرة مع النص

فقرة مع النص

أولئك. الآن لدينا فئة XYZ والقاعدة المكتوبة لها:

Xyz (اللون: أزرق)

لون نص الفقرة باللون الأزرق. هذا المثال يؤكد ذلك اسم سمة الفئةيمكن استخدام أي منها. ومع ذلك ، دعنا نواصل.

دعنا نلقي نظرة أخرى على مثال عن كيفية استخدام محددات العلامات والفئات في CSS. دعنا نتخيل أن لدينا قواعد الأسلوب التالية:

div (اللون: أحمر) div.a123 (اللون: أخضر) .xyz (اللون: أزرق)

وتخيل أيضًا أنه في كود Html لدينا العناصر التالية:

وفقًا للقواعد المحددة للمحددات المحددة ، يجب أن يبدو محتوى العناصر المحددة لكود Html كما يلي:

لنرى الآن سبب تفسير المتصفح لتصميم هذه العناصر من كود Html. بالنسبة إلى الحاوية Div الأولى ، التي لم تتم كتابة أي فئة بها ، سيتم تطبيق قاعدة CSS المطبقة على جميع الحاويات: div (اللون: أحمر). لذلك ، سوف تكون محتوياته ملونة باللون الأحمر. ما هو مطلوب لعرضه.

في علامة Div الثاني ، لدينا الفئة "a123" مسجلة. في هذه الحالة ، سيتم تطبيق قواعد CSS المقابلة لـ "div.a123" (لأن لدينا فقط علامة Div مع السمة class = "a123" مكتوبة فيها). لذلك ، فإن محتويات الحاوية الثانية ستكون ملونة باللون الأخضر.

لكنك ربما لاحظت أنه يمكن تطبيق قاعدة CSS الأولى "div (color: red)" على عنصر Div الثاني أيضًا ، نظرًا لأنها مخصصة لجميع الحاويات بدون استثناء. لقد تبين وجود تناقض يتم حله في CSS عن طريق إدخال مفهوم.

سنتحدث عن هذا بالتفصيل بعد قليل ، لكن في الوقت الحالي سأقول فقط أن أولوية "div.a123" (بالنسبة إلى Div الثاني في هذا المثال) ستكون أعلى.

بالمناسبة ، يحدث موقف مشابه مع الدرجة الثالثة من مثالنا. هناك خياران مناسبان له في وقت واحد: محدد العلامات "div" ومحدد الفئة ".xyz". مرة أخرى ، نظرًا للأسباب التي لم أوضحها بعد (اقرأ عن هذا في الرابط أعلاه) ، ستكون أولوية الأخير أعلى ، وبالتالي فإن محتويات الحاوية الثالثة ستكون ملونة باللون الأزرق.

هيا لنذهب. في المثال أعلاه ، لدينا علامة الفقرة التالية P ، والتي تمت كتابتها class = "a123". اتضح أن هذا العنصر لا يندرج تحت أي من المحددات الثلاثة التي كتبناها (كل الثلاثة فقدناه).

إنه يتداخل فقط مع الخيار الثاني ، ولكن لن يتم استخدام هذا المحدد إلا لعلامات Div ذات الفئة a123 ، وليس علامة الفقرة P. ونتيجة لذلك ، سيظل لون النص في هذه الفقرة هو اللون الافتراضي ، أي أسود.

علاوة على ذلك في المثال ، لدينا عنصر فقرة مع class = "xyz". سيتم تطبيق قاعدة CSS الأخيرة ".xyz (اللون: أزرق)" عليها. لذلك ، سيتلون النص الموجود في هذه الفقرة باللون الأزرق. هنا ، على ما أعتقد ، كل شيء واضح.

محدد عام ومعرف فريد

الآن دعنا ننتقل إلى معرفات ، التي ذكرتها بالفعل. عندما نرى شيئًا في كود CSS الشبكة الأمامية (التجزئة)، فهذا يعني أننا نتعامل مع المعرف:

عادة ما يتم كتابة هذا المحدد دون ذكر العلامة، التي تشير إليها (الخيار الأول في المثال المذكور أعلاه) ، على الرغم من أن خيار التهجئة الثاني مقبول أيضًا ، إلا أنه نادرًا ما يتم استخدامه. هذا يرجع إلى حقيقة أن قيمة سمة المعرّف في الكود ستكون فريدة ، مما يعني أنه لا يمكن أن يكون هناك عنصرين لهما نفس قيم المعرف. أولئك. لا جدوى من التحديد ، رغم أن هذا غير ممنوع.

لذلك ، عادة ما يكتبون فقط تجزئة (شعرية) ، وبعدها مباشرة قيمة (اسم) سمة المعرّف. افترض أن لدينا القاعدة التالية للمعرف:

#back (اللون: أحمر)

ويحتوي الرمز على المقتطف التالي:

والتي نتيجة تطبيق القاعدة بعد "#back" عليها ، فسيفسرها المتصفح على النحو التالي:

حاوية Div بمعرف فريد

أيضا ، يوفر CSS ل المُحدِّد العام يُشار إليه بعلامة النجمة، مما يوضح أن هذه القاعدة ستنطبق بشكل عام على أي عنصر في الكود:

* (لون أسود)

في هذه الحالة ، سيكون النص المضمن في أي علامة باللون الأسود (اللون الافتراضي). من الواضح أن جميع المحددات الأخرى (العلامات والفئات والمعرف) سيكون لها أولوية أعلى من المحدد العام.

محددات السمات ومستقبلهم في CSS الحديث

ستعمل جميع الخيارات الموضحة أعلاه (العلامة والفئة والمعرف والعامة) في جميع المتصفحات تمامًا. لكن هناك خيارات أخرى لا تعمل في كل مكان.

يتضمن هذا النوع محددات السمات ، وهي مريحة للغاية وتسمح لك بالتوسع بشكل كبير وفي نفس الوقت تبسيط إمكانيات عمل النقطة ، ولكن للأسف ، ليست مدعومة بنسبة 100٪ من قبل جميع المتصفحات.

كما تتذكر على الأرجح ، في لغة Html داخل العلامات ، يمكننا استخدام سمات مختلفة تسمح لنا بإعطاء خصائص معينة لمحتوى هذه العناصر نفسها. لذلك ، سيكون من المنطقي استخدام ليس فقط أسماء العلامات كمحددات في CSS ، ولكن أيضًا أسماء السمات.

في الواقع ، لقد فعلنا هذا بالفعل عندما أخذنا في الاعتبار class و Id ، لأنهما كانا في الأساس سمات لبعض العلامات. كل ما في الأمر أن Aidi و Klass مهمان جدًا في التخطيط وتم تقسيمهما إلى مجموعات منفصلة ، لكل منها تركيبها الخاص.

وكيف يتم استخدام السمات الأخرى الموجودة في لغة Html (وليس معرف وليس فئة) في المحددات؟ بسيط جدا - أرفقها بين قوسين مربعين:

(الون الاخضر)

الآن أي علامة في كود Html ، والتي سيكون لها "العنوان" ، سيكون لها لون النص الأخضر.

مريح جدا في رأيي. لكن المشكلة برمتها في استخدام محددات السمات تكمن في ذلك في IE 6 وما دونها لا يعملونبشكل عام ، أو أنها تعمل ، ولكن بشكل جزئي فقط. حتى تكون نسبة المستخدمين الذين يتصفحون الإنترنت باستخدام IE 6 صفراً ، فمن غير المرجح أن يتم استخدام هذه الطريقة الملائمة على نطاق واسع في التخطيط. لكن مع ذلك ، يجب أن تعرف عن وجودها وأن تكون قادرًا على استخدامها.

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

يمكنك الإشارة فيها ليس فقط اسم السمة ، ولكن أيضًا قيمتها:

(الون الاخضر)

نتيجة لذلك ، سيتم تطبيق قواعد CSS المكتوبة لمثل هذا المحدد فقط على العلامة التي تحتوي على "العنوان" بالقيمة "الفقرة الأولى" (في مثالنا ، سيكون هذا هو السطر الثاني):

كان المثال الموصوف مساواة تامة ، ولكن يمكنك كتابة هذا المحدد على النحو التالي:

(الون الاخضر)

الذي - التي. ستنطبق قاعدة CSS هذه فقط على عناصر كود Html التي تحتوي على كلمة "فقرة" في "العنوان" (في مثالنا ، سيكون هذان السطران الثاني والثالث):

يفسر بناء جملة محدد السمة «~=» كـ "يحتوي على الكلمة كاملة". على سبيل المثال ، لعنصر بعنوان = "(! LANG: الفقرة الثانية" CSS правило «color:green» уже применяться не будет.!}

ولكن يمكنك بدلا من ذلك وضع «*=» وبعد ذلك لن يتم أخذ الكلمات الفردية المحددة في المحدد فقط في الاعتبار ، ولكن أيضًا أجزاء من الكلمات (أي جزء من النص موجود في أي مكان في السمة):

(الون الاخضر)

في هذه الحالة وللعنصر الذي يحمل العنوان = "(! LANG: الفقرة الثانية" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (أي شيء يبدأ بالقيمة بين قوسين) ، مما يساعد في إنشاء محدد سمة مثل هذا:

(لون احمر)

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

لذلك ، ستبدأ جميع الروابط الخارجية بـ "http" ، ويمكن تحديد الروابط الداخلية بشكل نسبي دون استخدام "http". الذي - التي. المحدد المكتوب في مثالنا سيسمح تلوين جميع الروابط الخارجية بالموقع(كلها مطلقة) باللون الأحمر. حسنًا ، تلك النسبية التي لا تحتوي على "http" ستبقى باللون الافتراضي. في رأيي سوبر !!!

كما ترون ، تمنحنا محددات السمات الكثير من الاحتمالات وحقيقة أنها لم يتم استخدامها على نطاق واسع حتى الآن هي ميزة شركة Melkosoft الفقيرة جدًا والمسيئة ، وعلى وجه الخصوص من بنات أفكارهم IE 6. ولكن ببطء بدأوا في استخدامها في CSS وقريبًا ، بالطبع سوف يشقون طريقهم إلى الحياة.

نعم ، هناك عامل آخر «$=» - أي شيء ينتهي بالقيمة المعروضة:

(الون الاخضر)

نتيجة لذلك ، سيتم تلوين الخطين الثاني والثالث من مثالنا الأول باللون الأخضر. القيم "title" تنتهي بـ "raf". هذه هي الطريقة التي ستعمل بها محددات السمات بشكل رائع في CSS الحديثة إذا لم تكن لنسبة معينة من مستخدمي IE 6.

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

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

قد تكون مهتمًا

محددات الفئات الزائفة والعناصر الزائفة في CSS (التمرير ، والفرع الأول ، والسطر الأول ، وغيرها) ، والعلاقات بين العلامات في كود Html
أولويات Css والتعزيز باستخدام أنماط مهمة ومختارة وتجميع وتجميع وأنماط مخصصة ومؤلف
نمط القائمة (النوع ، الصورة ، الموضع) - قواعد Css لتخصيص مظهر القوائم في كود Html
الخلفية في CSS (اللون ، الموضع ، الصورة ، التكرار ، المرفق) - كل ذلك لتعيين لون الخلفية أو صورة الخلفية لعناصر Html
CSS - ما هو ، كيف يتم ربط أوراق الأنماط المتتالية بكود HTML باستخدام Style and Link
وحدات الحجم (بكسل ، Em و Ex) وراثة قواعد CSS
ما هو CSS ، وكيفية توصيل أوراق الأنماط المتتالية بمستند Html وأساسيات بناء جملة هذه اللغة
المساحة المتروكة والهامش والحدود - يتم تعيين الهوامش الداخلية والخارجية وكذلك الحدود لجميع الجوانب (أعلى ، أسفل ، يسار ، يمين) في CSS كيفية إعداد لون الخلفية البديل لصفوف الجداول والقوائم وعناصر Html الأخرى على موقع باستخدام الفئة nth-child الزائفة
كيفية البحث عن خطوط الأنماط غير المستخدمة (المحددات الإضافية) وإزالتها في ملف CSS الخاص بموقعك
العرض (حظر ، لا شيء ، مضمّن) في CSS - عيّن نوع عرض عناصر Html على صفحة الويب

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

وصف

يتم الإشارة إليه كرمز "*". بمساعدتها ، يمكنك تحديد جميع العلامات الموجودة على الصفحة مرة واحدة دون إجراء تصحيحات لغرضها وتداخلها. على سبيل المثال:

* (حجم الخط: 18 بكسل ؛)

من خلال هذا الإدخال ، قدمنا ​​لجميع العناصر التي تحتوي على نص ارتفاع خط يبلغ 18 بكسل.

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

من الجدير بالذكر أيضًا أن استخدام الفئة والمعرف والسمة يسمح لك بتخطي المحدد العام دون أي ضرر. على سبيل المثال:

*. يسار (الحد: 1 بكسل ثابت # 000 ؛). يسار (الحد: 1 بكسل ثابت # 000 ؛)

تحمل هذه الإدخالات نفس الحمل الدلالي ، وسيتم تطبيق النمط بنفس الطريقة مع وبدون المحدد العام.

أين يمكن تطبيقه؟

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

ومع ذلك ، على الرغم من أن هذه الطريقة بسيطة ، وستؤدي أيضًا إلى تقليل طول الشفرة بشكل كبير ، إلا أن لها عددًا من العيوب.

عيوب المحدِّد العام عند إسقاط الأنماط القياسية:

  • لا يمكن إعادة تعيين بعض الأنماط
  • لتحديد السمة لا يمكن ترك مساحة فارغة
  • يمكن أن "تقتل" المظهر القياسي للزر في معظم المتصفحات
  • يعمل Mozila مع الأخطاء الطفيفة في المتصفح
  • يؤدي إلى إبطاء تحميل الصفحة بشكل كبير على Mozila (ومع ذلك ، ينطبق هذا على المواقع التي تحتوي على CSS أكثر من ألف سطر ، وإلا فإن التأخير غير مرئي.)

للأسباب الموضحة أعلاه ، يُنصح بتفريغ الأنماط خصيصًا لكل عنصر باستخدام محدد النوع. ويرد مثال على رمز مشابه لإعادة تعيين الأنماط في النهاية.

ربما يكون محدد CSS العام هو الأسهل للفهم ، لأنه يحدد أنه سيتم تطبيق الأنماط على جميع العناصر تمامًا دون استثناء. يتكون المحدد العام من حرف واحد فقط - علامة النجمة (*) ، الصيغة العامة كما يلي:

* { الملكية: القيمة ؛ الملكية: القيمة ؛ ...)

مثال على استخدام المحدد العام CSS

محدد عالمي

الفقرة 1

الفقرة 2

الفقرة 3

نتيجة في المتصفح

الفقرة 1

الفقرة 2

الفقرة 3

في هذا المثال ، تمت إزالة الهوامش والمساحات المتروكة وحدود عناصر الصفحة. لما هذا؟ كما تعلمون بالفعل من الدرس بعض عناصر HTML تحتوي في البداية على قيم معينة لبعض الخصائص ، على سبيل المثال ، تحتوي الفقرات على هوامش علوية وسفلية غير صفرية للمساحة البيضاء ، وارتباطات الصور بها إطارات ، وما إلى ذلك. ولكن ليس كل شيء بهذه البساطة ، فالحقيقة هي أنه في المتصفحات المختلفة قد يختلف حجم هذه الحقول قليلاً ، وبعضها لم يقم بتعيين الإطارات الافتراضية لروابط الصور لفترة طويلة. وهذه ليست كل الاختلافات الممكنة.

لذلك ، يقوم العديد من مصممي التخطيط (وأنت الآن تتعلم التخطيط بالضبط) بإنشاء ما يسمى "إعادة تعيين أنماط CSS" ، أي في بداية ورقة الأنماط ، يعيدون تعيين جميع قيم CSS الممكنة غير الصفرية ، ثم في العملية ، أضف أنماطًا إلى العناصر ، ولكن بالفعل ، بالطبع ، مع معانيها الخاصة. بهذه الطريقة يمكنك التأكد من أن صفحة HTML ستظهر بالشكل نفسه في جميع المتصفحات.

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

واجب منزلي.

لا أرى أي فائدة من القيام بواجبي على المُحدِّد العام ، لأن كل شيء واضح للغاية هنا ، لذلك دعونا نفعل شيئًا مختلفًا بعض الشيء.

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