الأولوية التي يقوم على أساسها إعطاء الelement الخاصية في css

Karim Jibaku · 23 يوليو 2020

السلام عليكم و رحمة الله وبركاته

هل ممكن شرح مدى تحديد او خصوصية css فلقد قراة ان الامر صعب و معقد بعض الشيء

و شكرا مسبقا

عصام يخلف · 23 يوليو 2020

نعم فهمت قصدك أنت تتكلم عن الأولية التي يقوم على أساسها إعطاء الelement الخاصية المناسبة

وهي تسمة ب CSS Precedence Rules أي قواعد الأولوية وهي ترتب كالتالي :

إضافة important! بعد خاصية سي اس اس
```
<style>
  div {
      font-family: Arial;
      font-size: 16px !important;
  }
  .specialText {
      font-size: 18px;
  }
</style>


<div class="specialText">
  This is special text.
</div>
```
في هذا المثال الخاصية font-size للdiv قسمتها 16px إلا أن تعريفها في الكلاص ب 18px فالأولوية هنا للكلاص إلا أن إضافة important! يبقي الأولوية للعنصر المضاف إليه

Specificity of CSS Rule Selectors وهذه تعني الإعتماد على نوع السيلكتور في تحديد الخاصية كما في المثال التالي:

<body>

    <style>
        body     { font-size: 10px; }
        div      { font-size: 11px; }
        [myattr] { font-size: 12px; }
        .aText   { font-size: 13px; }
        #myId    { font-size: 14px; }
    </style>

    <div                                > Text 1 </div> <!-- div يأخذ خاصية السيلكتور  -->
    <div myattr                         > Text 2 </div> <!--  myattr attribute يأخذ خاصية ال -->
    <div myattr class="aText"           > Text 3 </div> <!--  aText Class يأخذ خاصية ال -->
    <div myattr class="aText" id="myId" > Text 4 </div> <!-- myId ID يأخذ خاصية ال  -->

</body>

هذه بالنسبة لأنواع الأولويات أما بالنسبة لمصدر التعريفات فهي ثلاثة أنواع كالأتي :

المصدر التي يحتوي على تعريفات ال CSS وهي حسب الأولوية التالية :

inline css وهو الذي داخل السطر

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Internal CSS المصدر الداخلي

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS المصدر الخارجي

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

تم التعديل في 23 يوليو 2020 بواسطة عصام يخلف
إكمال التعريف

عصام يخلف · 23 يوليو 2020

أهلا أخي كريم

المعذرة لم أفهم ماذا تقصد بخصوصية ال css

أرجو توضيح أدق لسؤالك .

Karim Jibaku · 23 يوليو 2020

اقصد ان css يعطي الاسبقية لتنسيقات الموجودة في وسم فيطبقها و يتجاهل التنسيقات الموجودة في style sheet لنفس العنصر

هذا مثال

Karim Jibaku · 23 يوليو 2020

شكرا على الشرح هل هذا كل ما في الامر؟

و هل ممكن تعيد شرح لي Specificity of CSS Rule Selectors

من بعد فضلك ٠

مصطفى القباني · 23 يوليو 2020

هناك 3 أماكن لكتابة الstyle:
inline
internal
external

بالنسبة لأولية تطبيق الstyle على العنصر تكون الأولوية للinline style مثل:

<p style="color:blue"> I'm Blue </p>

يليه الinternal مثل:

<html>
<head>
    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
  <p>I'm red</p>
</body>
</html>

يليه الexternal مثل:

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p></p>
</body>
</html>

الأولوية في تطبيق الstyle تكون للinline ثم للinternal ثم للexternal.

على سبيل المثال إذا كان لدينا الكود الآتي:

<html>
<head>
    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p style="color: blue;"></p>
</body>
</html>

هل سيكون لون الوسم p أزرق أم أحمر؟

سيكون لونه أزرق لأن الأولوية تكون للinline style، وهكذا بالمثل على الexternal stylesheet.

عصام يخلف · 23 يوليو 2020

بتاريخ 17 دقائق مضت قال Karim Jibaku:

شكرا على الشرح هل هذا كل ما في الامر؟

نعم هذا كل ما في الأمر

اقتباس

و هل ممكن تعيد شرح لي Specificity of CSS Rule Selectors

بالتأكيد : بالنسبة للشرح هو بسيط لكنه يحتاج بعض الممارسة للفهم الجيد

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

إذا لم يكن هناك أي تعريف يكون الستايل التلقائي أما إذا كانت معرفة فهي تكون حسب الأولوية

body مثلا يكون هو الأول حيث تأخذ تعريفاته بشكل تلقائي لأنه الأب .

أما div فهو أكثر إختصاص من الأول فما يكون داخل div يتبع تعريف السيلكتور , وهكذا

تكون class أكثر اختصاص فما يكون معرف ب اسم الكلاس يكون له الأفضلية قبل div و body

أما الايدي ID فله أولوي قبل الكل .

ببساطة يمكننا إجراء حساب خفيف لمعرفة الأولوية من خلال الإطلاع على هذا الرابط فيه شرح مبسط ومفهوم .

Yomna Raouf · 23 يوليو 2020

بتاريخ 15 ساعات قال Karim Jibaku:

اقصد ان css يعطي الاسبقية لتنسيقات الموجودة في وسم فيطبقها و يتجاهل التنسيقات الموجودة في style sheet لنفس العنصر

هذا مثال

:css specificity

ال specificity هي وزن معطى ل css declaration معين, يتم تعيين هذا الوزن حسب رقم نوع كل selector في ال selectors المستخدمة

"Type selector"محددات النوع مثل h1 و pseudo-elements مثل before::
"class selector" محددات class مثل ( myclass.) و attributes selectors مثل (["type="radio]) و pseudo-classes مثل ( hover:)
"ID selector"محددات ID مثل ( myId#)

فعندما تقوم بكتابة عدة declarations لها نفس الوزن سيتم تطبيق التنسيق المذكور في ال declaration الأخير.

يمكنك إستخدام هذة الأداة لحساب ال specificity calculator :specificity

تم التعديل في 23 يوليو 2020 بواسطة Yomna Raouf

الأولوية التي يقوم على أساسها إعطاء الelement الخاصية في css

السؤال

Karim Jibaku

7 أجوبة على هذا السؤال

Recommended Posts

عصام يخلف

عصام يخلف

Karim Jibaku

Karim Jibaku

مصطفى القباني

عصام يخلف

Yomna Raouf

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية