أهم وسوم الوسائط في HTML5 مع شرح لكل منها:
1. <audio>
يستخدم لتضمين وتشغيل الملفات الصوتية على صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالصوت مثل التشغيل والإيقاف.
autoplay:
لتشغيل الصوت تلقائيًا عند تحميل الصفحة.
loop:
لتكرار تشغيل الصوت تلقائيًا.
muted:
لكتم الصوت افتراضيًا.
src:
لتحديد مصدر الملف الصوتي (يمكن استخدام <source> بدلًا منه).
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>
---
2. <video>
يستخدم لتضمين وتشغيل مقاطع الفيديو في صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالفيديو.
autoplay:
لتشغيل الفيديو تلقائيًا.
loop:
لتكرار تشغيل الفيديو.
muted:
لجعل الفيديو مكتومًا افتراضيًا.
poster:
لتحديد صورة تُعرض قبل بدء تشغيل الفيديو.
src:
لتحديد مصدر الفيديو (يمكن استخدام <source> بدلًا منه).
مثال:
<video controls width="600" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>
---
3. <source>
يُستخدم داخل <audio> أو <video> لإضافة مصادر متعددة للملف نفسه، بحيث يختار المتصفح التنسيق المناسب.
مثال داخل <video>:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم تشغيل الفيديو.
</video>
مثال داخل <audio>:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
---
4. <track>
يُستخدم لإضافة ترجمات مصاحبة أو وصف صوتي أو ترجمة توضيحية داخل <video>.
السمات المهمة:
kind:
يحدد نوع الترجمة (مثل "subtitles" أو "captions").
src:
يحدد ملف الترجمة (VTT format).
srclang:
يحدد لغة الترجمة (مثل "en" للإنجليزية أو "ar" للعربية).
label:
يحدد اسم الترجمة المعروضة في قائمة الترجمة.
مثال:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
1. <audio>
يستخدم لتضمين وتشغيل الملفات الصوتية على صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالصوت مثل التشغيل والإيقاف.
autoplay:
لتشغيل الصوت تلقائيًا عند تحميل الصفحة.
loop:
لتكرار تشغيل الصوت تلقائيًا.
muted:
لكتم الصوت افتراضيًا.
src:
لتحديد مصدر الملف الصوتي (يمكن استخدام <source> بدلًا منه).
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>
---
2. <video>
يستخدم لتضمين وتشغيل مقاطع الفيديو في صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالفيديو.
autoplay:
لتشغيل الفيديو تلقائيًا.
loop:
لتكرار تشغيل الفيديو.
muted:
لجعل الفيديو مكتومًا افتراضيًا.
poster:
لتحديد صورة تُعرض قبل بدء تشغيل الفيديو.
src:
لتحديد مصدر الفيديو (يمكن استخدام <source> بدلًا منه).
مثال:
<video controls width="600" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>
---
3. <source>
يُستخدم داخل <audio> أو <video> لإضافة مصادر متعددة للملف نفسه، بحيث يختار المتصفح التنسيق المناسب.
مثال داخل <video>:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم تشغيل الفيديو.
</video>
مثال داخل <audio>:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
---
4. <track>
يُستخدم لإضافة ترجمات مصاحبة أو وصف صوتي أو ترجمة توضيحية داخل <video>.
السمات المهمة:
kind:
يحدد نوع الترجمة (مثل "subtitles" أو "captions").
src:
يحدد ملف الترجمة (VTT format).
srclang:
يحدد لغة الترجمة (مثل "en" للإنجليزية أو "ar" للعربية).
label:
يحدد اسم الترجمة المعروضة في قائمة الترجمة.
مثال:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
👍2
Web Development CYS
Final Project Web Development CYS 2025-2026.pdf
إلى جميع الطلاب
بداية من الأسبوع القادم سنبدأ بمتابعة المشروع
المطلوب منكم تجهيز ال ٧ الصفحات بلغة HTML فقط كما تم توضيحه بالملف المرفق سابقًا
تنوية:-
الطالب الذي يصل الأسبوع القادم ولم يبداء بالمشروع سيتم الخصم عليه
بداية من الأسبوع القادم سنبدأ بمتابعة المشروع
المطلوب منكم تجهيز ال ٧ الصفحات بلغة HTML فقط كما تم توضيحه بالملف المرفق سابقًا
تنوية:-
الطالب الذي يصل الأسبوع القادم ولم يبداء بالمشروع سيتم الخصم عليه
👍4🫡3
أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤4
ما أكثر ما يساعدك على فهم الدروس العملية بشكل أفضل؟
Final Results
23%
اسلوب الشرح المباشر السلس والواضح
45%
الأمثلة العملية والتطبيقات البحته
16%
دعم المدرس ومتابعته المستمرة
16%
المصادر الإضافية والشروحات الخارجية( قنوات التيليجرام )
❤8
تنويه هام:-
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
🫡3❤1👍1
Forwarded from Web Development CYS
Web Development CYS
Photo
الفرق بين Semantic HTML و Non-Semantic HTML
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
❤2👍2👏1
Forwarded from Web Development CYS
أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div in css
هناك ثلاث طرق لربط ملفات CSS مع HTML:
1. الربط الخارجي (External)
يتم إنشاء ملف CSS منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
1. الربط الخارجي (External)
يتم إنشاء ملف CSS منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
👍3
تنويه هام:-
إضافة إلى المشروع يجب على كل طالب تسليم تقرير إنجاز المشروع
التقرير يجب ان يحتوي ملاحظات الطالب عن مراحل تنفيذه للمشروع من البداية إلى النهاية مرورًا ب مرحلة إستلهام الفكرة وتنفيذه للمتطلبات إلخ...
شروط التقرير :-
أن لا يقل عن ورقتين
أن لا يقل عن 100 كلمة وغير مولد بالذكاء الإصطناعي
أن يُسلم في وقت المناقشة ( الأسبوع الأخير )
على التقرير درجتين من درجة المشروع
إضافة إلى المشروع يجب على كل طالب تسليم تقرير إنجاز المشروع
التقرير يجب ان يحتوي ملاحظات الطالب عن مراحل تنفيذه للمشروع من البداية إلى النهاية مرورًا ب مرحلة إستلهام الفكرة وتنفيذه للمتطلبات إلخ...
شروط التقرير :-
أن لا يقل عن ورقتين
أن لا يقل عن 100 كلمة وغير مولد بالذكاء الإصطناعي
أن يُسلم في وقت المناقشة ( الأسبوع الأخير )
على التقرير درجتين من درجة المشروع
👨💻3❤1👏1🫡1
Web Development CYS
Photo
في لغة CSS، تُستخدم المحددات (Selectors) لاختيار عناصر معينة من صفحة الويب وتطبيق الأنماط (Styles) عليها. فهم أنواع المحددات يساعد المصمم والمطور على التحكم بدقة في مظهر العناصر. في الصورة الموضحة، يمكننا التعرف على أربعة أنواع رئيسية من المحددات:
1. Element Selector – محدد العنصر
يقوم Element Selector باستهداف جميع العناصر من نوع محدد في الصفحة.
على سبيل المثال، إذا أردنا تغيير لون جميع العناوين من النوع <h2> إلى اللون الأحمر الداكن (#c70039)، يمكننا كتابة:
h2 {
color: #c70039;
}
هذا النوع من المحددات مفيد عندما نريد تنسيق كل عناصر نوع معين دون الحاجة لتعيين فئات أو معرفات.
2. Universal Selector – المحدد العام
يُستخدم Universal Selector ويُكتب على شكل * لاستهداف جميع العناصر في الصفحة مرة واحدة.
على سبيل المثال:
* {
color: #c70039;
}
هذا سيجعل كل النصوص في الصفحة باللون المحدد. لكنه يجب أن يُستخدم بحذر، لأنه يطبق النمط على جميع العناصر مما قد يؤثر على الأداء أو التنسيق العام.
3. ID Selector – محدد المعرف
يُستخدم ID Selector لاستهداف عنصر معين له معرف (ID) محدد، ويُكتب باستخدام الرمز # متبوعًا باسم المعرف.
على سبيل المثال:
#content {
color: #6E4253;
font-size: 15px;
}
هنا، سيتم تطبيق النمط فقط على العنصر الذي يملك المعرف id="content".
هذا النوع مناسب للعناصر الفريدة في الصفحة.
4. Class Selector – محدد الفئة
يُستخدم Class Selector لاستهداف عنصر أو مجموعة عناصر لها نفس الفئة (class)، ويُكتب باستخدام النقطة . متبوعة باسم الفئة.
على سبيل المثال:
.main {
margin-top: 10px;
margin-bottom: 10px;
}
يمكن تعيين نفس الفئة لعدة عناصر، وبالتالي يمكن التحكم في تنسيقها جميعًا بسهولة.
1. Element Selector – محدد العنصر
يقوم Element Selector باستهداف جميع العناصر من نوع محدد في الصفحة.
على سبيل المثال، إذا أردنا تغيير لون جميع العناوين من النوع <h2> إلى اللون الأحمر الداكن (#c70039)، يمكننا كتابة:
h2 {
color: #c70039;
}
هذا النوع من المحددات مفيد عندما نريد تنسيق كل عناصر نوع معين دون الحاجة لتعيين فئات أو معرفات.
2. Universal Selector – المحدد العام
يُستخدم Universal Selector ويُكتب على شكل * لاستهداف جميع العناصر في الصفحة مرة واحدة.
على سبيل المثال:
* {
color: #c70039;
}
هذا سيجعل كل النصوص في الصفحة باللون المحدد. لكنه يجب أن يُستخدم بحذر، لأنه يطبق النمط على جميع العناصر مما قد يؤثر على الأداء أو التنسيق العام.
3. ID Selector – محدد المعرف
يُستخدم ID Selector لاستهداف عنصر معين له معرف (ID) محدد، ويُكتب باستخدام الرمز # متبوعًا باسم المعرف.
على سبيل المثال:
#content {
color: #6E4253;
font-size: 15px;
}
هنا، سيتم تطبيق النمط فقط على العنصر الذي يملك المعرف id="content".
هذا النوع مناسب للعناصر الفريدة في الصفحة.
4. Class Selector – محدد الفئة
يُستخدم Class Selector لاستهداف عنصر أو مجموعة عناصر لها نفس الفئة (class)، ويُكتب باستخدام النقطة . متبوعة باسم الفئة.
على سبيل المثال:
.main {
margin-top: 10px;
margin-bottom: 10px;
}
يمكن تعيين نفس الفئة لعدة عناصر، وبالتالي يمكن التحكم في تنسيقها جميعًا بسهولة.