اتش تي ام ال ستايل HTML Style attribute

---

 

HTML Style Attribute

مقدمة 

 خاصية “style” في HTML:

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

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

من خلال الفهم العميق لهذه الخصائص، ستكتسب المهارات اللازمة لجعل صفحات الويب الخاصة بك تبدو أكثر احترافية وجاذبية. دعونا نبدأ في استكشاف أسرار تحديد الخصائص باستخدام خاصية “style” في HTML ونغوص في عالم الإبداع والتصميم.

تعد خاصية “Style” في لغة HTML وسيلة لتحديد الأنماط أو الأسلوب (التنسيق) لعناصر HTML. تتيح للمطورين تعريف خصائص التصميم الخاصة بالعناصر مباشرة في عنصر HTML نفسه، دون الحاجة إلى استخدام ملف CSS منفصل.

على سبيل المثال، يمكنك استخدام خاصية “style” لتغيير لون النص داخل عنصر ما، أو لتعيين حجم الخط، أو لتحديد الهوامش، وغيرها من الخصائص التصميمية. القيم المحددة للخاصية “style” يمكن أن تكون مفصولة بواسطة فاصلة منقوطة (;).

المثال التالي يوضح كيفية استخدام خاصية “style” لتحديد لون الخط وحجم النص داخل عنصر “p”:

<p style="color: red; font-size: 16px;">

هذا نص ملون وبحجم الخط 16 بكسل</p>
في هذا المثال، تم استخدام الخاصية “style” داخل عنصر “p” لتعيين لون النص إلى اللون الأحمر وحجم الخط إلى 16 بكسل. يمكنك تعديل القيم حسب احتياجاتك لتنسيق العناصر وتحديد أنماط التصميم الخاصة بها.

 استخدامات HTML Style Attribute:

خاصية “style” في لغة HTML تُستخدم لتحديد وتخصيص الأنماط والتنسيقات لعناصر الصفحة. يمكن استخدامها لتطبيق التصميم والشكل المحدد لكل عنصر بشكل فردي، دون الحاجة إلى استخدام ملف CSS منفصل.

إليك بعض الاستخدامات الشائعة لخاصية “style” في HTML:

تغيير لون النص:

يمكنك استخدام “style” لتحديد لون النص داخل عنصر معين. على سبيل المثال:

<p style="color: blue;">هذا نص بلون أزرق</p>

تحديد حجم الخط:

يمكنك تحديد حجم الخط لعنصر HTML باستخدام “style”:

<h2 style="font-size: 24px;">عنوان بحجم 24 بكسل</h2>

تحديد نمط الخط:

يمكنك تحديد نمط الخط، مثل الخط العريض أو الخط الخفيف:

<span style="font-weight: bold;">نص غامق</span>
<span style="font-style: italic;">نص مائل</span>

تحديد الهوامش (الهواءي):

يمكن استخدام “style” لتعيين الهوامش الداخلية والخارجية:

<div style="margin: 10px; padding: 5px; border: 1px solid #ccc;">محتوى محاط بهوامش</div>

تحديد الخلفية:

يمكنك تحديد لون الخلفية لعنصر HTML باستخدام “style”:

<div style="background-color: #f0f0f0;">خلفية رمادية</div>

تحديد الوضعية (Positioning):

يمكن استخدام “style” لتحديد موقع العناصر بالنسبة للصفحة أو لعناصر أخرى:

<div style="position: absolute; top: 50px; left: 100px;">عنصر في موقع معين</div>

هذه أمثلة بسيطة على كيفية استخدام “style” في HTML. يُفضل استخدام وحدات التنسيق المستقلة عن الجهاز مثل البكسل للتحكم في الأبعاد والأحجام، ويمكنك استخدام أكثر من خاصية “style” في نفس العنصر لتحقيق تأثيرات تصميم متعددة. ومع ذلك، يُفضل في المشاريع الكبيرة استخدام ورق الأنماط (CSS) لتنظيم التصميمات وجعل الكود أكثر هيكلة وإدارة.

تحديد اللون والشكل للحدود:

يمكنك تحديد لون وسمك الحدود لعنصر ما:

<div style="border: 2px solid #999; border-radius: 10px;">عنصر مع حدود</div>

تحديد الهوية والتموضع:

يمكنك استخدام “style” لتحديد الهوية (id) والتموضع (float):

<div id="myElement" style="float: right;">نص يتم تموضعه على اليمين</div>

تحديد الألوان باستخدام RGB أو RGBA:

يمكنك استخدام تعبيرات RGB أو RGBA لتحديد اللون، مما يتيح لك تحديد شفافية اللون:

<span style="color: rgba(255, 0, 0, 0.7);">نص بلون أحمر وشفافية</span>

تحديد الخطوط المستخدمة:

يمكنك تحديد نوع الخط وحجمه ولونه:

<p style="font-family: 'Arial', sans-serif; font-size: 18px; font-weight: bold; color: #333;">نص مُنسَّق</p>

تحديد الترتيب والتباعد:

يمكنك استخدام “style” لتحديد ترتيب العناصر وتباعدها:

<ul style="list-style-type: square; margin-left: 20px;">
<li>عنصر 1</li>
<li>عنصر 2</li>
</ul>

تحديد العرض والارتفاع:

يمكنك تحديد عرض وارتفاع العناصر:

<img src="example.jpg" alt="صورة" style="width: 200px; height: 150px;">

استخدام “style” في HTML يتيح للمطورين تخصيص تصميم الصفحة بشكل دقيق وفعال.

ومع ذلك، يُفضل استخدام CSS للمشاريع الكبيرة لتنظيم التنسيقات وجعل الصيانة أسهل.

 مثال كامل في صفحة ويب عن :تغيير لون النص:

 مثال كامل لصفحة ويب تستخدم خاصية “style” لتغيير لون النص. في هذا المثال، سنقوم بإنشاء صفحة بسيطة تحتوي على فقرة نصية ونقوم بتغيير لون النص باستخدام خاصية “style”.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تغيير لون النص</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 40px;
}

.colored-text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1>صفحة تغيير لون النص</h1>
<p class="colored-text">هذا نص بلون أزرق</p>

<p>يمكننا تغيير لون النص باستخدام خاصية "style" في HTML.</p>

<p>يمكن تحديد لون محدد للنص داخل عنصر معين، كما هو موضح في الكود أعلاه.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تحديد نوع الخط ولون الخلفية والهوامش وتوسيط النص.
أنشأنا فقرة نصية باستخدام العنصر <p> وأضفنا لها فئة باسم “colored-text”.
ثم، قمنا بتحديد لون النص لهذه الفقرة مباشرة في العنصر <style> باستخدام اسم الفئة .colored-text.
عند فتح هذه الصفحة في متصفح الويب، ستظهر فقرة النص بلون أزرق كما تم تعيينه في خاصية “style”.

 مثال لصفحة ويب عن استخدام:تحديد حجم الخط:

 إليك مثال كامل لصفحة ويب تستخدم خاصية “style” لتحديد حجم الخط في عناصر HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد حجم الخط</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
text-align: center;
margin: 40px;
}

.large-text {
font-size: 24px;
}

.small-text {
font-size: 14px;
color: green;
}
</style>
</head>
<body>
<h1>صفحة تحديد حجم الخط</h1>
<p class="large-text">هذا نص بحجم الخط 24 بكسل</p>

<p>يمكننا تحديد حجم الخط باستخدام خاصية "style" في HTML.</p>

<p class="small-text">هذا نص بحجم الخط 14 بكسل بلون أخضر</p>

<p>يمكن تحديد حجم الخط لكل عنصر على حدة باستخدام القاعدة العامة وكذلك باستخدام فئات مخصصة.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تحديد نوع الخط ولون الخلفية والهوامش وتوسيط النص.
أنشأنا فقرة نصية باستخدام العنصر <p> وأضفنا لها فئتين، .large-text و .small-text.
ثم، قمنا بتحديد حجم الخط لكل فئة بشكل منفصل في العنصر <style>.
عند فتح هذه الصفحة في متصفح الويب، ستظهر النصوص بأحجام مختلفة كما تم تحديدها باستخدام خاصية “style”.

مثال شامل عن استخدام:تحديد نمط الخط:

إليك مثال كامل عن صفحة ويب تستخدم خاصية “style” لتحديد نمط الخط في عناصر HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد نمط الخط</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
margin: 40px;
}

.bold-text {
font-weight: bold;
}

.italic-text {
font-style: italic;
}

.underline-text {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>صفحة تحديد نمط الخط</h1>

<p class="bold-text">هذا نص بخط عريض</p>

<p>يمكننا تحديد نمط الخط باستخدام خاصية "style" في HTML.</p>

<p class="italic-text">هذا نص بخط مائل</p>

<p class="underline-text">هذا نص بخط مسطَّر</p>

<p>يمكن تحديد نمط الخط لكل عنصر على حدة أو باستخدام فئات مخصصة.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تحديد نوع الخط ولون الخلفية والهوامش وتوسيط النص.
أنشأنا عدة فقرات نصية باستخدام العنصر <p>، وقمنا بإضافة فئات مخصصة لكل منها لتحديد نمط الخط.
ثم، في العنصر <style>، قمنا بتحديد نمط الخط لكل فئة بشكل منفصل باستخدام الخصائص font-weight، font-style، و text-decoration.
عند فتح هذه الصفحة في متصفح الويب، ستظهر النصوص بأنماط مختلفة كما تم تحديدها باستخدام خاصية “style”.

مثال شامل عن استخدام:تحديد الهوامش (الهواءي):

بالطبع، إليك مثال كامل عن صفحة ويب تستخدم خاصية “style” لتحديد الهوامش (الهواءي) لعناصر HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الهوامش</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
text-align: center;
margin: 40px;
}

.margin-example {
margin: 20px;
padding: 10px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h1>صفحة تحديد الهوامش</h1>

<div class="margin-example">
<p>هذا نص مع هوامش خارجية وداخلية</p>
</div>

<p>يمكننا تحديد الهوامش باستخدام خاصية "style" في HTML.</p>

<div class="margin-example">
<p>هذا نص آخر مع هوامش مختلفة</p>
</div>

<p>يمكن تحديد الهوامش لعناصر HTML بشكل دقيق لتحقيق التنسيق المطلوب.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تحديد نوع الخط ولون الخلفية والهوامش الخارجية للصفحة.
أنشأنا عنصر div يحتوي على فقرة نصية، وقمنا بتعيين هوامش خارجية وداخلية لهذا العنصر باستخدام الفئة .margin-example.
في العنصر <style>، قمنا بتعيين الهوامش الخارجية (margin) والهوامش الداخلية (padding) بشكل منفصل لهذه الفئة.
عند فتح هذه الصفحة في متصفح الويب، ستظهر النصوص داخل العناصر div بالهوامش المعينة والحدود الذي تم تحديده باستخدام خاصية “style”.

 مثال شامل عن :تحديد الخلفية:

بالطبع، إليك مثال كامل عن صفحة ويب تستخدم خاصية “style” لتحديد الخلفية لعناصر HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الخلفية</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

.background-example {
background-color: #f2f2f2;
padding: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h1>صفحة تحديد الخلفية</h1>

<div class="background-example">
<p>هذا نص مع خلفية ملونة</p>
</div>

<p>يمكننا تحديد الخلفية باستخدام خاصية "style" في HTML.</p>

<div class="background-example">
<p>هذا نص آخر مع خلفية مختلفة</p>
</div>

<p>يمكن تحديد الخلفية لعناصر HTML لتحقيق التصميم المناسب للصفحة.</p>
</body>
</html>

 

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص، وتم ترك الخلفية للصفحة باللون الأبيض الافتراضي.
أنشأنا عنصر div يحتوي على فقرة نصية، وقمنا بتعيين خلفية ملونة لهذا العنصر باستخدام الفئة .background-example.
في العنصر <style>، قمنا بتعيين لون الخلفية (background-color) وحدود للعنصر.
عند فتح هذه الصفحة في متصفح الويب، ستظهر النصوص داخل العناصر div بالخلفية المعينة والحدود الذي تم تحديده باستخدام خاصية “style”.

 مثال كامل على استخدام:تحديد الوضعية (Positioning):

إليك مثال كامل على صفحة ويب تستخدم خاصية “style” لتحديد الوضعية (Positioning) لعناصر HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الوضعية</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

.positioned-example {
position: relative;
top: 50px;
left: 20%;
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h1>صفحة تحديد الوضعية</h1>

<div class="positioned-example">
<p>هذا نص بوضعية مخصصة</p>
</div>

<p>يمكننا تحديد الوضعية باستخدام خاصية "style" في HTML.</p>

<div class="positioned-example">
<p>هذا نص آخر بوضعية مختلفة</p>
</div>

<p>يمكن تحديد الوضعية لعناصر HTML لتحقيق التصميم والتنسيق المناسب.</p>
</body>
</html>

 

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص، وتم ترك الوضعية للصفحة بالوضعية النسبية (relative) التي تجعل العناصر تتحرك بالنسبة للموضع الأصلي.
أنشأنا عنصر div يحتوي على فقرة نصية، وقمنا بتعيين وضعية مخصصة لهذا العنصر باستخدام الفئة .positioned-example.
في العنصر <style>، قمنا بتعيين الوضعية (position) وموقع العنصر (top و left)، وكذلك قمنا بتعيين خلفية ملونة وحدود للعنصر.
عند فتح هذه الصفحة في متصفح الويب، سيظهر النص داخل العناصر div بالوضعية والتنسيق المعين باستخدام خاصية “style”.

مثال عن:تحديد الهوية والتموضع:

إليك مثال كامل على صفحة ويب تستخدم خاصية “style” لتحديد الهوية والتموضع لعناصر HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الهوية والتموضع</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

#myElement {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
background-color: #ffeecc;
padding: 15px;
border: 2px solid #cc9900;
font-size: 18px;
}
</style>
</head>
<body>
<h1>صفحة تحديد الهوية والتموضع</h1>

<div id="myElement">
<p>هذا عنصر بالهوية والتموضع المحدد</p>
</div>

<p>يمكننا تحديد الهوية والتموضع باستخدام خاصية "style" في HTML.</p>

<div id="myElement">
<p>عنصر آخر بنفس الهوية ولكن بمحتوى مختلف</p>
</div>

<p>يمكن تحديد الهوية للعناصر لتمييزها، والتحكم في التموضع بدقة.</p>
</body>
</html>

 

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص، وتم ترك الهوية والتموضع للعناصر بشكل عام.
أنشأنا عنصر div يحتوي على فقرة نصية، وقمنا بتعيين هوية مخصصة (myElement) لهذا العنصر.
في العنصر <style>، قمنا بتعيين الهوية (#myElement) ووضعية (position) وموقع العنصر (top و left)، وكذلك قمنا بتعيين خلفية ملونة وحدود وحجم خط للعنصر.
عند فتح هذه الصفحة في متصفح الويب، سيظهر النص داخل العناصر div بالهوية والتموضع المعين باستخدام خاصية “style”. يجدر بالذكر أن استخدام هويات فريدة يمكن أن يكون مفيدًا عند تنظيم الصفحة وتطبيق التموضع بشكل محدد.

مثال كامل عن:تحديد الألوان باستخدام RGB أو RGBA:

بالطبع، إليك مثال كامل على صفحة ويب تستخدم خاصية “style” لتحديد الألوان باستخدام RGB أو RGBA:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الألوان باستخدام RGB أو RGBA</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

.color-example {
background-color: rgb(255, 0, 0); /* اللون الأحمر */
padding: 20px;
border: 2px solid #990000;
color: rgba(0, 128, 0, 0.8); /* اللون الأخضر مع شفافية 80% */
}
</style>
</head>
<body>
<h1>صفحة تحديد الألوان باستخدام RGB أو RGBA</h1>

<div class="color-example">
<p>هذا عنصر بألوان محددة باستخدام RGB وRGBA</p>
</div>

<p>يمكننا تحديد الألوان باستخدام خاصية "style" في HTML باستخدام نموذج RGB أو RGBA.</p>

<div class="color-example">
<p>عنصر آخر بألوان مختلفة</p>
</div>

<p>يمكن تحديد الألوان للخلفية والنص والحدود والعديد من الخصائص الأخرى باستخدام نموذج RGB أو RGBA.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص، وتم استخدام الألوان باستخدام نموذج RGB وRGBA.
أنشأنا عنصر div يحتوي على فقرة نصية، وقمنا بتعيين ألوان محددة باستخدام الفئة .color-example باستخدام نموذج RGB وRGBA.
في العنصر <style>، قمنا بتعيين خلفية حمراء (rgb(255, 0, 0)) ولون نص أخضر مع شفافية (rgba(0, 128, 0, 0.8)) للفئة .color-example.
عند فتح هذه الصفحة في متصفح الويب، ستظهر العناصر div بالألوان المحددة بواسطة خاصية “style” باستخدام نموذج RGB وRGBA.

مثال عن :تحديد الترتيب والتباعد:

بالطبع، إليك مثال كامل على صفحة ويب تستخدم خاصية “style” لتحديد الترتيب والتباعد لعناصر HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد الترتيب والتباعد</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

ul {
list-style-type: none;
padding: 0;
margin: 20px;
}

li {
background-color: #e0e0e0;
margin: 5px;
padding: 10px;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>صفحة تحديد الترتيب والتباعد</h1>

<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
</ul>

<p>يمكننا تحديد الترتيب والتباعد باستخدام خاصية "style" في HTML.</p>

<ul>
<li>عنصر 4</li>
<li>عنصر 5</li>
</ul>

<p>يمكن تحديد الترتيب والتباعد للعناصر لتحقيق التصميم والتنسيق المناسب للصفحة.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص.
قمنا بتحديد ترتيب وتباعد لقائمة غير مرقمة (ul) وعناصر القائمة (li). تم إزالة النقاط التي تظهر بشكل افتراضي مع list-style-type: none وتم تعيين تباعد (margin) وتوسيع داخلي (padding) للعناصر.
عند فتح هذه الصفحة في متصفح الويب، ستظهر العناصر في القائمة بالترتيب والتباعد المعين باستخدام خاصية “style”.

مثال عن :تحديد العرض والارتفاع:

بالطبع، إليك مثال كامل على صفحة ويب تستخدم خاصية “style” لتحديد العرض والارتفاع لعناصر HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحديد العرض والارتفاع</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 40px;
}

.box-example {
width: 200px;
height: 150px;
background-color: #f2f2f2;
border: 2px solid #999;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>صفحة تحديد العرض والارتفاع</h1>

<div class="box-example">
<p>صندوق بالعرض 200 بكسل والارتفاع 150 بكسل</p>
</div>

<p>يمكننا تحديد العرض والارتفاع باستخدام خاصية "style" في HTML.</p>

<div class="box-example">
<p>صندوق آخر بأبعاد مختلفة</p>
</div>

<p>يمكن تحديد العرض والارتفاع لعناصر HTML لتحقيق التصميم والتنسيق المناسب للصفحة.</p>
</body>
</html>

في هذا المثال:

قمنا بتعريف أسلوب عام للصفحة في العنصر <style> داخل <head>. تم تعيين نوع الخط وتوسيط النص.
أنشأنا صندوقًا (div) باستخدام الفئة .box-example، وقمنا بتحديد العرض (width) والارتفاع (height) لهذا الصندوق.
في العنصر <style>، قمنا بتعيين خلفية ملونة وحدود للصندوق، واستخدمنا margin: 20px auto; لتوسيط الصندوق أفقياً.
عند فتح هذه الصفحة في متصفح الويب، سيظهر الصناديق بالأبعاد المعينة باستخدام خاصية “style”.

 اختبار مع الشرح عن هذا الدرس:15 شؤالا

هاكم  مجموعة من الأسئلة التي يمكنك استخدامها كاختبار لفحص فهمك لدرس تحديد الخصائص بواسطة خاصية “style” في HTML. يُرجى الرد على الأسئلة بما تروق لك.

الأسئلة:
1-ما هي خاصية “style” في HTML وماذا تفعل؟
2-كيف يمكن تحديد لون نص HTML باستخدام خاصية “style”؟
3-كيف يمكنك تحديد حجم الخط باستخدام خاصية “style”؟
4-كيف يمكن تحديد نمط الخط في HTML؟
5-كيف يمكن تحديد الهوامش الداخلية والخارجية باستخدام خاصية “style”؟
6-ما الفارق بين الوضعية “relative” و “absolute” في CSS؟
7-كيف يمكن تحديد الخلفية لعنصر HTML باستخدام خاصية “style”؟
8-كيف يمكن استخدام الهوية (ID) لتحديد عنصر HTML بشكل فريد؟
9-ما هي الوحدات التي يمكن استخدامها لتحديد الأبعاد مثل العرض والارتفاع؟
10-كيف يمكنك تحديد الترتيب والتباعد لعنصر HTML باستخدام خاصية “style”؟
11-كيف يمكن استخدام نموذج RGB لتحديد الألوان في CSS؟
12-ما هو الفارق بين margin و padding؟
13-كيف يمكن تحديد شفافية لللون باستخدام خاصية “style”؟
14-كيف يمكن تحديد العرض والارتفاع باستخدام وحدة نسبية؟
15-كيف يمكن استخدام خاصية “position” لتحديد موقع العناصر في صفحة HTML؟

الشرح:

تحليل النص:

“خاصية “style” في HTML هي طريقة لتحديد التنسيق والمظهر لعناصر HTML باستخدام CSS.
تحديد لون النص:

يمكن تحديد لون النص باستخدام color في خاصية “style”، على سبيل المثال: color: red;.
تحديد حجم الخط:

يمكن تحديد حجم الخط باستخدام font-size، على سبيل المثال: font-size: 16px;.
وهكذا، يمكنك الاستمرار في تحليل الأسئلة وشرح الإجابات لتحقيق فهم أعمق لمفاهيم تحديد الخصائص بواسطة خاصية “style” في HTML.

تحديد نمط الخط:

يمكن تحديد نمط الخط باستخدام font-family، على سبيل المثال: font-family: ‘Arial’, sans-serif;.

تحديد الهوامش:

يمكن تحديد الهوامش باستخدام margin و padding في خاصية “style”، على سبيل المثال: margin: 10px; padding: 5px;.

فارق بين الوضعيات:

position: relative; تجعل العنصر يتحرك بالنسبة لمكانه الأصلي، في حين أن position: absolute; يجعل العنصر يتحرك بالنسبة للعنصر الذي يحمل position: relative; أقرب إليه.

تحديد الخلفية:

يمكن تحديد الخلفية باستخدام background-color في خاصية “style”، على سبيل المثال: background-color: #e0e0e0;.

استخدام الهوية:

يمكن استخدام الهوية (id) لتحديد عنصر HTML بشكل فريد، على سبيل المثال: #myElement { … }.

الوحدات لتحديد الأبعاد:

يمكن استخدام وحدات مثل px لتحديد الأبعاد، على سبيل المثال: width: 300px; height: 200px;.

ترتيب وتباعد:

يمكن تحديد الترتيب والتباعد باستخدام margin و padding، على سبيل المثال: margin: 10px; padding: 5px;.
وهكذا، يمكنك متابعة تحليل الأسئلة الباقية وتوضيح الإجابات لتعزيز فهمك لمفاهيم تحديد الخصائص بواسطة خاصية “style” في HTML. إذا كنت بحاجة إلى توضيح أو شرح إضافي حول أي سؤال، فلا تتردد في طرحه.

اختبار اختيار من متعدد

ها هي مجموعة من أسئلة اختيار من متعدد حول مفاهيم تحديد الخصائص بواسطة خاصية “style” في HTML:

الأسئلة:
1-ما هي وظيفة خاصية “style” في HTML؟

أ) تحديد الهوامش
ب) تحديد التصميم والمظهر
ج) تحديد الروابط
د) تحديد القوائم

2-كيف يمكن تحديد لون النص باستخدام خاصية “style”؟

أ) text-color
ب) font-color
ج) color
د) text-style

3-ما الفارق بين position: relative; و position: absolute; في CSS؟

أ) relative يجعل العنصر يتحرك بالنسبة للعنصر الذي يحمل position: relative;، بينما absolute يتحرك بالنسبة لمكانه الأصلي.
ب) relative يجعل العنصر يتحرك بالنسبة للصفحة، بينما absolute يتحرك بالنسبة للعنصر الأقرب إليه.
ج) relative يجعل العنصر يتحرك بالنسبة للصفحة، بينما absolute يتحرك بالنسبة للعناصر الأخرى في نفس المستند.
د) لا فرق بينهما.

4-كيف يمكن تحديد العرض والارتفاع لعنصر HTML باستخدام خاصية “style”؟

أ) size: 200px 150px;
ب) dimension: width 200px height 150px;
ج) width: 200px; height: 150px;
د) box: 200px 150px;

5-كيف يمكن تحديد الألوان باستخدام نموذج RGB في CSS؟

أ) color: #ff0000;
ب) color: rgb(255, 0, 0);
ج) background: rgba(255, 0, 0, 0.5);
د) background: rgb(255, 255, 0);

الإجابات:

ب) تحديد التصميم والمظهر
ج) color
أ) relative يجعل العنصر يتحرك بالنسبة للعنصر الذي يحمل position: relative;، بينما absolute يتحرك بالنسبة لمكانه الأصلي.
ج) width: 200px; height: 150px;
ب) color: rgb(255, 0, 0);