دورة سي إس إس CSS
دورة سي إس إس CSS

دورة سي إس إس CSS – المحاضرة الثالثة

CSS Selector يتم استخدام CSS Selector لتحديد المحتوى الذي تريد تصميمه. المحددات CSS Selector هي جزء من مجموعة قواعد CSS
CSS Selector يتم استخدام CSS Selector لتحديد المحتوى الذي تريد تصميمه. المحددات CSS Selector هي جزء من مجموعة قواعد CSS

CSS Selector
يتم استخدام CSS Selector لتحديد المحتوى الذي تريد تصميمه. المحددات CSS Selector هي جزء من مجموعة قواعد CSS. تحدد محددات CSS عناصر HTML وفقًا للمعرف والفئة والنوع والسمة وما إلى ذلك.

هناك عدة أنواع مختلفة من المحددات في CSS.

  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector

1) CSS Element Selector
يقوم محدد العنصر بتحديد عنصر HTML بالاسم.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p{  
    text-align: center;  
    color: blue;  
}   
</style>  
</head>  
<body>  
<p>This style will be applied on every paragraph.</p>  
<p id="para1">Me too!</p>  
<p>And me!</p>  
</body>  
</html> 

2) CSS Id Selector
يتم التعامل مع المحدد من خلال خاصية id لعنصر HTML لتحديد عنصر معين. يكون المعرف دائمًا فريدًا داخل الصفحة ، لذلك يتم اختياره لتحديد عنصر واحد فريد.
هو مكتوب بحرف التجزئة (#) ، متبوعًا بمعرف العنصر.
لنأخذ مثال بالمعرف “para1”.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="para1">Hello Javatpoint.com</p>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>

3) CSS Class Selector
يقوم محدد الفئة بتحديد عناصر HTML بسمة فئة معينة. يتم استخدامه مع حرف الفترة. (full stop symbol) متبوعًا باسم الفئة.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.center {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading is blue and center-aligned.</h1>  
<p class="center">This paragraph is blue and center-aligned.</p>   
</body>  
</html>

CSS Class Selector for specific element
إذا كنت تريد تحديد أنه يجب أن يتأثر عنصر HTML واحد فقط ، فيجب عليك استخدام اسم العنصر مع محدد الفئة

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.center {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading is not affected</h1>  
<p class="center">This paragraph is blue and center-aligned.</p>   
</body>  
</html>

4) CSS Universal Selector
يتم استخدام المحدد العام كحرف بدل. يختار جميع العناصر على الصفحات.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
* {  
   color: green;  
   font-size: 20px;  
}   
</style>  
</head>  
<body>  
<h2>This is heading</h2>  
<p>This style will be applied on every paragraph.</p>  
<p id="para1">Me too!</p>  
<p>And me!</p>  
</body>  
</html>

5) CSS Group Selector
يتم استخدام محدد التجميع لتحديد جميع العناصر بنفس تعريفات الأنماط.
يستخدم محدد التجميع لتقليل التعليمات البرمجية. يتم استخدام الفواصل لفصل كل محدد في التجميع.
دعونا نرى رمز CSS بدون محدد المجموعة.

h1 {  
    text-align: center;  
    color: blue;  
}  
h2 {  
    text-align: center;  
    color: blue;  
}  
p {  
    text-align: center;  
    color: blue;  
}  
h1,h2,p {  
    text-align: center;  
    color: blue;  
}  
<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1, h2, p {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1>Hello Javatpoint.com</h1>  
<h2>Hello Javatpoint.com (In smaller font)</h2>  
<p>This is a paragraph.</p>  
</body>  
</html>

دورة سي إس إس CSS